/* ============================================================
   U Kašpárků — Penzion a Restaurace v Českém ráji
   Styl: „Pískovec a les" — teplý, tradiční, čitelný pro 50+
   ============================================================ */

:root {
  --bg:          #FBF8F1;   /* pergamenová krémová */
  --bg-alt:      #F2EAD8;   /* teplejší krémová */
  --bg-deep:     #ECE1C9;   /* pískovcová plocha */
  --green:       #425A3C;   /* lesní zelená (primární) */
  --green-dark:  #33482F;
  --brown:       #9C6B44;   /* pískovcová hnědá */
  --terra:       #B4653E;   /* terakota (akcent) */
  --terra-dark:  #9A5030;
  --text:        #2C2A26;
  --muted:       #6E6656;
  --line:        rgba(64, 52, 36, 0.16);
  --line-soft:   rgba(64, 52, 36, 0.09);
  --white:       #FFFDF8;

  --font-heading: 'Bitter', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', 'Segoe UI', Arial, sans-serif;

  --radius:    14px;
  --radius-lg: 22px;
  --shadow:    0 6px 22px rgba(58, 44, 24, 0.10);
  --shadow-lg: 0 18px 46px rgba(58, 44, 24, 0.20);
  --transition: 0.3s ease;
  --max-width: 1180px;
  --nav-h: 88px;
}

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

html { scroll-behavior: smooth; font-size: 18px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--nav-h);
}

img { max-width: 100%; height: auto; display: block; }
/* <picture> je jen obal kolem <img> kvůli WebP variantě. `display: contents`
   ho z rozvržení úplně vyjme, takže všechna pravidla pro `img` platí dál. */
picture { display: contents; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.75rem; }
section { padding: 5.5rem 0; }
.bg-alt  { background: var(--bg-alt); }
.bg-deep { background: var(--bg-deep); }
.bg-green { background: var(--green); color: #F4EEDF; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.18; color: var(--text); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
h4 { font-size: 1.12rem; }
p  { color: var(--text); }
.lead { font-size: 1.2rem; color: var(--muted); line-height: 1.8; }

.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-size: .78rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--terra); margin-bottom: 1rem;
}
.eyebrow::before { content: ''; width: 30px; height: 2px; background: var(--terra); display: inline-block; }
.section-head h2 { margin-bottom: 1rem; }
.section-head p { color: var(--muted); font-size: 1.1rem; }

/* ---------- Tlačítka (velká, pro 50+) ---------- */
.btn-primary, .btn-outline, .btn-light {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 2rem; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 700;
  letter-spacing: .01em; cursor: pointer; transition: all var(--transition);
  border: 2px solid transparent;
}
.btn-primary { background: var(--green); color: #F6F1E4; border-color: var(--green); }
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-outline { background: transparent; color: var(--green); border-color: var(--green); }
.btn-outline:hover { background: var(--green); color: #F6F1E4; transform: translateY(-2px); }
.btn-light { background: rgba(255,253,248,.95); color: var(--green-dark); border-color: transparent; }
.btn-light:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-primary i, .btn-outline i, .btn-light i { width: 20px; height: 20px; }

/* ---------- NAVBAR ---------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
  padding: .85rem 0;
}
.navbar.scrolled { background: rgba(251,248,241,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 24px rgba(58,44,24,.10); }
.nav-container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 54px; width: auto; display: block; }
.nav-logo .logo-dark { display: none; }
.navbar.scrolled .nav-logo .logo-light { display: none; }
.navbar.scrolled .nav-logo .logo-dark { display: block; }
.navbar:not(.scrolled) .nav-logo .logo-light { filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }

.nav-menu { display: flex; align-items: center; list-style: none; gap: 1.2rem; }
.nav-link {
  position: relative; font-size: .8rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap; padding: .3rem 0; transition: color var(--transition);
}
.nav-link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px; background: var(--terra); transition: right var(--transition); }
.nav-link:hover::after, .nav-link.active::after { right: 0; }
.navbar:not(.scrolled) .nav-link { color: rgba(255,253,248,.95); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.navbar.scrolled .nav-link { color: var(--text); }
.nav-link.active { color: var(--terra); }
.navbar:not(.scrolled) .nav-link.active { color: #fff; }
.navbar:not(.scrolled) .nav-link.active::after { background: #fff; }

.nav-phone {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem;
  border-radius: 100px; font-weight: 700; font-size: .95rem; white-space: nowrap;
  border: 2px solid transparent; transition: all var(--transition);
}
.nav-phone i { width: 18px; height: 18px; }
.navbar:not(.scrolled) .nav-phone { color: #fff; border-color: rgba(255,255,255,.5); }
.navbar:not(.scrolled) .nav-phone:hover { background: rgba(255,255,255,.15); }
.navbar.scrolled .nav-phone { color: var(--green-dark); border-color: var(--green); }
.navbar.scrolled .nav-phone:hover { background: var(--green); color: #fff; border-color: var(--green); }
.nav-menu-phone { display: none; }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.hamburger span { display: block; width: 26px; height: 2.5px; border-radius: 2px; background: currentColor; transition: all var(--transition); }
.navbar:not(.scrolled) .hamburger { color: #fff; }
.navbar.scrolled .hamburger { color: var(--text); }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* ---------- HERO (úvod) ---------- */
.hero { position: relative; min-height: 100vh; margin-top: calc(-1 * var(--nav-h)); padding: calc(var(--nav-h) + 2rem) 0 3rem; display: flex; align-items: center; color: #fff; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(30,38,26,.82) 0%, rgba(40,52,34,.55) 45%, rgba(40,52,34,.25) 100%); }
.hero .container { position: relative; z-index: 1; width: 100%; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.4rem; }
.hero-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 100px; background: rgba(255,253,248,.14); border: 1px solid rgba(255,255,255,.28); font-size: .85rem; font-weight: 600; backdrop-filter: blur(4px); }
.hero-chip i { width: 17px; height: 17px; color: #F0C36B; }
.hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); margin-bottom: 1.2rem; }
.hero-sub { font-size: 1.24rem; line-height: 1.7; color: rgba(255,253,248,.94); max-width: 34rem; margin-bottom: 2rem; text-shadow: 0 1px 12px rgba(0,0,0,.3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-photo { position: relative; }
.hero-photo img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 3/2; object-fit: cover; width: 100%; border: 7px solid rgba(255,253,248,.92); }
.hero-scroll { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 1; color: rgba(255,255,255,.8); display: grid; place-items: center; gap: .3rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.hero-scroll i { width: 22px; height: 22px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(6px);} }

/* ---------- PAGE HERO (podstránky) ---------- */
.page-hero { position: relative; min-height: 46vh; margin-top: calc(-1 * var(--nav-h)); padding: calc(var(--nav-h) + 3.5rem) 0 3.5rem; display: flex; align-items: center; color: #fff; text-align: center; }
.page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; }
.page-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,38,26,.72), rgba(30,38,26,.55)); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.page-hero p { color: rgba(255,253,248,.95); font-size: 1.2rem; max-width: 40rem; margin: 1rem auto 0; text-shadow: 0 1px 12px rgba(0,0,0,.3); }
/* `flex-wrap` je tu kvůli tříúrovňovému drobečku na lístcích: „Startseite /
   Restaurant / Getränkekarte" se na 390px v němčině nevejde na řádek
   a bez zalomení roztáhl celou stránku o pár pixelů do strany. */
