/*
Theme Name: The Clock Inn
Theme URI: https://www.theclockinn.cz
Author: ihned-web.cz
Description: Vlastní téma pro hostel The Clock Inn v centru Prahy. Bez page builderu, bez zbytečných pluginů. Napojené na rezervační systém Previo.
Version: 2.5.0
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: clockinn
Tags: hostel, hotel, booking, custom-colors, custom-menu, responsive
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {
  /* Barvy vytažené přímo z loga hostelu: tmavá modrá podkladu,
     zlatý ciferník a petrolejová ozubená kola. */
  --navy-950: #141D29;
  --navy-900: #1C2838;
  --navy-800: #25354A;
  --navy-700: #304561;
  --navy-600: #3D577A;

  --gold-100: #FFF8E1;
  --gold-300: #F5DF94;
  --gold-400: #D6BB5F;
  --gold-500: #AE964A;
  --gold-600: #85743B;
  --gold-700: #61552D;
  --gold-800: #4D4322;

  --teal-100: #D2EEF4;
  --teal-300: #7DC2D0;
  --teal-400: #5499A7;
  --teal-500: #3D747F;
  --teal-600: #305860;

  --bone-50:  #F7F5EE;
  --bone-100: #EFEBE0;
  --bone-200: #E1DCCE;
  --bone-300: #CBC4B2;

  --ink-900: #16202C;
  --ink-700: #3E4C5C;
  --ink-500: #6B7A8A;

  /* Sémantické tokeny — zlatá je akce a značka, petrolejová jsou odkazy. */
  --bg:          var(--bone-50);
  --bg-alt:      var(--bone-100);
  --bg-invert:   var(--navy-900);
  --surface:     #FFFFFF;
  --text:        var(--ink-900);
  --text-muted:  var(--ink-700);
  --text-faint:  var(--ink-500);
  --text-invert: var(--bone-50);
  --rule:        var(--bone-200);
  --rule-strong: var(--bone-300);
  --accent:         var(--gold-700);
  --accent-on-dark: var(--gold-400);
  --accent-ink:     #1C1502;
  --link:           var(--teal-600);
  --link-on-dark:   var(--teal-300);

  /* Typografie */
  --font-display: "Archivo", "Archivo Black", Impact, sans-serif;
  --font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(0.83rem, 0.80rem + 0.13vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.38vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.68vw, 1.84rem);
  --step-3:  clamp(1.73rem, 1.50rem + 1.14vw, 2.36rem);
  --step-4:  clamp(2.07rem, 1.71rem + 1.81vw, 3.02rem);
  --step-5:  clamp(2.49rem, 1.92rem + 2.83vw, 3.86rem);
  --step-6:  clamp(2.75rem, 2.05rem + 3.50vw, 4.30rem);

  /* Rytmus */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --measure: 62ch;
  --wrap: 1240px;
  --wrap-narrow: 820px;
  --radius: 4px;
  --radius-lg: 8px;

  --section-y: clamp(3.5rem, 8vw, 7rem);
}

/* Web má jednu podobu u všech návštěvníků — pro značku hostelu je to správně.
   Tmavé jsou jen ty sekce, kde to má být záměr (hero, bar a terasa, patička). */

/* =========================================================
   2. RESET A ZÁKLAD
   ========================================================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p  { margin: 0; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Utility */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - var(--gutter) * 2, var(--wrap-narrow)); margin-inline: auto; }
.stack > * + * { margin-top: var(--flow, 1rem); }
.measure { max-width: var(--measure); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: var(--accent-ink);
  padding: 0.75rem 1.25rem; font-weight: 700;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.lede { font-size: var(--step-1); color: var(--text-muted); max-width: 52ch; line-height: 1.5; }

/* =========================================================
   3. TLAČÍTKA
   ========================================================= */

.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1;
  padding: 0.95em 1.6em;
  border: 2px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--gold-500); color: var(--accent-ink); }
.btn--primary:hover { background: var(--gold-400); }

.btn--ghost { background: transparent; color: currentColor; border-color: color-mix(in srgb, currentColor 55%, transparent); }
.btn--ghost:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 10%, transparent); }

.btn--sm { font-size: var(--step--1); padding: 0.7em 1.15em; }

/* =========================================================
   4. HLAVIČKA
   ========================================================= */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 72px;
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.06rem; letter-spacing: -0.01em; line-height: 1;
}
.brand__sub {
  display: block;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.75rem); }
.nav a {
  text-decoration: none; font-weight: 600; font-size: var(--step--1);
  letter-spacing: 0.02em; color: var(--text-muted);
  padding: 0.35rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--text); border-bottom-color: var(--accent); }
.nav-more { position: relative; }
.nav-more summary {
  cursor: pointer; list-style: none; font-weight: 600; font-size: var(--step--1);
  letter-spacing: 0.02em; color: #C5D0DB; padding: 0.35rem 1.05rem 0.35rem 0;
}
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after {
  content: ""; position: absolute; right: 0; top: 0.72rem; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.18s ease;
}
.nav-more[open] summary::after { transform: translateY(3px) rotate(225deg); }
.nav-more__menu {
  position: absolute; top: calc(100% + 0.7rem); right: 0; min-width: 220px;
  display: grid; padding: 0.55rem; background: var(--navy-900);
  border: 1px solid rgba(247,245,238,0.15); border-radius: var(--radius-lg);
  box-shadow: 0 18px 45px rgba(0,0,0,0.28);
}
.nav-more__menu a { padding: 0.65rem 0.8rem; border-radius: var(--radius); }
.nav-more__menu a:hover { background: rgba(247,245,238,0.08); }
.nav-more.is-current summary { color: var(--bone-50); }

.nav-toggle { display: none; }

@media (max-width: 1040px) {
  .nav { display: none; }
  .site-header__cta .btn { padding: 0.7em 1.1em; font-size: var(--step--1); }
}

/* =========================================================
   5. HERO
   ========================================================= */

.hero {
  position: relative;
  background: var(--navy-900);
  color: var(--bone-50);
  padding-block: clamp(4rem, 11vw, 8.5rem) clamp(0rem, 2vw, 2rem);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 78% 12%, rgba(214,187,95,0.20), transparent 65%),
    radial-gradient(50% 60% at 8% 90%, rgba(48,88,96,0.55), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.hero h1 { color: var(--bone-50); max-width: 15ch; }
.hero h1 .accent { color: var(--gold-400); }
.hero__lede { color: #C5D0DB; font-size: var(--step-1); max-width: 46ch; line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero .eyebrow { color: var(--gold-400); }
.hero__card {
  background: rgba(18,26,37,0.55);
  border: 1px solid rgba(246,242,234,0.16);
  border-radius: var(--radius-lg);
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
  backdrop-filter: blur(6px);
}

/* Pásek s časy — provozní údaje, které hostel opravdu má */
.timestrip {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid rgba(246,242,234,0.18);
  border-bottom: 1px solid rgba(246,242,234,0.18);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.timestrip__item {
  padding: 1.1rem 0.25rem;
  border-right: 1px solid rgba(246,242,234,0.12);
}
.timestrip__item:last-child { border-right: 0; }
.timestrip__label {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #93A2B1; margin: 0 0 0.35rem;
}
.timestrip__value {
  font-family: var(--font-mono); font-size: var(--step-1); font-weight: 500;
  color: var(--gold-400); font-variant-numeric: tabular-nums; margin: 0;
}

/* =========================================================
   6. SEKCE
   ========================================================= */

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--navy-900); color: var(--bone-50); }
.section--dark .lede { color: #C5D0DB; }
.section--dark .eyebrow { color: var(--gold-400); }

.section__head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) {
  .section__head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 4rem); align-items: end;
  }
}

