/*
 * RESTAURACE 1 (restaurace-1, verze 1.0.0) - styl webu vzoru pro nativni Builder PublicMC.
 *
 * Patri do korene webu jako /style.css (builder_verejna.php ho linkuje pred styly rendereru).
 * Styly rendereru (cmc_builder_public_styles) jsou az za nim, proto pravidla zacinaji "body" (vyssi specificita).
 * Vzhled se veze na tridy sekci (customClass), ktere editor pri ulozeni zachovava:
 *   r1-hlavicka r1-paticka r1-hero r1-split r1-karty r1-trojice r1-vyzva r1-zahlavi r1-listek r1-galerie r1-kontakt r1-mapa
 *   r1-pozadi-jemne r1-pozadi-tmave (pozadi sekce; atribut background editor zatim prepisuje na 'surface')
 * Barvy = tokenPreset restaurace-1/tepla z blueprint.json. Plna sirka okna, na sirokych monitorech vetsi pismo.
 */
:root {
  --r1-primarni: #7a2e1f;
  --r1-primarni-tmava: #5e2216;
  --r1-akcent: #c79a3a;
  --r1-povrch: #fbf7f0;
  --r1-jemne: #f2e9db;
  --r1-text: #2b211c;
  --r1-text-jemny: #5d4d42;
  --r1-okraj: #e2d4bf;
  --r1-tmave: #2a1813;
  --r1-bok: clamp(20px, 5vw, 120px);
  --r1-pismo: clamp(17px, 0.45vw + 11px, 22px);
  --r1-patkove: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Cambria, "Times New Roman", serif;
  --r1-bezpatkove: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cmc-b-primary: var(--r1-primarni);
  --cmc-b-ink: var(--r1-primarni);
  --cmc-b-on-ink: #fff;
  --cmc-b-surface: var(--r1-povrch);
  --cmc-b-page: var(--r1-povrch);
  --cmc-b-surface-muted: var(--r1-jemne);
  --cmc-b-text: var(--r1-text);
  --cmc-b-text-soft: var(--r1-text-jemny);
  --cmc-b-text-muted: #7a6a5e;
  --cmc-b-border: var(--r1-okraj);
  --cmc-b-border-strong: var(--r1-okraj);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--r1-povrch);
  color: var(--r1-text);
  font-family: var(--r1-bezpatkove);
  font-size: var(--r1-pismo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body a { color: var(--r1-primarni); }
body img { max-width: 100%; }

/* ---------- plna sirka: zadny stredovy sloupec rendereru ---------- */
body .cmc-b-document { max-width: none; margin: 0; padding: 0; }
body .cmc-b-section,
body .cmc-b-width-wide,
body .cmc-b-width-boxed { max-width: none; margin-left: 0; margin-right: 0; padding-left: var(--r1-bok); padding-right: var(--r1-bok); }
body .cmc-b-container { max-width: none; margin: 0; }
body .cmc-b-padY-sm { padding-top: clamp(12px, 1vw, 20px); padding-bottom: clamp(12px, 1vw, 20px); }
body .cmc-b-padY-md { padding-top: clamp(28px, 3vw, 56px); padding-bottom: clamp(28px, 3vw, 56px); }
body .cmc-b-padY-lg { padding-top: clamp(48px, 5vw, 104px); padding-bottom: clamp(48px, 5vw, 104px); }
body .cmc-b-padY-xl { padding-top: clamp(64px, 7vw, 150px); padding-bottom: clamp(64px, 7vw, 150px); }

/* ---------- pismo ---------- */
body .cmc-b-heading {
  font-family: var(--r1-patkove);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--r1-text);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
body h1.cmc-b-heading { font-size: clamp(38px, 3.9vw, 84px); }
body h2.cmc-b-heading { font-size: clamp(30px, 2.5vw, 54px); }
body h3.cmc-b-heading { font-size: clamp(20px, 1.3vw, 28px); line-height: 1.25; }
body .cmc-b-paragraph { font-size: var(--r1-pismo); line-height: 1.7; color: var(--r1-text-jemny); margin: 0 0 1em; }
body .cmc-b-paragraph strong { color: var(--r1-text); }
body .cmc-b-paragraph.cmc-b-align-center { max-width: 64ch; margin-left: auto; margin-right: auto; }
body figcaption, body .cmc-b-caption { font-size: 0.8em; color: #7a6a5e; }

/* ---------- tlacitka ---------- */
body :where(p).cmc-b-button { margin: 1.4em 0 0; }
body a.cmc-b-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.8em 1.6em; border-radius: 3px;
  font-family: var(--r1-bezpatkove); font-size: 0.82em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; border: 1.5px solid var(--r1-primarni); background: var(--r1-primarni); color: #fff;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  box-sizing: border-box; max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere;
}
body .cmc-b-document *, body .pmc-hlavicka *, body .pmc-paticka * { box-sizing: border-box; }
body :where(p).cmc-b-button { max-width: 100%; }
body a.cmc-b-button:hover, body a.cmc-b-button:focus-visible { background: var(--r1-primarni-tmava); border-color: var(--r1-primarni-tmava); }
body a.cmc-b-button:focus-visible { outline: 3px solid var(--r1-akcent); outline-offset: 3px; }
body a.cmc-b-button-secondary, body a.cmc-b-button-outline { background: transparent; color: var(--r1-primarni); }
body a.cmc-b-button-secondary:hover, body a.cmc-b-button-outline:hover { background: var(--r1-primarni); color: #fff; }

/* ---------- sloupce a obrazky ---------- */
body .cmc-b-columns { gap: clamp(28px, 3.5vw, 80px); margin: clamp(24px, 2.5vw, 48px) 0 0; }
body .cmc-b-columns.cmc-b-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .cmc-b-columns.cmc-b-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .cmc-b-column { background: none; border: 0; padding: 0; min-width: 0; }
body .cmc-b-column > :last-child { margin-bottom: 0; }
body .cmc-b-image { margin: 0; }
body .cmc-b-image img { width: 100%; height: auto; border-radius: 4px; }

/* ---------- pozadi sekci ---------- */
body .cmc-b-section { background: var(--r1-povrch); }
body .r1-pozadi-jemne { background: var(--r1-jemne); }
body .r1-pozadi-tmave { background: var(--r1-tmave); color: #f3e9dc; }
body .r1-pozadi-tmave .cmc-b-heading { color: #fff; }
body .r1-pozadi-tmave .cmc-b-paragraph { color: #e6d8c6; }
body .r1-pozadi-tmave a.cmc-b-button-secondary, body .r1-pozadi-tmave a.cmc-b-button-outline { color: #fff; border-color: rgba(255,255,255,.85); }
body .r1-pozadi-tmave a.cmc-b-button-secondary:hover { background: #fff; color: var(--r1-primarni); }

/* ---------- hlavicka (spolecna cast __hlavicka) ---------- */
body .pmc-hlavicka { position: sticky; top: 0; z-index: 50; background: rgba(251, 247, 240, .96); border-bottom: 1px solid var(--r1-okraj); backdrop-filter: saturate(1.2) blur(8px); }
body .r1-hlavicka > .cmc-b-container { display: flex; align-items: center; flex-wrap: wrap; gap: 8px clamp(16px, 2vw, 40px); }
body .r1-hlavicka :where(p).cmc-b-button { margin: 0; }
body .r1-hlavicka a.cmc-b-button-link {
  background: none; border: 0; color: var(--r1-text); min-height: 44px; padding: 0; border-radius: 0;
  font-size: 0.86em; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; box-shadow: inset 0 -2px 0 transparent;
}
body .r1-hlavicka a.cmc-b-button-link:hover { color: var(--r1-primarni); box-shadow: inset 0 -2px 0 var(--r1-akcent); background: none; }
body .r1-hlavicka > .cmc-b-container > p:first-child { margin-right: auto; }
body .r1-hlavicka > .cmc-b-container > p:first-child a.cmc-b-button-link {
  font-family: var(--r1-patkove); font-size: clamp(24px, 1.7vw, 34px); text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--r1-primarni); box-shadow: none;
}
body .r1-hlavicka > .cmc-b-container > p:first-child a.cmc-b-button-link::before {
  content: ""; width: 0.95em; height: 0.95em; margin-right: 0.45em; border-radius: 50% 50% 50% 0; background: var(--r1-akcent); transform: rotate(-45deg); flex: none;
}
body .r1-hlavicka > .cmc-b-container > p:last-child { margin-left: clamp(4px, 1vw, 16px); }
body .r1-hlavicka > .cmc-b-container > p:last-child a.cmc-b-button { min-height: 46px; padding: 0.7em 1.3em; }

/* ---------- uvod: hero pres celou sirku ---------- */
body .r1-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(560px, 84vh, 960px); background: var(--r1-tmave); color: #fff; isolation: isolate; }
body .r1-hero > .cmc-b-container { position: static; width: 100%; }
body .r1-hero .cmc-b-image { position: absolute; inset: 0; z-index: -2; margin: 0; }
body .r1-hero .cmc-b-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
body .r1-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(26, 13, 9, .88) 0%, rgba(26, 13, 9, .62) 42%, rgba(26, 13, 9, .12) 78%), linear-gradient(0deg, rgba(26, 13, 9, .55) 0%, rgba(26, 13, 9, 0) 45%); }
body .r1-hero h1.cmc-b-heading { color: #fff; max-width: 15ch; font-size: clamp(42px, 5vw, 104px); line-height: 1.04; }
body .r1-hero .cmc-b-paragraph { color: #f1e6d6; max-width: 46ch; font-size: clamp(18px, 1.15vw, 25px); }
body .r1-hero :where(p).cmc-b-button { display: inline-block; margin: 1.2em 0.8em 0 0; }
body .r1-hero a.cmc-b-button-secondary { color: #fff; border-color: rgba(255,255,255,.85); }
body .r1-hero a.cmc-b-button-secondary:hover { background: #fff; color: var(--r1-primarni); }
body .r1-hero h1.cmc-b-heading::after { content: ""; display: block; width: 72px; height: 3px; margin-top: 0.4em; background: var(--r1-akcent); }

/* ---------- dvojice text + obrazek ---------- */
body .r1-split .cmc-b-columns { align-items: center; margin-top: 0; }
body .r1-split .cmc-b-image img { aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 30px 60px -30px rgba(43, 33, 28, .45); }
body .r1-split .cmc-b-column > p.cmc-b-paragraph:first-child strong,
body .r1-karty .cmc-b-column > figure + p.cmc-b-paragraph {
  display: block; font-size: 0.74em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--r1-akcent); font-weight: 700;
}

/* ---------- karty (vyber z listku, aktuality) ---------- */
body .r1-karty .cmc-b-columns { margin-top: clamp(28px, 3vw, 56px); }
body .r1-karty .cmc-b-column { background: #fff; border: 1px solid var(--r1-okraj); border-radius: 4px; overflow: hidden; padding: 0 0 clamp(20px, 1.8vw, 32px); display: flex; flex-direction: column; }
body .r1-karty .cmc-b-column > :not(figure) { margin-left: clamp(20px, 1.8vw, 32px); margin-right: clamp(20px, 1.8vw, 32px); }
body .r1-karty .cmc-b-column > figure { margin-bottom: clamp(18px, 1.6vw, 28px); }
body .r1-karty .cmc-b-column > figure img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
body .r1-karty .cmc-b-column > figure + p.cmc-b-paragraph { margin-bottom: 0.6em; }
body .r1-karty .cmc-b-column > p.cmc-b-button { margin-top: auto; padding-top: 1em; }
body .r1-karty .cmc-b-column > p.cmc-b-button a.cmc-b-button { background: none; border: 0; color: var(--r1-primarni); padding: 0; min-height: 44px; }
body .r1-karty .cmc-b-column > p.cmc-b-button a.cmc-b-button::after { content: "\2192"; font-size: 1.2em; }
body .r1-karty > .cmc-b-container > p.cmc-b-button { text-align: center; }

/* ---------- trojice duvodu ---------- */
body .r1-trojice .cmc-b-column { border-top: 2px solid var(--r1-akcent); padding-top: 1.4em; }

/* ---------- vyzva ---------- */
body .r1-vyzva { text-align: center; background: linear-gradient(135deg, var(--r1-tmave) 0%, var(--r1-primarni-tmava) 100%); }
body .r1-vyzva h2.cmc-b-heading { max-width: 22ch; margin-left: auto; margin-right: auto; }

/* ---------- zahlavi podstranek ---------- */
body .r1-zahlavi { border-bottom: 1px solid var(--r1-okraj); }
body .r1-zahlavi h1.cmc-b-heading::after { content: ""; display: block; width: 72px; height: 3px; margin-top: 0.35em; background: var(--r1-akcent); }
body .r1-zahlavi .cmc-b-paragraph { max-width: 62ch; font-size: clamp(18px, 1.1vw, 24px); }

/* ---------- jidelni listek ---------- */
body .r1-listek + .r1-listek { padding-top: 0; }
body .r1-listek h2.cmc-b-heading { display: flex; align-items: center; gap: 0.6em; }
body .r1-listek h2.cmc-b-heading::after { content: ""; flex: 1; height: 1px; background: var(--r1-okraj); }
body .r1-listek .cmc-b-columns { margin-top: 0.4em; row-gap: 0; }
body .r1-listek h3.cmc-b-heading { font-family: var(--r1-bezpatkove); font-size: clamp(18px, 1.05vw, 23px); font-weight: 700; margin: 0; padding-top: 1.1em; border-top: 1px dashed var(--r1-okraj); }
body .r1-listek .cmc-b-column > h3.cmc-b-heading:first-child { border-top: 0; padding-top: 0.6em; }
body .r1-listek .cmc-b-paragraph { margin: 0.3em 0 1.1em; font-size: 0.92em; }

/* ---------- galerie ---------- */
body .r1-galerie .cmc-b-gallery { gap: clamp(12px, 1.4vw, 28px); margin-top: clamp(24px, 2.5vw, 48px); }
body .r1-galerie .cmc-b-gallery figure { background: none; border: 0; padding: 0; }
body .r1-galerie .cmc-b-gallery img { border-radius: 4px; aspect-ratio: 4 / 3; object-fit: cover; }
body .r1-galerie .cmc-b-gallery figcaption { margin-top: 0.6em; font-size: 0.82em; }

/* ---------- rezervace a kontakt ---------- */
body .r1-kontakt .cmc-b-columns { margin-top: 0; }
body .r1-kontakt .cmc-b-column { background: #fff; border: 1px solid var(--r1-okraj); border-radius: 4px; padding: clamp(24px, 3vw, 56px); }
body .r1-kontakt .cmc-b-column:first-child { border-top: 4px solid var(--r1-primarni); }
body .r1-kontakt .cmc-b-column h2.cmc-b-heading { font-size: clamp(24px, 1.8vw, 38px); }
body .r1-kontakt .cmc-b-column h2.cmc-b-heading:not(:first-child) { margin-top: 1.2em; }
body .r1-mapa .cmc-b-image img { max-height: 560px; object-fit: cover; }

/* ---------- paticka (spolecna cast __paticka) ---------- */
body .r1-paticka { border-top: 4px solid var(--r1-akcent); }
body .r1-paticka .cmc-b-columns { margin-top: 0; }
body .r1-paticka h3.cmc-b-heading { color: var(--r1-akcent); font-size: clamp(20px, 1.25vw, 27px); }
body .r1-paticka .cmc-b-paragraph { font-size: 0.92em; }
body .r1-paticka > .cmc-b-container > p.cmc-b-paragraph:last-child { max-width: none; margin-top: clamp(32px, 3vw, 56px); padding-top: 1.4em; border-top: 1px solid rgba(255,255,255,.14); font-size: 0.78em; color: #b9a893; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  body .cmc-b-document { padding: 0; }
  body .cmc-b-columns.cmc-b-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .r1-trojice .cmc-b-columns.cmc-b-cols-3, body .r1-paticka .cmc-b-columns.cmc-b-cols-3 { grid-template-columns: 1fr; }
}

/* ---------- mobil ---------- */
@media (max-width: 760px) {
  body .cmc-b-document { padding: 0; }
  body .cmc-b-columns.cmc-b-cols-2, body .cmc-b-columns.cmc-b-cols-3 { grid-template-columns: 1fr; }
  /* Hlavicka na mobilu (S-020 kolo 2): radek 1 = jmeno podniku (smi na 2 radky) + tlacitko Rezervovat,
     radek 2 = vsech 5 polozek menu na jednom radku. Zalomeni mezi radky dela prazdny flex prvek ::after. */
  body .r1-hlavicka.cmc-b-padY-sm { padding-top: 8px; padding-bottom: 4px; }
  body .r1-hlavicka > .cmc-b-container { flex-wrap: wrap; justify-content: space-between; gap: 0 10px; padding: 0; }
  body .r1-hlavicka > .cmc-b-container::after { content: ""; order: 2; flex: 0 0 100%; height: 0; }
  body .r1-hlavicka > .cmc-b-container > p { order: 3; }
  body .r1-hlavicka > .cmc-b-container > p:first-child { order: 1; flex: 1 1 0; min-width: 0; margin-right: 0; }
  body .r1-hlavicka > .cmc-b-container > p:last-child { order: 2; flex: 0 0 auto; margin-left: 0; }
  body .r1-hlavicka > .cmc-b-container > p:first-child a.cmc-b-button-link {
    font-size: 19px; line-height: 1.1; white-space: normal; overflow-wrap: normal; justify-content: flex-start; text-align: left; min-height: 44px;
  }
  body .r1-hlavicka > .cmc-b-container > p:last-child a.cmc-b-button { min-height: 44px; padding: 0.5em 0.9em; font-size: 12px; letter-spacing: 0.05em; }
  body .r1-hlavicka a.cmc-b-button-link { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; white-space: nowrap; }
  body .r1-hero { min-height: 640px; }
  body .r1-hero::before { background: linear-gradient(0deg, rgba(26, 13, 9, .92) 0%, rgba(26, 13, 9, .7) 55%, rgba(26, 13, 9, .25) 100%); }
  body .r1-hero :where(p).cmc-b-button { display: block; margin-right: 0; }
  body .r1-hero a.cmc-b-button { width: 100%; }
  body .r1-split .cmc-b-columns > .cmc-b-column:has(> figure:only-child) { order: -1; }
  body .r1-galerie .cmc-b-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .r1-galerie .cmc-b-gallery figcaption { font-size: 12px; }
}

/* velmi uzky telefon (pod 350 px): menu o neco mensim pismem, aby zustalo na jednom radku */
@media (max-width: 349px) {
  body .r1-hlavicka a.cmc-b-button-link { font-size: 12px; }
  body .r1-hlavicka > .cmc-b-container { gap: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body a.cmc-b-button { transition: none; }
}