.breadcrumb { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,253,248,.85); margin-bottom: 1rem; max-width: 100%; }
.breadcrumb i { width: 15px; height: 15px; }

/* ---------- Rozvržení text + foto ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.split.narrow { gap: 2.5rem; }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; aspect-ratio: 5/4; object-fit: cover; }
.split-text p + p { margin-top: 1.1rem; }
.split-text .lead { margin-bottom: 1.2rem; }

/* ---------- Seznam vybavení / předností ---------- */
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.6rem; margin-top: 1.6rem; }
.feature-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: 1.02rem; }
.feature-list li i { width: 22px; height: 22px; flex: none; color: var(--green); margin-top: .25rem; }

/* ---------- Karty s jemným zoomem + zvýrazněním ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }

.media-card {
  position: relative; background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.media-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: var(--brown); }
.media-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--terra); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.media-card:hover::after { transform: scaleX(1); }
.media-card .media { position: relative; overflow: hidden; aspect-ratio: 3/2; }
.media-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.media-card:hover .media img { transform: scale(1.06); }
.media-card .body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.media-card .body h3 { margin-bottom: .6rem; }
.media-card .body p { color: var(--muted); font-size: 1rem; }

/* Autorství fotek pod licencí CC BY-SA — nenápadné, ale trvale viditelné */
/* Atribuce fotky. Drobná schválně – je to právní povinnost, ne obsah, takže
   nemá soupeřit s názvem místa. Ale ne menší než 10 px: nečitelná atribuce
   licenci CC BY-SA nesplňuje. Proto `max()` – na mobilu klesá základní
   velikost písma na 16,5 px a samotné .58rem by dalo 9,6 px. Bílá je z téhož
   důvodu zesílená na .9. */
