/* ============ U APOŠTOLA — světlá verze: krémově bílá + hnědé sekce ============ */
:root {
  /* světlý základ */
  --page-bg: #ffffff;          /* bílá ze starého webu */
  --bg: #ffffff;
  --bg-soft: #faf8ea;          /* smetanová ze starého webu */
  --text: #2a1f14;
  --muted: #7c6a56;
  --gold: #E45425;            /* konverzní oranžová ze starého webu */
  --gold-tmava: #C7431A;      /* tmavší varianta pro drobný text */
  --line: #e8e2d2;
  --border-btn: #6b563d;
  --btn-hover-fg: #ffffff;
  --shadow: rgba(74, 52, 28, .16);

  /* hnědé sekce */
  --brown: #2b2015;
  --brown-soft: #362717;

  --serif: "Old Standard TT", serif;
  --display: "Old Standard TT", serif;
  --sans: "Poppins", sans-serif;
}

/* obrácené schéma uvnitř hnědých sekcí — proměnné se propíší do všech prvků */
.on-dark {
  --text: #f7f2e9;
  --muted: #c2b3a0;
  --gold: #FF7A45;
  --line: #4a3926;
  --border-btn: #e3daca;
  --btn-hover-fg: #2b2015;
  --shadow: rgba(0, 0, 0, .45);
  color: var(--text);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Barva pozadí patří i na <html>, ne jen na <body>. Prohlížeč maluje plátno
   podle <html>; když je průhledné, čeká na propsání z <body> a do té doby
   svítí výchozí bílá — proto se pozadí kolem obrázků na okamžik „přecvakne". */
html { scroll-behavior: smooth; background: var(--page-bg); }
body {
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  /* clip, ne hidden: hidden dělá z body posuvný kontejner a tím vypíná
     position: sticky (kolo s pizzou). clip ořízne stejně, ale kontejner netvoří. */
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 40px; }

/* ---------- sdílené ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  color: var(--text);
  border: 1px solid var(--border-btn);
  border-radius: 7px;
  padding: 12px 30px;
  letter-spacing: .02em;
  transition: background .3s, color .3s;
  background: transparent;
  cursor: pointer;
}
.btn:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
/* hlavní konverzní tlačítka — plná oranžová */
.btn--cta, .hero__btn, .res-form__submit {
  background: var(--gold); border-color: var(--gold); color: #fff;
}
.btn--cta:hover, .hero__btn:hover, .res-form__submit:hover {
  background: var(--gold-tmava, #C7431A); border-color: var(--gold-tmava, #C7431A); color: #fff;
}
.btn--sm { padding: 12px 30px; font-size: 15px; }

.kicker {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--text);
  margin-bottom: 10px;
}
.kicker--underline { display: inline-block; border-bottom: 1px solid var(--gold); padding-bottom: 8px; margin-bottom: 16px; }
.kicker--center { text-align: center; font-size: 26px; letter-spacing: .12em; }

.h-serif { font-family: var(--serif); font-size: 46px; font-weight: 400; line-height: 1.15; letter-spacing: .02em; }
.h-serif-sm { font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: .03em; }
.h-sans { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.2; }

.link-underline {
  display: inline-block;
  font-size: 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gold);
  transition: opacity .3s;
}
.link-underline:hover { opacity: .7; }

/* reveal animace */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- navigace ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 26px 0 18px;
  background: linear-gradient(180deg, rgba(253,250,245,.95), rgba(253,250,245,0));
  transition: background .4s, padding .4s, box-shadow .4s;
}
.nav.scrolled {
  background: rgba(253,250,245,.96);
  padding: 14px 0 12px;
  box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(74,52,28,.06);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; }
.nav__logo {
  font-family: var(--display);
  font-size: 34px;
  color: var(--text);
  letter-spacing: .04em;
}
.nav__links { display: flex; gap: 42px; }
.nav__links a { font-size: 14.5px; font-weight: 300; opacity: .85; transition: opacity .3s; }
.nav__links a:hover { opacity: 1; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 150px 0 60px; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1fr; align-items: center; width: 100%; position: relative; z-index: 2; }
.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.08;
  letter-spacing: .015em;
}

.hero__title .line { display: block; overflow: hidden; }
.hero__title .line i {
  font-style: normal;
  display: block;
  position: relative;
  transform: translateY(110%);
  animation: rise 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__title .line:nth-child(2) i { animation-delay: .15s; }
.hero__title .line:nth-child(3) i { animation-delay: .3s; }
@keyframes rise { to { transform: translateY(0); } }

.hero__btn { margin-top: 48px; opacity: 0; animation: fadein 1s ease .8s forwards; }
@keyframes fadein { to { opacity: 1; } }

.hero__dish {
  width: 86%;
  max-width: none;
  margin: 0 auto;
  will-change: transform;
  /* bílý talíř na krémové potřebuje silnější stín, aby se oddělil od pozadí */
  filter: drop-shadow(0 26px 44px rgba(74,52,28,.34));
}

/* ---------- pás se zahrádkou ---------- */
.garden { position: relative; }
/* okno, kterým je vidět na fotku připnutou k oknu prohlížeče */
.garden__img-wrap {
  position: relative;
  overflow: hidden;
  height: 340px;
  background-image:
    linear-gradient(rgba(38, 28, 18, .38), rgba(38, 28, 18, .38)),
    url("img/garden-interier.webp?v=i2");
  background-attachment: fixed, fixed;   /* fotka stojí, web po ní přejíždí */
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}
@media (max-width: 700px) { .garden__img-wrap { height: 260px; } }
/* dotyková zařízení fixed pozadí neumí — necháme statické, ale bez trhání */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .garden__img-wrap { background-attachment: scroll, scroll; }
}
.garden__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: 64px;
  letter-spacing: .06em;
  color: rgba(255,252,246,.95);
  text-shadow: 0 2px 30px rgba(0,0,0,.55);
}

/* ---------- aktuality: vyskakovací okno vlevo dole ---------- */
.aktuality {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 60;
  width: min(440px, calc(100vw - 44px));
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 7px solid var(--gold);
  border-radius: 14px;
  padding: 24px 52px 26px 26px;
  box-shadow: 0 18px 44px rgba(74,52,28,.20);
  /* okno vyjede zespodu, jakmile se načte text ze Sanity */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s ease, transform .45s ease;
}
.aktuality[hidden] { display: none; }
.aktuality--vidno { opacity: 1; transform: none; }
.aktuality__zavrit {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  border-radius: 50%;
  transition: color .25s, background .25s;
}
.aktuality__zavrit:hover { color: var(--text); background: rgba(74,52,28,.08); }
.aktuality__zavrit { font-size: 28px; }
.aktuality__stitek {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gold);
  padding: 7px 17px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.aktuality__text {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
}
@media (max-width: 640px) {
  .aktuality { left: 14px; bottom: 14px; width: calc(100vw - 28px); padding: 22px 48px 24px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .aktuality { transition: none; }
}

/* ---------- info lišta (samostatný pruh pod hero) ---------- */


/* ---------- náš příběh ---------- */
.story { padding: 100px 0; }
/* dva textové sloupce: vlevo nadpis a příběh, vpravo tým (fotka šla v 10/2026 pryč) */
.story__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.story__title { font-family: var(--serif); font-size: 44px; font-weight: 400; margin-bottom: 26px; position: relative; }
.ghost { position: relative; }
.ghost::before, .ghost::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(42,31,20,.20);
  pointer-events: none;
}
.ghost::before { top: -0.42em; }
.ghost::after { top: -0.84em; -webkit-text-stroke-color: rgba(42,31,20,.10); }
.story__desc { color: var(--text); font-size: 16px; line-height: 2; margin-bottom: 28px; }
.story__desc + .story__desc { margin-top: -10px; }
.story__tym { margin-bottom: 26px; }
.story__tym-nadpis {
  font-family: var(--serif); font-size: 21px; font-weight: 400;
  margin: 0 0 6px; letter-spacing: .02em;
}
.story__tym-popis { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin: 0 0 12px; }
.story__jmena { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.story__jmena li {
  font-family: var(--sans); font-size: 13.5px; color: var(--text);
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 15px; line-height: 1;
}


/* info lišta — hnědá karta jako akcent */
.infobar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--brown);
  padding: 30px 10px;
  border-radius: 3px;
}
.infobar__item { display: flex; align-items: center; gap: 18px; justify-content: center; }
.infobar__item h3 { font-family: var(--serif); font-size: 21px; font-weight: 400; letter-spacing: .03em; }
.infobar__item p { color: var(--muted); font-size: 12.5px; }
.ico { width: 34px; height: 34px; stroke: var(--gold); fill: none; stroke-width: 1.4; }

/* ---------- menu ---------- */
.menu { padding: 110px 0 60px; }
/* hlavička menu na střed — nadpis i doprovodný text pod sebou */
.menu__head { text-align: center; margin-bottom: 70px; }
.menu__head .h-serif { font-size: 54px; }
.menu__intro {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
  max-width: 560px;
  margin: 22px auto 0;
}
.circled { position: relative; white-space: nowrap; }
.circled::after {
  content: "";
  position: absolute;
  inset: -6px -12px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  transform: rotate(-4deg);
}
.menu__row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
.menu__row--flip .menu__img { order: 2; }
.menu__row--flip .menu__info { order: 1; padding-left: 60px; }