/* =========================================================
   7. POKOJE
   ========================================================= */

.rooms {
  display: grid; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.room {
  background: var(--surface);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: 0.85rem;
}
.room__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.85rem; }
.room__top h3 { flex: 1 1 auto; min-width: 0; }
.room__cap {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint);
  border: 1px solid var(--rule-strong); border-radius: 100px;
  padding: 0.28rem 0.62rem; white-space: nowrap; flex: none;
}
.room h3 { font-size: var(--step-1); }
.room__desc { font-size: var(--step--1); color: var(--text-muted); flex: 1; }
.room__feat {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.room__feat li {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--text-faint); background: var(--bg-alt);
  padding: 0.25rem 0.5rem; border-radius: 3px;
}
.room__link {
  font-weight: 700; font-size: var(--step--1); text-decoration: none;
  color: var(--accent); display: inline-flex; align-items: center; gap: 0.4em;
  align-self: flex-start;
}
.room__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.room--highlight { background: var(--gold-100); }


.rooms-note {
  margin-top: 1.25rem; font-size: var(--step--1); color: var(--text-faint);
  font-family: var(--font-mono);
}
.price--dynamic { font-size: .76rem; color: var(--link); font-family: var(--font-mono); line-height: 1.4; }

/* =========================================================
   8. BAR A PROSTORY
   ========================================================= */

.split {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

.facilities { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.facilities li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem;
  padding: 0.9rem 0; border-bottom: 1px solid rgba(246,242,234,0.14);
  font-size: var(--step-0);
}
.facilities li:first-child { border-top: 1px solid rgba(246,242,234,0.14); }
.facilities li::before {
  content: ""; width: 7px; height: 7px; margin-top: 0.62em;
  border-radius: 50%; background: var(--gold-400);
}

/* =========================================================
   9. PROGRAM / ERASMUS
   ========================================================= */

.cards { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 1.9rem);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.card h3 { font-size: var(--step-1); }
.card p { font-size: var(--step--1); color: var(--text-muted); }

.stay {
  border-left: 4px solid var(--gold-500);
  background: var(--surface);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: clamp(1.6rem, 4vw, 2.5rem);
  display: grid; gap: 1.25rem;
}
@media (min-width: 900px) {
  .stay { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 3rem); }
}

/* =========================================================
   10. FAQ
   ========================================================= */

.faq { border-top: 1px solid var(--rule); }
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem 0;
  font-weight: 700; font-size: var(--step-0);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 1.4rem; line-height: 1;
  color: var(--accent); flex: none; transition: transform 0.2s ease;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { color: var(--accent); }
.faq__body { padding: 0 0 1.35rem; max-width: var(--measure); color: var(--text-muted); font-size: var(--step--1); }
.faq__body p + p { margin-top: 0.7rem; }
.faq__body ul { margin: 0.7rem 0 0; padding-left: 1.1rem; }
.faq__body li + li { margin-top: 0.35rem; }

.faq-cols { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 980px) {
  .faq-cols { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); align-items: start; }
  .faq-cols > .stack { position: sticky; top: 104px; }
}

/* =========================================================
   11. KONTAKT A PATIČKA
   ========================================================= */

.contact-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.contact-block h3 {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 0.75rem;
}
.contact-block p, .contact-block a { font-size: var(--step-1); line-height: 1.45; text-decoration: none; }
.contact-block a:hover { color: var(--link); }

.map-embed {
  margin-top: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 21 / 8; min-height: 260px;
  background: var(--bg-alt);
  position: relative;
}
.map-embed::before {
  content: "Spálená 83/3 · 110 00 Praha 1";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.08em; color: var(--text-faint); text-align: center;
}
.map-embed iframe { position: relative; }
.map-link {
  display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.9rem;
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.06em;
  color: var(--link); text-decoration: none;
}
.map-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.site-footer {
  background: var(--navy-950); color: var(--bone-50);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); } }
.site-footer h4 {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: #93A2B1; margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer a { text-decoration: none; color: #D3DDE6; font-size: var(--step--1); }
.site-footer a:hover { color: var(--gold-400); }
.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(246,242,234,0.14);
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.7rem; color: #8A97A6; letter-spacing: 0.04em;
}

/* Plovoucí rezervační lišta na mobilu */
.booking-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--navy-900); border-top: 1px solid var(--navy-700);
  padding: 0.7rem var(--gutter);
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
}
.booking-bar__txt { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #93A2B1; }
@media (max-width: 700px) {
  .booking-bar { display: flex; }
  body { padding-bottom: 68px; }
}

/* =========================================================
   12. OBSAHOVÉ STRÁNKY (page.php / single.php)
   ========================================================= */

.page-hero { background: var(--bg-alt); padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--rule); }
.entry-content { --flow: 1.15rem; max-width: var(--measure); }
.entry-content > * + * { margin-top: var(--flow); }
.entry-content h2 { margin-top: 2.5rem; font-size: var(--step-3); }
.entry-content h3 { margin-top: 2rem; }
.entry-content ul, .entry-content ol { padding-left: 1.3rem; }
.entry-content a { color: var(--link); text-underline-offset: 3px; }
.entry-content img { border-radius: var(--radius-lg); }
.entry-content blockquote {
  border-left: 3px solid var(--gold-500); padding-left: 1.25rem;
  font-size: var(--step-1); color: var(--text-muted); font-style: italic;
}

/* =========================================================
   13. FOTOGRAFIE
   ========================================================= */

/* --- Hero s fotkou --- */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg .hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,  rgba(20,29,41,0.90) 0%,  rgba(20,29,41,0.78) 30%, rgba(20,29,41,0.34) 62%, rgba(20,29,41,0.28) 100%),
    linear-gradient(180deg, rgba(20,29,41,0.30) 0%,  rgba(20,29,41,0.06) 26%, rgba(20,29,41,0.55) 72%, rgba(20,29,41,0.92) 100%);
}
@media (max-width: 899px) {
  /* Na mobilu leží text přes celou šířku, takže potřebuje rovnoměrný přechod. */
  .hero__bg::after {
    background: linear-gradient(180deg, rgba(20,29,41,0.78) 0%, rgba(20,29,41,0.72) 40%, rgba(20,29,41,0.92) 100%);
  }
}
.hero { background: var(--navy-950); }
.hero::after { z-index: 0; }

