/* =========================================================================
   Spolubydlim.cz — redesign 2026
   Vanilla HTML5 + CSS3 + JS, bez frameworků. 1:1 dle Figmy
   (file bnHU8qcVUONKhsKPuc1Jkh — Homepage redesign).

   Breakpointy dle style guide: mobil 390 (padding 20) · desktop 1440
   (padding 80, obsah 1280). Mobile-first.
   ========================================================================= */

/* ---- Design tokeny (Style guide — node 199:120) ---- */
:root {
  --primary:      #0059ff;   /* CTA, odkazy, akcenty (modrá z loga) */
  --primary-dark: #0047cc;   /* hover primární            */
  --ink:          #111a3d;   /* nadpisy, text             */
  --muted:        #5a6478;   /* sekundární text           */
  --muted-2:      #9aa5c4;   /* copyright, jemné popisky  */
  --bg:           #eef2fc;   /* pozadí sekcí              */
  --line:         #e1e7f5;   /* rámečky, oddělovače       */
  --green:        #1db954;   /* volné ihned               */
  --amber-dot:    #f09d1b;   /* tečka „později“           */
  --amber-text:   #b45309;   /* text „později“ (WCAG)     */
  --wa:           #25d366;   /* WhatsApp                  */
  --wa-dark:      #1eb455;
  --white:        #fff;

  /* rádiusy */
  --r-pill: 99px;   /* pilulky, chipy      */
  --r-card: 20px;   /* karty, modaly       */
  --r-btn:  12px;   /* tlačítka, inputy    */

  /* stíny */
  --sh-card:  0 10px 28px rgba(17, 26, 61, .10);
  --sh-modal: 0 14px 40px rgba(17, 26, 61, .25);
  --sh-pin:   0 3px 8px rgba(17, 26, 61, .20);
  --sh-cta:   0 8px 20px rgba(0, 89, 255, .35);

  /* layout */
  --pad: 20px;            /* mobil  */
  --maxw: 1280px;         /* obsah na desktopu */
  --header-h: 53px;       /* mobil; desktop 74 */

  --font-head: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ---- Vlnitý předěl mezi sekcemi ------------------------------------
     Jeden jediný tvar pro celý web, mění se jen jeho velikost — délka
     vlny a výška. Krajní body mají stejnou výšku i sklon, takže se
     opakováním navazuje bez zlomu. Používá se jako maska, barvu si bere
     z pozadí sekce (přední vrstva) nebo z --wave-back (zadní vrstva).  */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 22' preserveAspectRatio='none'%3E%3Cpath d='M0,22 L0,11 Q45,0 90,11 T180,11 L180,22 Z' fill='%23000'/%3E%3C/svg%3E");

  /* výchozí velikosti — jednotlivé sekce si je přepisují */
  --wave-size: 180px 100%;
  --wave-back-size: 290px 100%;
  --wave-back: var(--bg);
  --wave-h: 16px;
}

@media (min-width: 900px) {
  :root { --pad: 80px; --header-h: 74px; }
}

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

/* Vlastní display v komponentách by jinak přebil UA pravidlo [hidden] */
[hidden] { display: none !important; }

/* clip, ne hidden — hidden by z <html> udělal scroll kontejner a rozbil
   přilepenou hlavičku. Ořezává přesahující vrstvy animovaných vln. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  /* clip musí být na html i body — kdyby tu zůstalo hidden, stal by se
     z body scroll kontejner a přilepená hlavička by odjela pryč.
     První deklarace je záložní pro prohlížeče, které clip neznají. */
  overflow-x: hidden;
  overflow-x: clip;

  /* patička drží u spodní hrany i na krátkých stránkách (404, 500) */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
main { flex: 1 0 auto; }
.footer { margin-top: auto; }
/* Zámek scrollu musí být na <html>. Na <body> z něj udělá clip kontejner
   a přilepená hlavička odletí pryč (na mobilu po otevření menu). */
html.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.01em;
}
p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--primary); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-btn) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

.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;
}

/* ---- Layout ---- */
.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

section { scroll-margin-top: calc(var(--header-h) + 12px); }

/* =========================================================================
   VLNITÉ PŘEDĚLY MEZI SEKCEMI
   Sekce, která navazuje na jinak barevnou, si nahoru vysune vlnku ve své
   vlastní barvě (`background-color: inherit`) — proto musí mít pozadí
   nastavené explicitně, jinak by zdědila průhlednost.
   ========================================================================= */
.rooms, .mapsec, .howto, .benefits, .marquee-wrap, .contact, .faq, .news, .igsec, .partners,
.story, .numbers, .team, .photorow, .ctaband, .mgr, .prose, .embed, .footer {
  position: relative;
}
.story, .team, .mgr, .prose, .contact-grid { background: var(--white); }

.rooms::before, .rooms::after, .mapsec::before, .mapsec::after,
.howto::before, .howto::after, .benefits::before, .benefits::after,
.marquee-wrap::before, .marquee-wrap::after, .contact::before, .contact::after,
.faq::before, .faq::after, .news::before, .news::after,
.igsec::before, .igsec::after, .partners::before, .partners::after, .story::before, .story::after,
.numbers::before, .numbers::after, .team::before, .team::after,
.photorow::before, .photorow::after, .ctaband::before, .ctaband::after,
.prose::before, .prose::after, .embed::before, .embed::after,
.mgr::before, .mgr::after,
.footer::before, .footer::after {
  content: ""; position: absolute; left: 0; right: 0; pointer-events: none;
}
/* zadní vrstva — vyšší a v jiném odstínu, aby předěl dostal hloubku */
.rooms::before, .mapsec::before, .howto::before, .benefits::before,
.marquee-wrap::before, .contact::before, .faq::before, .news::before, .igsec::before, .partners::before,
.story::before, .numbers::before, .team::before, .photorow::before,
.ctaband::before, .prose::before, .embed::before, .mgr::before, .footer::before {
  top: calc(-1 * var(--wave-h) - 9px); height: calc(var(--wave-h) + 9px);
  background-color: var(--wave-back);
  -webkit-mask: var(--wave) repeat-x 45% bottom / var(--wave-back-size);
          mask: var(--wave) repeat-x 45% bottom / var(--wave-back-size);
}
/* přední vrstva — v barvě samotné sekce */
.rooms::after, .mapsec::after, .howto::after, .benefits::after,
.marquee-wrap::after, .contact::after, .faq::after, .news::after, .igsec::after, .partners::after,
.story::after, .numbers::after, .team::after, .photorow::after,
.ctaband::after, .prose::after, .embed::after, .mgr::after, .footer::after {
  top: calc(-1 * var(--wave-h) + 1px); height: var(--wave-h);
  background-color: inherit;
  -webkit-mask: var(--wave) repeat-x bottom / var(--wave-size);
          mask: var(--wave) repeat-x bottom / var(--wave-size);
}

/* Jeden tvar i jedna velikost pro celý web — mění se jen odstín zadní
   vrstvy podle toho, na jakou barvu předěl navazuje. */
.rooms, .mapsec, .howto, .benefits, .marquee-wrap, .contact, .faq, .news, .igsec, .partners,
.story, .numbers, .team, .photorow, .ctaband, .prose, .embed, .mgr, .footer {
  --wave-size: 280px 100%;
  --wave-back-size: 430px 100%;
  --wave-h: 30px;
  /* posun animace = přesně jedna perioda, aby smyčka navazovala */
  --wave-period: 280px;
  --wave-back-period: 430px;
}

/* Patička navazuje rovnou na modrý pruh „Pojď bydlet s námi“ — obojí je
   stejně modré, takže druhá vlna mezi nimi jen ruší. Předěl do modré kreslí
   jedna vlna nahoře nad pruhem a ta se i vlní (viz animace níž). */
.footer::before, .footer::after { content: none; }

/* Na homepage jsou pod pruhem ještě sociální sítě a partneři na světlém
   podkladu, takže tam patička na modrou přechází a vlnku potřebuje. Sourozenecký selektor to nezvládne —
   patička stojí mimo <main>, ve kterém sekce leží — proto značka na ní. */
.footer--vlna::before, .footer--vlna::after { content: ""; }

/* Totéž na stránce Newsletter: modrá sekce s formulářem přechází rovnou do
   modrého pruhu. Vlna mezi dvěma stejně modrými plochami se neprojeví jako
   předěl, jen jako světlé kudrlinky ze zadní vrstvy. */
.news + .ctaband::before, .news + .ctaband::after { content: none; }

/* Odstín zadní vlny = barva plochy, ze které se vychází. Sekce se střídají
   modrá/bílá, takže když se některé přebarví pozadí, musí se přebarvit i vlna
   té pod ní — jinak vyjede bílý pás doprostřed modré plochy. */