/* rotující talíř: průhledný kruhový výřez, otáčí se se scrollem */
.plate {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plate__spin { height: auto;
  width: 74%;
  will-change: transform;
  filter: drop-shadow(0 26px 45px rgba(74,52,28,.28));
}
/* větší talíře posunuté nahoru k nadpisům */
.plate--weekly, .plate--offer, .plate--pizza { transform: translateY(-58px); }
.plate--weekly .plate__spin,
.plate--offer .plate__spin,
.plate--pizza .plate__spin { width: 82%; }
/* Talíř je posunutý nahoru transformem, takže text vycentrovaný mřížkou
   sedí níž. Zvedneme ho, aby popis padl na úroveň středu talíře. */
.menu__info { max-width: 530px; transform: translateY(-54px); }
.menu__info h3 { margin-bottom: 20px; font-size: 49px; line-height: 1.1; }
.menu__info p { color: var(--muted); font-size: 19px; line-height: 1.7; margin-bottom: 32px; }

/* ---------- oblíbená jídla ---------- */
.dishes { padding: 90px 0 100px; background: var(--bg-soft); }
.dishes .h-sans { margin-bottom: 46px; }
.dishes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.dish img {
  width: 100%;
  height: 270px;
  object-fit: cover;
  margin-bottom: 22px;
  border-radius: 3px;
}
.dish__row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.dish__row h3 { font-family: var(--serif); font-size: 24px; font-weight: 400; letter-spacing: .03em; }
.dish__price { font-size: 12.5px; color: var(--gold); letter-spacing: .05em; }
.dish p { color: var(--muted); font-size: 13px; line-height: 1.8; max-width: 300px; }

/* ---------- služby (hnědá sekce) ---------- */
.services { padding: 100px 0; background: var(--brown); }
.services__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; margin-bottom: 110px; }
.services__text .h-serif { margin-bottom: 20px; }
.services__desc { color: var(--muted); font-size: 14px; max-width: 340px; }
.services__icons { display: flex; gap: 70px; justify-content: flex-end; }
.service { text-align: center; }
.service__icon svg {
  width: 74px; height: 74px;
  stroke: var(--gold); fill: none; stroke-width: 1.1;
  margin-bottom: 18px;
}
.svg-txt { fill: var(--gold); stroke: none; font-family: var(--sans); font-size: 7px; }
.service p { font-size: 15px; }

/* karta s akcemi (uvnitř hnědé sekce) */
.events-card {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 50px;
  border: 1px solid var(--line);
  background: var(--brown-soft);
  padding: 55px 60px;
  align-items: center;
  border-radius: 3px;
}
.events-card__desc { color: var(--muted); font-size: 13.5px; max-width: 420px; margin-bottom: 34px; }
.events-card__event { font-family: var(--serif); font-size: 22px; letter-spacing: .04em; margin-bottom: 14px; }
.events-card__event span { color: var(--muted); margin: 0 12px; font-family: var(--sans); font-weight: 200; }
.events-card__note { color: var(--muted); font-size: 12.5px; }
.events-card__photo img { width: 100%; height: 320px; object-fit: cover; border-radius: 3px; }