/* --- Obrázek v sekci --- */
.figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-alt); }
.figure__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* --- Karta pokoje s fotkou --- */
.room { padding: 0; overflow: hidden; }
.room__media { display: block; overflow: hidden; background: var(--bg-alt); }
.room__img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform 0.4s ease;
}
.room__media:hover .room__img { transform: scale(1.04); }
.room__body {
  padding: clamp(1.25rem, 2.5vw, 1.65rem);
  display: flex; flex-direction: column; gap: 0.8rem; flex: 1;
}

/* --- Pás fotek společných prostor --- */
.strip {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px)  { .strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1050px) { .strip { grid-template-columns: repeat(6, 1fr); } }
.strip__item {
  display: block; overflow: hidden; border-radius: var(--radius);
  background: rgba(246,242,234,0.06);
}
.strip__item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s ease, opacity 0.2s ease; }
.strip__item:hover img { transform: scale(1.05); opacity: 0.92; }
@media (min-width: 1050px) { .strip__item--wide { grid-column: span 2; } }
@media (min-width: 760px) and (max-width: 1049px) { .strip__item--wide { grid-column: span 3; } }
@media (max-width: 759px) { .strip__item--wide { grid-column: span 2; } }

/* --- Mozaiková galerie --- */
.mosaic {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .mosaic { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1050px) { .mosaic { grid-template-columns: repeat(4, 1fr); } }
.mosaic__item {
  display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--bg); border: 1px solid var(--rule);
}
.mosaic__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s ease; }
.mosaic__item:hover img { transform: scale(1.05); }
/* První fotka dostane dvojnásobek, ať mřížka není monotónní a zaplní se beze zbytku */
@media (min-width: 1050px) {
  .mosaic__item:first-child { grid-column: span 2; grid-row: span 2; }
  .mosaic__item:first-child img { aspect-ratio: 1 / 1; height: 100%; }
}

/* =========================================================
   14. KONTAKTNÍ FORMULÁŘ
   ========================================================= */

.contact-layout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }

.cform {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, 2.25rem);
  display: grid; gap: 1rem;
}
.cform__row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .cform__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cform label {
  display: block;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.4rem;
}
.cform input, .cform textarea {
  width: 100%; font: inherit; font-size: var(--step-0);
  color: var(--text); background: var(--bg);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
}
.cform input:focus, .cform textarea:focus { border-color: var(--accent); }
.cform textarea { min-height: 140px; resize: vertical; }
.cform__hp { position: absolute; left: -9999px; }
.cform__note { font-size: 0.78rem; color: var(--text-faint); margin: 0; }
.cform__msg {
  padding: 0.9rem 1.1rem; border-radius: var(--radius); font-size: var(--step--1);
  border-left: 3px solid var(--accent); background: var(--bg-alt);
}
.cform__msg--ok { border-left-color: #1C6349; }
.cform__msg--err { border-left-color: #A32B21; }

/* =========================================================
   15. ÚVODNÍ OBRAZOVKA
   ========================================================= */

html.is-loading, html.modal-open, html.nav-open { overflow: hidden; }

.loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--navy-950);
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
.loader.is-out { opacity: 0; visibility: hidden; }
.loader__inner { display: grid; justify-items: center; gap: 0.55rem; text-align: center; padding: 2rem; }
.loader__clock { width: 76px; height: 76px; }
.loader__ring { stroke: rgba(214,187,95,0.28); }
.loader__hand { stroke: var(--gold-400); transform-origin: 60px 60px; }
.loader__hand--h { animation: ci-hand 3.3s cubic-bezier(.45,0,.15,1) forwards; }
.loader__hand--m { animation: ci-hand-m 3.3s cubic-bezier(.45,0,.15,1) forwards; }
.loader__pin { fill: var(--gold-400); }
@keyframes ci-hand   { from { transform: rotate(0deg); } to { transform: rotate(300deg); } }
@keyframes ci-hand-m { from { transform: rotate(0deg); } to { transform: rotate(1080deg); } }

.loader__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--bone-50); margin: 0.7rem 0 0; letter-spacing: -0.01em;
  animation: ci-fade 0.6s 0.15s both;
}
.loader__sub {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: #8A97A6; margin: 0;
  animation: ci-fade 0.6s 0.28s both;
}
.loader__bar {
  display: block; width: 132px; height: 2px; margin-top: 1.1rem;
  background: rgba(246,242,234,0.14); overflow: hidden; border-radius: 2px;
}
.loader__bar i {
  display: block; height: 100%; width: 100%;
  background: var(--gold-500); transform-origin: left;
  animation: ci-bar 3.3s cubic-bezier(.35,0,.2,1) forwards;
}
@keyframes ci-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ci-bar  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =========================================================
   16. ODKRÝVÁNÍ PŘI SCROLLOVÁNÍ
   ========================================================= */

.anim-ready { opacity: 0; will-change: transform, opacity; }
.anim-ready[data-anim="up"]    { transform: translateY(26px); }
.anim-ready[data-anim="right"] { transform: translateX(-22px); }
.anim-ready[data-anim="scale"] { transform: scale(0.965); }
.anim-ready.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
.reduce-motion .anim-ready { opacity: 1 !important; transform: none !important; }

/* Nadpis hera — odkrytí po řádcích */
.hero__title { margin: 0; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.js:not(.reduce-motion) .hero__title .line > span {
  transform: translateY(105%);
  animation: ci-line 0.95s cubic-bezier(.16,1,.3,1) forwards;
}
.js:not(.reduce-motion) .hero__title .line:nth-child(1) > span { animation-delay: 0.18s; }
.js:not(.reduce-motion) .hero__title .line:nth-child(2) > span { animation-delay: 0.32s; }
@keyframes ci-line { to { transform: translateY(0); } }
.hero__title em { font-style: normal; color: var(--gold-400); }

/* =========================================================
   17. HLAVIČKA — průběh, zmenšení, mobilní menu
   ========================================================= */

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80;
  background: transparent; pointer-events: none;
}
.scroll-progress__bar {
  height: 100%; background: var(--gold-500);
  transform: scaleX(0); transform-origin: left;
}

.site-header { transition: min-height 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; }
.site-header.is-stuck {
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  box-shadow: 0 1px 0 var(--rule), 0 10px 30px -24px rgba(22,32,44,0.5);
}
.site-header.is-stuck .site-header__inner { min-height: 62px; }
.site-header__inner { transition: min-height 0.25s ease; }
.brand__mark { transition: transform 0.3s cubic-bezier(.16,1,.3,1); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.05); }