.rooms, .howto, .marquee-wrap, .faq, .story, .team, .prose, .embed, .mgr { --wave-back: #dbe4fb; }
.mapsec, .benefits, .contact, .numbers, .photorow, .partners { --wave-back: #ffffff; }
.news, .ctaband, .footer                                   { --wave-back: #bcd0ff; }
.igsec                                                     { --wave-back: #4d8bff; }

/* Blok „Pro rodiče“ na stránce O nás navazuje na bílou sekci týmu — vlna nad
   ním proto musí být bílá, ne modrá jako u ostatních .story sekcí. */
.story--rodice { --wave-back: #ffffff; }


/* na mobilu jsou vlny nižší, ať nesežerou půl obrazovky */
@media (max-width: 899px) {
  .rooms, .mapsec, .howto, .benefits, .marquee-wrap, .contact, .faq, .news, .igsec, .partners,
  .story, .numbers, .team, .photorow, .ctaband, .prose, .embed, .mgr, .footer {
    --wave-size: 190px 100%; --wave-back-size: 290px 100%; --wave-h: 20px;
    --wave-period: 190px; --wave-back-period: 290px;
  }
}

.section-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.section-head--row { gap: 14px; }

@media (min-width: 900px) {
  /* center, ne flex-end — hodnocení má sedět ve stejné rovině jako nadpis,
     ne se s ním zarovnávat spodní hranou (pilulka je vyšší než text) */
  .section-head--row {
    flex-direction: row; align-items: center; justify-content: space-between;
  }
}

/* Velikosti podle změřených textů v návrhu: H2 24/35 px, řádek 1.25/1.23. */
h2, .h2 { font-size: 24px; line-height: 1.25; }
h3, .h3 { font-size: 19px; line-height: 1.2; }

.lead { color: var(--muted); font-size: 15px; line-height: 1.55; }

@media (min-width: 900px) {
  h2, .h2 { font-size: 35px; line-height: 1.23; }
  h3, .h3 { font-size: 22px; }
}

/* ---- Tlačítka ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border: 0; border-radius: var(--r-btn);
  font-weight: 700; font-size: 14px; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease, color 0.4s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); transition-duration: 0.4s; }

.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); box-shadow: 0 6px 16px rgba(0, 89, 255, .28); }
.btn--primary:active { background: #003ba8; box-shadow: none; }

.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-dark); box-shadow: 0 6px 16px rgba(37, 211, 102, .3); }
.btn--wa:active { background: #17a04a; box-shadow: none; }

.btn--outline {
  background: transparent; color: var(--primary);
  border: 1.5px solid var(--primary); font-weight: 600;
}
.btn--outline:hover { background: rgba(0, 89, 255, .08); border-color: var(--primary-dark); }
.btn--outline:active { background: rgba(0, 89, 255, .16); }

.btn--ghost {
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); font-weight: 600;
}
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn--ghost:active { background: var(--bg); }

.btn--lg { padding: 16px 28px; font-size: 16px; border-radius: 14px; }
.btn--hero { box-shadow: var(--sh-cta); }
.btn--hero:hover { box-shadow: 0 10px 26px rgba(0, 89, 255, .45); }
.btn--pill { border-radius: var(--r-pill); }
.btn--block { width: 100%; }

.btn .ico { width: 18px; height: 18px; flex: none; }

/* Ikonka uvnitř textu (dřív tam bylo emoji). Emoji si každý systém kreslí
   po svém — modré srdce vyjde na Androidu skoro černé a na modrém pruhu
   zmizí — kdežto SVG dědí barvu i velikost textu a vypadá všude stejně. */
.ico-txt {
  width: 1em; height: 1em; display: inline-block; flex: none;
  vertical-align: -0.14em; margin-inline-start: .3em;
}
/* V cookie liště je text drobný (14 px) — sušenka by v 1em byla nečitelná. */
.cookie .ico-txt { width: 1.2em; height: 1.2em; vertical-align: -0.25em; }

@media (min-width: 900px) {
  .btn--lg { padding: 16px 32px; font-size: 17px; }
}

/* ---- Semafor dostupnosti ---- */
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot--free  { background: var(--green); }
.dot--later { background: var(--amber-dot); }

.avail { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.avail--free  { color: var(--green); }
.avail--later { color: var(--amber-text); }

/* =========================================================================
   HEADER (7:3 desktop · 1:3 mobil)
   ========================================================================= */
.header {
  position: sticky; top: 0; z-index: 90;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
/* Hlavička jde přes celou šířku okna (jen s okrajovým paddingem),
   ne do 1280px jako obsah — logo vlevo a CTA vpravo drží u krajů. */
.header__inner {
  display: flex; align-items: center; gap: 16px;
  height: var(--header-h);
  max-width: none;
}
.logo {
  font-family: var(--font-head); font-weight: 800; font-size: 20px;
  color: var(--primary); text-decoration: none; letter-spacing: -.02em;
  display: inline-flex; align-items: center;
}
.logo:hover { text-decoration: none; }
.logo img { height: 26px; width: auto; }

.header__zone-l { flex: 1 0 0; min-width: 0; display: flex; align-items: center; }
.header__zone-r { flex: 1 0 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.nav { display: none; gap: 32px; align-items: center; font-size: 15px; }
.nav a {
  position: relative; padding-block: 5px;
  color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color 0.4s ease;
}
/* podtržítko vyjede na najetí a u položky odpovídající sekci zůstane */
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--primary); border-radius: 2px;
  transform: scaleX(0); transition: transform 0.4s cubic-bezier(.22, .61, .36, 1);
}
.nav a:hover { color: var(--primary); text-decoration: none; }
.nav a:hover::after { transform: scaleX(.55); }
.nav a:active { color: var(--primary-dark); }
.nav a.is-active { color: var(--primary); font-weight: 600; }
.nav a.is-active::after { transform: scaleX(1); }

.header__cta { display: none; align-items: center; gap: 12px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 10px 18px;
  font-size: 13px; line-height: 1.2; font-weight: 600; color: var(--ink);
  text-decoration: none; background: var(--white);
  white-space: nowrap;
  transition: border-color 0.4s ease, color 0.4s ease;
}
.pill .ico { width: 18px; height: 18px; flex: none; }
.pill:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; transform: translateY(-1px); }
.pill:active { transform: translateY(1px); transition-duration: 0.4s; }
.pill--lang { padding: 8px 12px; }
.pill--wa {
  background: var(--wa); border-color: var(--wa); color: #fff;
  font-weight: 700; font-size: 14px; padding: 10px 20px;
}
.pill--wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); color: #fff; }

/* --- volání na Magdu v hlavičce ---------------------------------------
   Za telefonem je konkrétní člověk, ať je to na první pohled vidět —
   stejný prvek jako .detail__tel níž a .callbox v mapě (mapa/assets/css/
   map.css), jen kompaktní do výšky hlavičky. */
.callbox {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 5px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink); text-decoration: none;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.callbox img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.callbox__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.callbox__txt strong { font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.callbox__txt > span { font-size: 11px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.callbox .ico { width: 18px; height: 18px; flex: none; color: var(--primary); }
.callbox:hover {
  border-color: var(--primary); text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 89, 255, .12); transform: translateY(-1px);
}
.callbox:active { transform: translateY(1px); transition-duration: 0.4s; }

/* V mobilním menu je místa dost — roztáhne se přes celou šířku. */
.callbox--block {
  display: flex; width: 100%;
  padding: 8px 14px 8px 8px;
  border-radius: var(--r-btn);
}
.callbox--block img { width: 40px; height: 40px; }
.callbox--block .callbox__txt strong { font-size: 14px; }
.callbox--block .callbox__txt > span { font-size: 12px; }
.callbox--block .ico { margin-left: auto; width: 20px; height: 20px; }

/* hamburger */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px; padding: 9px 10px;
  background: none; border: 0; border-radius: 50%;
  transition: background-color 0.4s ease;
}
.burger:active { background: #e2e9fb; }
@media (hover: hover) {
  .burger:hover { background: var(--bg); }
  .burger:hover span { background: var(--primary); }
}
.burger span {
  display: block; height: 2px; width: 20px; border-radius: 2px; background: var(--ink);
  margin-inline: auto;
  transition: transform 0.4s ease, opacity 0.4s ease, background-color 0.4s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 900px) {
  .nav, .header__cta { display: flex; }
  .burger { display: none; }
  .logo { font-size: 24px; }
  .logo img { height: 30px; }
}

/* ---- Mobilní menu (57:2) ---- */
.menu-panel {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 89;
  background: var(--white);
  padding: 18px var(--pad) 32px;
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
.menu-panel.is-open { transform: none; opacity: 1; visibility: visible; }
/* Návrh 57:2: bez oddělovacích linek, aktivní položka je modrá pilulka
   a tlačítka sedí dole u spodní hrany panelu. */
.menu-panel a.menu-link {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 14px 16px; font-size: 17px; font-weight: 600; color: var(--ink);
  border-radius: var(--r-btn); text-decoration: none;
}
.menu-panel a.menu-link:hover { color: var(--primary); background: var(--bg); }
.menu-panel a.menu-link:active { background: #e2e9fb; }
.menu-panel a.menu-link.is-active { background: var(--bg); color: var(--primary); }
.menu-panel .menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 24px; }
.menu-panel .menu-meta { margin-top: 14px; font-size: 13px; color: var(--muted); }

@media (min-width: 900px) { .menu-panel { display: none; } }

/* =========================================================================
   HERO (7:16 desktop · 1:12 mobil)
   ========================================================================= */
.hero {
  position: relative;
  background: var(--bg);
  padding-block: 40px 44px;
  overflow: hidden;
}
/* video smyčka na pozadí + světlé překrytí (Figma pozn. 22:2) */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
/* Překrytí musí být hutné — přes video na mobilu jde text přes celou šířku. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(238, 242, 252, .93) 0%, rgba(238, 242, 252, .88) 100%);
}
.hero__inner { position: relative; z-index: 2; }

/* Kdo má vypnuté animace, uvidí místo videa statický snímek — ne prázdné pozadí. */
@media (prefers-reduced-motion: reduce) {
  .hero__bg { display: none; }
  .hero {
    background-image: url('../img/hero-poster.webp');
    background-size: cover; background-position: center;
  }
}
.hero__inner { display: flex; flex-direction: column; gap: 28px; }
.hero__left { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

.hero h1 {
  font-size: 34px; line-height: 1.14; letter-spacing: -.02em;
}
.hero h1 .accent { color: var(--primary); }
.hero__sub { color: var(--muted); font-size: 15px; line-height: 1.6; }

.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; }

/* přepínač města */
.city-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 4px;
}
.city-toggle button {
  border: 0; background: none; border-radius: var(--r-pill);
  padding: 10px 22px; font-size: 15px; line-height: 1.15; font-weight: 600; color: var(--muted);
  transition: background-color 0.4s ease, color 0.4s ease;
}
.city-toggle button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.city-toggle button:not([aria-pressed="true"]):hover { color: var(--ink); background: var(--bg); }
.city-toggle button:active { transform: scale(.97); }

.hero__proof { padding-top: 6px; }
.hero__proof-text { font-size: 14px; line-height: 20px; font-weight: 500; }
.hero__proof-text b { color: var(--primary); font-weight: 600; }


/* Koláž z fotek bytů (7:37; do 20. 8. 2026 to byly stockové tváře).
   Pozice kruhů jsou v % rámu 480×420, aby se koláž proporčně zmenšila
   a kruhy zůstaly kruhy — platí i na mobilu, kde se dřív místo koláže
   skládala řada malých avatarů. .hero__faces je průhledný obal.
   Chat bublina „Ahoj, tady Magda“ z návrhu tady není. */
.hero__collage {
  position: relative; width: 100%; max-width: 480px;
  aspect-ratio: 480 / 420; margin-inline: auto;
}
.hero__faces { display: contents; }

.hero__collage .bub {
  position: absolute; border-radius: 50%; object-fit: cover;
  background: #dbe4fb; box-shadow: var(--sh-card);
}
.hero__faces .bub:nth-child(1) { left: 8.333%;  top: 4.762%;  width: 25%;     height: 28.571%; }
.hero__faces .bub:nth-child(2) { left: 41.667%; top: 0;       width: 18.333%; height: 20.952%; }
.hero__faces .bub:nth-child(3) { left: 66.667%; top: 14.286%; width: 29.167%; height: 33.333%; }
.hero__faces .bub:nth-child(4) { left: 0;       top: 42.857%; width: 20%;     height: 22.857%; }
.hero__faces .bub:nth-child(5) { left: 29.167%; top: 35.714%; width: 35.417%; height: 40.476%; }
.hero__faces .bub:nth-child(6) { left: 72.917%; top: 54.762%; width: 22.917%; height: 26.190%; }
.hero__faces .bub:nth-child(7) { left: 16.667%; top: 76.190%; width: 16.667%; height: 19.048%; }
.hero__faces .bub:nth-child(8) { left: 45.833%; top: 80.952%; width: 15%;     height: 17.143%; }

@media (min-width: 900px) {
  .hero { padding-block: 64px; }
  /* na desktopu je text vlevo → překrytí je vlevo hutnější, vpravo prosvítá video */
  .hero::after {
    background: linear-gradient(100deg,
      rgba(238, 242, 252, .96) 0%,
      rgba(238, 242, 252, .90) 34%,
      rgba(238, 242, 252, .66) 62%,
      rgba(238, 242, 252, .48) 100%);
  }
  .hero__inner { flex-direction: row; align-items: center; gap: 60px; }
  .hero__left { flex: 1 0 0; min-width: 0; gap: 22px; }
  .hero h1 { font-size: 54px; line-height: 60px; }
  .hero__sub { font-size: 17px; line-height: 26px; }
  .hero__cta { width: auto; gap: 14px; }
  .city-toggle button { padding: 12px 26px; font-size: 16px; line-height: 1.2; }
  .hero__collage { flex: none; width: 480px; margin: 0; }
}

.accent { color: var(--primary); }

/* poznámky z návrhu, které čekají na doplnění obsahu */
.placeholder-note, .todo {
  color: var(--amber-text); font-size: 12px; font-weight: 600;
}
.faq .todo { font-size: 14px; font-weight: 500; }

/* TrustStrip — mobil (1:27) */
.trust-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  width: 100%; text-align: center; padding-top: 6px;
}
.trust-strip strong {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: 22px; color: var(--ink);
}
.trust-strip span { font-size: 12px; line-height: 16px; color: var(--muted); }

@media (min-width: 900px) { .trust-strip { display: none; } }

/* -------------------------------------------------------------------------
   HERO — mobil (Figma 1:12). Vše na střed, pod tlačítky koláž a nakonec
   TrustStrip. Rozestup mezi bloky je všude 20 px. Návrh měl na mobilu místo
   koláže řadu sedmi avatarů — s fotkami bytů by z toho byly nečitelné
   čtyřicetipixelové tečky, takže koláž zůstává koláží i tady.
   ------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .hero__proof { display: none; }

  .hero { padding-block: 40px 32px; }
  .hero__inner { gap: 20px; align-items: center; }
  .hero__left { align-items: center; text-align: center; }
  .hero__cta { flex-direction: column; align-items: center; }
  .hero__cta > * { width: auto; }

  .trust-strip { padding-top: 16px; }
}

/* =========================================================================
   VOLNÉ POKOJE — carousel (8:2 / 2:2)
   ========================================================================= */
.rooms { padding-block: 40px; background: var(--white); }

/* Přepínač měst sedí rovnou v nadpisu („Volné pokoje v [Brně|Olomouci]“) —
   stejná pilulka jako v heru. Uvnitř nadpisu se ale kvůli `button { font:
   inherit }` musí vrátit písmo a prostrkání textu, jinak by tlačítka nabrala
   nadpisový font. Nadpis se smí zalomit před pilulkou, ne uvnitř ní. */
.rooms__title .city-toggle { vertical-align: middle; }
.rooms__title .city-toggle button {
  font-family: var(--font-body); letter-spacing: normal;
}

/* prázdný stav filtru měst */
/* ---- Čekačka --------------------------------------------------------
   Nastupuje místo karet, když ve vybraném městě není volný pokoj. Je to
   plnohodnotná nabídka, ne omluvenka, takže dostane stejnou bílou kartu
   jako formuláře jinde na webu — ne jen šedou větu. */
.waitlist { padding-block: 8px 4px; }
.waitlist__card {
  max-width: 620px; margin-inline: auto; text-align: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 28px 22px;
  box-shadow: 0 10px 30px rgba(17, 26, 61, .06);
}
.waitlist__title { font-size: 22px; line-height: 1.2; }
.waitlist__sub {
  margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 22px;
  max-width: 460px; margin-inline: auto;
}
.waitlist__legal { margin-top: 14px; font-size: 12px; color: var(--muted); }
.waitlist__legal a { font-weight: 600; }

/* Průvodce uvnitř čekačky — jedna otázka na obrazovku, pod ní pilulky.
   Stejné otázky i pořadí jako v prázdném výsledku na mapě. */
.cekacka { margin-top: 18px; }
.cekacka__postup { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
.cekacka__tecka {
  width: 26px; height: 4px; border-radius: 2px;
  background: var(--line); transition: background .25s ease;
}
.cekacka__tecka.is-done { background: var(--primary); }
.cekacka__otazka { font-weight: 700; font-size: 16px; color: var(--ink); }

.cekacka__volby {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px;
}
.cekacka__pilulka {
  padding: 12px 18px; border-radius: var(--r-btn);
  border: 1.5px solid var(--line); background: var(--white);
  color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.cekacka__pilulka:hover { border-color: var(--primary); color: var(--primary); }
.cekacka__pilulka.is-active { border-color: var(--primary); background: var(--primary); color: #fff; }

.cekacka__pole { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; text-align: left; }
.cekacka__input, .cekacka__input--mesto {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-btn);
  background: var(--white); color: var(--ink); font: inherit; font-size: 15px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.cekacka__input--mesto { margin-top: 10px; }
.cekacka__input::placeholder { color: var(--muted); }
.cekacka__input:focus {
  outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 89, 255, .18);
}
.cekacka__input[aria-invalid="true"] { border-color: #e5484d; }
textarea.cekacka__input { resize: vertical; min-height: 62px; line-height: 1.45; }

/* Past na roboty — pro člověka neviditelná, pro čtečku nezajímavá.
   `display:none` schválně ne: část robotů skrytá pole podle něj přeskakuje. */
.cekacka__past,
.form__past {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.cekacka__zpet {
  margin-top: 14px; padding: 6px 10px; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.cekacka__zpet:hover { color: var(--primary); }

.cekacka__hlaska { margin-top: 10px; font-size: 13px; color: var(--muted); }
.cekacka__hlaska--chyba { color: #e5484d; }
.cekacka__hotovo { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }

@media (min-width: 700px) {
  .waitlist__card { padding: 34px 32px; }
  .waitlist__title { font-size: 26px; }
}

.rooms__track {
  display: flex; gap: 16px; align-items: stretch;
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* bez scroll-padding by snap zarovnával karty k hraně okna, ne k obsahu,
     a první karta by se rozešla se zarovnáním nadpisu */
  scroll-padding-inline: var(--pad);
  padding-bottom: 10px;
  scrollbar-width: none;
  /* Karusel je nekonečný, takže po stranách vždycky vykukuje sousední karta.
     Ve výřezu odsazení ji necháme změknout, ať nekončí ostrým řezem —
     první a poslední karta v obsahu zůstávají plné. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%);
}
.rooms__track::-webkit-scrollbar { display: none; }

.room-card {
  scroll-snap-align: start;
  cursor: pointer;   /* celá karta vede na detail bytu (obsluha v site.js) */
  flex: none; width: 280px;
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 6px 16px rgba(18, 26, 61, .06);
  overflow: hidden;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.room-card:hover { box-shadow: var(--sh-card); transform: translateY(-2px); }

.room-card__photo { position: relative; display: block; background: #d7e1f8; }
.room-card__photo img { width: 100%; height: 170px; object-fit: cover; }

.badge {
  position: absolute; left: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); border-radius: var(--r-pill);
  padding: 6px 12px; font-size: 12px; font-weight: 600;
  box-shadow: 0 2px 6px rgba(17, 26, 61, .12);
}
.badge__t--free  { color: var(--green); }
.badge__t--later { color: var(--amber-text); }

.room-card__body {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 14px 16px 16px;
}
.room-card__name { font-family: var(--font-body); font-weight: 700; font-size: 17px; }
.room-card__meta { color: var(--muted); font-size: 13px; margin-top: 2px; }

.room-card__mates { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 500; }

.room-card__price strong {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: 19px; color: var(--primary);
}
.room-card__price span { font-size: 11px; color: var(--muted); }
.room-card__body .btn { margin-top: auto; }

.rooms__footer { display: flex; align-items: center; gap: 24px; padding-top: 16px; }
.rooms__progress { flex: 1 0 0; min-width: 0; display: flex; gap: 8px; align-items: center; }
.rooms__progress button {
  flex: 1 0 0; height: 14px; border: 0; background: none; padding: 0;
}
.rooms__progress button::before {
  content: ""; display: block; height: 5px; border-radius: 2.5px; background: #d9e0f0;
  transition: background-color 0.4s ease;
}
.rooms__progress button[aria-selected="true"]::before { background: var(--primary); }

.rooms__arrows { display: flex; gap: 12px; }
.arr {
  width: 44px; height: 44px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--white);
  font-size: 18px; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.4s ease, color 0.4s ease, background-color 0.4s ease;
}
.arr:hover { border-color: var(--primary); color: var(--primary); }
.arr:active:not([disabled]) { transform: scale(.93); background: var(--bg); }
.arr[disabled] { opacity: .4; cursor: default; }
.arr[disabled]:hover { border-color: var(--line); color: var(--ink); }

@media (min-width: 900px) {
  .rooms { padding-block: 64px; }
  .rooms__track { gap: 20px; }
  .room-card { width: 320px; }
  .arr { width: 48px; height: 48px; }
}

/* =========================================================================
   MAPA (8:133 / 2:76)
   ========================================================================= */
.mapsec { padding-block: 40px; background: var(--bg); }
.mapsec__inner { display: flex; flex-direction: column; gap: 24px; }
.mapsec__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.legend .dot { width: 12px; height: 12px; }

/* živá mapa v iframu (stávající /mapa na spolubydlim.cz) */
/* Na dotyku se uvnitř vykreslí mobilní podoba mapy, které zespodu vyčuhuje
   210 px výpisu (map.css, --peek). Ve 320px rámečku by na mapu zbylo 110 px,
   proto je tu vyšší — a vejde se i tak na obrazovku i s nadpisem. */
.mapsec__frame {
  position: relative; width: 100%; height: 560px; max-height: 72dvh;
  border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--sh-card);
  background: #d7e1f8;
}
.mapsec__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.mapsec__frame .mapa-nahled { width: 100%; height: 100%; }

@media (min-width: 900px) {
  .mapsec { padding-block: 64px; }
  .mapsec__inner { flex-direction: row; align-items: center; gap: 48px; }
  /* Text ustoupí, mapa je to hlavní — proto pevně užší sloupec vlevo. */
  .mapsec__text { flex: 0 1 360px; min-width: 0; }
  .mapsec__frame { flex: 1 1 auto; width: auto; max-width: 880px; height: 540px; }
}
@media (min-width: 1200px) {
  .mapsec__frame { height: 580px; }
}

/* =========================================================================
   JAK TO FUNGUJE (9:2 / 3:2)
   ========================================================================= */
.howto { padding-block: 40px; background: var(--white); }
.howto h2 { margin-bottom: 28px; text-align: center; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
/* každý krok je karta na světlém podkladu (9:5) */
.steps li {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  background: var(--bg); border-radius: var(--r-card); padding: 24px;
}
/* První dva kroky vedou na sekci, o které mluví — odkaz vyplní celou kartu,
   ať se dá klepnout kamkoliv, a přebírá její rozvržení, aby se nic neposunulo.
   Padding drží odkaz (ne li), jinak by podbarvení na najetí pokrylo jen text.
   align-self/flex ho roztáhnou na celou kartu — li je flex se zarovnáním na
   začátek, takže by se jinak smrsknul na obsah. Třetí krok nikam nevede. */
.steps li:has(.steps__odkaz) { padding: 0; }
.steps__odkaz {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  align-self: stretch; flex: 1;
  padding: 24px; border-radius: var(--r-card);
  color: inherit; text-decoration: none;
  transition: background-color 0.4s ease;
}
.steps__odkaz:hover { background: #e2e9fa; text-decoration: none; }
.steps__odkaz:hover h3 { color: var(--primary); }
.steps__odkaz h3 { transition: color 0.4s ease; }

.steps__n {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 19px;
}

@media (min-width: 900px) {
  .howto { padding-block: 64px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* =========================================================================
   VÝHODY (9:20 / 3:22)
   ========================================================================= */
.benefits { padding-block: 40px; background: var(--bg); }

/* Dřív to byly hotové grafiky s textem vypáleným do obrázku. Text je teď
   v HTML — dá se editovat, zalomí se podle šířky a čtou ho i vyhledávače. */
.benefits__grid { display: grid; gap: 18px; }
.benefit {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 6px 18px rgba(18, 26, 61, .06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.benefit:hover { transform: translateY(-3px); box-shadow: var(--sh-card); }
.benefit__foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #d7e1f8; }
.benefit__text { padding: 20px 22px 24px; }
.benefit h3 { margin-bottom: 8px; }
.benefit p { color: var(--muted); font-size: 15px; line-height: 23px; }
.benefit ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 7px;
  color: var(--muted); font-size: 15px; line-height: 21px;
}
.benefit li { display: flex; align-items: flex-start; gap: 9px; }
.benefit li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px;
  border-radius: 50%; background: var(--primary);
}

@media (min-width: 760px) {
  .benefits__grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}
@media (min-width: 900px) { .benefits { padding-block: 64px; } }

/* =========================================================================
   FOTOPÁS — marquee (65:4 / 65:15)
   ========================================================================= */
/* Vlnkový předěl nese obal, ne pás samotný: pás má overflow: hidden (vlnka
   sedí nad sekcí, takže by se uřízla) a ::before/::after mu drží měkké
   okraje. Barva obalu musí být stejná jako pásu — přední vrstva vlnky se
   kreslí `background-color: inherit`. */
.marquee-wrap { background: var(--white); }

.marquee {
  position: relative; overflow: hidden; background: var(--white);
  padding-block: 26px 42px;
  /* barva, do které mizí okraje — musí sedět s plochou pod pásem */
  --fade-from: #fff;
  --fade-to: rgba(255, 255, 255, 0);
}
/* změkčené okraje, ať pás „vyjíždí“ ze stránky */
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--fade-from), var(--fade-to)); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--fade-from), var(--fade-to)); }

.marquee__track { display: flex; width: max-content; animation: marquee 55s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
/* Fotky se rohy překrývají — proto záporný okraj místo mezery. Musí ho mít
   i první fotka v řadě, jinak by se druhá (klonovaná) řada na přechodu
   smyčky nepřekryla stejně a pás by cuknul. */
.marquee__row { display: flex; align-items: center; gap: 0; }
.marquee__row img { margin-left: -22px; }
.marquee__row img {
  width: 190px; height: 148px; object-fit: cover;
  border-radius: 16px; background: #d7e1f8;
  box-shadow: 0 8px 22px rgba(17, 26, 61, .12);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
/* Jemný nepravidelný rytmus. Dřívější velké rozdíly ve výškách dělaly
   zubatou linku s dírami — teď se velikosti i náklony liší jen mírně. */
.marquee__row img:nth-child(3n+1) { width: 186px; height: 148px; transform: rotate(-1.4deg) translateY(-6px); z-index: 2; }
.marquee__row img:nth-child(3n+2) { width: 204px; height: 158px; transform: rotate(1deg) translateY(6px); z-index: 1; }
.marquee__row img:nth-child(3n)   { width: 170px; height: 168px; transform: rotate(-.7deg); z-index: 3; }
.marquee__row img:hover {
  transform: rotate(0deg) scale(1.06); box-shadow: 0 14px 32px rgba(17, 26, 61, .2);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

@media (min-width: 900px) {
  .marquee { padding-block: 34px 58px; }
  .marquee__row img { margin-left: -28px; }
  .marquee__row img:nth-child(3n+1) { width: 224px; height: 178px; }
  .marquee__row img:nth-child(3n+2) { width: 244px; height: 190px; }
  .marquee__row img:nth-child(3n)   { width: 206px; height: 202px; }
}

/* =========================================================================
   HLEDEJ & NAJDI (66:2 / 66:32)
   ========================================================================= */
.findroom { padding-block: 40px; background: var(--white); }
.findroom__inner { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.findroom__left { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 420px; }
.findroom__left h2 { font-size: 26px; line-height: 1.15; }
.findroom__photo { width: 100%; height: 190px; object-fit: cover; border-radius: var(--r-card); }

.avatar-pill {
  display: flex; align-items: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 8px 16px;
  box-shadow: var(--sh-card); font-size: 14px; align-self: flex-start;
}
.avatar-pill b { color: var(--primary); font-weight: 700; }

.reel {
  position: relative; display: block; flex: none;
  width: 260px; border-radius: 26px; overflow: hidden;
  background: var(--bg); box-shadow: var(--sh-card); text-decoration: none;
}
.reel:hover { text-decoration: none; }
/* Náhled reelu není v atributu `poster` — ten se stahuje hned při načtení
   stránky, i když je reel hluboko pod ohybem a pere se o pásmo s tím, co je
   vidět. Obrázek se proto nasadí na pozadí až ve chvíli, kdy se k reelu
   uživatel blíží (třídu přidá site.js). */
.reel__video { width: 100%; height: 470px; object-fit: cover; background: var(--bg); }
.reel__video.je-videt {
  background-image: url('../img/reel-poster.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(17,26,61,.05) 0%, rgba(17,26,61,.45) 100%);
  transition: opacity 0.4s ease;
}
/* při přehrávání zmizí překryv i popisky */
.reel.is-playing::after,
.reel.is-playing .reel__play,
.reel.is-playing .reel__cap { opacity: 0; pointer-events: none; }
.reel__play {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%);
  border: 0; padding: 0; opacity: 1;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--primary); color: #fff; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 12px rgba(0, 89, 255, .25);
  /* jen jeden transition — druhá deklarace by přebila mizení překryvu */
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.reel__play svg { width: 22px; height: 22px; margin-left: 3px; }
.reel:hover .reel__play { transform: translate(-50%, -50%) scale(1.07); }
.reel__cap {
  position: absolute; left: 0; right: 0; top: calc(45% + 46px); z-index: 2;
  text-align: center; font-size: 13px; color: #fff; font-weight: 500;
  pointer-events: none; transition: opacity 0.4s ease;
}
/* ---- vlastní ovládání videa (nativní controls jsou vypnuté) ---- */
.reel__ui {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  /* posuvník má vlastní řádek — vedle tlačítek by na úzkém videu zbylo
     jen pár pixelů a nedal by se chytit */
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 22px 10px 10px;
  background: linear-gradient(180deg, rgba(17, 26, 61, 0) 0%, rgba(17, 26, 61, .78) 60%);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Lišta naskočí, jakmile se video jednou rozjelo (a zůstává i v pauze,
   aby šlo přetočit) nebo když je kurzor nad videem. */
.reel.is-playing .reel__ui,
.reel.has-started .reel__ui,
.reel:hover .reel__ui,
.reel:focus-within .reel__ui { opacity: 1; transform: none; pointer-events: auto; }

/* Po chvíli bez pohybu se za přehrávání sama schová, ať nezakrývá obraz.
   Musí stát až za pravidly výš, aby je přebila — mají stejnou váhu.
   Při práci s ovládáním (:focus-within) se nechává svítit. */
.reel.is-idle:not(:focus-within) .reel__ui {
  opacity: 0; transform: translateY(8px); pointer-events: none;
}
.reel.is-idle:not(:focus-within) { cursor: none; }

.reel__btn {
  width: 30px; height: 30px; flex: none; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 0.4s ease;
}
.reel__btn:hover { background: rgba(255, 255, 255, .34); }
.reel__btn svg { width: 15px; height: 15px; }
/* ikona se přepíná podle stavu přehrávání a zvuku */
.reel__i-pause, .reel.is-playing .reel__i-play { display: none; }
.reel.is-playing .reel__i-pause { display: block; }
.reel__i-mute { display: none; }
.reel.is-muted .reel__i-mute { display: block; }
.reel.is-muted .reel__i-vol { display: none; }

.reel__time {
  flex: none; font-size: 10px; color: #fff; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.reel__ui input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px; margin: 0; cursor: pointer;
  background: rgba(255, 255, 255, .32);
}
/* projetá část se dobarvuje přes --p, kterou dopočítává JS */
.reel__seek {
  flex: 1 0 100%; order: -1; height: 5px;
  background: linear-gradient(90deg, var(--primary) 0 calc(var(--p, 0) * 1%), rgba(255, 255, 255, .32) calc(var(--p, 0) * 1%) 100%);
}
.reel__vol {
  flex: 0 1 46px; min-width: 32px;
  background: linear-gradient(90deg, #fff 0 calc(var(--p, 100) * 1%), rgba(255, 255, 255, .32) calc(var(--p, 100) * 1%) 100%);
}
.reel__time { margin-right: auto; }
.reel__btn { width: 28px; height: 28px; }
.reel__ui input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; border: 0;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.reel__ui input[type="range"]::-moz-range-thumb {
  width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff;
}
.reel__ui input[type="range"]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* na úzkém displeji se hlasitost řeší tlačítky telefonu */
@media (max-width: 899px) { .reel__vol { display: none; } }

.reel:fullscreen { width: 100%; height: 100%; border-radius: 0; background: #000; }
.reel:fullscreen .reel__video { height: 100%; object-fit: contain; }

.bluecard {
  background: var(--primary); color: #fff; border-radius: var(--r-card);
  padding: 24px; display: flex; flex-direction: column; gap: 16px;
  width: 100%; max-width: 420px;
}
.bluecard p { font-size: 15px; line-height: 21px; }
.bluecard__btn {
  background: var(--white); color: var(--primary);
  align-self: flex-start; font-size: 13px; letter-spacing: .04em;
}
.bluecard__btn:hover { background: #eaf0ff; }

@media (min-width: 1000px) {
  .findroom { padding-block: 64px; }
  .findroom__inner { flex-direction: row; justify-content: center; gap: 56px; align-items: center; }
  .findroom__left { max-width: 320px; }
  .findroom__left h2 { font-size: 30px; }
  .bluecard { max-width: 380px; }
}

/* =========================================================================
   SPRÁVCOVÉ + KONTAKT (10:2 / 4:2 + 4:18)
   ========================================================================= */
.contact { padding-block: 40px; background: var(--bg); }
.contact__inner { display: flex; flex-direction: column; gap: 34px; }
.contact__managers, .contact__form { display: flex; flex-direction: column; gap: 14px; }

.managers { display: grid; gap: 16px; margin-top: 4px; }
.manager {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.manager__ava {
  width: 80px; height: 80px; border-radius: 50%;
  object-fit: cover; background: var(--bg);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 28px;
}
span.manager__ava { background: var(--primary); }
.manager__role { color: var(--muted); font-size: 14px; }
.manager p { font-size: 14px; }
.manager a { color: var(--ink); }
.manager a:hover { color: var(--primary); }
.manager a[href^="tel"] { color: var(--primary); font-weight: 600; }
.manager a[href^="mailto"] { font-size: 13px; color: var(--muted); }

/* ---- karta správcové (Kontakt 183:35, O nás 182:47) ---- */
/* karty správcových navazují přímo na formulář — spodní odsazení řeší
   následující sekce, jinak mezi nimi vznikne dvojitá mezera (183:2) */
.mgr { padding-block: 34px 0; }
.mgr__grid, .team__grid { display: grid; gap: 16px; }
.mgr-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--bg); border-radius: var(--r-card); padding: 20px 22px;
}
.mgr-card--stack { flex-direction: column; }
.mgr-card__ava {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  object-fit: cover; background: #d7e1f8;
}
.mgr-card__ava--initial {
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 22px;
}
.mgr-card__name { font-family: var(--font-body); font-weight: 700; font-size: 17px; }
.mgr-card__role { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.mgr-card p { font-size: 14px; line-height: 20px; color: var(--muted); }
.mgr-card__tel { color: var(--primary); font-weight: 600; font-size: 14px; }
.mgr-card__mail { color: var(--muted); font-size: 13px; }

@media (min-width: 700px) {
  .mgr__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .team__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) { .mgr { padding-block: 52px 0; } }

/* formulář */
.form { display: flex; flex-direction: column; gap: 14px; }
.form__row { display: grid; gap: 10px; }
/* Pole i s popiskem drží pohromadě, ať je mezera mezi popiskem a jeho polem
   menší než mezera mezi poli — jinak popisek opticky patří k tomu nad ním. */
.form__pole { display: flex; flex-direction: column; gap: 6px; }
.form__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.form__label span { color: var(--muted); font-weight: 400; }
/* Zaškrtávátka a hvězdičková radia mají svůj vlastní vzhled — do rámečku
   s odsazením patří jen textová pole, seznamy a výběr souboru. */
.form input:not([type="checkbox"]):not([type="radio"]), .form textarea, .form select, .news__row input {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--white); color: var(--ink); font: inherit; font-size: 15px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.form textarea { resize: vertical; min-height: 108px; line-height: 1.45; }
.form input::placeholder, .form textarea::placeholder, .news__row input::placeholder { color: var(--muted); }
.form input:focus, .form textarea:focus, .form select:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 89, 255, .18); }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"], .form select[aria-invalid="true"] { border-color: #e5484d; }
/* Nevybraná volba je nápověda, ne hodnota — `:invalid` na to stačí a platí
   i při `novalidate` (ten mění jen odesílání, ne stav prvku). */
.form select:invalid { color: var(--muted); }
.form__note { font-size: 12px; color: var(--muted); }

/* vlastní šipka: nativní se v každém prohlížeči kreslí jinak */
.form select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6478' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

/* souhlas se zveřejněním — zaškrtávátko drží na prvním řádku textu */
.form__check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.form__check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--primary); cursor: pointer; }
.form__check input[aria-invalid="true"] { outline: 2px solid #e5484d; outline-offset: 2px; border-radius: 4px; }

/* Past na roboty. `hidden` ani `display: none` se nepoužívá — část robotů
   taková pole přeskakuje. Odsunutí z obrazovky projdou. */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 700px) {
  .form__row { grid-template-columns: 1fr 1fr; }
  .managers { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .contact { padding-block: 64px; }
  /* Správcové jsou nižší než formulář — vystředí se proti němu, ať nezůstane
     pod nimi prázdné místo a oba sloupce působí jako jeden blok. */
  .contact__inner { flex-direction: row; gap: 48px; align-items: center; }
  .contact__managers, .contact__form { flex: 1 0 0; min-width: 0; }
  /* návrh drží tyhle dva nadpisy menší než hlavní sekce (10:4, 10:22) */
  .contact__managers h2 { font-size: 30px; }
  .contact__form h2 { font-size: 24px; }
}

/* =========================================================================
   FAQ (112:43 / 112:2)
   ========================================================================= */
.faq { padding-block: 40px; background: var(--white); }
.faq h2 { margin-bottom: 20px; text-align: center; }
.faq__list {
  max-width: 760px; margin-inline: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.faq details:hover { border-color: #cfd9f0; }
.faq details[open] { box-shadow: var(--sh-card); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.4s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details p { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 20px; }

/* Rozbalení: obsah se vysune místo skoku. Výšku měří JS do --faq-h a třídu
   drží jen po dobu animace, aby otevřený panel dál rostl podle obsahu. */
@media (prefers-reduced-motion: no-preference) {
  .faq details.is-opening > summary + * {
    animation: faqOpen .22s cubic-bezier(.22, .61, .36, 1) both;
  }
  @keyframes faqOpen {
    from { opacity: 0; max-block-size: 0; margin-top: 0; }
    to   { opacity: 1; max-block-size: var(--faq-h, 400px); }
  }
}

@media (min-width: 900px) {
  .faq { padding-block: 64px; }
  .faq summary { font-size: 16px; }
}

/* =========================================================================
   NEWSLETTER (10:35 / 4:35)
   ========================================================================= */
.news { padding-block: 44px; background: var(--primary); color: #fff; }
.news__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.news h2 { color: #fff; }
.news__sub { color: rgba(255, 255, 255, .88); font-size: 15px; max-width: 800px; }
/* Formulář stojí na vlastní ploše, aby se na sytě modrém pozadí neztrácel. */
/* Bílá karta na modré ploše sekce — všechno uvnitř proto jede v tmavém
   písmu a pole mají modré obrysy, ať je na bílé vidět, kam se klepe. */
.news__form {
  width: 100%; max-width: 640px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; margin-top: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px 20px 24px;
  box-shadow: 0 10px 30px rgba(6, 32, 92, .18);
}
.news__step {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--muted); margin-top: 6px;
}
.news__form > .news__step:first-child { margin-top: 0; }

.news__cities { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.news__cities button {
  border: 1.5px solid var(--primary); background: var(--white); color: var(--primary);
  border-radius: var(--r-btn); padding: 14px 22px; text-align: center;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.news__cities button strong { display: block; font-size: 15px; font-weight: 700; }
.news__cities button span { font-size: 12px; opacity: .8; }
.news__cities button:hover { background: #eaf0ff; }
.news__cities button[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }

.news__row { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.news__row input {
  border: 1.5px solid var(--primary); border-radius: var(--r-btn);
  background: var(--white); color: var(--ink); padding: 14px 18px;
}
.news__row input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 89, 255, .18); }
/* hlavní CTA sekce — plná modrá, ať je na bílé kartě jasné, kam kliknout */
.news__btn {
  background: var(--primary); color: #fff; border: 0;
  white-space: nowrap; font-size: 15px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 89, 255, .28);
}
.news__btn:hover { background: var(--primary-dark); color: #fff; }

.news__ps { font-size: 13px; color: var(--ink); margin-top: 6px; }
.news__legal { font-size: 11px; color: var(--muted); }
.news__legal a { color: var(--primary); text-decoration: underline; }
.news__sub a { color: #fff; text-decoration: underline; }

@media (min-width: 700px) {
  .news__row { flex-direction: row; }
  .news__row input { flex: 1 0 0; min-width: 0; }
}
@media (min-width: 900px) {
  .news { padding-block: 64px; }
  .news h2 { font-size: 30px; }   /* návrh 10:36 */
}

/* =========================================================================
   INSTAGRAM (196:17 / 196:2)
   ========================================================================= */
.igsec { padding-block: 40px; background: var(--white); }

/* Dva sloupce vedle sebe: vlevo Instagram, vpravo Facebook — každý má
   vlastní nadpis, náhledy příspěvků a tlačítko. */
.feeds { display: grid; gap: 34px; }
.feed { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.feed h2 { font-size: 22px; }
/* Fotky pod nadpisem jsou z našich bytů, ne stažené příspěvky — podtitulek
   to říká nahlas, ať mřížka nevypadá jako náhled feedu. */
.feed__sub { margin-top: -6px; font-size: 14px; line-height: 20px; color: var(--muted); }
.feed__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
.feed__grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 14px; background: #d7e1f8;
  transition: transform 0.4s ease;
}
.feed__grid a:hover img { transform: scale(1.03); }
.feed .btn { margin-top: 2px; }

@media (min-width: 900px) {
  .igsec { padding-block: 64px; }
  .feeds { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .feed h2 { font-size: 26px; }
  .feed__grid { gap: 12px; }
}

/* =========================================================================
   NAŠI PARTNEŘI
   Světlý pás mezi sociálními sítěmi a patičkou. Karta = celý odkaz: logo
   vlevo, vpravo název, popis od partnera a doména. Víc partnerů se řadí
   vedle sebe a na úzkém displeji pod sebe.
   ========================================================================= */
.partners { padding-block: 40px; background: var(--bg); }
.partners h2 { margin-bottom: 20px; text-align: center; }
.partners__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

.partner {
  flex: 0 1 480px;
  display: flex; align-items: center; gap: 18px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 18px 22px; color: var(--ink);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.partner:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--sh-card); border-color: #cfd9f0; }
.partner:active { transform: translateY(0); }
.partner img { flex: none; width: 64px; height: 64px; }
.partner__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.partner__name { font-family: var(--font-head); font-weight: 800; font-size: 18px; line-height: 1.2; transition: color 0.4s ease; }
.partner:hover .partner__name { color: var(--primary); }
.partner__desc { color: var(--muted); font-size: 14px; line-height: 20px; }
.partner__url { color: var(--primary); font-size: 13px; font-weight: 600; }

@media (min-width: 900px) {
  .partners { padding-block: 56px; }
  .partner { padding: 22px 26px; gap: 22px; }
  .partner img { width: 76px; height: 76px; }
}

/* =========================================================================
   FOOTER (10:56 · mobil 4:43)
   Bílá plocha, horní linka, padding 40/80. Tři bloky: značka — odkazy —
   sociální ikony (36px kolečka na světle modrém podkladu).
   ========================================================================= */
/* Patička je celá modrá — obsah proto běží v bílých odstínech. */
.footer { background: var(--primary); color: #fff; padding-block: 34px 28px; }
.footer__inner { max-width: none; display: flex; flex-direction: column; gap: 22px; }

.footer__brand { display: flex; flex-direction: column; gap: 6px; }
/* logo je modré SVG — na modré ploše se z něj musí stát bílé */
.footer .logo img { height: 25px; filter: brightness(0) invert(1); }
.footer__claim { font-size: 13px; color: rgba(255, 255, 255, .9); }
.footer__legal { font-size: 11px; color: rgba(255, 255, 255, .6); }

.footer__nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.footer__nav a { color: rgba(255, 255, 255, .88); font-size: 13px; font-weight: 500; white-space: nowrap; }
.footer__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__nav a:active { color: rgba(255, 255, 255, .7); }

.footer__social { display: flex; gap: 12px; }
.footer__social a {
  width: 36px; height: 36px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.4s ease, color 0.4s ease;
}
.footer__social a:hover { background: #fff; color: var(--primary); transform: translateY(-2px); }
.footer__social a:active { transform: translateY(0); }
.footer__social svg { width: 16px; height: 16px; }

@media (min-width: 900px) {
  .footer { padding-block: 40px; }
}

/* Do řádku (značka — odkazy — sítě) až od 1200 px. Níž se odkazy mezi značku
   a ikonky vešly jen jako úzký sloupec o pěti řádcích — a dokud nesmršťovaly,
   přetékaly i s ikonkami mimo okno a body je ořezal. */
@media (min-width: 1200px) {
  .footer__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
  .footer__brand, .footer__social { flex: none; }
  .footer__nav { flex: 1 1 auto; min-width: 0; justify-content: center; }
}

/* =========================================================================
   STICKY LIŠTA — pouze mobil (4:56)
   ========================================================================= */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 88;
  min-height: 58px; padding: 7px 10px;
  display: flex; align-items: center; gap: 8px;
  background: var(--white); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(17, 26, 61, .08);
  transform: translateY(100%); transition: transform 0.4s ease;
}
.sticky-bar.is-visible { transform: none; }

/* WhatsApp jen jako ikona — na text v liště není místo, kontakt na Magdu nese callbox. */
.sticky-bar__wa { flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.sticky-bar__wa .ico { width: 20px; height: 20px; }

.sticky-bar__call { flex: 1 1 auto; min-width: 0; gap: 8px; padding-right: 10px; }
.sticky-bar__call .callbox__txt > span { overflow: hidden; text-overflow: ellipsis; }
.sticky-bar__call .ico { margin-left: auto; }

body.has-sticky { padding-bottom: 58px; }

/* Pod 360 px se role nevejde — zůstává jméno a číslo. */
@media (max-width: 359px) { .sticky-bar__role { display: none; } }

@media (min-width: 900px) { .sticky-bar { display: none !important; } body.has-sticky { padding-bottom: 0; } }

/* =========================================================================
   COOKIE LIŠTA (119:11 / 119:20)
   ========================================================================= */
.cookie {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 95;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--sh-modal); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
  max-width: 720px; margin-inline: auto;
}
.cookie p { font-size: 13px; line-height: 18px; color: var(--muted); }
.cookie__buttons { display: flex; flex-direction: column; gap: 10px; }
.cookie__buttons .btn { width: 100%; }
.cookie__buttons a { font-size: 13px; text-align: center; color: var(--muted); text-decoration: underline; }
body.has-sticky .cookie { bottom: 70px; }

@media (min-width: 700px) {
  .cookie__buttons { flex-direction: row; align-items: center; }
  .cookie__buttons .btn { flex: 1 0 0; }
  .cookie__buttons a { flex: none; }
}
@media (min-width: 900px) { body.has-sticky .cookie { bottom: 12px; } }

/* =========================================================================
   MODALY / STAVY (185:2, 185:23, 212:2, 212:14)
   ========================================================================= */
.modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(17, 26, 61, .45); }
.modal__box {
  position: relative; z-index: 1;
  background: var(--white); border-radius: var(--r-card); box-shadow: var(--sh-modal);
  padding: 26px 20px 22px; width: 100%; max-width: 390px;
  display: flex; flex-direction: column; gap: 12px; text-align: center;
  max-height: 90vh; overflow-y: auto;
}
.modal__state { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.modal__state[hidden] { display: none; }
.modal__icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.modal__icon svg { width: 24px; height: 24px; }
.modal__icon--ok  { background: rgba(29, 185, 84, .12); color: var(--green); }
.modal__icon--err { background: rgba(229, 72, 77, .12); color: #e5484d; }
.modal__box h3 { font-size: 20px; }
.modal__box .lead { font-size: 14px; }
.modal__box .btn { width: 100%; }

/* kroky sedí v jednom světlém panelu, kolečka jsou bílá (185:2) */
.modal__steps {
  list-style: none; margin: 6px 0; padding: 16px; width: 100%; text-align: left;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg); border-radius: 14px;
}
.modal__steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--muted); }
.modal__steps span {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--white); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}

/* =========================================================================
   PODSTRÁNKY — právní texty, O nás, Kontakt, chybové stránky
   (Figma 142:2, 142:27, 142:50, 182:2, 183:2, 176:167, 176:272)
   ========================================================================= */
.page-hero { background: var(--bg); padding-block: 34px; }
.page-hero h1 { font-size: 28px; line-height: 1.15; }
.page-hero .lead { margin-top: 10px; max-width: 760px; }

/* Kontakt a O nás mají hlavičku na střed (Figma 183:25, 182:25) */
.page-hero--center { text-align: center; }
.page-hero--center .lead { margin-inline: auto; }
.page-hero__btns {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px;
}
/* Callbox je tu stejný prvek jako v liště, jen dědil zarovnání na střed
   z .page-hero--center — dvouřádkový popisek by se rozjel oproti hlavičce. */
.page-hero__btns .callbox { text-align: left; }

/* Fotka na pozadí hlavičky podstránky — stejný princip jako video v hero
   na úvodní stránce: obraz vespod, přes něj světlé překrytí, text nahoře. */
/* Polovina výšky hero z úvodní stránky (548 px na desktopu, 689 na mobilu).
   Obsah je uvnitř svisle vystředěný. */
.page-hero--foto {
  position: relative; overflow: hidden;
  min-height: 345px; padding-block: 40px;
  display: flex; align-items: center;
}
.page-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.page-hero--foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(238, 242, 252, .90) 0%, rgba(238, 242, 252, .80) 100%);
}
.page-hero--foto > .wrap { position: relative; z-index: 2; }

@media (min-width: 900px) {
  .page-hero--foto { min-height: 274px; padding-block: 44px; }
}

.draft-note {
  display: inline-block; margin-top: 14px;
  background: rgba(240, 157, 27, .12); border: 1px dashed var(--amber-dot);
  color: var(--amber-text); border-radius: 10px;
  padding: 8px 14px; font-size: 12px; font-weight: 600;
}

.prose { padding-block: 32px 48px; }
.prose__inner { max-width: 760px; display: flex; flex-direction: column; gap: 8px; }
.prose h2 {
  font-size: 19px; margin-top: 22px;
}
.prose h2:first-of-type { margin-top: 6px; }
.prose p { color: var(--muted); font-size: 14px; line-height: 22px; }
.prose p strong { color: var(--ink); }
.prose ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 22px; }
.prose .todo {
  color: var(--amber-text); font-size: 14px; line-height: 22px; font-weight: 500;
}
.prose__updated { margin-top: 26px; font-size: 12px; color: var(--muted); }

@media (min-width: 900px) {
  .page-hero { padding-block: 46px; }
  .page-hero h1 { font-size: 34px; }
  .prose { padding-block: 40px 64px; }
  .prose h2 { font-size: 21px; margin-top: 26px; }
  .prose p, .prose ul, .prose .todo { font-size: 15px; line-height: 24px; }
}

/* chybové stránky (404 / 500) — číslo je jen jemná kulisa, ne CTA barva */
.errpage { padding-block: 48px 64px; text-align: center; background: var(--white); }
.errpage__code {
  font-family: var(--font-head); font-weight: 800; font-size: 86px; line-height: 1.12;
  color: #cfdbf6;
}
.errpage h1 { font-size: 26px; margin-top: 18px; }
.errpage .lead { margin: 12px auto 24px; max-width: 520px; }
.errpage__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

@media (min-width: 900px) {
  .errpage { padding-block: 76px 90px; }
  .errpage__code { font-size: 135px; }
  .errpage h1 { font-size: 32px; }
}

/* ---- O nás (182:2) ---- */
.story { padding-block: 40px; }
.story__inner { display: grid; gap: 26px; }
.story p { color: var(--muted); font-size: 15px; line-height: 24px; }
.story p + p { margin-top: 14px; }
/* v návrhu je fotka na šířku (416×240), ne na výšku podle originálu */
.story img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-card); box-shadow: var(--sh-card);
}

.numbers { background: var(--bg); padding-block: 30px; }
.numbers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
.numbers strong {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: 30px; color: var(--primary);
}
.numbers span { font-size: 13px; color: var(--muted); }

.team { padding-block: 40px 34px; }
.team h2 { margin-bottom: 20px; }

/* Pás fotek stojí na světlém podkladu (182:2) a je to stejný ujíždějící
   marquee jako na homepage. Sekce si musí nechat ::before/::after pro vlnku,
   proto je marquee až uvnitř — a jeho okraje mizí do modré, ne do bílé. */
.photorow { background: var(--bg); }
.photorow .marquee {
  background: transparent;
  --fade-from: var(--bg);
  --fade-to: rgba(238, 242, 252, 0);   /* = --bg s nulovou průhledností */
}

.ctaband { background: var(--primary); color: #fff; padding-block: 34px; text-align: center; }
.ctaband h2 { color: #fff; margin-bottom: 8px; }
.ctaband p { color: rgba(255, 255, 255, .9); margin-bottom: 18px; }
.ctaband__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ctaband .btn--ghost { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.ctaband .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

@media (min-width: 900px) {
  .story { padding-block: 56px; }
  .story__inner { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 48px; }
  .numbers { padding-block: 40px; }
  .numbers strong { font-size: 36px; }
  .team { padding-block: 56px 40px; }
  .ctaband { padding-block: 48px; }
}

/* ---- Kontakt (183:2) ---- */
/* Sekce pro cizí obsah (průvodce „Aktualizace údajů" z api/aktualizace.php).
   Kreslí předěl vlnkou jako ostatní sekce, ale schválně nestylizuje nic
   uvnitř — vložený průvodce si nese vlastní vzhled a `.prose` by mu ho
   přepsala. */
.embed { background: var(--white); padding-block: 32px 48px; }

.contact-grid { padding-block: 32px; }
.contact-grid__inner { display: grid; gap: 18px; }
/* bílá karta kolem kontaktního formuláře na homepage (Figma 10:21) */
.contact__card {
  background: var(--white); border-radius: var(--r-card);
  box-shadow: var(--sh-card); padding: 28px;
}
.contact__card .form input { background: var(--bg); border-color: transparent; }
.contact__card .form input:focus { border-color: var(--primary); background: var(--white); }
/* Zavolat jako druhý rychlý kanál pod WhatsAppem. Bílý callbox by se na bílé
   kartě ztratil — bere si proto stejnou logiku jako inputy v kartě:
   světlá plocha bez rámečku, po najetí bílá s modrým rámečkem. */
.contact__card .callbox { background: var(--bg); border-color: transparent; }
.contact__card .callbox:hover { background: var(--white); border-color: var(--primary); }

/* karta formuláře na Kontaktu (Figma 183:51) — obráceně, na světlém podkladu */
.form-card {
  background: var(--bg); border-radius: var(--r-card); padding: 22px;
}
.form-card__title { font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.form-card .form input:not([type="checkbox"]):not([type="radio"]), .form-card .form textarea, .form-card .form select { background: var(--white); border-color: transparent; }
.form-card .form input:focus, .form-card .form textarea:focus, .form-card .form select:focus { border-color: var(--primary); }

.invoice-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 22px; align-self: start;
}
.invoice-card__title { font-family: var(--font-body); font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.invoice-card p { font-size: 14px; line-height: 21px; color: var(--muted); }
.invoice-card__note { margin-top: 12px; font-size: 13px; }

@media (min-width: 900px) { .contact-grid__inner { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; } }
/* bez postranní karty se formulář roztáhne, jen ne do nečitelné šířky */
.contact-grid__inner--solo { grid-template-columns: 1fr !important; max-width: 820px; margin-inline: auto; }
@media (min-width: 900px) { .contact-grid { padding-block: 50px; } }

/* =========================================================================
   POHYBOVÉ EFEKTY
   Celý blok stojí uvnitř `prefers-reduced-motion: no-preference` — kdo má
   omezený pohyb zapnutý, nedostane ani výchozí skrytí, takže obsah je
   normálně vidět i bez dojezdu animace. Prvky označuje JS (data-reveal),
   bez JS proto zůstane všechno viditelné.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.4s cubic-bezier(.22, .61, .36, 1) var(--d, 0.4s),
                transform 0.4s cubic-bezier(.22, .61, .36, 1) var(--d, 0.4s);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }

  /* hero nečeká na scroll — naskočí rovnou po načtení */
  .hero__left > *, .hero__collage, .hero .trust-strip {
    animation: heroIn .75s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: var(--d, 0ms);
  }
  @keyframes heroIn { from { opacity: 0; transform: translateY(20px); } }

  /* jemné nadzvednutí na najetí myší */
  .manager, .mgr-card, .invoice-card, .steps li {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }
  .manager:hover, .mgr-card:hover, .invoice-card:hover, .steps li:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-card);
  }
  .benefits__grid img { transition: transform 0.4s ease, box-shadow 0.4s ease; }
  .benefits__grid img:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 16px 34px rgba(17, 26, 61, .16); }

  /* pilulka s hodnocením a číslo kroku decentně pulsují při najetí na sekci */
  .steps li:hover .steps__n { transform: scale(1.08); }
  .steps__n { transition: transform 0.4s ease; }
}

/* =========================================================================
   ŽIVÉ VLNY (patička + přechod z hero)
   Obě vrstvy se posouvají proti sobě, každá jinou rychlostí — vzniká dojem
   vlnění. Posun je přesně o jednu periodu masky, takže smyčka navazuje bez
   zlomu. Jede přes transform (GPU), ne přes mask-position.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  .ctaband::before, .ctaband::after,
  .rooms::before, .rooms::after,
  .mgr::before, .mgr::after,
  .story::before, .story::after,
  .prose::before, .prose::after,
  .footer::before, .footer::after {
    left: -50%; right: -50%; width: 200%;
    will-change: transform;
  }

  /* Obojí záměrně velmi pomalu — má to být sotva postřehnutelný detail,
     ne poutač. Předěl do patičky o něco živěji než přechod z hero. */
  .ctaband::before, .footer::before { animation: vlnaVpravo 52s linear infinite; }
  .ctaband::after,  .footer::after  { animation: vlnaVlevo  38s linear infinite; }

  .rooms::before, .mgr::before, .story::before, .prose::before {
    animation: vlnaVpravo 76s linear infinite;
  }
  .rooms::after, .mgr::after, .story::after, .prose::after {
    animation: vlnaVlevo 58s linear infinite;
  }

  @keyframes vlnaVpravo {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--wave-back-period)); }
  }
  @keyframes vlnaVlevo {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--wave-period))); }
  }
}

/* Odkaz opouštějící web dostane šipku, ať je to poznat předem.
   V navigaci ikona není — ta vede na sekci s mapou, tedy zůstává na webu. */
.ico-ext { width: 13px; height: 13px; flex: none; opacity: .75; vertical-align: -1px; }
.footer__nav .ico-ext { opacity: .6; }

/* =========================================================================
   PŘEPÍNAČ JAZYKA — planeta vedle hamburgeru, nabídka vyjede zespodu
   ========================================================================= */
.lang { position: relative; display: inline-flex; }

.lang__btn {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; color: var(--ink);
  transition: background-color 0.4s ease, color 0.4s ease;
}
.lang__btn .lang__flag { width: 24px; height: 24px; }
.lang__btn:active { background: #e2e9fb; }
@media (hover: hover) {
  .lang__btn:hover { background: var(--bg); color: var(--primary); }
}
.lang__btn[aria-expanded="true"] { background: var(--bg); color: var(--primary); }

/* panel přes celou šířku, vyjíždí od spodní hrany */
.lang__sheet {
  position: fixed; inset: 0; z-index: 130; display: flex; align-items: flex-end;
  visibility: hidden; pointer-events: none;
  transition: visibility 0.4s;
}
.lang__sheet.is-open { visibility: visible; pointer-events: auto; }
.lang__backdrop {
  position: absolute; inset: 0; background: rgba(17, 26, 61, .45);
  opacity: 0; transition: opacity 0.4s ease;
}
.lang__panel {
  position: relative; width: 100%;
  background: var(--white); border-radius: 22px 22px 0 0;
  padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(17, 26, 61, .28);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(.22, .61, .36, 1);
}
.lang__sheet.is-open .lang__backdrop { opacity: 1; }
.lang__sheet.is-open .lang__panel { transform: none; }

/* úchyt jako u systémových panelů */
.lang__grip {
  display: block; width: 40px; height: 4px; margin: 4px auto 10px;
  border-radius: 2px; background: #d9e0f0;
}

.lang__panel a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 14px;
  font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none;
  transition: background-color 0.4s ease;
}
.lang__panel a:hover { background: var(--bg); text-decoration: none; }
.lang__panel a:active { background: #e2e9fb; }
.lang__panel a.is-active { background: #dfe7fd; color: var(--primary); }
.lang__flag { width: 26px; height: 26px; flex: none; }
.lang__check { width: 18px; height: 18px; flex: none; margin-left: auto; color: var(--primary); }

/* Na širokém displeji se stejná nabídka rozbalí pod tlačítkem — panel přes
   celou spodní hranu dává smysl jen na úzkém displeji. */
@media (min-width: 900px) {
  .lang__sheet { position: absolute; inset: auto; top: calc(100% + 10px); right: 0; display: block; }
  .lang__backdrop, .lang__grip { display: none; }
  .lang__panel {
    width: 210px; border-radius: 16px; padding: 6px;
    border: 1px solid var(--line); box-shadow: var(--sh-card);
    opacity: 0; transform: translateY(-8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  /* na širokém displeji stačí najet myší — nabídka se rozbalí sama */
  .lang:hover .lang__sheet,
  .lang:focus-within .lang__sheet { visibility: visible; pointer-events: auto; }
  .lang:hover .lang__panel,
  .lang:focus-within .lang__panel,
  .lang__sheet.is-open .lang__panel { opacity: 1; transform: none; }
  /* neviditelný můstek přes mezeru, ať kurzor cestou k nabídce „nespadne“ */
  .lang__sheet::before {
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
  }
  .lang__panel a { padding: 11px 13px; font-size: 15px; }
  .lang__flag { width: 22px; height: 22px; }
}

/* =========================================================================
   DETAIL BYTU (Figma 172:2 / 173:2)
   ========================================================================= */
.drobky { background: var(--bg); padding-block: 12px; font-size: 13px; }
.drobky .wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drobky a { color: var(--muted); font-weight: 500; }
.drobky a:hover { color: var(--primary); }
.drobky span[aria-hidden] { color: var(--muted-2); }
.drobky [data-drobek-byt] { color: var(--ink); font-weight: 600; }

.detail__hlaska { padding-block: 60px 80px; text-align: center; }
.detail__hlaska .lead { margin: 10px auto 22px; max-width: 460px; }

/* Obsah detailu se skládá z dat mapy, tedy až po načtení stránky. Do té doby
   drží místo „Načítáme byt…“ — bez něj by se pod hlavičku vysunula patička. */
.detail__nacitam { padding-block: 90px 140px; text-align: center; color: var(--muted); }
#detail:not([data-stav="nacitam"]) .detail__nacitam { display: none; }

/* ---- galerie ---- */
.galerie { display: grid; gap: 10px; padding-top: 18px; }
.galerie__hlavni { position: relative; display: block; border-radius: var(--r-card); overflow: hidden; }
.galerie__hlavni img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #d7e1f8; }
.galerie__hlavni .badge { left: 14px; top: 14px; }
.galerie__vedle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.galerie__mala { position: relative; display: block; border-radius: 16px; overflow: hidden; }
.galerie__mala img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #d7e1f8; }
.galerie__vic {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(255, 255, 255, .94); border-radius: var(--r-pill);
  padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--ink);
}
.galerie a:hover img { transform: scale(1.02); }
.galerie img { transition: transform 0.4s ease; }
/* ---- mřížka se všemi fotkami ----
   Celá série pohromadě, ať se nemusí listovat po jedné. Leží nad stránkou
   jako vlastní vrstva a fotky se do ní tahají líně — než ji někdo otevře,
   nestáhne se ani jedna. */
.mrizka {
  position: fixed; inset: 0; z-index: 130;
  background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity 0.4s ease;
}
.mrizka.is-open { opacity: 1; }
.mrizka__hlava {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px;
  background: var(--bg);
}
.mrizka__nazev { font-weight: 700; font-size: 15px; color: var(--ink); }
.mrizka__zavrit {
  flex: none; width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  transition: border-color 0.4s ease, color 0.4s ease;
}
.mrizka__zavrit svg { width: 19px; height: 19px; }
.mrizka__zavrit:hover { border-color: var(--primary); color: var(--primary); }
/* přepínač rozložení — vedle sebe / pod sebou */
.mrizka__prepnout {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--white); color: var(--ink); font-size: 13px; font-weight: 700;
  transition: border-color 0.4s ease, color 0.4s ease;
}
.mrizka__prepnout:hover { border-color: var(--primary); color: var(--primary); }
.mrizka__ikona { width: 16px; height: 16px; color: var(--primary); }
.mrizka__ikona--mrizka,
.mrizka.is-sloupec .mrizka__ikona--sloupec { display: none; }
.mrizka.is-sloupec .mrizka__ikona--mrizka { display: block; }
@media (max-width: 560px) {
  .mrizka__prepnout span { display: none; }
  .mrizka__prepnout { padding: 9px 11px; }
}
/* Dvě fotky vedle sebe přes celou šířku okna — mřížka se nikde nezužuje,
   ať jsou fotky co největší. */
.mrizka__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 0 10px 48px;
}
.mrizka__grid button {
  display: block; padding: 0; border: 0;
  border-radius: 16px; overflow: hidden; background: #d7e1f8;
}
.mrizka__grid img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.mrizka__grid button:hover img { transform: scale(1.03); }
/* fotky pod sebou — jedna přes celou šířku, vyšší výřez, ať je z ní víc vidět */
.mrizka.is-sloupec .mrizka__grid { grid-template-columns: 1fr; }
.mrizka.is-sloupec .mrizka__grid img { aspect-ratio: 16 / 10; }

/* ---- rozvržení ---- */
.detail__grid { display: grid; gap: 28px; padding-block: 26px 44px; }
.detail__hlavni { min-width: 0; }
.detail__uvod h1 { font-size: 28px; line-height: 1.15; }
.detail__uvod .lead { margin-top: 6px; }

.params { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.param {
  background: var(--bg); border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.param strong { font-family: var(--font-head); font-weight: 800; font-size: 16px; }
.param span { font-size: 12px; color: var(--muted); }

.detail__blok { margin-top: 32px; }
.detail__blok h2 { margin-bottom: 14px; }

.pokoje { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pokoj {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; display: flex; align-items: flex-start; gap: 14px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.pokoj:hover { border-color: var(--primary); box-shadow: 0 6px 16px rgba(18, 26, 61, .07); }
/* Pokoj, na který vede odkaz z e-mailu (`…#pokoj-135`). Modrý rámeček drží
   chvíli po příchodu, ať je hned jasné, o kterém pokoji se píše. */
.pokoj--vybrany {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 89, 255, .15);
  animation: pokojPrisel 2.6s ease-out 1;
}
@keyframes pokojPrisel {
  0%, 55% { box-shadow: 0 0 0 3px rgba(0, 89, 255, .28); }
  100%    { box-shadow: 0 0 0 3px rgba(0, 89, 255, .15); }
}
@media (prefers-reduced-motion: reduce) { .pokoj--vybrany { animation: none; } }
/* Fotka pokoje má u každého jiný poměr stran — většina je z telefonu na
   výšku. Čtvercový výřez je proto jediný, který drží řádek karet v klidu. */
.pokoj__foto {
  flex: none; width: 92px; height: 92px;
  object-fit: cover; border-radius: 10px; background: #d7e1f8;
}
.pokoj__telo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pokoj__hlava { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pokoj__hlava strong { font-size: 16px; }
.pokoj__stav { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.pokoj__stav--free { color: var(--green); }
.pokoj__stav--later { color: var(--amber-text); }
.pokoj__meta { font-size: 13px; color: var(--muted); }
.pokoj__cena { font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--primary); }

.chipy { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chipy li {
  background: var(--bg); border-radius: var(--r-pill); padding: 8px 14px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.odrazky { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.odrazky li { display: flex; gap: 10px; font-size: 15px; line-height: 22px; color: var(--muted); }
.odrazky li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px;
  border-radius: 50%; background: var(--primary);
}

/* ---- boční karta s cenou a formulářem ---- */
.detail__box {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--sh-card); padding: 22px 20px; align-self: start;
  display: flex; flex-direction: column; gap: 12px;
}
.detail__cena strong {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: 26px; color: var(--primary);
}
.detail__cena span { font-size: 13px; color: var(--muted); }
.detail__box .badge { position: static; align-self: flex-start; box-shadow: none; background: var(--bg); }
.detail__nebo { font-size: 14px; font-weight: 700; margin-top: 4px; }
.detail__box .form input { background: var(--bg); border-color: transparent; }
.detail__box .form input:focus { background: var(--white); border-color: var(--primary); }
.detail__spravcova {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px;
}
.detail__spravcova img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.detail__spravcova strong { display: block; font-size: 14px; }
.detail__spravcova span span { font-size: 13px; color: var(--primary); font-weight: 600; }

@media (min-width: 900px) {
  .drobky { padding-block: 16px; }
  .galerie { grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); gap: 12px; padding-top: 22px; }
  .galerie__hlavni img { aspect-ratio: 2 / 1; height: 100%; }
  .galerie__vedle { grid-template-columns: 1fr; gap: 12px; }
  .galerie__mala img { aspect-ratio: auto; height: 100%; }
  .galerie__vedle { display: grid; grid-template-rows: 1fr 1fr; }

  .detail__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; padding-block: 34px 64px; align-items: start; }
  .detail__uvod h1 { font-size: 34px; }
  .params { grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
  .pokoje { grid-template-columns: 1fr 1fr; }
  /* karta jede se stránkou, ať je cena a kontakt pořád po ruce */
  .detail__box { position: sticky; top: calc(var(--header-h) + 16px); }
}

/* název na kartě vede na detail bytu */
.room-card__name a { color: inherit; text-decoration: none; }
.room-card__name a:hover { color: var(--primary); text-decoration: none; }

/* karta, ke které se uživatel vrátil z detailu — krátce se připomene */
.room-card.is-vybrana {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 89, 255, .18), var(--sh-card);
}

/* ---- návrat na výpis (nahradil drobečky) ---- */
.zpet { padding-block: 16px 0; }
.zpet a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none;
  transition: color 0.4s ease, gap 0.4s ease;
}
.zpet svg { width: 16px; height: 16px; }
.zpet a:hover { color: var(--primary); gap: 9px; text-decoration: none; }

/* ---- galerie: dlaždice jsou tlačítka do lightboxu ---- */
.galerie__hlavni, .galerie__mala {
  padding: 0; border: 0; background: none; cursor: zoom-in;
  display: block; width: 100%;
}
/* ---- lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 140;
  display: grid; grid-template-columns: 1fr; align-items: center; justify-items: center;
  background: rgba(9, 14, 34, .97);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.4s ease;
  padding: 56px 12px 64px;
}
.lightbox.is-open { opacity: 1; }
.lightbox__ram { margin: 0; max-width: min(1200px, 100%); max-height: 100%; display: flex; }
.lightbox__ram img {
  max-width: 100%; max-height: calc(100dvh - 120px);
  width: auto; height: auto; border-radius: 12px; object-fit: contain;
}
.lightbox__zavrit, .lightbox__sip {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: rgba(255, 255, 255, .12); border: 0; border-radius: 50%; color: #fff;
  transition: background-color 0.4s ease, transform 0.4s ease;
}
.lightbox__zavrit svg, .lightbox__sip svg { width: 22px; height: 22px; }
.lightbox__zavrit { top: 12px; right: 12px; }
.lightbox__sip--vlevo { left: 10px; }
.lightbox__sip--vpravo { right: 10px; }
.lightbox__zavrit:hover, .lightbox__sip:hover { background: rgba(255, 255, 255, .24); }
.lightbox__sip:active { transform: scale(.94); }
.lightbox__pocet {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .82);
}

/* ---- mapa v detailu ---- */
.detail__mapa {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg);
  height: 320px; margin-bottom: 14px;
}
.detail__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- mapa s jedním bodem (detail bytu) ----
   Leaflet je uložený v assets/vendor a načte se, až když se k mapě doscrolluje.
   Značka je stejná jako v ostré mapě: barevný kroužek + bílý disk s logem,
   barva podle toho, jestli je pokoj volný hned, nebo až později. */
.mapa-bod { position: absolute; inset: 0; }
.mapa-bod .leaflet-container { width: 100%; height: 100%; background: var(--bg); font: inherit; }
.mapa-bod .leaflet-control-attribution { font-size: 10px; }
.bod-marker {
  width: 46px; height: 46px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green);
  box-shadow: 0 4px 14px rgba(17, 26, 61, .22), 0 0 0 2px rgba(255, 255, 255, .85);
}
.bod-marker--later { background: var(--amber-dot); }
.bod-marker__disc {
  width: 34px; height: 34px; border-radius: 999px; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.bod-marker__disc img { width: 28px; height: 28px; border-radius: 999px; display: block; }
/* Adresa u značky — Leafletí bublinu přebarvíme do stylu webu. */
.mapa-bod .bod-adresa {
  padding: 6px 11px; border: 0; border-radius: var(--r-pill);
  background: var(--white); color: var(--ink);
  font-size: 13px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(17, 26, 61, .18);
}
.mapa-bod .bod-adresa::before { border-top-color: var(--white); }

/* ---- další byty pod detailem ---- */
/* Nabídka dalších bytů je jen na detailu — tam se lehce podbarví, ať se
   oddělí od bílého obsahu nad ní. Na landingu zůstává sekce s pokoji bílá. */
.rooms--dalsi { padding-top: 8px; background: var(--bg); }
.rooms--dalsi .section-head { margin-bottom: 18px; }

@media (min-width: 900px) {
  .zpet { padding-block: 20px 0; }
  .detail__mapa { height: 380px; }
  .lightbox__zavrit { top: 20px; right: 24px; }
  .lightbox__sip--vlevo { left: 24px; }
  .lightbox__sip--vpravo { right: 24px; }
}

/* volání není jen odkaz — je za ním konkrétní člověk */
.detail__tel {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  padding: 10px 14px 10px 10px; background: var(--white); color: var(--ink);
  text-decoration: none;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.detail__tel img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.detail__tel-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.detail__tel-txt strong { font-size: 15px; font-weight: 700; }
.detail__tel-txt > span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.detail__tel { padding-inline: 10px 12px; }
.detail__tel .ico { width: 20px; height: 20px; margin-left: auto; flex: none; color: var(--primary); }
.detail__tel:hover {
  border-color: var(--primary); text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 89, 255, .12); transform: translateY(-1px);
}
.detail__tel:active { transform: translateY(1px); transition-duration: 0.4s; }

/* Logo, navigace, přepínač jazyka a obě CTA se do jednoho řádku vejdou jen
   na širokém okně; níž se navzájem překrývaly. Hranice nejsou od oka —
   změřené prahy bez kolize jsou 1630 / 1540 / 1320 px, tady je s rezervou.
   Ubírá se odspodu to nejméně důležité; telefon zůstává v heru, v patičce
   i ve stickované liště na mobilu. */
@media (min-width: 900px) and (max-width: 1649px) {
  .nav { gap: 22px; font-size: 14px; }
  .pill { padding: 9px 14px; font-size: 12px; }
  .pill--wa { padding: 9px 16px; font-size: 13px; }
}
/* Ve volání se šetří všude jinde, jen ne na jeho obsahu. Samotné „Zavolej
   Magdě" je k ničemu — číslo ani to, že mluvíš se správcovou, se z toho
   nedozvíš, a právě kvůli tomu prvek v hlavičce je. Místo se proto ubírá
   WhatsAppu, který je i v heru, na Kontaktu, v patičce a ve stickované liště. */
@media (min-width: 900px) and (max-width: 1499px) {
  .header__cta .callbox { padding-right: 10px; gap: 8px; }
  .header__cta .callbox img { width: 28px; height: 28px; }
  /* WhatsApp zůstává jako zelené kolečko s ikonou — pozná se i beze slov. */
  .header__cta .pill--wa { padding: 10px 12px; }
  .header__cta .pill--wa .pill__t { display: none; }
}
@media (min-width: 900px) and (max-width: 1319px) {
  /* Ani to nestačí: WhatsApp z hlavičky mizí celý, volání zůstává. */
  .header__cta .pill--wa { display: none; }
  .nav { gap: 16px; font-size: 13.5px; }
}
@media (min-width: 900px) and (max-width: 1149px) {
  /* Pod touhle hranicí by volání lezlo přes navigaci. Telefon zůstává
     v heru, v patičce i ve stickované liště na mobilu. */
  .header__cta .callbox { display: none; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .nav { gap: 16px; }
  .header__cta { display: none; }
}

/* Náhled mapy — živý iframe se vloží až po kliknutí (viz site.js) */
.mapa-nahled { position: relative; overflow: hidden; }
.mapa-nahled img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapa-nahled::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17, 26, 61, .06), rgba(17, 26, 61, .22));
  pointer-events: none; transition: opacity 0.4s ease;
}
.mapa-nahled__btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border: 0; border-radius: var(--r-pill);
  background: var(--white); color: var(--ink);
  font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 6px 22px rgba(17, 26, 61, .24);
  transition: transform 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}
.mapa-nahled__btn svg { width: 19px; height: 19px; color: var(--primary); }
.mapa-nahled__btn:hover {
  color: var(--primary); transform: translate(-50%, -50%) scale(1.04);
  box-shadow: 0 10px 28px rgba(17, 26, 61, .3);
}
.mapa-nahled__btn:active { transform: translate(-50%, -50%) scale(.98); }
.mapa-nahled.is-nactena::after { content: none; }
/* Na desktopu rozměry i zmenšení dopočítává site.js a přepisuje je inline —
   počátek transformace musí být levý horní roh, aby zmenšený iframe sedl
   přesně do rámečku. Na dotyku se mapa vkládá ve své mobilní podobě, a tam
   platí tohle: iOS Safari se rozměry iframu neřídí a roztáhne ho na velikost
   obsahu, dvojice width:1px + min-width:100% ho v rámečku udrží. */
.mapa-nahled iframe {
  display: block;
  width: 1px; min-width: 100%;
  height: 1px; min-height: 100%;
  border: 0;
  transform-origin: 0 0;
}
.mapa-nahled.is-nactena { overflow: hidden; }

/* Odkazy uvnitř běžícího textu se nesmí lišit jen barvou — kdo barvy
   nerozezná, musí je poznat taky. */
.cookie p a { text-decoration: underline; text-underline-offset: 2px; }


/* Karta se překresluje sama za sebe — změna uvnitř nenutí prohlížeč
   přepočítat celý pás, ve kterém jich je i s klony přes třicet. */
.room-card { contain: layout paint style; }

/* ==========================================================================
   JEDNOTNÉ HOVER CHOVÁNÍ
   --------------------------------------------------------------------------
   Jedno pravidlo pro celý web i mapu (mapa/assets/css/map.css má stejný blok):

     najetí  = jemná změna barvy + nadzvednutí o 1 px, ŽÁDNÝ stín navíc
     stisk   = posun o 1 px dolů, rychlejší přechod
     přechod = .18s ease

   Klidové stíny karet zůstávají, na hover se nemění — dřív se zvětšovaly
   a každý prvek se přitom zvedal jinak (−1 až −4 px), což působilo roztříštěně.
   ========================================================================== */

:root {
  --hover-lift: -1px;
  --hover-t: 0.4s ease;
}

/* --- tlačítka: barva ano, stín ne --- */

.btn { transition: background-color var(--hover-t), border-color var(--hover-t), color var(--hover-t), transform var(--hover-t); }
.btn:hover { transform: translateY(var(--hover-lift)); }
/* .btn--primary ani .btn--wa klidový stín nemají — na hover ho tedy nepřidáváme. */
.btn--primary:hover,
.btn--wa:hover { box-shadow: none; }

/* .btn--hero klidový stín má; ten zůstává, jen se při najetí nezvětšuje. */
.btn--hero:hover { box-shadow: var(--sh-cta); }

.news__btn:hover,
.bluecard__btn:hover,
.reel__btn:hover,
.arr:hover { box-shadow: none; }

/* --- karty: stejný zdvih, klidový stín beze změny --- */

.room-card { transition: border-color var(--hover-t), transform var(--hover-t); }
.room-card:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: 0 6px 16px rgba(18, 26, 61, .06);   /* = klidový stav */
}

.benefit { transition: transform var(--hover-t); }
.benefit:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: 0 6px 18px rgba(18, 26, 61, .06);   /* = klidový stav */
}

.pokoj:hover { box-shadow: none; }

.detail__tel:hover { box-shadow: none; transform: translateY(var(--hover-lift)); }

@media (hover: hover) {
  .manager:hover, .mgr-card:hover, .invoice-card:hover, .steps li:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: none;
  }
  /* Fotky v mřížce výhod se dřív i zvětšovaly — jinak než všechno ostatní. */
  .benefits__grid img:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: none;
  }
}

/* Tlačítko nad náhledem mapy je vycentrované přes translate(-50%,-50%),
   takže zdvih musí to posunutí zachovat. */
.mapa-nahled__btn:hover {
  transform: translate(-50%, calc(-50% + var(--hover-lift)));
  box-shadow: 0 6px 22px rgba(17, 26, 61, .24);   /* = klidový stav */
}
.mapa-nahled__btn:active { transform: translate(-50%, calc(-50% + 1px)); }

/* ==========================================================================
   Mapa v modálu — „Otevřít mapu bytů" už neodvádí ze stránky
   ========================================================================== */

.mapamodal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Nahoře je místo na křížek — uvnitř rámu by překrýval ovládání mapy. */
  padding: 60px 24px 24px;
  background: rgba(17, 26, 61, .55);
}
.mapamodal[hidden] { display: none; }

.mapamodal__box {
  position: relative;
  width: min(1280px, 100%);
  height: min(820px, 100%);
  background: var(--white);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-modal);
}
.mapamodal__box iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.mapamodal__zavrit {
  position: absolute;
  top: 14px;
  right: 24px;
  z-index: 2;
  width: 36px; height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 3px 10px rgba(18, 26, 61, .2);
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  transition: background-color var(--hover-t), transform var(--hover-t);
}
.mapamodal__zavrit:hover { background: var(--bg); transform: translateY(var(--hover-lift)); }
.mapamodal__zavrit:active { transform: translateY(1px); }

@media (max-width: 759px) {
  .mapamodal { padding: 52px 0 0; }
  .mapamodal__box { width: 100%; height: 100%; border-radius: 16px 16px 0 0; }
  .mapamodal__zavrit { top: 8px; right: 12px; }
}

/* Vybavení pokoje — ikonové štítky, shodné s mapou (mapa/assets/css/map.css). */
.room-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.room-tag {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--muted);
  cursor: help;
  transition: border-color var(--hover-t), color var(--hover-t);
}
.room-tag:hover { border-color: var(--primary); color: var(--primary); }
.room-tag svg { width: 15px; height: 15px; display: block; }