/* ---------- recenze ---------- */
.testimonials { padding: 100px 0; background: var(--bg-soft); }
.testimonials__head { margin-bottom: 50px; }
/* pás se šipkami u okrajů okna a kartami uprostřed */
.recenze-pas { position: relative; }
.arrow { background: none; border: none; cursor: pointer; padding: 6px 0; }
.arrow--kraj {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  padding: 14px 6px;
}
.arrow--vlevo { left: 18px; }
.arrow--vpravo { right: 18px; }
.arrow svg { width: 64px; height: 13px; stroke: #a4917a; stroke-width: 1.4; transition: stroke .3s; }
.arrow:hover svg { stroke: var(--text); }
.testimonials__track {
  display: flex;
  gap: 24px;
  /* karty jdou zleva a posouvají se šipkami / tažením (je jich víc než se vejde) */
  justify-content: flex-start;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.t-card {
  flex: 0 0 262px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdfa;
  padding: 24px 22px;
  box-shadow: 0 6px 24px rgba(74,52,28,.05);
}
.t-card--photo { padding: 0; overflow: hidden; box-shadow: none; }
.t-card--photo img { width: 100%; height: 100%; object-fit: cover; }
.t-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.t-name { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.stars { color: var(--gold); font-size: 13px; letter-spacing: .18em; }
.stars i { font-style: normal; opacity: .45; }
.t-card p { color: var(--muted); font-size: 12.5px; line-height: 1.75; }

/* ---------- patička ----------
   Základ platí i pro podstránky (menu.html, tydenni-menu.html).
   Velká varianta s rezervací je scopnutá pod .footer--hlavni. */
.footer { position: relative; z-index: 2; padding: 60px 0 70px; background: var(--brown); }
.footer__inner {
  display: grid;
  grid-template-columns: .6fr 1.2fr 1fr;
  gap: 60px;
  align-items: start;
}

/* velká patička na úvodní stránce */
.footer--hlavni { padding: 120px 0 50px; background: var(--brown); }
/* horní blok patičky — hlavní výzva k rezervaci */
.footer__rez { position: relative; text-align: center; padding-bottom: 80px; }
.footer__rez-kicker {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.footer__rez-nadpis {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.1;
  margin-bottom: 18px;
}
.footer__rez-text {
  color: var(--muted);
  font-size: 15.5px;
  max-width: 520px;
  margin: 0 auto 44px;
}
.footer__tel-grid {
  display: flex;
  justify-content: center;
  gap: 70px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.footer__tel {
  font-family: var(--serif);
  font-size: 34px;
  letter-spacing: .04em;
  color: var(--text);
  transition: color .3s;
}
/* velký výrazný popisek — kdo (Restaurace / Hotel) */
.footer__tel__kdo {
  display: block;
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3px;
}
/* menší doplněk pod ním */
.footer__tel__co {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.footer__tel:hover { color: var(--gold); }
.footer__rez-btn { font-size: 17px; padding: 17px 48px; }

/* spodní lišta velké patičky */
.footer--hlavni .footer__inner {
  position: relative;
  grid-template-columns: .7fr 1.3fr auto;
  gap: 50px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}
.footer__contacts a { transition: color .3s; }
.footer__contacts a:hover { color: var(--gold); }
.footer__hodiny { margin-top: 12px; }
.footer__links { display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; }
.footer__news { text-align: center; color: var(--text); font-size: 14px; }
.footer__subscribe {
  margin-top: 26px;
  display: flex;
  max-width: 400px;
  margin-inline: auto;
  border: 1px solid #9a8b74;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(20,14,9,.4);
}
.footer__subscribe input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  padding: 12px 16px;
  font-size: 14px;
}
.footer__subscribe input::placeholder { color: #cabca8; }
.footer__sub-btn {
  background: #e3daca;
  color: #2b2015;
  border: none;
  font-family: var(--sans);
  font-size: 13.5px;
  padding: 12px 26px;
  cursor: pointer;
  transition: background .3s;
}
.footer__sub-btn:hover { background: #fff; }
.footer__contacts h3 { font-family: var(--serif); font-size: 24px; font-weight: 400; margin-bottom: 16px; letter-spacing: .04em; }
.footer__contacts p { color: var(--muted); font-size: 13.5px; margin-bottom: 6px; }
.footer__socials { display: flex; gap: 18px; margin-top: 18px; }
.footer__socials svg { width: 22px; height: 22px; stroke: var(--muted); fill: none; stroke-width: 1.4; transition: stroke .3s; }
.footer__socials a:hover svg { stroke: var(--text); }

/* drobný podpis autora webu — poslední řádek patičky */
.footer__autor { margin: 44px 0 0; font-family: var(--sans); font-size: 12px; letter-spacing: .02em; color: var(--muted); opacity: .75; text-align: center; }
.footer__autor a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color .3s; }
.footer__autor a:hover { color: var(--gold); }

/* ---------- testovací režim (bez animací) ---------- */
.no-anim .reveal { opacity: 1; transform: none; transition: none; }
.no-anim .hero__title .line i { animation: none; transform: none; }
.no-anim .hero__btn { animation: none; opacity: 1; }

/* ---------- responzivita ---------- */
@media (max-width: 960px) {
  .hero__inner, .story__inner, .menu__head, .menu__row,
  .services__inner, .events-card, .footer__inner { grid-template-columns: 1fr; }
  .hero { padding-top: 130px; min-height: auto; }
  .hero__title { font-size: clamp(34px, 9vw, 52px); }
  .hero__dish { width: 86%; margin: 40px auto 0; }
  .menu__row--flip .menu__img { order: 0; }
  .menu__row--flip .menu__info { padding-left: 0; }
  /* ve sloupci pod sebou by posun text natáhl na talíř */
  .menu__info { transform: none; }
  .infobar { grid-template-columns: 1fr; gap: 26px; }
  .dishes__grid { grid-template-columns: 1fr; }
  .services__icons { justify-content: flex-start; gap: 40px; }
  .nav__links { gap: 20px; flex-wrap: wrap; }
  .res-form { grid-template-columns: 1fr; }
  .res-form__submit { grid-column: span 1; }
  .events-card { padding: 40px 30px; }
}


/* ---------- naše služby ---------- */
.sluzby { padding: 120px 0 130px; background: var(--bg-soft); }
.sluzby__head { margin-bottom: 70px; }
.sluzby__head .h-sans { margin-bottom: 14px; }
.sluzby__head p { color: var(--muted); font-size: 16.5px; line-height: 1.75; max-width: 62ch; }
.sluzby__head--stred { text-align: center; }
.sluzby__head--stred p { margin: 0 auto; }
.sluzby__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 52px;
}
.sluzba { display: flex; flex-direction: column; }
.sluzba img {
  width: 100%; height: 360px; object-fit: cover;
  margin-bottom: 32px; border-radius: 3px;
}
.sluzba h3 { font-family: var(--serif); font-size: 30px; font-weight: 400; margin-bottom: 16px; }
.sluzba p { color: var(--muted); font-size: 16px; line-height: 1.75; margin-bottom: 24px; flex: 1; }
.sluzba__odkaz {
  align-self: flex-start; font-size: 14px; padding-bottom: 5px;
  border-bottom: 2px solid var(--gold); transition: opacity .3s;
}
.sluzba__odkaz:hover { opacity: .65; }
@media (max-width: 1000px) { .sluzby__grid { grid-template-columns: 1fr; gap: 60px; } }

/* ---------- výběr z jídelního lístku ---------- */
.vyber { margin-top: 10px; }

.vyber__head { text-align: center; margin-bottom: 46px; }
.vyber__head .h-serif { font-size: 44px; }
.vyber__head p { color: var(--muted); font-size: 14.5px; margin-top: 10px; }
.vyber__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  row-gap: 30px;
  max-width: 940px;
  margin: 0 auto;
}
.polozka { display: flex; align-items: baseline; gap: 12px; }
.polozka__telo { flex: 1; min-width: 0; }
.polozka__radek { display: flex; align-items: baseline; gap: 10px; }
.polozka__nazev { font-family: var(--serif); font-size: 19px; line-height: 1.3; white-space: nowrap; }
.polozka__tecky { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); min-width: 18px; }
.polozka__cena { font-size: 15px; color: var(--gold); white-space: nowrap; letter-spacing: .02em; }
.polozka__popis { color: var(--muted); font-size: 13.5px; margin-top: 5px; line-height: 1.55; }
.polozka__stitek {
  display: inline-block; margin-top: 7px; padding: 3px 10px; border-radius: 99px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line);
}
.vyber__cta { text-align: center; margin-top: 52px; }
.vyber__pozn { color: var(--muted); font-size: 13px; margin-top: 16px; }

/* patička na podstránkách */
.footer-wrap { background: var(--brown); padding-top: 40px; }
.footer-wrap .footer__inner { grid-template-columns: .8fr 1fr; }

/* ---------- podstránka s jídelním lístkem ---------- */
.listek { padding: 150px 0 40px; text-align: center; position: relative; overflow: visible; }
.listek .container { position: relative; z-index: 2; }
.listek .h-serif { font-size: 56px; }
.listek__intro { color: var(--muted); font-size: 15px; margin: 14px auto 0; max-width: 680px; line-height: 1.85; }
/* původní logo hotelu pod úvodem */
.listek__logo { display: block; width: 320px; max-width: 78%; height: auto; margin: 26px auto 0; }


@media (max-width: 900px) { .listek__logo { width: 240px; margin-top: 18px; } }

/* Polední menu: fotky po stranách (sticky od Pondělí), menu na středu */
.pm-layout { display: grid; grid-template-columns: 250px 1fr 250px; align-items: start; }
.pm-foto { position: sticky; top: 88px; align-self: start; }
.pm-foto img { display: block; width: 100%; height: auto; }
.pm-foto--vpravo { justify-self: end; }
.pm-obsah { min-width: 0; }
.pm-obsah .tyden { padding-top: 0; }   /* fotky i menu začínají na úrovni Pondělí */
@media (max-width: 1080px) {
  .pm-layout { grid-template-columns: 1fr; }
  .pm-foto { display: none; }
}

/* suroviny se při scrolu rozjedou zpoza nadpisu (hlavně dolů); nadpis i menu
   zůstávají v normálním toku, takže je menu vidět hned */
.listek__suroviny {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: visible;
}
.surovina {
  position: absolute; left: 50%; top: 172px;
  width: var(--sw, 110px); height: auto;
  will-change: transform, opacity;
  transform: translate(-50%, -50%) scale(.34);
  opacity: 0;
  filter: drop-shadow(0 14px 26px rgba(74, 52, 28, .22));
  -webkit-user-select: none; user-select: none;
}
@media (max-width: 900px) {
  .surovina { top: 138px; }
}
@media (prefers-reduced-motion: reduce) {
  .listek__suroviny { display: none; }
}
.karta { padding: 60px 0 20px; }
.karta__blok { margin-bottom: 58px; scroll-margin-top: 110px; }
.karta__nadpis {
  font-family: var(--display); font-size: 30px; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 6px;
}
/* podnadpis uvnitř sloupce (např. omáčky pod steaky) */
.karta__nadpis--sub { font-size: 20px; margin-top: 32px; }
.karta__cara { height: 1px; background: var(--line); margin-bottom: 26px; }
.karta__pozn { color: var(--muted); font-size: 13px; margin: -16px 0 24px; font-style: italic; }
/* drobná poznámka pod výpisem sekce — bezlepková varianta */
.karta__bezlepek {
  margin: 20px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  font-style: italic;
  line-height: 1.65;
  max-width: 620px;
}

/* ---------- lahvová vína (popisy z vinného lístku) ---------- */
.vina__uvod {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
  max-width: 620px;
  margin: 0 0 26px;
}
.vina__uvod strong { color: var(--text); font-weight: 400; font-family: var(--serif); }
.vina { display: grid; grid-template-columns: 1fr; row-gap: 26px; max-width: 620px; }
.vino__radek { display: flex; align-items: baseline; gap: 10px; }
.vino__nazev {
  font-family: var(--serif); font-size: 19px; font-weight: 400;
  line-height: 1.3; margin: 0;
}
.vino__objem { font-size: 15px; color: var(--gold); white-space: nowrap; letter-spacing: .02em; }
.vino__druh {
  font-family: var(--sans); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 6px 0 0;
}
.vino__popis { color: var(--text); font-size: 14px; line-height: 1.7; margin: 8px 0 0; }
.vino__param { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin: 6px 0 0; }
.vina__pozn { color: var(--muted); font-size: 13px; font-style: italic; margin: 24px 0 0; }

.karta__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 22px; }
.karta__grid--uzky { grid-template-columns: 1fr; max-width: 620px; }
.alergeny { color: var(--muted); font-size: 12px; margin-top: 40px; line-height: 1.7; }

@media (max-width: 900px) {
  .vyber__grid, .karta__grid { grid-template-columns: 1fr; column-gap: 0; }
  .listek { padding-top: 120px; }
  .listek .h-serif { font-size: 40px; }
  .polozka__nazev { white-space: normal; font-size: 17.5px; }
}

/* ---------- týdenní menu ---------- */
.tyden { padding: 40px 0 40px; }
.tyden__grid { display: flex; flex-direction: column; gap: 8px; }
.den { padding: 30px 0 28px; border-top: 1px solid var(--line); text-align: center; }
.den:first-child { border-top: none; }
.den__nazev {
  font-family: var(--display); font-size: 27px; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 4px;
}
.den__nazev { margin-bottom: 18px; }
/* polévka sedí hned pod názvem dne, nad jídly */
.den__polevka {
  color: var(--muted); font-size: 14px; font-style: italic;
  margin: -8px 0 22px;
}
.den__polevka::before { content: "Polévka: "; color: var(--gold); font-style: normal; }
/* jídla v každém dni pod sebou, vycentrovaná */
.den__jidla { display: grid; grid-template-columns: 1fr; row-gap: 12px; max-width: 560px; margin-inline: auto; }

/* poznámka o polévce a přílohách pod denním menu */
.tyden__pozn-polevka {
  text-align: center; color: var(--text); font-size: 14.5px; line-height: 1.9;
  margin: 26px auto 0; max-width: 620px;
}

/* celotýdenní menu — 2 stálá jídla na celý týden, vycentrované */
.celotyden { padding: 30px 0 6px; border-top: 1px solid var(--line); margin-top: 34px; text-align: center; }
.celotyden__nadpis {
  font-family: var(--display); font-size: 27px; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 18px;
}
.celotyden__jidla { display: grid; grid-template-columns: 1fr; row-gap: 12px; max-width: 560px; margin-inline: auto; }

/* ---------- výzva k rezervaci pod menu ---------- */
.rezervace-pozn {
  max-width: 760px;
  margin: 90px auto 0;
  text-align: center;
  padding-top: 46px;
  border-top: 1px solid var(--line);
}
.rezervace-pozn__kicker {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.rezervace-pozn__nadpis {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.15;
  margin-bottom: 22px;
}
.rezervace-pozn p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
  max-width: 640px;
  margin: 0 auto;
}
.rezervace-pozn__cta {
  margin-top: 34px;
  font-size: 16.5px;
  padding: 16px 44px;
}
/* vyšší specificita než .rezervace-pozn p, jinak by se margin ztratil */
.rezervace-pozn p.rezervace-pozn__podpis {
  margin: 30px auto 0;
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--muted);
}
@media (max-width: 900px) {
  .rezervace-pozn { margin-top: 60px; padding-top: 36px; }
  .rezervace-pozn__nadpis { font-size: 32px; }
  .rezervace-pozn__cta { font-size: 15px; padding: 15px 30px; }
}

/* fotka jídla na pozadí hero sekce */
.hero__pozadi { height: auto;
  position: absolute;
  z-index: 0;
  right: 1%;
  top: 57%;
  transform: translateY(-50%);
  width: min(42vw, 560px);
  max-width: none;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 40px 70px rgba(40, 26, 12, .3));
}
.hero__text { max-width: 720px; }
@media (max-width: 1100px) {
  .hero__pozadi { right: -8%; width: 52vw; opacity: .55; }
}
@media (max-width: 700px) {
  .hero__pozadi { right: -18%; top: auto; bottom: -2%; transform: none; width: 88vw; opacity: .3; }
  .hero { padding-bottom: 100px; }
}

