/* Zmrzlina od Zrcadla — vlastní šablona.
   Barvy, velikosti a rozestupy jsou OPSANÉ z původního webu (getComputedStyle,
   ~/uzrcadla-build/zmer.py), ne odhadnuté. Nahrazuje nicepage.css (1,55 MB),
   nicepage.js (0,43 MB), jQuery a 11 per-page CSS. */

:root {
  --krem: 249, 231, 155;          /* #f9e79b — panely a hlavička */
  --zluta: #f1c50e;               /* velké nadpisy */
  --modra: #478ac9;               /* aktivní položka menu */
  --text: #111;
  --stin-karty: rgba(0, 0, 0, .4) 5px 5px 20px;
  --obal: 1160px;
  --radius: 30px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  /* Místo pro svislý posuvník se drží i na stránkách, které se nerolují.
     Bez toho stránka po přechodu na delší stránku (Místní výrobky) poskočila
     o 8 px doleva — obsah je vycentrovaný a posuvník ubere 15 px šířky. */
  scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }        /* starší prohlížeče: posuvník vždy */
}

/* Stránka vždy vyplní celé okno: na krátkých stránkách (Úvod, Káva, Ocenění…)
   by jinak pod patičkou svítil bílý pruh pozadí `body`. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--text);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.hlavicka, .paticka { flex: 0 0 auto; }

img { max-width: 100%; }

a { color: inherit; }

.obal {
  max-width: var(--obal);
  margin-inline: auto;
  padding-inline: 16px;
}

.preskocit {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 10px 18px;
  background: var(--zluta);
  color: #000;
  font-weight: 700;
}
.preskocit:focus { left: 8px; top: 8px; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--modra);
  outline-offset: 2px;
}

/* ── hlavička ─────────────────────────────────────────────────────── */
.hlavicka {
  background-image: linear-gradient(rgb(var(--krem)), rgba(237, 220, 153, .5));
}

.hlavicka__obal {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 137px;
}

.znacka { display: inline-flex; flex: 0 0 auto; }
.znacka__obr { width: 119px; height: auto; }

.menu { margin-left: auto; }