.nav a { position: relative; transition: color 0.2s ease; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform 0.32s cubic-bezier(.16,1,.3,1);
}
.nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav a.is-current { color: var(--text); }
.nav a { border-bottom: 0; }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  cursor: pointer; color: var(--text);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform 0.3s cubic-bezier(.16,1,.3,1), opacity 0.2s ease;
}
.nav-toggle span { margin: 0 auto; position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 70;
  background: var(--navy-950); color: var(--bone-50);
  display: grid; align-content: center; gap: 0.25rem;
  padding: 6rem var(--gutter) 3rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.32s ease, visibility 0.32s ease, transform 0.32s cubic-bezier(.16,1,.3,1);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a {
  display: block; text-decoration: none; color: var(--bone-50);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 8vw, 2.4rem);
  letter-spacing: -0.02em; padding: 0.35rem 0;
  opacity: 0; transform: translateY(14px);
}
.mobile-nav.is-open a { animation: ci-fade 0.5s forwards; }
.mobile-nav.is-open a:nth-child(1) { animation-delay: 0.06s; }
.mobile-nav.is-open a:nth-child(2) { animation-delay: 0.11s; }
.mobile-nav.is-open a:nth-child(3) { animation-delay: 0.16s; }
.mobile-nav.is-open a:nth-child(4) { animation-delay: 0.21s; }
.mobile-nav.is-open a:nth-child(5) { animation-delay: 0.26s; }
.mobile-nav.is-open a:nth-child(6) { animation-delay: 0.31s; }
.mobile-nav a:hover, .mobile-nav a.is-current { color: var(--gold-400); }
.mobile-nav__foot {
  margin-top: 2rem; font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; color: #8A97A6; display: grid; gap: 0.4rem;
}
.mobile-nav__foot a { font-family: var(--font-body); font-size: var(--step-0); font-weight: 600; letter-spacing: 0; }

@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: grid; place-items: center; }
}
@media (min-width: 901px) { .mobile-nav { display: none; } }

/* =========================================================
   18. HERO — doplňky
   ========================================================= */

.hero__grid { align-items: center; }
.hero__copy { display: grid; gap: 1.5rem; }
.hero__addr { font-size: var(--step-1); color: #DCE4EC; line-height: 1.5; margin: 0; }
.hero__dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.hero__dist li {
  font-family: var(--font-mono); font-size: 0.75rem; color: #A9B6C3;
  letter-spacing: 0.04em; display: grid; grid-template-columns: 4.2rem 1fr; gap: 0.5rem;
}
.hero__dist span { color: var(--gold-400); }
.hero__dist em { font-style: normal; opacity: 0.65; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  width: 26px; height: 46px; display: grid; place-items: start center;
  border: 1px solid rgba(246,242,234,0.3); border-radius: 20px; z-index: 2;
}
.hero__scroll-line {
  width: 2px; height: 8px; margin-top: 8px; border-radius: 2px; background: var(--gold-400);
  animation: ci-scroll 1.9s ease-in-out infinite;
}
@keyframes ci-scroll { 0%,100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(16px); opacity: 0.2; } }
.reduce-motion .hero__scroll-line { animation: none; }
@media (max-width: 899px) { .hero__scroll { display: none; } }

.timestrip__item { transition: background-color 0.25s ease; }
.timestrip__item:hover { background: rgba(246,242,234,0.05); }

/* =========================================================
   20. ČÍSLA
   ========================================================= */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1.25rem; margin-top: 0.6rem;
  border-top: 1px solid var(--rule); padding-top: 1.5rem;
}
.stat { display: grid; gap: 0.15rem; }
.stat__n {
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-3);
  line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums;
}
.stat__l { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }

/* =========================================================
   21. POKOJE — doplňky
   ========================================================= */

.room { transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s ease; }
.room:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -30px rgba(22,32,44,0.55); z-index: 2; }
.room__media { position: relative; width: 100%; padding: 0; border: 0; cursor: pointer; background: var(--bg-alt); }
.room__badge, .room__flag {
  position: absolute; font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 100px;
}
.room__badge { right: 0.7rem; bottom: 0.7rem; background: rgba(18,26,37,0.72); color: var(--bone-50); backdrop-filter: blur(4px); }
.roomx__representative {
  position: absolute; left: .8rem; bottom: .8rem; z-index: 2;
  padding: .35rem .62rem; border-radius: 3px; background: rgba(18,26,37,.78);
  color: var(--bone-50); font: 500 .68rem/1.2 var(--font-mono); letter-spacing: .04em;
}
.room__flag  { left: 0.7rem;  top: 0.7rem;    background: var(--gold-500); color: var(--accent-ink); font-weight: 700; }

.room__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: auto; padding-top: 0.35rem; }
.room__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: var(--step--1);
  color: var(--link); display: inline-flex; align-items: center; gap: 0.4em;
}
.room__link svg { width: 17px; height: 17px; transition: transform 0.28s cubic-bezier(.16,1,.3,1); }
.room__link:hover svg { transform: translateX(4px); }

.btn--outline { background: transparent; border-color: var(--rule-strong); color: var(--text); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.btn--lg { font-size: var(--step-0); padding: 1.05em 1.9em; }
.btn__arrow { width: 18px; height: 18px; transition: transform 0.28s cubic-bezier(.16,1,.3,1); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* =========================================================
   22. GALERIE — filtr a lupa
   ========================================================= */

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-self: end; }
.filter {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.55rem 1rem; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--text-muted);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter:hover { border-color: var(--accent); color: var(--accent); }
.filter.is-active { background: var(--navy-900); border-color: var(--navy-900); color: var(--bone-50); }

.mosaic__item { position: relative; border: 0; padding: 0; cursor: pointer; }
.mosaic__item.is-filtering { animation: ci-pop 0.45s cubic-bezier(.16,1,.3,1) both; }
@keyframes ci-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
.reduce-motion .mosaic__item.is-filtering { animation: none; }
.mosaic__zoom {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(18,26,37,0.45); color: var(--bone-50);
  opacity: 0; transition: opacity 0.28s ease;
}
.mosaic__zoom svg { width: 30px; height: 30px; transform: scale(0.85); transition: transform 0.28s cubic-bezier(.16,1,.3,1); }
.mosaic__item:hover .mosaic__zoom, .mosaic__item:focus-visible .mosaic__zoom { opacity: 1; }
.mosaic__item:hover .mosaic__zoom svg { transform: scale(1); }

.strip__item { border: 0; padding: 0; cursor: pointer; }

/* =========================================================
   23. FAQ — doplňky
   ========================================================= */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.faq-search input {
  width: 100%; font: inherit; font-size: var(--step--1);
  padding: 0.7rem 0.9rem; border-radius: var(--radius);
  border: 1px solid var(--rule-strong); background: var(--bg); color: var(--text);
}
.faq-search input:focus { border-color: var(--accent); }
.faq-empty { font-size: var(--step--1); color: var(--text-muted); }
.faq-empty a { color: var(--link); }

.faq summary span { flex: 1; }
.faq details { transition: background-color 0.2s ease; }
.faq details[open] { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.faq details[open] .faq__body { animation: ci-faq 0.35s cubic-bezier(.16,1,.3,1); }
@keyframes ci-faq { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.reduce-motion .faq details[open] .faq__body { animation: none; }
.faq summary { padding-inline: 0.75rem; }
.faq__body { padding-inline: 0.75rem; }

/* =========================================================
   24. MODÁLNÍ OKNA
   ========================================================= */

.modal { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; }
.modal::backdrop { background: rgba(16,23,33,0.86); backdrop-filter: blur(4px); animation: ci-fadein 0.3s ease; }
@keyframes ci-fadein { from { opacity: 0; } to { opacity: 1; } }
.modal[open] { display: grid; place-items: center; inset: 0; width: 100vw; height: 100dvh; }
.modal__shell { animation: ci-modal 0.42s cubic-bezier(.16,1,.3,1); }
@keyframes ci-modal { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
.reduce-motion .modal__shell { animation: none; }

.modal__close {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.modal__close:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--accent-ink); transform: rotate(90deg); }
.modal__close svg { width: 20px; height: 20px; }
.modal__close--float {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 5;
  background: rgba(18,26,37,0.6); border-color: rgba(246,242,234,0.28); color: var(--bone-50);
  backdrop-filter: blur(6px);
}

/* --- Rezervace --- */
.modal--booking .modal__shell {
  width: min(96vw, 1080px); height: min(92dvh, 900px);
  background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7);
}
.modal__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem; border-bottom: 1px solid var(--rule); background: var(--bg-alt);
}
.modal__eyebrow { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0; }
.modal__title { font-weight: 700; margin: 0.15rem 0 0; font-size: var(--step-0); }
.modal__frame { position: relative; background: var(--bg); }
.modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; opacity: 0; transition: opacity 0.4s ease; }
.modal__frame iframe.is-ready { opacity: 1; }
.modal__note {
  margin: 0; padding: 0.75rem 1.15rem; font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.06em; color: var(--text-faint);
  border-top: 1px solid var(--rule); background: var(--bg-alt); text-align: center;
}
.frame-loader, .frame-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center;
  gap: 1rem; text-align: center; color: var(--text-muted); font-size: var(--step--1);
}
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--rule-strong); border-top-color: var(--accent);
  animation: ci-spin 0.85s linear infinite;
}
@keyframes ci-spin { to { transform: rotate(360deg); } }