/* ---------- recenze z Google ---------- */
/* oficiální čtyřbarevné G jako data-URI, aby web nesahal na cizí server */
.g-logo {
  display: inline-block;
  width: 16px; height: 16px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22%23EA4335%22%20d%3D%22M24%209.5c3.54%200%206.71%201.22%209.21%203.6l6.85-6.85C35.9%202.38%2030.47%200%2024%200%2014.62%200%206.51%205.38%202.56%2013.22l7.98%206.19C12.43%2013.72%2017.74%209.5%2024%209.5z%22%2F%3E%3Cpath%20fill%3D%22%234285F4%22%20d%3D%22M46.98%2024.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58%202.96-2.26%205.48-4.78%207.18l7.73%206c4.51-4.18%207.09-10.36%207.09-17.65z%22%2F%3E%3Cpath%20fill%3D%22%23FBBC05%22%20d%3D%22M10.53%2028.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92%2016.46%200%2020.12%200%2024c0%203.88.92%207.54%202.56%2010.78l7.97-6.19z%22%2F%3E%3Cpath%20fill%3D%22%2334A853%22%20d%3D%22M24%2048c6.48%200%2011.93-2.13%2015.89-5.81l-7.73-6c-2.15%201.45-4.92%202.3-8.16%202.3-6.26%200-11.57-4.22-13.47-9.91l-7.98%206.19C6.51%2042.62%2014.62%2048%2024%2048z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

.g-souhrn { display: flex; align-items: center; gap: 9px; margin-top: 18px; flex-wrap: wrap; }
.g-souhrn strong { font-size: 19px; font-weight: 500; }
.g-souhrn__stars { color: var(--gold); letter-spacing: .1em; font-size: 14px; }
.g-souhrn__stars i { font-style: normal; opacity: .4; }
.g-souhrn__pocet { color: var(--muted); font-size: 13.5px; }

.g-card {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 24px 24px 20px;
  box-shadow: 0 6px 24px rgba(74,52,28,.05);
}
.g-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.g-card__avatar {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: var(--brown);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 17px;
}
.g-card__meta { display: flex; flex-direction: column; line-height: 1.35; }
.g-card__name { font-size: 14.5px; }
.g-card__date { color: var(--muted); font-size: 12px; }
.g-card__stars { color: var(--gold); letter-spacing: .14em; font-size: 14px; margin-bottom: 10px; }
.g-card__text { color: var(--muted); font-size: 13.5px; line-height: 1.75; flex: 1; }
.g-card__zdroj {
  display: flex; align-items: center; gap: 7px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11.5px; letter-spacing: .04em;
}

.recenze-vse { text-align: center; margin-top: 40px; }
@media (max-width: 1100px) { .arrow--vlevo { left: 4px; } .arrow--vpravo { right: 4px; } }
@media (max-width: 760px) { .arrow--kraj { display: none; } .testimonials__track { justify-content: flex-start; } }
@media (max-width: 700px) { .g-card { flex-basis: 82vw; } }


/* ---------- výběr pizzy: sticky kolo + scrollující seznam ---------- */
.pizza-vyber {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  align-items: start;
}

/* levý sloupec zůstává na místě, zatímco pravý odjíždí */
.pizza-kolo {
  position: sticky;
  top: 104px;
  height: 620px;
  /* maska sice kusy schová, ale jejich box by na mobilu roztahoval stránku */
  overflow: hidden;
}
/* měkké zakončení nahoře i dole — kolo pak vypadá, že pokračuje mimo výřez.
   Maska sedí na scéně, aby nevyblednul i nápis nad ní. */
.pizza-kolo__scena {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
}
.pizza-kolo__kus {
  position: absolute;
  left: 50%; top: 50%;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  opacity: 0;
  transition:
    transform .62s cubic-bezier(.22,.72,.2,1),
    opacity .62s ease,
    filter .62s ease;
  will-change: transform, opacity;
}

.pizza-seznam { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pizza-polozka {
  width: 100%;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 13px 14px;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--text);
  transition: background .25s, opacity .25s;
  opacity: .5;
}
.pizza-polozka:hover { opacity: .85; background: var(--bg-soft); }
.pizza-polozka[aria-selected="true"] { opacity: 1; background: var(--bg-soft); }
.pizza-polozka__radek { display: flex; align-items: baseline; gap: 10px; }
.pizza-polozka__nazev { font-size: 18px; font-family: var(--serif); letter-spacing: .02em; }
.pizza-polozka__tecky { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.pizza-polozka__cena { font-size: 14px; color: var(--gold); white-space: nowrap; }
.pizza-polozka__popis {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
/* svislá linka vybrané položky */
.pizza-polozka[aria-selected="true"] .pizza-polozka__nazev { color: var(--gold); }

@media (max-width: 900px) {
  .pizza-vyber { grid-template-columns: 1fr; row-gap: 20px; }
  .pizza-kolo { position: relative; top: 0; height: 360px; }
  .pizza-kolo__kus { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
}

/* nápověda nad kolem — sedí mimo maskovanou scénu, aby nevybledla */
.pizza-kolo__napoveda {
  position: absolute;
  top: 6px;
  right: 0;
  z-index: 5;
  max-width: 190px;
  text-align: right;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .04em;
}
.pizza-kolo__napoveda::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: 10px 0 0 auto;
  background: var(--gold);
}
@media (max-width: 900px) {
  .pizza-kolo__napoveda { position: static; max-width: none; text-align: left; margin-bottom: 10px; }
  .pizza-kolo__napoveda::after { margin-left: 0; }
}

/* ---------- příplatkové ingredience na pizzu ---------- */
.pripl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  row-gap: 26px;
}
.pripl {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 18px;
  align-items: start;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.pripl__cena {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--gold);
  white-space: nowrap;
}
.pripl__seznam {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.75;
}
@media (max-width: 900px) {
  .pripl-grid { grid-template-columns: 1fr; column-gap: 0; }
}

/* ================= UBYTOVÁNÍ ================= */
.ubyt-uvod { padding: 40px 0 90px; }
.ubyt-uvod .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.ubyt-uvod__foto img { width: 100%; height: 440px; object-fit: cover; border-radius: 3px; }
.ubyt-uvod__text h2 { margin-bottom: 18px; }
.ubyt-uvod__text p { color: var(--muted); font-size: 15.5px; line-height: 1.9; margin-bottom: 30px; }

.pokoje { padding: 90px 0 100px; background: var(--bg-soft); }
.pokoje__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; margin-top: 54px; }
.pokoj { display: flex; flex-direction: column; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 8px 30px rgba(74,52,28,.06); }
.pokoj img { width: 100%; height: 300px; object-fit: cover; }
.pokoj__telo { padding: 28px 30px 32px; display: flex; flex-direction: column; flex: 1; }
.pokoj__pocet {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.pokoj__telo h3 { font-family: var(--serif); font-size: 27px; font-weight: 400; margin-bottom: 12px; }
.pokoj__telo p { color: var(--muted); font-size: 14.5px; line-height: 1.75; flex: 1; margin-bottom: 20px; }
.pokoj__cena { font-family: var(--serif); font-size: 24px; color: var(--text); }
.pokoj__cena small { font-family: var(--sans); font-size: 13px; color: var(--muted); }

/* karta je klikací, tlačítka Detail + Rezervovat */
.pokoj { cursor: pointer; transition: box-shadow .3s, transform .3s; }
.pokoj:hover { box-shadow: 0 16px 44px rgba(74,52,28,.13); transform: translateY(-3px); }
.pokoj__akce { display: flex; gap: 10px; margin-top: 18px; }
.pokoj__akce .btn { flex: 1; padding: 11px 12px; font-size: 14px; text-align: center; }

/* modál s detailem pokoje (galerie fotek) */
.pokoj-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(20,14,8,.72);
}
.pokoj-modal[hidden] { display: none; }
.pokoj-modal__panel {
  position: relative;
  width: 100%; max-width: 1160px; max-height: 92vh;
  background: var(--bg); border-radius: 10px; overflow: hidden;
  display: grid; grid-template-columns: 1.25fr .75fr;
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
}
.pokoj-modal__foto { position: relative; background: #14100a; min-height: 460px; }
/* contain, ne cover — fotky pokojů jsou na výšku a cover by z nich uřízl
   strop i podlahu; tmavé pozadí kolem vypadá záměrně */
.pokoj-modal__foto img { width: 100%; height: 100%; max-height: 90vh; object-fit: contain; display: block; }
.pokoj-modal__sip {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--text); font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .2s; z-index: 2;
}
.pokoj-modal__sip:hover { background: #fff; }
.pokoj-modal__sip--vlevo { left: 14px; }
.pokoj-modal__sip--vpravo { right: 14px; }
.pokoj-modal__pocitadlo {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.6); color: #fff; font-size: 12px; letter-spacing: .04em;
  padding: 5px 12px; border-radius: 99px; z-index: 2;
}
.pokoj-modal__zavrit {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--text); font-size: 24px; line-height: 1;
}
.pokoj-modal__zavrit:hover { background: #fff; }
.pokoj-modal__telo { padding: 48px 44px; display: flex; flex-direction: column; }
.pokoj-modal__telo h3 { font-family: var(--serif); font-size: 34px; font-weight: 400; margin: 8px 0 16px; }
.pokoj-modal__telo p { color: var(--muted); font-size: 15.5px; line-height: 1.85; margin-bottom: 24px; }
.pokoj-modal__telo .pokoj__cena { margin-bottom: 26px; }
.pokoj-modal__rez { margin-top: auto; text-align: center; }
@media (max-width: 760px) {
  .pokoj-modal { padding: 0; }
  .pokoj-modal__panel {
    grid-template-columns: 1fr; height: 100%; max-height: 100vh;
    border-radius: 0; overflow-y: auto;
  }
  .pokoj-modal__foto { min-height: 46vh; }
}

.vybaveni { padding: 90px 0 100px; background: var(--brown); }
.vybaveni__grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 40px; margin-top: 54px; }
.vybaveni__grid svg { width: 40px; height: 40px; stroke: var(--gold); fill: none; stroke-width: 1.3; margin-bottom: 16px; }
.vybaveni__grid h3 { font-family: var(--serif); font-size: 21px; font-weight: 400; margin-bottom: 8px; }
.vybaveni__grid p { color: var(--muted); font-size: 14px; line-height: 1.7; }