.menu__seznam {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__odkaz {
  display: block;
  padding: 10px 19px;
  color: var(--text);
  font-size: 1.125rem;      /* 18px */
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

.menu__odkaz:hover,
.menu__odkaz:focus-visible { color: var(--modra); }
.menu__odkaz[aria-current="page"] { color: var(--modra); }

.socialy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 0 8px;
  padding: 0;
  list-style: none;
}

.socialy__odkaz { display: block; width: 43px; height: 43px; }
.socialy__ikona { width: 100%; height: 100%; display: block; }
.socialy__odkaz--fb { color: #3b5998; }
.socialy__odkaz--ig { color: #c536a4; }
.socialy__odkaz:hover { filter: brightness(1.1); }

.hamburger {
  display: none;
  margin-left: auto;
  padding: 10px;
  border: 0;
  background: none;
  cursor: pointer;
}
.hamburger__pruh {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: var(--text);
  transition: transform .2s, opacity .2s;
}
.hamburger__popis {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.hamburger[aria-expanded="true"] .hamburger__pruh:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__pruh:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__pruh:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── pás s obrázkem na pozadí ─────────────────────────────────────── */
.pas {
  flex: 1 0 auto;              /* dobere zbytek výšky okna, ať fotka sahá k patičce */
  display: flex;
  flex-direction: column;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.strana--index .pas,
.strana--zmrzlina .pas,
.strana--smetanove .pas,
.strana--orechove .pas,
.strana--regionalni .pas,
.strana--ovocne .pas,
.strana--o-nas .pas    { background-image: url("images/zmrzlina.jpeg"); }
.strana--kava .pas     { background-image: url("images/kava.jpeg"); }
.strana--limo .pas     { background-image: url("images/Gemini_Generated_Image_rhu0hurhu0hurhu0.png"); }
.strana--mistni-vyrobky .pas { background-image: url("images/mistni_vyrobky.png"); }
.strana--oceneni .pas  { background-image: url("images/zmrzka2.jpg"); }

.pas__mrizka {
  /* ⚠️ `width: 100%` je nutné: mřížka je flex položkou uvnitř `.pas`
     (svislý flex kvůli patičce) a `.obal` má `margin-inline: auto`.
     Automatický okraj v příčné ose flexu položku NEROZTÁHNE, ale smrskne
     na obsah — sloupce se pak na každé stránce rozestupovaly jinak podle
     toho, jak široký byl obsah (Úvod 538 px, Ocenění 600, ostatní 742). */
  width: 100%;
  flex: 1 0 auto;              /* panely se protáhnou přes celou výšku pásu */
  display: grid;
  grid-template-columns: 135px minmax(0, 1fr) 251px;
  align-items: stretch;
  min-height: 822px;
  padding-block: 31px;
}

/* ── postranní panely ─────────────────────────────────────────────── */
.panel {
  background: rgba(var(--krem), .8);
  border-radius: var(--radius);
}

.odznaky__seznam {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 31px;
  margin: 0;
  padding: 26px 12px;
  list-style: none;
}

.odznaky__polozka { display: flex; }
.odznaky__odkaz { display: block; }
.odznaky__obr { width: 100px; height: 100px; object-fit: contain; }
.odznaky__obr--1 { width: 110px; height: 90px; }
.odznaky__obr--2,
.odznaky__obr--4 { border-radius: 50%; }
.odznaky__obr--3 { object-fit: cover; }

.kontakt {
  padding: 11px 24px 24px;
  box-shadow: var(--stin-karty);
}

.kontakt__nadpis {
  margin: 11px 0 0;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 1.5rem;                 /* 24px */
  font-weight: 700;
  line-height: 1.2;
  text-shadow: rgba(0, 0, 0, .4) 2px 2px 8px;
}

.kontakt__hodiny,
.kontakt__adresa {
  font-size: 1.125rem;               /* 18px */
  line-height: 1.6;
}
.kontakt__hodiny { margin: 31px 0 0; font-weight: 700; }
.kontakt__adresa { margin: 45px 0 0; }
.kontakt__adresa a { color: inherit; text-decoration: none; }
.kontakt__adresa a:hover { text-decoration: underline; }

/* ── obsah ────────────────────────────────────────────────────────── */
.obsah {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.stred {
  flex: 1 0 auto;              /* sloupec s obsahem sahá po celé výšce pásu */
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nadpis {
  margin: 5px 0 0;
  font-family: "Balsamiq Sans", "Comic Sans MS", cursive, sans-serif;
  font-size: 4.5rem;                 /* 72px */
  font-weight: 400;
  line-height: 1.1;
  color: var(--zluta);
  text-align: center;
}

.karta {
  width: 100%;
  max-width: 678px;
  margin: 10px 0 0;
  padding: 19px 29px 24px;
  background: rgba(var(--krem), .8);
  border-radius: var(--radius);
}

.karta__nadpis {
  margin: 0 0 10px;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 2.25rem;                /* 36px */
  font-weight: 400;
  line-height: 1.2;
  text-shadow: rgba(0, 0, 0, .4) 2px 2px 8px;
}

.karta__text {
  margin: 10px 0 0;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 1.25rem;                /* 20px */
  line-height: 1.35;
}
.karta__text:first-child { margin-top: 0; }

/* nadpis uvnitř karty, před kterým už text je (MÍSTNÍ VÝROBCI:) —
   v originálu měl 23px odstup */
.karta__text + .karta__nadpis { margin-top: 23px; }

.karta__text a { color: inherit; }

/* dlaždice příchutí (v originálu to byly `div` s `data-href`, tedy odkaz,
   který uměl otevřít jen nicepage.js) */
.dlazdice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 148px));
  gap: 31px 175px;
  justify-content: center;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.dlazdice__odkaz {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px 10px;
  background: rgba(var(--krem), .8);
  border-radius: var(--radius);
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.dlazdice__odkaz:hover,
.dlazdice__odkaz:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

/* video a mapa */
.video, .mapa {
  width: 100%;
  max-width: 695px;
  margin: 32px 0 0;
}
.mapa { max-width: 634px; }

/* Video je vždy poslední blok stránky a drží se u spodní hrany sloupce —
   na Zmrzlinách ho dolů tlačí dlaždice příchutí, na Úvodu by jinak zůstalo
   hned pod kartou a stránky by nevypadaly stejně. `padding-top` drží odstup
   i tam, kde volné místo nezbylo (mobil). */
.video {
  margin-top: auto;
  padding-top: 32px;
}

.video__ram, .mapa__ram {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
}
.mapa__ram { aspect-ratio: 634 / 517; }

/* samostatná fotografie */
.obrazek { margin: 24px 0 0; }
.obrazek__obr { display: block; width: 100%; height: auto; border-radius: 8px; }

/* galerie — v originálu karusel z nicepage.js */
.galerie {
  position: relative;
  width: 100%;
  max-width: 671px;
  margin: 28px 0 0;
  aspect-ratio: 671 / 486;
}

.galerie__pas { margin: 0; padding: 0; list-style: none; height: 100%; }

.galerie__polozka {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.galerie__polozka[data-aktivni] { opacity: 1; pointer-events: auto; }

.galerie__obr {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.galerie__sip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  cursor: pointer;
}
.galerie__sip::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: auto;
  border-top: 3px solid var(--text);
  border-right: 3px solid var(--text);
}
.galerie__sip--zpet { left: 10px; }
.galerie__sip--zpet::before { transform: rotate(-135deg); margin-left: 18px; }
.galerie__sip--vpred { right: 10px; }
.galerie__sip--vpred::before { transform: rotate(45deg); margin-left: 12px; }
.galerie__sip:hover { background: #fff; }

.galerie__tecky {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.galerie__tecka {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid rgba(0, 0, 0, .35);
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  cursor: pointer;
}
.galerie__tecka[aria-current="true"] { background: var(--zluta); }

/* kontaktní odkazy (stránka O nás) */
.kontakt-karta__nazev {
  margin: 0 0 18px;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

.odkazy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.odkaz {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.odkaz:hover { text-decoration: underline; }
.odkaz--text { cursor: default; }
.odkaz__ikona { width: 16px; height: 16px; flex: 0 0 auto; }
.odkaz__ikona--vektor { width: 1em; height: 1em; fill: currentColor; }

/* místní výrobci */
.vyrobci { margin: 18px 0 0; padding: 0; list-style: none; }

.vyrobce {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
}
.vyrobce__logo {
  width: 100%;
  max-width: 110px;
  height: auto;
  justify-self: center;
  border-radius: 10px;
}
.vyrobce__nazev {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}
.vyrobce__odkazy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vyrobce__odkaz { display: block; width: 29px; height: 29px; }
.vyrobce__odkaz .odkaz__ikona { width: 29px; height: 29px; }
.vyrobce__odkaz .odkaz__ikona--vektor { color: #3b5998; }
.vyrobce__odkaz[aria-label*="Instagram"] .odkaz__ikona--vektor { color: #c536a4; }

/* ── patička ──────────────────────────────────────────────────────── */
/* Originál měl v patičce jedinou větu a žádný kontakt. Nová patička drží
   značku, mapu webu, kontakt a otevírací dobu — pruh se žlutým přechodem
   a rozestupy zůstávají z původní šablony. */
.paticka {
  background-image: linear-gradient(rgba(241, 197, 14, .5), rgba(var(--krem), .5)),
                    linear-gradient(rgb(var(--krem)), rgb(var(--krem)));
}

.paticka__mrizka {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.4fr 1fr;
  gap: 28px 36px;
  padding-block: 34px;
}

.paticka__blok { min-width: 0; }

.paticka__nadpis {
  margin: 0 0 12px;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 1.125rem;              /* 18px */
  font-weight: 700;
}

.paticka__logo { width: 96px; height: auto; }

.paticka__popis {
  margin: 12px 0 16px;
  max-width: 38ch;
  font-size: .9375rem;              /* 15px */
  line-height: 1.55;
}

.socialy--paticka { margin: 0; gap: 10px; }
.socialy--paticka .socialy__odkaz { width: 34px; height: 34px; }

.paticka__odkazy {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
}
.paticka__odkazy a { text-decoration: none; }
.paticka__odkazy a:hover,
.paticka__odkazy a:focus-visible { text-decoration: underline; }
.paticka__odkazy a[aria-current="page"] { font-weight: 700; }

.paticka__kontakt,
.paticka__hodiny {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.7;
  font-style: normal;
}
.paticka__kontakt a { text-decoration: none; }
.paticka__kontakt a:hover,
.paticka__kontakt a:focus-visible { text-decoration: underline; }

.paticka__spodek { border-top: 1px solid rgba(0, 0, 0, .15); }
.paticka__spodek .obal { padding-block: 15px; }

.paticka__text {
  margin: 0;
  font-size: .875rem;               /* 14px */
  text-align: center;
}

/* ── užší okna ────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .menu__odkaz { padding: 10px 12px; font-size: 1rem; }
}

@media (max-width: 1023px) {
  .hamburger { display: block; }

  .menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 15;
    display: none;
    background: rgb(var(--krem));
    box-shadow: 0 10px 20px rgba(0, 0, 0, .25);
  }
  .menu[data-otevreno] { display: block; }
  .hlavicka { position: relative; }
  .hlavicka__obal { flex-wrap: wrap; min-height: 110px; }
  .menu__seznam { flex-direction: column; align-items: stretch; }
  .menu__odkaz { padding: 14px 16px; border-top: 1px solid rgba(0, 0, 0, .12); }
  .socialy { margin-left: auto; order: 2; }
  .hamburger { order: 3; margin-left: 0; }

  .pas__mrizka {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 24px;
  }
  .obsah { order: 1; }
  .kontakt { order: 2; }
  .odznaky { order: 3; }

  .stred { padding: 0; }

  .odznaky__seznam {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    padding: 20px;
  }

  .nadpis { font-size: 3rem; }
  .karta__nadpis { font-size: 1.75rem; }
  .karta__text { font-size: 1.125rem; }

  .paticka__mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .dlazdice { gap: 16px; grid-template-columns: repeat(2, minmax(0, 148px)); }
  .odkazy { grid-template-columns: minmax(0, 1fr); }
  .vyrobce { grid-template-columns: 84px minmax(0, 1fr); }
  .vyrobce__odkazy { grid-column: 2; }
}

@media (max-width: 575px) {
  .paticka__mrizka { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .znacka__obr { width: 92px; }
  .hlavicka__obal { min-height: 92px; }
  .nadpis { font-size: 2.25rem; }
  .karta { padding: 16px; }
  .galerie__sip { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Dočasné uzavření — výrazně červeně v panelu i patičce */
.kontakt__hodiny strong,
.paticka__hodiny strong { color: #d00000; }