/* --- Detail pokoje --- */
.modal--room .modal__shell {
  position: relative; width: min(96vw, 1120px); max-height: 92dvh; overflow: auto;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7);
}
.roomx { display: grid; }
@media (min-width: 900px) { .roomx { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.roomx__stage { position: relative; background: var(--navy-950); }
.roomx__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; opacity: 0; transition: opacity 0.35s ease; }
.roomx__img.is-in { opacity: 1; }
.roomx__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(246,242,234,0.28);
  background: rgba(18,26,37,0.55); color: var(--bone-50); backdrop-filter: blur(6px);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.roomx__nav:hover { background: var(--gold-500); color: var(--accent-ink); border-color: var(--gold-500); }
.roomx__nav svg { width: 20px; height: 20px; }
.roomx__nav--prev { left: 0.7rem; }
.roomx__nav--next { right: 0.7rem; }
.roomx__counter {
  position: absolute; left: 0.9rem; bottom: 0.9rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  background: rgba(18,26,37,0.65); color: var(--bone-50);
  padding: 0.28rem 0.6rem; border-radius: 100px; backdrop-filter: blur(4px);
}
.roomx__thumbs { display: flex; gap: 6px; padding: 6px; background: var(--navy-950); overflow-x: auto; }
.roomx__thumb {
  flex: 0 0 74px; height: 54px; padding: 0; cursor: pointer; overflow: hidden;
  border: 2px solid transparent; border-radius: 3px; background: none; opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.roomx__thumb img { width: 100%; height: 100%; object-fit: cover; }
.roomx__thumb:hover { opacity: 0.85; }
.roomx__thumb.is-active { opacity: 1; border-color: var(--gold-500); }

.roomx__body { padding: clamp(1.5rem, 3.5vw, 2.4rem); display: grid; gap: 1rem; align-content: start; }
.roomx__title { font-size: var(--step-3); }
.roomx__text { color: var(--text-muted); font-size: var(--step-0); }
.roomx__feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.roomx__feat li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: baseline;
  font-size: var(--step--1); color: var(--text);
}
.roomx__feat li::before { content: "✓"; color: var(--teal-500); font-weight: 700; }
.roomx__cta { margin-top: 0.5rem; display: grid; gap: 0.7rem; justify-items: start; }
.roomx__note { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--text-faint); margin: 0; }

/* --- Zvětšení fotky --- */
.modal--lightbox[open] { padding: clamp(1rem, 4vw, 3rem); }
.lb__figure { margin: 0; display: grid; gap: 0.85rem; justify-items: center; }
.lb__img {
  max-width: min(92vw, 1280px); max-height: 78dvh; object-fit: contain;
  border-radius: var(--radius); background: #101720;
  opacity: 0; transition: opacity 0.3s ease;
}
.lb__img.is-in { opacity: 1; }
.lb__caption {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em;
  color: #A9B6C3; text-align: center;
}
.lb__caption em { font-style: normal; color: var(--gold-400); margin-left: 0.5rem; }
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(246,242,234,0.25);
  background: rgba(18,26,37,0.5); color: var(--bone-50); backdrop-filter: blur(6px);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lb__nav:hover { background: var(--gold-500); color: var(--accent-ink); border-color: var(--gold-500); }
.lb__nav svg { width: 22px; height: 22px; }
.lb__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lb__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }

/* =========================================================
   25. NAHORU + FORMULÁŘ (stavy)
   ========================================================= */

.to-top {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 55; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--text);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
  box-shadow: 0 12px 30px -18px rgba(22,32,44,0.6);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--accent-ink); }
.to-top svg { width: 20px; height: 20px; }
@media (max-width: 700px) { .to-top { bottom: 80px; } }

.cform.is-sending { opacity: 0.65; pointer-events: none; }
.cform button[type=submit] { position: relative; }
.cform.is-sending button[type=submit]::after {
  content: ""; width: 16px; height: 16px; margin-left: 0.6rem; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: ci-spin 0.8s linear infinite;
}
.cform__msg { animation: ci-fade 0.4s both; }

/* =========================================================
   26. DOLADĚNÍ PO KONTROLE
   ========================================================= */

/* Galerie v detailu pokoje musí vyplnit celý sloupec, ne skončit bílým místem. */
.roomx__gallery { background: var(--navy-950); display: grid; grid-template-rows: 1fr auto; min-height: 0; }
.roomx__stage { display: grid; }
@media (min-width: 900px) {
  .roomx__img { aspect-ratio: auto; height: 100%; min-height: 340px; }
}

/* Pozadí za zvětšenou fotkou bylo moc světlé. */
.modal--lightbox::backdrop { background: rgba(14,20,29,0.94); }