.cenik { padding: 95px 0 100px; }
.cenik__platnost { max-width: 560px; margin-inline: auto; }
.cenik__tabulka { max-width: 760px; margin: 50px auto 0; }
.cenik__radek {
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px 2px; border-bottom: 1px solid var(--line);
}
.cenik__nazev { font-size: 16px; }
.cenik__nazev small { color: var(--muted); font-size: 13px; }
.cenik__tecky { flex: 1; min-width: 18px; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.cenik__cena { font-family: var(--serif); font-size: 19px; color: var(--gold); white-space: nowrap; }
.cenik__cena--zdarma { font-size: 15px; font-family: var(--sans); }

.ubyt-rezervace { padding: 0 0 100px; }

@media (max-width: 900px) {
  .ubyt-uvod .container { grid-template-columns: 1fr; gap: 34px; }
  /* fotky v jednom sloupci se vejdou celé — pevná výška s object-fit: cover
     je ořezávala, hlavně ty na výšku */
  .ubyt-uvod__foto img { height: auto; }
  .pokoje__grid { grid-template-columns: 1fr; gap: 26px; }
  .pokoj img { height: auto; }
  .vybaveni__grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ================= GALERIE ================= */
.gal__filtr { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 36px; }
.gal__chip {
  padding: 9px 20px; border: 1px solid var(--line); border-radius: 99px;
  background: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; letter-spacing: .04em;
  color: var(--muted); transition: all .25s;
}
.gal__chip:hover { border-color: var(--gold); color: var(--text); }
.gal__chip[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: #fff; }

.gal { padding: 50px 0 100px; }
.gal__mrizka { columns: 3; column-gap: 18px; }
.gal__kus {
  display: block; width: 100%; padding: 0; margin: 0 0 18px;
  border: none; background: none; cursor: pointer;
  position: relative; overflow: hidden; border-radius: 3px;
  break-inside: avoid;
}
.gal__kus img { width: 100%; height: auto; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.gal__kus:hover img { transform: scale(1.045); }
.gal__popis {
  position: absolute; inset: auto 0 0 0;
  padding: 30px 16px 14px;
  background: linear-gradient(transparent, rgba(28,20,13,.82));
  color: #fff; font-size: 12.5px; text-align: left;
  opacity: 0; transition: opacity .3s;
}
.gal__kus:hover .gal__popis, .gal__kus:focus-visible .gal__popis { opacity: 1; }
.gal__kus[hidden] { display: none; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(22,15,9,.95);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.lightbox[hidden] { display: none; }
.lightbox__obsah { max-width: 1100px; max-height: 100%; text-align: center; }
.lightbox__obsah img { max-width: 100%; max-height: 78vh; object-fit: contain; margin: 0 auto; border-radius: 3px; }
.lightbox__obsah figcaption { color: #d8ccb9; font-size: 13.5px; margin-top: 16px; letter-spacing: .04em; }
.lightbox__zavrit, .lightbox__sip {
  position: absolute; background: none; border: none; cursor: pointer;
  color: #fff; opacity: .7; transition: opacity .25s; line-height: 1;
}
.lightbox__zavrit:hover, .lightbox__sip:hover { opacity: 1; }
.lightbox__zavrit { top: 22px; right: 30px; font-size: 40px; }
.lightbox__sip { top: 50%; transform: translateY(-50%); font-size: 60px; padding: 10px 20px; }
.lightbox__sip--vlevo { left: 10px; }
.lightbox__sip--vpravo { right: 10px; }

@media (max-width: 1000px) { .gal__mrizka { columns: 2; } }
@media (max-width: 640px) {
  .gal__mrizka { columns: 1; }
  .lightbox { padding: 16px; }
  .lightbox__sip { font-size: 40px; padding: 6px 10px; }
}


/* ---------- mobilní navigace (hamburger) ---------- */
.nav__prepinac { display: none; }

@media (max-width: 900px) {
  .nav, .nav.scrolled { padding: 18px 0; }
  .nav__logo { font-size: 28px; white-space: nowrap; }

  .nav__prepinac {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
    width: 48px;
    height: 48px;
    padding: 0;
    margin-right: -8px;
    background: none;
    border: none;
    cursor: pointer;
  }
  .nav__prepinac span {
    display: block;
    width: 28px;
    height: 1.5px;
    background: var(--text);
    transition: transform .3s, opacity .3s;
  }
  .nav__prepinac[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .nav__prepinac[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__prepinac[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

  /* odkazy se vysunou pod lištu místo lámání do několika řádků */
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 4px 40px 22px;
    background: var(--page-bg);
    box-shadow: 0 20px 40px rgba(74,52,28,.12);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
  }
  .nav__links.otevreno { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a {
    padding: 15px 0;
    font-size: 17px;
    opacity: 1;
    border-bottom: 1px solid var(--line);
  }
  .nav__links a:last-child { border-bottom: none; }
}

/* ================= KONTAKT ================= */
.kontakt { padding: 40px 0 90px; }
.kontakt__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.kontakt__karta {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 38px 40px 34px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(74,52,28,.05);
}
.kontakt__stitek {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.kontakt__karta h2 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 16px;
}
.kontakt__tel {
  display: block;
  font-family: var(--serif);
  font-size: 38px;
  letter-spacing: .03em;
  margin-bottom: 16px;
  transition: color .3s;
}
.kontakt__tel:hover { color: var(--gold); }
.kontakt__karta p { color: var(--muted); font-size: 14.5px; line-height: 1.8; }

/* Restaurace vs. hotel na první pohled — barevné odlišení platí i na desktopu,
   dřív bylo jen v mobilní verzi. */
.kontakt__karta--restaurace {
  background: #FDF1EA;                        /* teplá oranžová */
  border-left: 5px solid var(--gold);
}
.kontakt__karta--hotel {
  background: #F1EEE3;                        /* klidná béžová */
  border-left: 5px solid var(--brown);
}
.kontakt__karta--restaurace .kontakt__stitek,
.kontakt__karta--hotel .kontakt__stitek {
  color: #fff;
  padding: 5px 13px;
  border-radius: 999px;
  letter-spacing: .16em;
}
.kontakt__karta--restaurace .kontakt__stitek { background: var(--gold); }
.kontakt__karta--hotel .kontakt__stitek { background: var(--brown); }
.kontakt__karta--restaurace .kontakt__tel { color: var(--gold-tmava); }
.kontakt__karta--hotel .kontakt__tel { color: var(--brown); }
.kontakt__karta--restaurace .kontakt__tel:hover { color: var(--gold); }
.kontakt__karta--hotel .kontakt__tel:hover { color: var(--gold-tmava); }

.kontakt__radka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 50px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}
.kontakt__pol h3 {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
  margin-bottom: 12px;
}
.kontakt__pol p { font-size: 16px; line-height: 1.75; }
.kontakt__pol a { transition: color .3s; }
.kontakt__pol a:hover { color: var(--gold); }

/* otevírací doba */
.doba { padding: 90px 0 100px; background: var(--brown); }
.doba__tabulka { max-width: 640px; margin: 46px auto 0; }
.doba__radek {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
}
.doba__radek:last-child { border-bottom: none; }
.doba__dny { font-size: 16px; }
.doba__tecky { flex: 1; min-width: 18px; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.doba__cas { font-family: var(--serif); font-size: 19px; color: var(--gold); white-space: nowrap; }

/* kde nás najdete */
.mapa { padding: 95px 0 100px; }
.mapa__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.mapa__text h2 { margin: 6px 0 18px; }
.mapa__text p { color: var(--muted); font-size: 15.5px; line-height: 1.9; margin-bottom: 30px; }
.mapa__akce { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.mapa__nahled {
  position: relative;
  display: block;
  border-radius: 4px;
  overflow: hidden;
}
/* vložená Google mapa s označeným místem */
.mapa__ramec {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}
.mapa__nahled img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.mapa__nahled:hover img { transform: scale(1.04); }
.mapa__pin {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 99px;
  background: rgba(255,255,255,.94);
  color: var(--text);
  font-size: 13.5px;
  box-shadow: 0 8px 26px rgba(74,52,28,.18);
}
.mapa__pin svg { width: 17px; height: 17px; stroke: var(--gold); fill: none; stroke-width: 1.5; }

/* tipy v okolí */
.okoli { padding: 0 0 100px; }
/* Tipy do okolí — dvě řady po čtyřech kolečkách, každé vede na Kudy z nudy. */
.okoli__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 28px;
  margin: 48px 0 0;
  padding: 0;
}
.okoli__odkaz {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.okoli__kruh {
  display: block;
  width: 100%;
  max-width: 178px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(74,52,28,.14);
  /* prstenec se objeví až při najetí — v klidu kolečko nerámuje */
  outline: 0 solid var(--gold);
  outline-offset: 5px;
  transition: transform .35s cubic-bezier(.22,.72,.2,1), box-shadow .35s ease, outline-width .25s ease;
}
.okoli__kruh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.okoli__nazev {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: .02em;
  transition: color .3s;
}
.okoli__misto {
  font-family: var(--sans);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.okoli__odkaz:hover .okoli__kruh,
.okoli__odkaz:focus-visible .okoli__kruh {
  transform: scale(1.07);
  box-shadow: 0 14px 34px rgba(74,52,28,.22);
  outline-width: 2px;
}
.okoli__odkaz:hover .okoli__nazev,
.okoli__odkaz:focus-visible .okoli__nazev { color: var(--gold-tmava); }
.okoli__odkaz:focus-visible { outline: none; }
.okoli__zdroj {
  margin-top: 42px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}
.okoli__zdroj a { text-decoration: underline; text-underline-offset: 2px; }
.okoli__zdroj a:hover { color: var(--gold-tmava); }
@media (prefers-reduced-motion: reduce) {
  .okoli__kruh { transition: box-shadow .2s ease, outline-width .2s ease; }
  .okoli__odkaz:hover .okoli__kruh { transform: none; }
}

@media (max-width: 900px) {
  .kontakt__grid { grid-template-columns: 1fr; gap: 20px; }
  .kontakt__karta { padding: 30px 26px; }
  .kontakt__tel { font-size: 31px; }
  .kontakt__radka { grid-template-columns: 1fr; gap: 28px; }
  .mapa__inner { grid-template-columns: 1fr; gap: 34px; }
  .mapa__nahled img { height: 280px; }
  .mapa__ramec { height: 300px; }
  .okoli__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; }
}

/* ---------- polévky ve dvou sloupcích: vlevo fotka, vpravo seznam ---------- */
.polevky-dvojice {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 48px;
  align-items: center;
}
.polevky-foto { display: flex; justify-content: center; }
.polevky-foto img {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 34px rgba(74,52,28,.24));
}
@media (max-width: 780px) {
  .polevky-dvojice { grid-template-columns: 1fr; gap: 26px; }
  .polevky-foto img { max-height: 240px; }
}

/* ---------- sekce jídel: fotka částečně vyjíždí ze strany ven z okna ---------- */
.karta__cara { display: none; }                 /* dělicí čára pryč u všech sekcí */
.karta__nadpis { margin-bottom: 22px; }         /* mezera místo čáry */

.blok-foto {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--blok-min, 350px);
}
.blok-foto--vpravo { justify-content: flex-start; }   /* text vlevo, fotka vpravo */
.blok-foto--vlevo  { justify-content: flex-end; }     /* text vpravo, fotka vlevo */
.blok-foto__text { width: min(480px, 42%); }

.blok-foto__foto {
  position: absolute;
  top: 50%;
  pointer-events: none;
}
.blok-foto--vpravo .blok-foto__foto {
  right: calc(50% - 50vw);              /* pravá hrana fotky u pravé hrany okna */
  transform: translate(var(--foto-x, 15%), -50%);   /* kladné = víc za okraj vpravo */
}
.blok-foto--vlevo .blok-foto__foto {
  left: calc(50% - 50vw);               /* levá hrana fotky u levé hrany okna */
  transform: translate(var(--foto-x, -15%), -50%);  /* zápornější = víc za okraj vlevo */
}
.blok-foto__foto img {
  width: var(--foto-w, 460px);
  max-width: none;
  height: auto;
  filter: drop-shadow(0 22px 40px rgba(74,52,28,.28));
}
/* varianta: fotka vycentrovaná ve svém sloupci (ne vyjetá za okraj) */
.blok-foto--stred { gap: 42px; }   /* kousek odsazení fotky od textu */
.blok-foto--stred .blok-foto__foto {
  position: static; transform: none;
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}
.blok-foto--stred.blok-foto--vlevo .blok-foto__foto { order: -1; }   /* fotka vlevo od textu */
.blok-foto--stred .blok-foto__foto img { width: var(--foto-w, 300px); max-width: 100%; height: auto; }

/* varianta: fotka pod seznamem, na plnou šířku (např. omáčky) */
.blok-foto--pod { display: block; min-height: 0; }
.blok-foto--pod .blok-foto__text { width: auto; }
.blok-foto--pod .blok-foto__foto {
  position: static; transform: none; margin: 26px auto 0;
}
.blok-foto--pod .blok-foto__foto img {
  width: 100%; max-width: 720px; margin: 0 auto;
}

@media (max-width: 900px) {
  /* na mobilu fotka ze strany nevyjíždí — jde pod text a je vidět celá */
  .blok-foto { display: block; min-height: 0 !important; }
  .blok-foto__text { width: auto; }
  .blok-foto__foto,
  .blok-foto--vlevo .blok-foto__foto,
  .blok-foto--vpravo .blok-foto__foto,
  .blok-foto--stred .blok-foto__foto {
    position: static; transform: none; margin: 22px auto 0;
    display: block; flex: none;
  }
  .blok-foto__foto img,
  .blok-foto--stred .blok-foto__foto img {
    width: auto; max-width: min(300px, 82vw); max-height: 250px; margin: 0 auto;
  }
}


/* ============================================================
   RESPONZIVNÍ DOLADĚNÍ — pouze tablet a mobil
   Desktop zůstává beze změny.
   ============================================================ */

/* pojistka proti vodorovnému scrollu (neviditelná, řeší přetékání na mobilu) */
html { overflow-x: clip; }

/* ---------- tablet a menší (≤ 960 px) ---------- */
@media (max-width: 960px) {
  /* patička: dva sloupce vedle sebe (odkazy | kontakt) */
  .footer--hlavni .footer__inner { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .footer-wrap .footer__inner { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .footer__contacts p, .footer__contacts a { overflow-wrap: anywhere; }
  .footer--hlavni .footer__socials { grid-column: 1 / -1; }
  .footer__rez-nadpis { font-size: clamp(34px, 7.5vw, 56px); }
  .footer__tel-grid { gap: 34px; }
  .sluzba img { height: 280px; }
}

/* ---------- mobil (≤ 640 px) ---------- */
@media (max-width: 640px) {
  /* nápis přes fotku posezení se vejde na displej */
  .garden__label {
    display: grid; place-items: center; line-height: 1.25;
    font-size: clamp(30px, 8vw, 64px); text-align: center; padding: 0 20px;
  }

  /* užší okraje, ať obsah dýchá */
  .container { padding: 0 22px; }
  .nav__links { padding-left: 22px; padding-right: 22px; }

  /* typografická škála */
  .h-serif { font-size: 34px; }
  .menu__head .h-serif { font-size: 38px; }
  .listek .h-serif { font-size: 36px; }
  .h-sans { font-size: 30px; }
  .h-serif-sm { font-size: 25px; }
  .story__title { font-size: 36px; }
  .kicker { font-size: 19px; }
  .kicker--center { font-size: 21px; }

  /* menší vertikální rytmus sekcí */
  .menu { padding: 70px 0 40px; }
  .menu__head { margin-bottom: 46px; }

  /* řádky s talíři: bez desktopových posunů, menší talíř i nadpis */
  .plate--weekly, .plate--offer, .plate--pizza { transform: none; }
  .plate__spin,
  .plate--weekly .plate__spin,
  .plate--offer .plate__spin,
  .plate--pizza .plate__spin { width: 70%; }
  .menu__info { transform: none; }
  .menu__info h3 { font-size: 30px; margin-bottom: 12px; }
  .menu__info p { font-size: 15.5px; margin-bottom: 22px; }
  .menu__row { gap: 6px; margin-bottom: 34px; }
  .menu__intro { font-size: 15.5px; }
  .sluzby { padding: 70px 0 80px; }
  .sluzby__head { margin-bottom: 44px; }
  .sluzby__grid { gap: 44px; }
  .story { padding: 70px 0; }
  .story__inner { gap: 44px; }
  .sluzba img { height: 230px; margin-bottom: 22px; }
  .sluzba h3 { font-size: 25px; }
  .testimonials { padding-bottom: 20px; }
  .cenik { padding: 65px 0 70px; }
  .vybaveni { padding: 65px 0 75px; }
  .pokoje { padding: 65px 0 75px; }
  .ubyt-uvod { padding: 20px 0 60px; }
  /* výška zrušena — fotka se má ukázat celá, ne oříznutá */
  .ubyt-uvod__foto img { height: auto; }
  .karta { padding: 40px 0 16px; }
  .karta__blok { margin-bottom: 88px; }   /* větší odstup mezi sekcemi */
  .karta__nadpis { font-size: 25px; }
  .tyden { padding-top: 0; }
  .listek { padding: 118px 0 28px; }

  /* hlavní patička */
  .footer--hlavni { padding: 80px 0 40px; }
  .footer__rez { padding-bottom: 54px; }
  .footer__tel { font-size: 29px; }
  .footer__tel__kdo { font-size: 18px; }
  .footer__rez-btn { font-size: 15.5px; padding: 15px 36px; }

  /* jídelní lístek: položky */
  .polozka__nazev { font-size: 16.5px; }
  .polozka__cena { font-size: 14px; }
  .den__nazev { font-size: 23px; }
  .celotyden__nadpis { font-size: 23px; }

  /* pokoje: karty a modál */
  .pokoj__telo { padding: 22px 22px 26px; }
  .pokoj__telo h3 { font-size: 24px; }
  .pokoj-modal__telo { padding: 28px 22px; }
  .pokoj-modal__telo h3 { font-size: 27px; }

  /* recenze: karta příjemné šířky */
  .g-card { flex-basis: 86vw; }
}

/* ============================================================
   MOBIL — rozvržení jen pro malé displeje (≤ 900 px).
   Desktop se těmito pravidly nedotýká.
   ============================================================ */
/* ============================================================
   MOBIL — obsah bez prolínání (≤ 900 px)
   Odhalovací animace prolíná celou sekci z neviditelné. Během toho
   prolnutí prohlížeč skládá průhledné fotky přes pozadí ve vlastní
   vrstvě a kolem nich se na okamžik objevuje jiný odstín. Na telefonu
   se obsah proto zobrazí rovnou, natvrdo. Desktop animaci zachovává.
   ============================================================ */
@media (max-width: 960px) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Safari na iOS vykresluje prvek s filtrem — nebo s animací, která má
     forwards, a tím zůstává trvale aktivní — do vlastní kompozitní vrstvy.
     Tu pak rasterizuje proti neprůhlednému podkladu, takže se obdélníkový
     obrys vrstvy prozradí jako světlejší rámeček kolem fotky či tlačítka.
     Chrome na Androidu skládá vrstvy jinak, proto se to projeví jen na
     iPhonu a iPadu. Na mobilu proto žádné vrstvy nevytváříme; stín je
     u zmenšených fotek stejně sotva znát. Desktop si filtry i animace
     ponechává beze změny. */
  .hero__dish,
  .hero__pozadi,
  .plate__spin,
  .polevky-foto img,
  .blok-foto__foto img,
  .surovina {
    -webkit-filter: none;
    filter: none;
    will-change: auto;
  }

  .hero__title .line i { animation: none; transform: none; }
  .hero__btn { animation: none; opacity: 1; }

  .blok-foto__foto { background: none; will-change: auto; }
}

/* ============================================================
   HOMEPAGE na tabletu i telefonu (≤ 960 px)
   Hranice je 960 px schválně — na téhle šířce se rozvržení láme
   do jednoho sloupce, takže tady musí začít i přeskládání hero
   a centrování. Dřív to bylo až od 900 px a v pásmu 901–960
   (iPad) zůstávaly texty i tlačítko u levého kraje.
   Desktop nad 960 px se tím nemění.
   ============================================================ */
@media (max-width: 960px) {

  /* ---------- HERO: nadpis → celý talíř → tlačítko ---------- */
  .hero {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    padding: 126px 22px 48px;
  }
  /* wrappery se rozpustí, aby šlo prvky přeskládat (desktop je nechává být) */
  .hero__inner, .hero__text { display: contents; }
  .hero__title { order: 1; text-align: center; max-width: 100%; }
  .hero__pozadi {
    order: 2;
    position: static;
    right: auto; left: auto; top: auto; bottom: auto;
    transform: none;
    width: min(74vw, 420px);
    margin: 26px auto 0;
    opacity: 1;
  }
  .hero__btn { order: 3; margin-top: 32px; }

  /* ---------- HOMEPAGE: první tři talíře na střed ---------- */
  .menu__info { text-align: center; }
  .menu__info h3, .menu__info p { text-align: center; }
}

@media (max-width: 900px) {


  /* ---------- MENU: nadpis na jedné straně, fotka na druhé ---------- */
  .blok-foto {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "nadpis foto"
      "seznam seznam";
    align-items: center;
    column-gap: 16px;
    min-height: 0 !important;
  }
  .blok-foto__text { display: contents; }
  .blok-foto .karta__nadpis {
    grid-area: nadpis;
    margin-bottom: 0;
    font-size: clamp(21px, 6.2vw, 30px);
    line-height: 1.15;
  }
  .blok-foto .karta__grid { grid-area: seznam; margin-top: 16px; }
  /* poznámky a lahvová vína: každý prvek dostane vlastní řádek pod seznamem
     (společná pojmenovaná oblast by je naskládala přes sebe) */
  .blok-foto .karta__pozn,
  .blok-foto .karta__bezlepek,
  .blok-foto .vina__uvod,
  .blok-foto .vina,
  .blok-foto .vina__pozn { grid-area: auto; grid-column: 1 / -1; }

  .blok-foto__foto,
  .blok-foto--vlevo .blok-foto__foto,
  .blok-foto--vpravo .blok-foto__foto,
  .blok-foto--stred .blok-foto__foto {
    grid-area: foto;
    position: static;
    transform: none;
    margin: 0;
    display: block;
    flex: none;
  }
  /* fotka se vejde do rámečku celá — bez ořezu a deformace
     (pevná šířka + max-height dřív vysoké fotky mačkala) */
  .blok-foto__foto img,
  .blok-foto--stred .blok-foto__foto img {
    width: auto;
    height: auto;
    max-width: min(38vw, 200px);
    max-height: 190px;
    object-fit: contain;
    margin: 0;
  }

  /* fotka vlevo → nadpis vpravo (střídání podle tříd z desktopu) */
  .blok-foto--vlevo {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "foto nadpis"
      "seznam seznam";
  }
  .blok-foto--vlevo .karta__nadpis { text-align: right; }

  /* Sloupec s fotkou si drží šířku a nadpis se do zbytku vejde.
     Bez toho dlouhé slovo v nadpisu (Nealkoholické) sloupec s fotkou
     stlačilo a obrázek pak přetekl přes text. */
  .blok-foto__foto { min-width: min(38vw, 200px); }
  .blok-foto .karta__nadpis { min-width: 0; overflow-wrap: break-word; }

  /* Nejdelší nadpis v lístku — menší písmo a užší fotka, aby se
     „NEALKOHOLICKÉ" vešlo na řádek celé a nelámalo se uprostřed slova. */
  #nealko .blok-foto__foto { min-width: min(30vw, 112px); }
  #nealko .blok-foto__foto img { max-width: min(30vw, 112px); }

  /* „Káva a horké nápoje" se lámala na tři řádky — o kus užší fotka
     jí uvolní místo na dva, velikost písma zůstává jednotná. */
  #kava .blok-foto__foto { min-width: min(32vw, 124px); }
  #kava .blok-foto__foto img { max-width: min(32vw, 124px); }

  /* „Něco k pivu a vínu" se lámalo na tři řádky. Fotka zůstává stejně velká
     jako u ostatních sekcí, na dva řádky ho srovná jen menší písmo. */

  /* aby střídání navazovalo i na přelomu jídla → nápoje */
  #pivo .blok-foto {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "foto nadpis"
      "seznam seznam";
  }
  #pivo .karta__nadpis { text-align: right; }
}

/* ---- mobil: opravy uvnitř sekcí (≤ 900 px) ---- */
@media (max-width: 900px) {

  /* Masa a steaky mají podsekci Teplé omáčky — ta patří POD seznam mas,
     ne do mřížky nadpis/fotka (jinak by se překryly). */
  .blok-foto .karta__nadpis--sub,
  .blok-foto .karta__nadpis--sub ~ .karta__grid {
    grid-area: auto;
    grid-column: 1 / -1;
  }
  .blok-foto--vlevo .karta__nadpis--sub,
  .blok-foto--vpravo .karta__nadpis--sub,
  .blok-foto .karta__nadpis--sub {
    text-align: left;
    margin-top: 30px;
    font-size: clamp(18px, 5.2vw, 25px);
  }
  .blok-foto .karta__nadpis--sub ~ .karta__grid { margin-top: 14px; }

  /* body s overflow-x: hidden je scroll kontejner a ruší position: sticky;
     clip ořízne stejně, ale kontejner nevytváří (jen mobil, desktop beze změny) */
  body { overflow-x: clip; }

  /* Pizza: kolo se přilepí pod lištu a nabídka pizz se pod ním scrolluje.
     Blok místo mřížky — ve sloupcové mřížce nemá sticky prvek kam „jezdit". */
  .pizza-vyber { display: block; }
  .pizza-seznam { margin-top: 16px; }
  .pizza-kolo {
    position: sticky;
    top: 74px;            /* pod vyšší lištu; rodič má transform, ten sticky posouvá o ~36 px */
    z-index: 2;
    height: 300px;
    background: var(--page-bg);
    padding-bottom: 6px;
  }
  /* jemné dokončení spodní hrany, ať text „nemizí" ostře */
  .pizza-kolo::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -18px;
    height: 18px;
    background: linear-gradient(180deg, var(--page-bg), transparent);
    pointer-events: none;
  }
  .pizza-kolo__kus { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
  /* kolo jezdí vodorovně → i změkčení okrajů musí být vodorovné */
  .pizza-kolo__scena {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
  .pizza-kolo__napoveda { display: none; }   /* na mobilu překáží ve sticky pruhu */
}

/* ============================================================
   MOBIL — stránka Ubytování (≤ 900 px). Desktop beze změny.
   ============================================================ */
@media (max-width: 900px) {

  /* ---- hlavička stránky ---- */
  .stranka-ubytovani .listek .h-serif { font-size: 42px; }
  .stranka-ubytovani .listek__intro { font-size: 17px; line-height: 1.8; }
  .stranka-ubytovani .kicker { font-size: 21px; }

  /* ---- „Klid v centru města" na střed ---- */
  .ubyt-uvod__text { text-align: center; }
  .ubyt-uvod__text h2 { font-size: 30px; }
  .ubyt-uvod__text p { font-size: 17px; line-height: 1.85; }

  /* ---- pokoje: větší názvy i popisy ---- */
  .stranka-ubytovani .sluzby__head .h-sans { font-size: 34px; }
  .stranka-ubytovani .sluzby__head p { font-size: 17px; line-height: 1.8; }
  .pokoj__pocet { font-size: 15px; letter-spacing: .14em; margin-bottom: 12px; }
  .pokoj__telo h3 { font-size: 28px; }
  .pokoj__telo p { font-size: 16.5px; line-height: 1.8; }
  .pokoj__cena { font-size: 27px; }
  .pokoj__cena small { font-size: 15px; }
  .pokoj__akce .btn { font-size: 15.5px; padding: 13px 14px; }

  /* ---- „Co u nás najdete": dva sloupce (3 řádky × 2) ---- */
  .vybaveni__grid { grid-template-columns: 1fr 1fr; gap: 34px 22px; }
  .vybaveni__grid svg { width: 34px; height: 34px; margin-bottom: 12px; }
  .vybaveni__grid h3 { font-size: 19px; }
  .vybaveni__grid p { font-size: 14.5px; line-height: 1.7; }

  /* ---- ceník ---- */
  .cenik__platnost { font-size: 16px; line-height: 1.8; }
  .cenik__nazev { font-size: 17px; }
  .cenik__nazev small { font-size: 14px; }
  .cenik__cena { font-size: 20px; }
  .cenik__cena--zdarma { font-size: 16px; }

  /* ---- rezervace dole ---- */
  .stranka-ubytovani .rezervace-pozn__nadpis { font-size: 32px; }
  .stranka-ubytovani .rezervace-pozn p { font-size: 16.5px; line-height: 1.85; }

  /* ---- ikonky u „Co u nás najdete" na střed nad textem ---- */
  .vybaveni__grid li { text-align: center; }
  .vybaveni__grid svg { margin-left: auto; margin-right: auto; }
}

/* ============================================================
   MOBIL — stránka Kontakt (≤ 900 px). Desktop beze změny.
   ============================================================ */
@media (max-width: 900px) {

  /* každá kartička má vlastní barvu a výrazný barevný pruh */
  .kontakt__karta {
    border: none;
    border-left: 6px solid;
    border-radius: 10px;
    padding: 26px 24px 28px;
    box-shadow: 0 10px 26px rgba(74,52,28,.10);
  }
  .kontakt__karta--restaurace {
    background: #FDF1EA;                /* teplá oranžová */
    border-left-color: var(--gold);
  }
  .kontakt__karta--hotel {
    background: #F1EEE3;                /* klidná béžová */
    border-left-color: var(--brown);
  }

  /* štítek jako výrazný odznak — na první pohled je jasné, co je co */
  .kontakt__stitek {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .14em;
    color: #fff;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 16px;
  }
  .kontakt__karta--restaurace .kontakt__stitek { background: var(--gold); }
  .kontakt__karta--hotel .kontakt__stitek { background: var(--brown); }

  .kontakt__karta h2 { font-size: 21px; margin-bottom: 14px; }
  .kontakt__karta p { font-size: 15.5px; }
  .kontakt__karta--restaurace .kontakt__tel { color: var(--gold-tmava); }
  .kontakt__karta--hotel .kontakt__tel { color: var(--brown); }

  /* ---- e-mail / adresa / fakturační údaje vedle sebe na jednom řádku ---- */
  .kontakt__radka {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 34px;
    padding-top: 30px;
  }
  .kontakt__pol h3 { font-size: 9.5px; letter-spacing: .12em; margin-bottom: 8px; }
  .kontakt__pol p {
    font-size: 12.5px;
    line-height: 1.6;
    overflow-wrap: anywhere;   /* dlouhý e-mail se zalomí místo přetečení */
  }
}


/* ============================================================
   TYPOGRAFIE — jednotná škála pro celý web (mobil ≤ 900 px).
   Vše o ~3 px větší a sjednocené: stejná úroveň nadpisu má
   všude stejnou velikost. Desktop se nemění.
   Blok je poslední v souboru, aby přebil dílčí pravidla výše.
   ============================================================ */
@media (max-width: 900px) {

  /* ---------- NADPISY ---------- */
  /* 1) hlavní nadpis stránky */
  .h-serif,
  .listek .h-serif,
  .stranka-ubytovani .listek .h-serif,
  .menu__head .h-serif { font-size: 40px; }

  /* 2) nadpis velké sekce */
  .h-sans,
  .stranka-ubytovani .sluzby__head .h-sans,
  .story__title,
  .rezervace-pozn__nadpis,
  .stranka-ubytovani .rezervace-pozn__nadpis { font-size: 33px; }
  .footer__rez-nadpis { font-size: clamp(33px, 8vw, 56px); }

  /* 3) nadpis karty / bloku */
  .h-serif-sm,
  .menu__info h3,
  .sluzba h3,
  .pokoj__telo h3,
  .pokoj-modal__telo h3,
  .ubyt-uvod__text h2 { font-size: 28px; }

  /* 4) nadpis sekce v lístku a dnu */
  .karta__nadpis,
  .den__nazev,
  .celotyden__nadpis { font-size: 26px; }
  /* jedna velikost pro všechny nadpisy sekcí — i pro ty nejdelší */
  .blok-foto .karta__nadpis { font-size: 21px; letter-spacing: .05em; }
  .blok-foto .karta__nadpis--sub { font-size: clamp(20px, 5.8vw, 24px); }

  /* 5) malý nadpis */
  .vybaveni__grid h3,
  .kontakt__karta h2,
  .okoli__nazev,
  .story__tym-nadpis,
  .okoli__nadpis { font-size: 22px; }
  .vino__nazev { font-size: 20px; }

  /* ozdobný kicker nad nadpisem */
  .kicker,
  .stranka-ubytovani .kicker { font-size: 22px; }
  .kicker--center { font-size: 24px; }

  /* ---------- TEXTY ---------- */
  /* hlavní odstavce */
  .listek__intro,
  .stranka-ubytovani .listek__intro,
  .menu__intro,
  .menu__info p,
  .sluzby__head p,
  .stranka-ubytovani .sluzby__head p,
  .sluzba p,
  .story__desc,
  .pokoj__telo p,
  .pokoj-modal__telo p,
  .ubyt-uvod__text p,
  .kontakt__karta p,
  .mapa__text p,
  .rezervace-pozn p,
  .stranka-ubytovani .rezervace-pozn p,
  .cenik__platnost,
  .tyden__pozn-polevka { font-size: 18px; line-height: 1.8; }
  /* popup s aktualitou — o něco menší než hlavní odstavce */
  .aktuality__text { font-size: 17.5px; line-height: 1.7; }

  /* podtexty a popisky */
  .vybaveni__grid p,
  .polozka__popis,
  .g-card__text,
  .pizza-polozka__popis,
  .okoli__misto,
  .story__tym-popis,
  .vina__uvod,
  .vino__popis,
  .alergeny { font-size: 16px; line-height: 1.7; }

  /* drobné poznámky a údaje o vínech */
  .karta__bezlepek,
  .vina__pozn { font-size: 15px; line-height: 1.65; }
  .vino__param { font-size: 14px; }
  .vino__druh { font-size: 13px; }
  .vino__objem { font-size: 16px; }
  .story__jmena li { font-size: 15.5px; padding: 8px 17px; }
  .story__tym { max-width: none; }

  /* ---------- POLOŽKY LÍSTKU A CENÍKU ---------- */
  .polozka__nazev,
  .pizza-polozka__nazev { font-size: 18px; }
  .polozka__cena,
  .pizza-polozka__cena { font-size: 16px; }
  .cenik__nazev { font-size: 18px; }
  .cenik__nazev small { font-size: 15px; }
  .cenik__cena { font-size: 21px; }
  .cenik__cena--zdarma { font-size: 17px; }
  .doba__dny { font-size: 18px; }
  .doba__cas { font-size: 21px; }

  /* ---------- TELEFONY A CENY ---------- */
  .footer__tel { font-size: 32px; }
  .footer__tel__kdo { font-size: 20px; }
  .kontakt__tel { font-size: 33px; }
  .pokoj__cena { font-size: 29px; }
  .pokoj__cena small { font-size: 16px; }

  /* ---------- ŠTÍTKY A TLAČÍTKA ---------- */
  .pokoj__pocet { font-size: 15px; }
  .kontakt__stitek { font-size: 15px; }
  .aktuality__stitek { font-size: 14px; }
  .btn, .btn--sm,
  .pokoj__akce .btn,
  .footer__rez-btn,
  .rezervace-pozn__cta { font-size: 17px; }
  .gal__chip { font-size: 15px; }
  .nav__links a { font-size: 19px; }

  /* recenze */
  .g-card__name { font-size: 17px; }
  .g-card__date { font-size: 14px; }
  .g-souhrn strong { font-size: 21px; }
  .g-souhrn__pocet { font-size: 15px; }

  /* kontaktní řádka (tři sloupce) — o něco větší, ale ať se vejde */
  .kontakt__pol h3 { font-size: 12px; }
  .kontakt__pol p { font-size: 14px; }
}

/* ============================================================
   MOBIL — „Posezení U Apoštola": fotka přilepená v pozadí (≤ 900 px).
   background-attachment: fixed na mobilech nefunguje, proto fotku
   vykreslíme jako fixed pseudo-element a výřez ořízneme clip-path.
   Desktop si ponechává původní background-attachment: fixed.
   ============================================================ */
@media (max-width: 900px) {
  .garden__img-wrap {
    clip-path: inset(0);        /* udělá z výřezu rámec pro fixed potomka */
    background-image: none;     /* fotka se přesouvá do ::before */
    background-color: var(--brown);
  }
  .garden__img-wrap::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(rgba(38, 28, 18, .38), rgba(38, 28, 18, .38)),
      url("img/garden-interier.webp?v=i2");
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    z-index: 0;
  }
  .garden__label { z-index: 2; }   /* nápis nad fotkou */
}

/* ---------- časté dotazy ---------- */
.faq { padding: 20px 0 100px; }
.faq__hlava { margin-bottom: 40px; }
.faq__seznam { max-width: 760px; margin: 0 auto; }
.faq__polozka { border-bottom: 1px solid var(--line); }
.faq__polozka:first-child { border-top: 1px solid var(--line); }
.faq__otazka {
  font-family: var(--serif); font-size: 19px; line-height: 1.4;
  padding: 22px 40px 22px 0; cursor: pointer; position: relative;
  list-style: none; transition: color .25s;
}
.faq__otazka::-webkit-details-marker { display: none; }
.faq__otazka:hover { color: var(--gold-tmava); }
.faq__otazka:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
/* znaménko + se při otevření otočí na − */
.faq__otazka::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 1.5px;
  background: var(--gold); transform: translateY(-50%);
}
.faq__otazka::before {
  content: ""; position: absolute; right: 12px; top: 50%; width: 1.5px; height: 13px;
  background: var(--gold); transform: translateY(-50%); transition: opacity .25s, transform .25s;
}
.faq__polozka[open] .faq__otazka::before { opacity: 0; transform: translateY(-50%) rotate(90deg); }
.faq__odpoved {
  color: var(--muted); font-size: 15.5px; line-height: 1.85;
  margin: 0; padding: 0 44px 24px 0; max-width: 62ch;
}
@media (max-width: 900px) {
  .faq { padding: 10px 0 70px; }
  .faq__otazka { font-size: 21px; padding: 20px 38px 20px 0; }
  .faq__odpoved { font-size: 17px; padding-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__otazka, .faq__otazka::before { transition: none; }
}