.photo-credit { position: absolute; bottom: 0; right: 0; z-index: 3; max-width: 100%; padding: .16rem .42rem; background: rgba(0,0,0,.5); color: rgba(255,255,255,.9); font-size: max(10px, .58rem); line-height: 1.25; letter-spacing: .01em; border-top-left-radius: 5px; pointer-events: auto; }
.photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 1px; }
.photo-credit a:hover { color: #fff; }
.hero > .photo-credit, .page-hero > .photo-credit { bottom: 0; right: 0; }

.badge-dist { position: absolute; top: 12px; right: 12px; background: rgba(66,90,60,.94); color: #fff; padding: .4rem .8rem; border-radius: 100px; font-size: .82rem; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
.badge-dist i { width: 14px; height: 14px; }
.card-icon { position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,253,248,.92); color: var(--terra); display: grid; place-items: center; }
.card-icon i { width: 20px; height: 20px; }

/* Pokoj / prostor — karta s cenou */
.room-card .body .room-meta { display: flex; align-items: center; gap: .5rem; color: var(--brown); font-weight: 600; font-size: .95rem; margin-bottom: .5rem; }
.room-card .body .room-meta i { width: 18px; height: 18px; }
.room-price { margin-top: auto; padding-top: 1rem; font-family: var(--font-heading); font-weight: 700; color: var(--green-dark); font-size: 1.25rem; }
.room-price small { font-family: var(--font-body); font-weight: 500; color: var(--muted); font-size: .85rem; }

/* ---------- Dlaždice na úvodu (odkazy do sekcí) ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
/* isolation: bez ní se obrázek se z-indexem -2 propadne za pozadí sekce a je neviditelný */
.tile { position: relative; isolation: isolate; border-radius: var(--radius-lg); overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow); transition: transform .35s ease, box-shadow .35s ease; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; z-index: -2; }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,34,24,.9) 8%, rgba(28,34,24,.15) 65%); z-index: -1; }
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.tile:hover img { transform: scale(1.07); }
.tile-body { padding: 1.6rem; }
.tile-body h3 { color: #fff; margin-bottom: .3rem; }
.tile-body span { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: #F0C36B; font-size: .95rem; }
.tile-body span i { width: 17px; height: 17px; transition: transform var(--transition); }
.tile:hover .tile-body span i { transform: translateX(5px); }

/* ---------- Recenze ---------- */
.reviews { position: relative; }
.rating-summary { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-bottom: 3rem; }
.rating-badge { background: var(--white); border: 1.5px solid var(--line-soft); border-radius: var(--radius-lg); padding: 1.4rem 1.8rem; display: flex; align-items: center; gap: 1.1rem; min-width: 350px; box-shadow: var(--shadow); cursor: pointer; transition: transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease; }
.rating-badge:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); background: #EAF1E2; border-color: var(--green); }
.rating-num { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; color: var(--terra); line-height: 1; }
.rating-badge .rating-meta { font-size: .92rem; color: var(--muted); }
.rating-badge .rating-meta strong { display: block; color: var(--text); font-size: 1.02rem; }
.rating-badge .rating-src { display: inline-flex; align-items: center; gap: .3rem; color: var(--green); font-weight: 700; font-size: .82rem; margin-top: .2rem; }
.rating-src i { width: 14px; height: 14px; }

.stars { display: inline-flex; gap: 2px; }
.stars .star { width: 18px; height: 18px; color: #d9cdb4; }
.stars .star.full { color: #E0A73B; fill: #E0A73B; }

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.review-card { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--shadow); position: relative; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.review-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brown); }
.review-card .quote-mark { font-family: var(--font-heading); font-size: 3.4rem; line-height: .4; color: var(--bg-deep); position: absolute; top: 1.6rem; right: 1.4rem; }
.review-card .stars { margin-bottom: 1rem; }
.review-text { font-size: 1.08rem; line-height: 1.7; margin-bottom: 1.3rem; }
.review-author { display: flex; align-items: center; gap: .75rem; }
.review-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #F4EEDF; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; }
.review-author .who strong { display: block; font-size: 1rem; }
.review-author .who span { font-size: .82rem; color: var(--muted); }
.review-card.plain .review-text { color: var(--muted); font-style: italic; }

/* ---------- Ceník ---------- */
.price-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid var(--line-soft); }
table.price { width: 100%; border-collapse: collapse; background: var(--white); min-width: 560px; }
table.price caption { text-align: left; font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; padding: 1.3rem 1.4rem .3rem; color: var(--green-dark); }
table.price thead th { background: var(--green); color: #F4EEDF; font-family: var(--font-body); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; padding: .95rem 1.2rem; text-align: right; }
table.price thead th:first-child { text-align: left; }
table.price tbody td { padding: .95rem 1.2rem; text-align: right; border-top: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
table.price tbody td:first-child { text-align: left; font-weight: 600; }
table.price tbody tr { transition: background .25s ease; }
table.price tbody tr:hover { background: var(--bg-alt); box-shadow: inset 4px 0 0 var(--terra); }
table.price tbody tr.subhead td { background: var(--bg-deep); font-family: var(--font-heading); font-weight: 700; color: var(--green-dark); text-align: left; }
.price-note-list { margin-top: 1.6rem; display: grid; gap: .7rem; }
.price-note-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--muted); font-size: 1rem; }
.price-note-list li i { width: 20px; height: 20px; color: var(--terra); flex: none; margin-top: .2rem; }
.season-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.6rem; }
.season-legend span { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 600; }
.dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }

/* ---------- Galerie ---------- */
.gallery-filters { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2.5rem; }
.filter-btn { padding: .6rem 1.5rem; background: transparent; color: var(--text); border: 1.5px solid var(--line); border-radius: 100px; font-family: var(--font-body); font-size: .95rem; font-weight: 600; cursor: pointer; transition: all var(--transition); }
.filter-btn:hover, .filter-btn.active { background: var(--green); color: #F4EEDF; border-color: var(--green); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery-item { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/3; cursor: pointer; box-shadow: var(--shadow); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,34,24,.5), transparent 55%); opacity: 0; transition: opacity var(--transition); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item .zoom-ico { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.7); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,253,248,.9); color: var(--green-dark); display: grid; place-items: center; opacity: 0; transition: all var(--transition); z-index: 2; }
.gallery-item:hover .zoom-ico { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* ---------- Rezervace placeholder ---------- */
.reserve-box { max-width: 760px; margin: 0 auto; background: var(--white); border: 2px dashed var(--brown); border-radius: var(--radius-lg); padding: 3rem 2.4rem; text-align: center; box-shadow: var(--shadow); }
.reserve-box .ico-lg { width: 74px; height: 74px; border-radius: 50%; background: var(--bg-deep); color: var(--green); display: grid; place-items: center; margin: 0 auto 1.4rem; }
.reserve-box .ico-lg i { width: 36px; height: 36px; }
.reserve-alt { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
/* Rezervační widget dodavatele. Výšku iframu si dorovnává jejich skript
   (nastavuje inline `style.height`), proto se tu výška nesmí nijak vynucovat. */
.reserve-box.has-embed { max-width: 1040px; }
.reserve-embed { margin-top: 2rem; }
.reserve-embed iframe { display: block; width: 100%; border: 0; border-radius: var(--radius); background: var(--white); }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; }
.info-card { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 1.6rem 1.7rem; box-shadow: var(--shadow); margin-bottom: 1.2rem; transition: transform .3s ease, box-shadow .3s ease; }
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.info-row { display: flex; gap: 1rem; align-items: flex-start; padding: .55rem 0; }
.info-row i { width: 22px; height: 22px; color: var(--terra); flex: none; margin-top: .3rem; }
.info-row .lbl { display: block; margin-bottom: 3px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.info-row a, .info-row strong { font-size: 1.08rem; color: var(--text); font-weight: 600; }
.map-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line-soft); }
.map-frame iframe { display: block; width: 100%; height: 460px; border: 0; }
/* Zástupce mapy do chvíle, než si o ni návštěvník řekne. Výška je stejná
   jako u iframu, ať stránka po načtení mapy neposkočí. */
.map-zastupce { display: grid; place-content: center; justify-items: center; gap: 1rem; height: 460px; padding: 2rem 1.5rem; text-align: center; background: var(--bg-deep); color: var(--muted); }
.map-zastupce .lucide-map { width: 40px; height: 40px; color: var(--brown); }
.map-zastupce p { max-width: 34rem; font-size: .95rem; }

/* ---------- Formulář ---------- */
.contact-form { display: flex; flex-direction: column; gap: 1.3rem; background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.form-group { display: flex; flex-direction: column; gap: .45rem; }
.form-group label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.form-group input, .form-group textarea {
  width: 100%; padding: .9rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 1.02rem; color: var(--text); background: #fff; transition: border-color var(--transition), box-shadow var(--transition); outline: none;
}
.form-group textarea { resize: vertical; min-height: 140px; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(66,90,60,.12); }
.form-note { font-size: .85rem; color: var(--muted); }

/* Honeypot: pole, které člověk nevidí a robot vyplní. Schované posunem mimo
   obraz, ne přes `display:none` — na to jsou roboti zvyklí a pole přeskočí. */
.form-med { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Výsledek odeslání. Tutéž hlášku sem doplní PHP (host bez JavaScriptu)
   i js/main.js — proto jeden styl, ne dva. */
.form-stav { font-size: .95rem; line-height: 1.5; padding: .8rem 1rem; border-radius: var(--radius); }
.form-stav[hidden] { display: none; }
.form-stav.je-ok { background: #EEF3EA; border: 1px solid rgba(66,90,60,.28); color: var(--green-dark); }
.form-stav.je-chyba { background: #FBEDE7; border: 1px solid rgba(180,101,62,.32); color: var(--terra-dark); }

/* ---------- Pás s výzvou ---------- */
.cta-band { background: var(--green); color: #F4EEDF; text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: 1rem; }
.cta-band p { color: rgba(244,238,223,.9); font-size: 1.15rem; max-width: 40rem; margin: 0 auto 2rem; }
.cta-band .btn-light { margin: 0 .4rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---------- Malé odznaky ocenění ---------- */
.awards { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.award-chip { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; background: var(--bg-deep); border-radius: 100px; font-weight: 700; font-size: .92rem; color: var(--green-dark); }
.award-chip i { width: 20px; height: 20px; color: var(--terra); }

/* ---------- FOOTER ---------- */
.footer { background: #2A3524; color: #D9D2C0; padding: 4rem 0 1.8rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: #F4EEDF; margin-bottom: .8rem; }
.footer-desc { font-size: .98rem; line-height: 1.7; color: #BDB6A3; margin-bottom: 1.2rem; }
.footer-badges { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.3rem; }
.footer-badge { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: #E7E0CE; }
.footer-badge i { width: 17px; height: 17px; color: #E0A73B; }
.footer-social { display: flex; gap: .7rem; }
.footer-social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.09); display: grid; place-items: center; transition: all var(--transition); }
.footer-social a:hover { background: var(--terra); transform: translateY(-3px); }
.footer-social i { width: 19px; height: 19px; color: #F4EEDF; }
.footer h4 { color: #F4EEDF; font-size: 1.05rem; margin-bottom: 1.1rem; }
.footer-nav ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-nav a { color: #BDB6A3; font-size: .98rem; transition: color var(--transition); }
.footer-nav a:hover { color: var(--terra); }
.footer-contact p { display: flex; align-items: center; gap: .6rem; color: #BDB6A3; font-size: .98rem; margin-bottom: .6rem; }
.footer-contact i { width: 17px; height: 17px; color: var(--terra); flex: none; }
.footer-contact a:hover { color: #F4EEDF; }
.footer-cta { margin-top: 1rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; padding-top: 1.6rem; font-size: .85rem; color: #9A9584; }

/* ---------- Cookie / scroll-top / lightbox ---------- */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #23301D; color: #EDE7D6; padding: 1.15rem 1.75rem; z-index: 9999; transform: translateY(110%); transition: transform .4s ease; }
.cookie-banner.visible { transform: translateY(0); }
.cookie-content { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cookie-content p { font-size: .92rem; }
.cookie-link { color: #E0A73B; text-decoration: underline; }
.cookie-actions { display: flex; gap: .7rem; flex-shrink: 0; }
.btn-cookie-accept { padding: .6rem 1.4rem; background: var(--terra); color: #fff; border: none; border-radius: var(--radius); font-weight: 700; cursor: pointer; font-family: var(--font-body); font-size: .9rem; }
.btn-cookie-accept:hover { background: var(--terra-dark); }
.btn-cookie-decline { padding: .6rem 1.4rem; background: transparent; color: #EDE7D6; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius); cursor: pointer; font-family: var(--font-body); font-size: .9rem; }
.btn-cookie-decline:hover { background: rgba(255,255,255,.1); }

.scroll-top { position: fixed; bottom: 1.8rem; right: 1.8rem; width: 52px; height: 52px; background: var(--green); color: #F4EEDF; border: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; z-index: 900; opacity: 0; transform: translateY(20px); transition: all var(--transition); box-shadow: var(--shadow-lg); }
.scroll-top.visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: var(--green-dark); transform: translateY(-3px); }
.scroll-top i { width: 24px; height: 24px; }

.lightbox { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.lightbox.active { opacity: 1; pointer-events: all; }
.lightbox-overlay { position: absolute; inset: 0; background: rgba(20,26,16,.94); }
.lightbox-content { position: relative; z-index: 1; max-width: 90vw; max-height: 90vh; }
.lightbox-img { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox-close, .lightbox-prev, .lightbox-next { position: fixed; background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 50%; width: 52px; height: 52px; display: grid; place-items: center; cursor: pointer; z-index: 2; transition: background var(--transition); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.28); }
.lightbox-close { top: 1.5rem; right: 1.5rem; }
.lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-close i, .lightbox-prev i, .lightbox-next i { width: 26px; height: 26px; }

/* ---------- Animace (jemné, pomalé) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.stagger.visible > * { opacity: 1; transform: translateY(0); }
.stagger.visible > *:nth-child(2) { transition-delay: .08s; }
.stagger.visible > *:nth-child(3) { transition-delay: .16s; }
.stagger.visible > *:nth-child(4) { transition-delay: .24s; }
.stagger.visible > *:nth-child(5) { transition-delay: .32s; }
.stagger.visible > *:nth-child(6) { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { transition: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsivita ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero-photo { max-width: 380px; }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split.reverse .split-media { order: -1; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .card-grid, .review-grid, .tiles { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1180px) { .nav-phone { display: none; } }
@media (max-width: 1024px) {
  .nav-phone { display: none; }
  .hamburger { display: flex; }
  .nav-menu {
    position: fixed; top: 0; right: -100%; width: min(84%, 340px); height: 100vh;
    background: var(--bg); flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 1.4rem; padding: 2rem 2.2rem; transition: right .4s cubic-bezier(.4,0,.2,1);
    box-shadow: -6px 0 50px rgba(0,0,0,.2); z-index: 999; overflow-y: auto;
  }
  .nav-menu.active { right: 0; }
  .nav-link { color: var(--text) !important; font-size: 1.15rem; text-transform: none; letter-spacing: .01em; }
  .nav-link::after { display: none; }
  .navbar:not(.scrolled) .nav-link { text-shadow: none; }
  .nav-link.active { color: var(--terra) !important; }
  .nav-menu-phone { display: block; margin-top: .6rem; }
  .nav-menu-phone a { display: inline-flex; align-items: center; gap: .5rem; color: var(--green-dark); font-weight: 700; font-size: 1.1rem; }
  .nav-menu-phone i { width: 20px; height: 20px; }
}
@media (max-width: 640px) {
  html { font-size: 17px; }
  section { padding: 3.5rem 0; }
  .card-grid, .card-grid.two, .review-grid, .tiles, .feature-list, .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cookie-content { flex-direction: column; align-items: flex-start; }
  .cookie-actions { width: 100%; }
  .btn-cookie-accept, .btn-cookie-decline { flex: 1; }
}

/* ---------- Logo, trust banner, hero kicker, skrytý proklik (úpravy) ---------- */
.footer-logo-img { height: 62px; width: auto; margin-bottom: 1.1rem; }

.hero-kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,253,248,.92); margin-bottom: 1.1rem; text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.hero-kicker::before { content: ''; width: 34px; height: 2px; background: #E0A73B; display: inline-block; }

/* Pruh důvěry hned pod hero sekcí */
.trust-band { background: var(--green-dark); color: #F4EEDF; padding: 1.6rem 0; }
.trust-row { display: flex; align-items: center; justify-content: center; gap: 2.6rem; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: .85rem; }
.trust-item i { width: 30px; height: 30px; color: #E0A73B; flex: none; }
.trust-main { font-family: var(--font-heading); font-weight: 700; font-size: 1.12rem; line-height: 1.15; }
.trust-sub { font-size: .84rem; color: rgba(244,238,223,.72); }
.trust-divider { width: 1px; height: 40px; background: rgba(255,255,255,.2); }
@media (max-width: 820px) {
  .trust-row { gap: 1.3rem 2rem; }
  .trust-divider { display: none; }
  .trust-item { flex: 0 0 40%; }
}
@media (max-width: 520px) { .trust-item { flex: 0 0 100%; justify-content: center; } }

/* „Skrytý" proklik na recenze — bez popisku, jen šipka na hover */
.rating-go { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-deep); color: var(--green); display: grid; place-items: center; opacity: .5; transition: all var(--transition); flex: none; }
.rating-go i { width: 18px; height: 18px; }
.rating-badge:hover .rating-go { opacity: 1; background: var(--green); color: #F4EEDF; transform: translateX(3px); }

@media (max-width: 640px) {
  .nav-logo img { height: 44px; }
  .footer-logo-img { height: 54px; }
  .rating-badge { min-width: 0; width: 100%; }
}

/* ============================================================
   OPTIMALIZACE PRO VŠECHNA ZAŘÍZENÍ — responzivita a mobil
   ============================================================ */
html { scroll-padding-top: 96px; }
body { -webkit-tap-highlight-color: rgba(66,90,60,.18); }
h1, h2, h3, h4, p, li, a, strong, .review-text, .hero-sub { overflow-wrap: break-word; }
.hero { min-height: 100svh; }               /* svh = bez skoků kvůli adresní liště na mobilu */

/* Tablety a menší */
@media (max-width: 980px) {
  .hero-scroll { display: none; }           /* šipka „dolů" se na mobilu překrývala s obsahem */
  .map-frame iframe, .map-zastupce { height: 380px; }
}

/* Velké telefony / malé tablety */
@media (max-width: 820px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }  /* 2 sloupce místo nekonečného scrollu */
  .hero-sub, .lead { font-size: 1.12rem; }
}

/* Telefony — velká tlačítka přes celou šířku (pohodlný dotyk 50+) */
@media (max-width: 600px) {
  section { padding: 3rem 0; }
  .hero-actions, .cta-actions, .reserve-alt { flex-direction: column; align-items: stretch; }
  .hero-actions > a, .cta-actions > a, .reserve-alt > a { width: 100%; justify-content: center; }
  .btn-primary, .btn-outline, .btn-light { padding: .95rem 1.4rem; }
  .map-frame iframe, .map-zastupce { height: 320px; }
  .reserve-box { padding: 2.2rem 1.3rem; }
  /* Na telefonu si widget vezme i odsazení karty — 307 px je na rezervační
     formulář s kalendářem málo. Nadpis a text nad ním zůstávají odsazené. */
  .reserve-embed { margin-left: -1.3rem; margin-right: -1.3rem; }
  .reserve-embed iframe { border-radius: 0; }
  .contact-form { padding: 1.4rem; }
  .rating-badge { padding: 1.2rem 1.4rem; }
  .review-card { padding: 1.5rem; }
  .season-legend { gap: .6rem; }
}

/* Malé telefony */
@media (max-width: 430px) {
  html { font-size: 16.5px; }
  .container { padding: 0 1.1rem; }
  h1 { font-size: 2rem; line-height: 1.16; }
  h2 { font-size: 1.5rem; }
  .hero-sub, .section-head p, .lead { font-size: 1.02rem; }
  .gallery-grid { gap: .5rem; }
  .nav-logo img { height: 42px; }
  .trust-main { font-size: 1.05rem; }
  .eyebrow { font-size: .72rem; }
}

/* Ceník: na mobilu ať se tabulky vejdou na displej a ceny jsou vidět
   (bez skrytého vodorovného scrollu) */
@media (max-width: 560px) {
  table.price { min-width: 0; }
  table.price caption { padding: 1rem 1rem .2rem; font-size: 1.05rem; }
  table.price th, table.price td { padding: .55rem .45rem; font-size: .82rem; }
  table.price tbody td:first-child { font-size: .82rem; }
  table.price thead th { font-size: .64rem; letter-spacing: 0; padding: .6rem .4rem; }
}

/* ═══ PRÁVNÍ DOKUMENTY (gdpr.php, obchodni-podminky.php) ═══════════════════ */

/* Hero bez fotky — právní stránky nepotřebují obrázek */
/* Hlavička stránky je flexbox a její `.container` má ve výchozím stavu
   `min-width: auto` — pod nejdelší slovo se tedy nesmrskne. Německé
   „Geschäftsbedingungen" tak na 390px roztáhlo celou stránku o 4 px
   do strany. `overflow-wrap` na nadpisu to nespraví, ten se do výpočtu
   nejmenší šířky nepočítá. */
.page-hero > .container { min-width: 0; }
.page-hero-plain { min-height: auto; background: var(--green-dark); }
.page-hero-plain::after { content: none; }

.legal { max-width: 46rem; }
.legal h2 { margin: 2.8rem 0 .9rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); font-size: 1.45rem; }
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal h3 { margin: 1.8rem 0 .6rem; font-size: 1.08rem; color: var(--brown); }
.legal p { margin-bottom: 1rem; line-height: 1.75; }
.legal ul { margin: 0 0 1.2rem 1.2rem; }
.legal ul li { margin-bottom: .55rem; line-height: 1.7; }
.legal a { color: var(--terra); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--terra-dark); }
.legal abbr { text-decoration: none; border-bottom: 1px dotted var(--muted); cursor: help; }
.legal code { background: var(--bg-alt); padding: .1rem .4rem; border-radius: 4px; font-size: .9em; }

.legal-meta { color: var(--muted); font-size: .92rem; padding-bottom: 1.4rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--line-soft); }

.legal-box { background: var(--bg-alt); border-left: 3px solid var(--terra); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.2rem 0 1.6rem; }
.legal-box p { margin-bottom: 0; line-height: 1.7; }

.legal-note { display: flex; gap: .8rem; align-items: flex-start; background: #FDF6E8; border: 1px solid #E8D5A8; border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1.6rem 0; font-size: .96rem; }
.legal-note i { flex: none; width: 19px; height: 19px; color: var(--terra); margin-top: .15rem; }

.legal-table-wrap { overflow-x: auto; margin: 1.2rem 0 1.6rem; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 30rem; }
.legal-table th { text-align: left; background: var(--bg-alt); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; padding: .7rem .9rem; border-bottom: 2px solid var(--line); }
.legal-table td { padding: .75rem .9rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.55; }
.legal-table tbody tr:last-child td { border-bottom: 0; }

/* Placeholder — schválně křiklavý, ať se nedá přehlédnout ani přeskočit */
mark.ph { background: #FFE8A3; color: #6B4E00; border: 1px dashed #C99A00; border-radius: 4px; padding: .1rem .45rem; font-size: .88em; font-weight: 600; white-space: normal; }

.legal-cta { margin-top: 3rem; padding: 1.8rem; background: var(--bg-alt); border-radius: var(--radius-lg); text-align: center; }
.legal-cta p { font-weight: 600; margin-bottom: 1rem; }
.legal-cta .btn-primary, .legal-cta .btn-outline { margin: .3rem; }

.footer-legal { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.footer-legal a { font-size: .88rem; opacity: .82; }
.footer-legal a:hover { opacity: 1; }

@media (max-width: 700px) {
  .legal h2 { font-size: 1.25rem; margin-top: 2.2rem; }
  .legal-table { font-size: .86rem; min-width: 24rem; }
}

/* ═══ PŘEPÍNAČ JAZYKŮ ═════════════════════════════════════════════════════ */
.lang-switch { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 100px; border: 1.5px solid transparent; flex: none; }
.lang-opt { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: .3rem .5rem; border-radius: 100px; font-size: .76rem; font-weight: 700; letter-spacing: .04em; transition: all var(--transition); }

/* nad fotkou (nescrollovaný stav) */
.navbar:not(.scrolled) .lang-switch { border-color: rgba(255,255,255,.35); }
.navbar:not(.scrolled) .lang-opt { color: rgba(255,253,248,.8); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.navbar:not(.scrolled) .lang-opt:hover { color: #fff; background: rgba(255,255,255,.16); }
.navbar:not(.scrolled) .lang-opt.active { color: var(--green-dark); background: rgba(255,253,248,.94); text-shadow: none; }

/* na světlém pozadí (po odscrollování) */
.navbar.scrolled .lang-switch { border-color: var(--line); }
.navbar.scrolled .lang-opt { color: var(--muted); }
.navbar.scrolled .lang-opt:hover { color: var(--green-dark); background: var(--bg-alt); }
.navbar.scrolled .lang-opt.active { color: #F6F1E4; background: var(--green); }

@media (max-width: 1120px) {
  .lang-opt { min-width: 30px; padding: .28rem .4rem; font-size: .72rem; }
}

/* ═══ OPRAVY PRO DELŠÍ CIZOJAZYČNÉ POPISKY ════════════════════════════════ */

/* Logo se nikdy nesmí smrsknout — v němčině ho delší menu zmáčklo na 0 px */
.nav-logo { flex: none; }

/* Dlouhé německé složeniny ("Nichtraucherzimmer") se jinak lámou uprostřed
   slova. Dělení proto zapínáme JEN v němčině a JEN u krátkých nadpisů karet.
   V češtině nemá co dělat: rozdělí i běžné slovo („tajemných hra-dů") a ve
   velkém nadpisu je to první, čeho si člověk všimne.
   `overflow-wrap` zůstává všem — ten slovo zalomí až když se nevejde vůbec,
   a to bez spojovníku. */
html[lang="de"] .media-card .body h3, html[lang="de"] .tile-body h3 {
  hyphens: auto; -webkit-hyphens: auto;
}
.media-card .body h3, .tile-body h3, .section-head h2, .legal h2, .legal h3 {
  overflow-wrap: break-word;
}

/* Velké nadpisy lámeme na vyvážené řádky, ne na osiřelé slovo na posledním
   řádku. Prohlížeč, který `balance` neumí, se zachová jako dosud. */
h1, .section-head h2, .cta-band h2, .split-text h2 {
  text-wrap: balance;
}

/* Němčina má delší popisky v menu — telefon skryjeme dřív, ať zbude místo */
/* V němčině a angličtině zabere menu i s přepínačem tolik místa, že se telefon
   nevejde ani na širokém monitoru. V češtině zůstává až do 1180 px. */
@media (max-width: 1500px) {
  html[lang="de"] .nav-phone, html[lang="en"] .nav-phone { display: none; }
}
@media (max-width: 1240px) {
  .nav-menu { gap: .85rem; }
  .nav-link { font-size: .75rem; letter-spacing: .05em; }
}

/* Přepínač jazyků zabral v navigaci místo navíc — na užších monitorech
   stáhneme mezery, ať se lišta nerozjede. Platí pro všechny jazyky. */
@media (max-width: 1460px) {
  .nav-container { gap: .6rem; }
  .nav-menu { gap: .8rem; }
  .nav-link { font-size: .75rem; letter-spacing: .045em; }
  .lang-opt { min-width: 29px; padding: .28rem .38rem; font-size: .72rem; }
  .nav-phone { padding: .5rem .8rem; font-size: .88rem; }
}

/* ── Hlavička na širokých obrazovkách ──────────────────────────────────────
   Do textového sloupce (1180 px) se obsah hlavičky nevejde: logo, osm položek
   menu, telefon a přepínač jazyků potřebují asi 1320 px. Obsah proto přetékal
   o 141 px a na logo zbývalo 18 px k prvnímu odkazu — vypadalo namáčklé.

   Dřívější opravy to řešily stlačováním (menší mezery, skrytý telefon v de/en).
   Tady dostane navigace vlastní, širší sloupec — místa po stranách je dost.

   Logo tím přestane lícovat s textem pod hlavičkou. Je to záměr: navigace je
   rám stránky, ne její textový sloupec. */
@media (min-width: 1500px) {
  .nav-container { max-width: 1400px; }
  .nav-logo { margin-right: 1.5rem; }
  .nav-logo img { height: 60px; }
}

/* ---------- Jídelní a nápojový lístek ----------
   Sekce lístku vypadá jako vytištěná: nadpis s terakotovou linkou a řádky
   s tečkovaným vodičem k ceně. Množství i cena mají `nowrap`, aby se
   „0,5 l" ani „209 Kč" nikdy nezlomily na dva řádky — a klient přitom
   nemusí v administraci psát nedělitelné mezery. */
/* Nadpis s platností lístku nad celou nabídkou. */
.menu-valid { text-align: center; max-width: 42rem; margin: 0 auto 2.6rem; }
.menu-valid h2 { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: var(--green-dark); }
.menu-valid p { color: var(--muted); font-size: 1rem; margin-top: .5rem; }

.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(27rem, 100%), 1fr)); gap: 2rem; align-items: start; }
.menu-section { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.7rem 1.8rem 1.3rem; }
.menu-section-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--green-dark); padding-bottom: .7rem; border-bottom: 2px solid var(--terra); }
.menu-section-note { color: var(--muted); font-size: .93rem; font-style: italic; margin-top: .7rem; }
.menu-rows { list-style: none; }
/* Mřížka, ne flex s zalomením: dlouhý název jídla se má zalomit uvnitř svého
   sloupce, ale cena musí zůstat vpravo na prvním řádku. Ve flexu se při
   zalomení propadla pod název a zarovnala se doleva. Popis dostává vlastní
   řádek přes celou šířku. */
.menu-row {
  display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "name dots price" "desc desc desc";
  align-items: baseline; column-gap: .4rem;
  padding: .72rem 0; border-top: 1px solid var(--line-soft);
}
.menu-rows > .menu-row:first-child { border-top: 0; padding-top: 1rem; }
.menu-name { grid-area: name; font-weight: 600; min-width: 0; }
.menu-desc { grid-area: desc; color: var(--muted); font-size: .9rem; line-height: 1.5; margin-top: .15rem; }
.menu-amount { font-weight: 400; color: var(--muted); font-size: .88rem; white-space: nowrap; }
/* Vodič se smrskne úplně, když název jídla zabere celý řádek — kousek
   teček dlouhý dva milimetry vypadá jako nedodělek, ne jako vodič. */
.menu-dots { grid-area: dots; min-width: 0; align-self: center; border-bottom: 1px dotted var(--line); }
.menu-price { grid-area: price; font-weight: 700; color: var(--green-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* ── Tři předvolby vzhledu lístku (klient je přepíná v administraci) ──
   Stejné HTML, jiné CSS. Vzhled se tak dá měnit bez zásahu do šablony
   a nemůže se rozejít s tím, co administrace nabízí. */

/* 1) „karty" — výchozí stav, každá sekce ve vlastní kartě ve dvou sloupcích.
      Je to pravidlo výš, tahle třída nic nepřidává. */

/* 2) „jedna" — celý lístek jako jeden vytištěný list pod sebou. */
.menu-grid.vzhled-jedna {
  grid-template-columns: 1fr; gap: 0;
  max-width: 46rem; margin: 0 auto;
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 2.2rem 2.4rem;
}
.menu-grid.vzhled-jedna .menu-section {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
}
.menu-grid.vzhled-jedna .menu-section + .menu-section { margin-top: 2.2rem; }

/* 3) „holy" — bez rámečků, jen nadpisy a linky. Nejvzdušnější varianta. */
.menu-grid.vzhled-holy { gap: 2.6rem 3.4rem; }
.menu-grid.vzhled-holy .menu-section {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
}
.menu-grid.vzhled-holy .menu-section-title {
  border-bottom-width: 1px; border-bottom-color: var(--line);
}
.menu-grid.vzhled-holy .menu-row { border-top-color: transparent; }

@media (max-width: 600px) {
  .menu-grid.vzhled-jedna { padding: 1.4rem 1.3rem; }
}

/* Odkaz na denní menu a telefon pod tlačítky lístků — tiché, ne třetí tlačítko. */
.menu-aside { margin-top: 1.1rem; gap: 1.6rem; font-size: .95rem; }
.menu-aside a { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-weight: 600; }
.menu-aside a:hover { color: var(--terra); }
.menu-aside i, .menu-aside svg { width: 18px; height: 18px; }

/* Dvě velikosti ikon, které dřív visely v atributu `style` u jednotlivých
   značek. Rozvržení do šablony nepatří (a v atributu ho nepřebije žádné
   responzivní pravidlo), takže je to tady. */
.lucide.ico-inline { width: 16px; height: 16px; vertical-align: -3px; }
.lucide.ico-hours  { width: 24px; height: 24px; color: var(--terra); }

/* ---------- Balíčky výletů (Český ráj) ---------- */
.package-list { display: grid; gap: 2.2rem; }
.package { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.package:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.package:nth-child(even) .package-media { order: 2; }
.package-media { position: relative; min-height: 250px; }
.package-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.package-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,253,248,.94); color: var(--green-dark); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .42rem .85rem; border-radius: 100px; }
.package-badge i { width: 16px; height: 16px; color: var(--terra); }
.package-body { padding: 1.9rem 2.1rem; }
.package-body h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--green-dark); margin-bottom: .55rem; }
.package-body > p { color: var(--muted); margin-bottom: 1.15rem; }
.package-program { list-style: none; display: grid; gap: .55rem; }
.package-program li { position: relative; padding-left: 1.5rem; font-size: .98rem; line-height: 1.6; }
.package-program li::before { content: ''; position: absolute; left: .3rem; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--terra); }

@media (max-width: 900px) {
  .package, .package:nth-child(even) { grid-template-columns: 1fr; }
  .package:nth-child(even) .package-media { order: 0; }
  .package-media { min-height: 0; aspect-ratio: 16 / 9; }
  .package-body { padding: 1.5rem 1.4rem; }
}
@media (max-width: 600px) {
  .menu-section { padding: 1.3rem 1.2rem 1rem; }
  /* Na úzkém displeji nemá vodič kam se natáhnout — zmizí a zůstane
     dvojice název / cena vedle sebe, popis pod nimi. */
  .menu-row { grid-template-columns: 1fr auto; grid-template-areas: "name price" "desc desc"; }
  .menu-dots { display: none; }
  .menu-aside { gap: .8rem; }
}