/* Při otevřeném mobilním menu musí zůstat vidět logo i křížek. */
.site-header { z-index: 78; }
html.nav-open .site-header {
  background: transparent; box-shadow: none; border-bottom-color: transparent;
}
html.nav-open .brand__name,
html.nav-open .nav-toggle { color: var(--bone-50); }
html.nav-open .brand__sub { color: #8A97A6; }
html.nav-open .nav-toggle { border-color: rgba(246,242,234,0.28); }

/* Tisk a náhledy: nic se nesmí schovat za animací. */
@media print {
  .anim-ready { opacity: 1 !important; transform: none !important; }
  .loader, .scroll-progress, .to-top, .booking-bar, .nav-toggle, .mobile-nav { display: none !important; }
  .site-header { position: static; }
  .hero { color: #16202C; }
  .hero__bg { display: none; }
}

/* =========================================================
   27. MŘÍŽKY FOTEK — ať se vždy zaplní beze zbytku
   ========================================================= */

/* Pás u baru: pět fotek, pět stejných sloupců. */
.strip { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .strip { grid-template-columns: repeat(5, 1fr); } }
.strip__item--wide { grid-column: auto !important; }
.strip__item img { height: auto; aspect-ratio: 4 / 3; }

/* Galerie: 24 fotek celkem, 18 pokojů, 6 prostor — dělitelné 1, 2 i 3,
   takže poslední řádek nikdy nezůstane poloprázdný. */
.mosaic { grid-template-columns: 1fr; }
@media (min-width: 560px)  { .mosaic { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mosaic { grid-template-columns: repeat(3, 1fr); } }
.mosaic__item:first-child { grid-column: auto; grid-row: auto; }
.mosaic__item:first-child img { aspect-ratio: 4 / 3; height: auto; }

/* =========================================================
   28. PRODEJNÍ BLOKY A PODSTRÁNKY
   ========================================================= */

.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* --- Proč rezervovat přímo --- */
.trust {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust__item {
  background: var(--surface); padding: clamp(1.4rem, 3vw, 1.85rem);
  display: grid; gap: 0.55rem; align-content: start;
}
.trust__icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: var(--teal-100); color: var(--teal-600);
  margin-bottom: 0.3rem;
}
.trust__icon svg { width: 21px; height: 21px; }
.trust__item h3 { font-size: var(--step-0); }
.trust__item p { font-size: var(--step--1); color: var(--text-muted); }

/* --- Veřejná hodnocení --- */
.section--reviews { padding-block: clamp(2.7rem, 6vw, 5rem); background: var(--navy-900); color: var(--bone-50); }
.reviews { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .reviews { grid-template-columns: minmax(0,.8fr) minmax(0,1.25fr) minmax(220px,.7fr); } }
.reviews__score { display: grid; gap: 0.35rem; }
.reviews__score .eyebrow { color: var(--gold-400); }
.reviews__number { font: 800 clamp(3.8rem,8vw,6.8rem)/.88 var(--font-display); color: var(--gold-400); letter-spacing: -.07em; }
.reviews__score h2 { font-size: var(--step-2); }
.reviews__score > p:last-child { color: #AEBAC7; font-size: var(--step--1); }
.reviews__quote { margin: 0; padding: 0 0 0 clamp(1.25rem,3vw,2.25rem); border-left: 2px solid var(--gold-400); }
.reviews__quote p { font-size: var(--step-2); line-height: 1.38; font-weight: 600; }
.reviews__quote footer { margin-top: 1rem; color: #AEBAC7; font-family: var(--font-mono); font-size: .76rem; }
.reviews__metrics { display: grid; gap: 0.65rem; }
.reviews__metrics div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(247,245,238,.14); }
.reviews__metrics span { color: #C5D0DB; }
.reviews__metrics strong { color: var(--gold-400); font-family: var(--font-mono); }
.reviews__metrics a { margin-top: .35rem; color: var(--teal-300); font-weight: 700; text-underline-offset: 3px; }
.reviews__metrics small { color: #8493A2; font-family: var(--font-mono); }

/* --- Odkaz se šipkou --- */
.linkarrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 700; font-size: var(--step-0); text-decoration: none; color: var(--link);
  border-bottom: 2px solid color-mix(in srgb, var(--link) 35%, transparent);
  padding-bottom: 0.2em;
  transition: border-color 0.22s ease;
}
.linkarrow:hover { border-bottom-color: var(--link); }
.linkarrow svg { width: 18px; height: 18px; transition: transform 0.28s cubic-bezier(.16,1,.3,1); }
.linkarrow:hover svg { transform: translateX(4px); }
.section--dark .linkarrow { color: var(--link-on-dark); border-bottom-color: color-mix(in srgb, var(--link-on-dark) 40%, transparent); }

/* --- Závěrečná výzva --- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--navy-900); color: var(--bone-50);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.cta-band__bg { position: absolute; inset: 0; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(20,29,41,0.95) 0%, rgba(20,29,41,0.82) 48%, rgba(20,29,41,0.55) 100%);
}
.cta-band__inner {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
}
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.cta-band h2 { font-size: var(--step-4); }
.cta-band .eyebrow { color: var(--gold-400); }
.cta-band .lede { color: #C5D0DB; }
.cta-band__actions { display: grid; gap: 1.1rem; justify-items: start; }
.cta-band__phone {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em;
  color: #93A2B1; line-height: 1.9; margin: 0;
}
.cta-band__phone a {
  color: var(--bone-50); font-size: var(--step-1); font-family: var(--font-body);
  font-weight: 700; letter-spacing: 0; text-decoration: none;
}
.cta-band__phone a:hover { color: var(--gold-400); }

/* --- Hlavička podstránky --- */
.page-hero {
  background: var(--bg-alt); border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
}
.page-hero > .wrap { display: grid; gap: 0.9rem; }
.page-hero h1 { font-size: var(--step-5); }
.page-hero .lede { max-width: 58ch; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.3rem;
}
.crumbs a { color: var(--text-faint); text-decoration: none; }
.crumbs a:hover { color: var(--link); }

/* --- Světlé varianty tmavých bloků (pro podstránku Bar) --- */
.facilities--light li { border-bottom-color: var(--rule); }
.facilities--light li:first-child { border-top-color: var(--rule); }
.facilities--light li::before { background: var(--accent); }
.strip--light .strip__item { background: var(--bg-alt); }

/* Aktivní položka menu i mimo domovskou stránku */
.nav a.is-current { color: var(--text); }
.nav a.is-current::after { transform: scaleX(1); transform-origin: left; }

/* =========================================================
   29. PŘEPÍNAČ JAZYKA
   ========================================================= */

.langsw { display: flex; align-items: center; gap: 2px; flex: none; }
.langsw a {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-decoration: none; color: var(--text-faint);
  padding: 0.4rem 0.5rem; border-radius: 3px; line-height: 1;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.langsw a:hover { color: var(--link); background: var(--bg-alt); }
.langsw a.is-current { color: var(--text); background: var(--bg-alt); font-weight: 500; }
.langsw a + a { position: relative; }
.langsw a + a::before {
  content: ""; position: absolute; left: -2px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 12px; background: var(--rule-strong);
}
.langsw a.is-current + a::before, .langsw a:hover + a::before { background: transparent; }

.mobile-nav__foot .langsw { margin-top: 0.6rem; }
.mobile-nav__foot .langsw a { color: #8A97A6; padding-left: 0; }
.mobile-nav__foot .langsw a.is-current { color: var(--bone-50); background: transparent; }
.mobile-nav__foot .langsw a + a::before { background: rgba(247,245,238,0.25); left: 0; }

html.nav-open .langsw a { color: #8A97A6; }
html.nav-open .langsw a.is-current { color: var(--bone-50); background: transparent; }

@media (max-width: 900px) {
  .site-header .langsw { order: 2; }
}

/* Anglický nadpis je delší, potřebuje víc místa na řádek. */
.lang-en .hero h1 { max-width: 19ch; }

/* =========================================================
   30. TMAVÁ HLAVIČKA
   Logo hostelu je bílé na tmavém podkladu — na světlé liště by zmizelo.
   Hlavička je proto tmavě modrá, stejná jako podklad loga.
   ========================================================= */

.site-header {
  background: var(--navy-900);
  border-bottom: 1px solid rgba(247,245,238,0.10);
  backdrop-filter: none;
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--navy-900) 96%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -24px rgba(0,0,0,0.7);
}
.site-header__inner { min-height: 82px; }
.site-header.is-stuck .site-header__inner { min-height: 68px; }

.site-header .brand__mark {
  width: auto; height: 54px; flex: none;
  transition: height 0.25s ease, transform 0.3s cubic-bezier(.16,1,.3,1);
}
.site-header.is-stuck .brand__mark { height: 44px; }
.site-header .brand__sub { color: #93A2B1; margin-top: 0; }
.site-header .brand { gap: 0.85rem; }

.site-header .nav a { color: #C5D0DB; }
.site-header .nav a:hover, .site-header .nav a.is-current { color: var(--bone-50); }
.site-header .nav a::after { background: var(--gold-400); }

.site-header .langsw a { color: #93A2B1; }
.site-header .langsw a:hover { color: var(--gold-400); background: rgba(247,245,238,0.08); }
.site-header .langsw a.is-current { color: var(--bone-50); background: rgba(247,245,238,0.10); }
.site-header .langsw a + a::before { background: rgba(247,245,238,0.28); }

.site-header .nav-toggle { color: var(--bone-50); border-color: rgba(247,245,238,0.28); }

.hero { padding-block-start: clamp(2.5rem, 7vw, 5rem); }

/* Patička používá stejné logo, jen menší. */
.site-footer .brand__mark { width: auto; height: 62px; }
.site-footer .brand { align-items: center; gap: 0.9rem; }
.site-footer .brand__name { color: var(--bone-50); font-size: var(--step-0); letter-spacing: 0.01em; }

/* Jméno hostelu zůstává v kódu kvůli čtečkám a vyhledávačům, vizuálně ho nese logo. */
.brand__name--sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
  .site-header .brand__mark { height: 44px; }
  .site-header .brand__sub { display: none; }
}

/* =========================================================
   31. NABÍDKA JAZYKA
   Návrh, ne přesměrování — návštěvník si vybere sám.
   ========================================================= */

.langbar {
  background: var(--teal-600); color: var(--bone-50);
  font-size: var(--step--1);
  overflow: hidden; max-height: 0;
  transition: max-height 0.32s cubic-bezier(.16,1,.3,1);
}
.langbar.is-open { max-height: 14rem; }
.langbar[hidden] { display: none; }
@media print { .langbar { display: none; } }
.langbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
  padding-block: 0.7rem;
}
.langbar p { margin: 0; flex: 1 1 auto; }
.langbar a {
  color: var(--navy-900); background: var(--gold-400);
  font-weight: 700; text-decoration: none;
  padding: 0.45em 1em; border-radius: var(--radius); white-space: nowrap;
}
.langbar a:hover { background: var(--gold-300); }
.langbar button {
  background: none; border: 0; cursor: pointer; color: #D2EEF4;
  font: inherit; text-decoration: underline; text-underline-offset: 3px; padding: 0.3em;
}
.langbar button:hover { color: var(--bone-50); }
.reduce-motion .langbar { transition: none; }

/* =========================================================
   32. CENY, REZERVACE VE STRÁNCE, SKUPINY
   ========================================================= */

/* --- Cena „od" --- */
.price {
  margin: 0.25rem 0 0.15rem; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 0.3rem 0.45rem;
}
.price__from {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint);
}
.price__n {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.32rem; letter-spacing: -0.02em; color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.price__u { font-size: var(--step--1); color: var(--text-muted); }
.price--lg .price__n { font-size: 1.7rem; }
.roomx__price:empty { display: none; }
.roomx__price { margin-bottom: 0.9rem; }

/* --- Kompaktní hledání termínu --- */
.booknow { background: var(--bone-100); padding-block: clamp(1rem, 2.4vw, 1.75rem); }
.booknow__panel {
  background: var(--navy-900); color: var(--bone-50); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: 0 18px 45px -34px rgba(10,16,24,.8);
}
@media (min-width: 980px) { .booknow__panel { grid-template-columns: minmax(220px,.7fr) minmax(0,1.7fr); align-items: end; } }
.booknow__intro { display: grid; gap: .45rem; }
.booknow__intro .eyebrow { color: var(--gold-400); }
.booknow__intro h2 { font-size: var(--step-2); }
.booknow__intro > p:last-child { color: #B9C5D1; font-size: var(--step--1); line-height: 1.45; }
.booking-search { display: grid; grid-template-columns: 1fr; gap: .75rem; align-items: end; }
@media (min-width: 650px) { .booking-search { grid-template-columns: repeat(3,minmax(0,1fr)) auto; } }
.booking-search label { display: grid; gap: .35rem; min-width: 0; }
.booking-search label > span { color: #AEBAC7; font: 500 .68rem/1.2 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.booking-search input, .booking-search select {
  width: 100%; min-height: 50px; border: 1px solid rgba(247,245,238,.22); border-radius: var(--radius);
  background: rgba(247,245,238,.08); color: var(--bone-50); padding: .7rem .8rem;
  font: 600 var(--step--1)/1.2 var(--font-body); color-scheme: dark;
}
.booking-search input:focus, .booking-search select:focus { border-color: var(--gold-400); outline: 2px solid transparent; }
.booking-search .btn { min-height: 50px; white-space: nowrap; }
.booking-search__error { grid-column: 1 / -1; color: #FFD4C8; font-size: .78rem; }
.booknow__points {
  list-style: none; margin: .8rem 0 0; padding: 0 clamp(.25rem,2vw,1rem);
  display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem 1.6rem;
}
.booknow__points li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: start;
  font-size: var(--step--1); color: var(--text-muted);
}
.booknow__points li::before {
  content: ""; width: 15px; height: 15px; margin-top: 0.3em; border-radius: 50%;
  background: var(--link);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.section--home-stay { padding-block: clamp(2.75rem, 6vw, 5.25rem); }
.section--home-groups { padding-block: clamp(2rem, 4vw, 3.1rem); }
.section--home-faq { padding-block: clamp(2.75rem, 6vw, 5.25rem); }

/* --- Pobídka pro skupiny --- */
.groupbar {
  display: grid; gap: 1.25rem; align-items: center;
  background: var(--navy-900); color: var(--bone-50);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.4rem);
}
@media (min-width: 760px) {
  .groupbar { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; }
}
.groupbar__h {
  font-size: var(--step-2); margin: 0; letter-spacing: -0.02em; color: var(--bone-50);
}
.groupbar__d { margin: 0; color: #B7C2CE; font-size: var(--step--1); max-width: 56ch; }
.groupbar .btn { justify-self: start; }

/* --- Formulář pro skupiny --- */
.contact-layout--form { align-items: start; }
.cform--group select {
  width: 100%; font: inherit; color: var(--ink-900);
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); padding: 0.7em 0.85em;
}
.cform--group select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cform--group input[type="date"],
.cform--group input[type="number"] { font-variant-numeric: tabular-nums; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ticks li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start;
  font-size: var(--step--1); color: var(--text-muted);
}
.ticks li::before {
  content: ""; width: 15px; height: 15px; margin-top: 0.3em; border-radius: 50%;
  background: var(--link);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   33. DOPRAVA
   ========================================================= */

.travel-ticket {
  padding: clamp(1.1rem, 3vw, 1.5rem); margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid color-mix(in srgb, var(--teal-600) 35%, var(--rule));
  border-left: 4px solid var(--teal-600); border-radius: var(--radius);
  background: color-mix(in srgb, var(--teal-600) 7%, var(--surface));
  color: var(--text-muted); line-height: 1.7;
}
.route-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .route-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.route-card {
  padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px -38px rgba(20,28,39,0.45);
}
.route-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-bottom: 1rem; }
.route-card__meta span {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal-600);
}
.route-card h2 { font-size: var(--step-2); margin-bottom: 1.25rem; }
.route-card ol { margin: 0; padding: 0; list-style: none; counter-reset: route; display: grid; gap: 1rem; }
.route-card li {
  counter-increment: route; display: grid; grid-template-columns: 1.8rem 1fr;
  gap: 0.75rem; color: var(--text-muted); font-size: var(--step--1); line-height: 1.65;
}
.route-card li::before {
  content: counter(route); display: grid; place-items: center; width: 1.8rem; height: 1.8rem;
  border-radius: 50%; background: var(--navy-900); color: var(--gold-400);
  font: 500 0.68rem/1 var(--font-mono);
}
.travel-notes { display: grid; gap: 1rem; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 760px) { .travel-notes { grid-template-columns: 1fr 1fr; } }
.travel-notes article { padding: clamp(1.25rem, 3vw, 2rem); background: var(--bg-alt); border-radius: var(--radius-lg); }
.travel-notes h2 { font-size: var(--step-1); margin-bottom: 0.65rem; }
.travel-notes p { margin: 0; color: var(--text-muted); }
.travel-actions { margin: 2rem 0 0; }
.travel-source { margin: 1.25rem 0 0; color: var(--text-faint); font: 0.68rem/1.7 var(--font-mono); }

/* =========================================================
   34. PRÁVNÍ STRÁNKY
   ========================================================= */

.legal-doc { display: grid; gap: clamp(1.7rem, 4vw, 2.7rem); }
.legal-updated { margin: 0; color: var(--text-faint); font: 0.7rem/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.legal-section { padding-bottom: clamp(1.5rem, 3vw, 2.2rem); border-bottom: 1px solid var(--rule); }
.legal-section:last-child { border-bottom: 0; }
.legal-section h2 { font-size: var(--step-2); margin-bottom: 0.85rem; }
.legal-section p, .legal-section li { color: var(--text-muted); line-height: 1.75; }
.legal-section p:last-child, .legal-section ul:last-child { margin-bottom: 0; }
.legal-section ul { padding-left: 1.2rem; display: grid; gap: 0.55rem; }
.cookie-table { display: grid; gap: 0.75rem; margin: 1.25rem 0; }
@media (min-width: 700px) { .cookie-table { grid-template-columns: repeat(3, 1fr); } }
.cookie-table p { padding: 1rem; margin: 0; background: var(--bg-alt); border-radius: var(--radius); font-size: var(--step--1); }

/* =========================================================
   35. COOKIE LIŠTA A NASTAVENÍ
   ========================================================= */

.cookie-banner {
  position: fixed; z-index: 1200; inset: auto 0 0; padding: 0.75rem;
  filter: drop-shadow(0 -12px 36px rgba(10,16,24,0.22));
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__body {
  width: min(1180px, 100%); margin-inline: auto; padding: clamp(1rem, 2.5vw, 1.4rem);
  display: grid; gap: 1rem; align-items: center; background: var(--navy-900);
  color: var(--bone-50); border: 1px solid rgba(247,245,238,0.16); border-radius: var(--radius-lg);
}
@media (min-width: 900px) { .cookie-banner__body { grid-template-columns: minmax(0, 1fr) auto; } }
.cookie-banner h2 { margin: 0 0 0.35rem; color: var(--bone-50); font-size: var(--step-1); }
.cookie-banner p { margin: 0; color: #C5D0DB; font-size: var(--step--1); max-width: 70ch; }
.cookie-banner p a { color: var(--gold-400); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.cookie-banner .btn--outline { color: var(--bone-50); border-color: rgba(247,245,238,0.45); background: transparent; }
.cookie-banner .btn--outline:hover { border-color: var(--gold-400); color: var(--gold-400); }

.cookie-dialog { width: min(620px, calc(100% - 2rem)); padding: 0; border: 0; border-radius: var(--radius-lg); color: var(--text); background: var(--surface); }
.cookie-dialog::backdrop { background: rgba(10,16,24,0.72); backdrop-filter: blur(4px); }
.cookie-dialog__card { padding: clamp(1.25rem, 4vw, 2rem); }
.cookie-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cookie-dialog__head h2 { font-size: var(--step-2); }
.cookie-dialog__head button { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 1.8rem; line-height: 1; }
.cookie-choice { display: flex; justify-content: space-between; gap: 1.25rem; padding: 1rem 0; border-top: 1px solid var(--rule); cursor: pointer; }
.cookie-choice span { display: grid; gap: 0.25rem; }
.cookie-choice small { color: var(--text-muted); line-height: 1.45; }
.cookie-choice input { width: 1.2rem; height: 1.2rem; accent-color: var(--teal-600); flex: none; }
.cookie-dialog__link { font-size: var(--step--1); }
.cookie-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.65rem; margin-top: 1.25rem; }
.footer-cookie-link { border: 0; background: none; padding: 0; color: #B7C2CE; cursor: pointer; font: inherit; text-align: left; }
.footer-cookie-link:hover { color: var(--gold-400); }

.consent-embed__notice {
  position: absolute; z-index: 2; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: 0.8rem; padding: 1.25rem; text-align: center;
  background: var(--bg-alt);
}
.consent-embed__notice p { margin: 0; color: var(--text-muted); }
.consent-embed.is-consented .consent-embed__notice { display: none; }

@media print { .cookie-banner, .cookie-dialog, .footer-cookie-link { display: none !important; } }