/* =========================================================================
   layout.css: kostra stránky
   Web Ing. Petr Škola, redesign 2026

   Načítá se hned po base.css. Řeší jen to, co drží stránku pohromadě:
   pásy sekcí, hlavičku, mobilní menu, svislou navigaci, patičku
   a mobilní lištu. Nic, co patří konkrétní sekci (hero, karty nabídek,
   časová osa), to je sections.css.

   Barvy jen přes tokeny nebo color-mix(). Žádná hodnota natvrdo.

   Obsah:
     1. Kostra stránky
     2. Sekce a střídání pásů
     3. Obsah na tmavém pásu
     4. Hlavička sekce (.sec-head)
     5. Hlavička stránky (.hd)
     6. Mobilní menu (.menu) a zastínění stránky (.scrim)
     7. Svislá navigace (.rail)
     8. Patička (.ft)
     9. Mobilní lišta (.mobar)
    10. Pojistky pro úzké displeje
   ========================================================================= */


/* =========================================================================
   1. KOSTRA STRÁNKY
   ========================================================================= */

main { display: block; }

/* Pod lepivou hlavičkou nesmí skončit kotva ani focusovaný prvek.
   Žádná rezerva navíc: jakmile by tu bylo +20px, po odscrollování na
   tmavou sekci by nad ní zůstal proužek předchozího světlého pásu.
   Odečtený pixel kryje zaokrouhlení skutečné výšky hlavičky. */
html { scroll-padding-top: calc(var(--header-h) - 1px); }

/* Do 1080 px ale žádná lepivá hlavička není (oddíl 5.0b), odjede se
   stránkou pryč. Rezerva na ni by tam byla jen prázdné místo nad nadpisem,
   proto se ruší a kotva dosedá přesně na horní hranu sekce: nula, ne pár
   pixelů, jinak nad sekcí zůstane proužek předchozího pásu.

   Nad stránkou zůstává viset jen plovoucí burger v pravém horním rohu
   (oddíl 5.4). Ten je úzký a stojí vpravo, takže do cesty vleze jedině
   dlouhému prvnímu řádku nadpisu; ten si vedle něj uhne sám, viz
   .sec-head v sections.css, oddíl 00. */
@media (max-width: 1080px) {
  html { scroll-padding-top: 0; }
}


/* =========================================================================
   2. SEKCE A STŘÍDÁNÍ PÁSŮ

   Pořadí pozadí přes stránku: bg (čísla) → bg-2 (o mně) → bg (služby)
   → bg-2 (nemovitosti) → bg (reference) → bg-2 (otázky) → bg (blog)
   → bg-2 (kontakt). Nikdy dvě stejná pozadí hned za sebou.
   Hlavní obsah je celý světlý, tmavé zůstávají jen hlavička a patička.
   ========================================================================= */

.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--text);
}

/* Sekce, která nemá dýchat jako ostatní, dnes jediná Kontakt.
   Formulář, údaje a mapa drží pohromadě jako jeden blok, proto se
   svislý prostor kolem i uvnitř stahuje. */
.section--compact { padding-block: calc(var(--section-y) * .52); }

.section--alt   { background: var(--bg-2); }
.section--band  { background: var(--band);   color: var(--on-band); }
.section--band2 { background: var(--band-2); color: var(--on-band); }

/* --- 2.1 Slučování sousedních pásů ---------------------------------------
   Dvě sekce se stejným pozadím tvoří jeden blok, spodní už nezačíná
   dalším paddingem, jinak by mezi nimi vznikla dvojnásobná mezera. */

.section--alt   + .section--alt,
.section--band  + .section--band,
.section--band2 + .section--band2 { padding-top: 0; }

.section:not(.section--alt):not(.section--band):not(.section--band2)
  + .section:not(.section--alt):not(.section--band):not(.section--band2) {
  padding-top: 0;
}

/* Kotva na takovou sekci ale nesmí dosednout úplně natvrdo: bez horního
   paddingu by nadpis začínal na hraně obrazovky, na mobilu dokonce kousek
   nad ní. Dostane proto rezervu. Nad sekcí se tím odkryje proužek té
   předchozí, jenže ta má stejné pozadí — proto se ostatně padding slučuje —
   takže není poznat. Na širokém displeji nic z toho neplatí, tam kotvám
   odsazení dává lepivá hlavička (oddíl 1). */

@media (max-width: 1080px) {
  .section--alt   + .section--alt,
  .section--band  + .section--band,
  .section--band2 + .section--band2 { scroll-margin-top: 32px; }

  .section:not(.section--alt):not(.section--band):not(.section--band2)
    + .section:not(.section--alt):not(.section--band):not(.section--band2) {
    scroll-margin-top: 32px;
  }
}

/* --- 2.2 Stránka, která začíná drobečkovou navigací ------------------------
   Na vnitřních stránkách (výpisy, detail nabídky, článek) stojí hned pod
   hlavičkou drobeček. Je to tenký řádek odkazů, ne obsah, takže plná sekční
   mezera nad ním nechává navrchu stránky velké prázdno. Sekce si proto horní
   padding stáhne; spodní zůstává, ten drží odstup od zbytku stránky. */

main > .section:first-child:has(> .wrap > nav[aria-label="Drobečková navigace"]) {
  padding-top: clamp(18px, 2.4vw, 30px);
}

/* --- 2.3 Zrnitost na tmavých pásech ---------------------------------------
   Jemná textura, aby velká tmavá plocha nebyla mrtvá. Na světlých pásech
   a v hero nic. Pozor: ::after tmavých sekcí je tímto obsazený. */

.section--band,
.section--band2 {
  isolation: isolate;
}

.section--band::after,
.section--band2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain);
  background-image: var(--grain-img);
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}


/* =========================================================================
   3. OBSAH NA TMAVÉM PÁSU
   Tady se přepíná celá barevná role. Nic dalšího už o tmavém pásu
   vědět nemusí.
   ========================================================================= */

.section--band  .display, .section--band  h1, .section--band  h2,
.section--band  h3, .section--band  h4,
.section--band2 .display, .section--band2 h1, .section--band2 h2,
.section--band2 h3, .section--band2 h4 { color: var(--on-band); }

.section--band  .lead, .section--band  .note,
.section--band2 .lead, .section--band2 .note { color: var(--on-band-mute); }

.section--band  .kicker,
.section--band2 .kicker { color: var(--accent-band); }

.section--band  .kicker::before,
.section--band2 .kicker::before { background: var(--accent-band); }

.section--band  hr,
.section--band2 hr { border-top-color: var(--line-band); }

.section--band  .badge,
.section--band2 .badge {
  color: var(--on-band-mute);
  border-color: var(--line-band);
}

.section--band  .badge svg,
.section--band2 .badge svg { color: var(--on-band); }

.section--band  .btn--ghost,
.section--band2 .btn--ghost {
  color: var(--on-band);
  border-color: var(--line-band-2);
}

.section--band  .btn--ghost:hover,
.section--band2 .btn--ghost:hover { border-color: var(--on-band); }

.section--band  .btn--link, .section--band  .link-more,
.section--band2 .btn--link, .section--band2 .link-more { color: var(--on-band); }

.section--band  .btn--link:hover, .section--band  .link-more:hover,
.section--band2 .btn--link:hover, .section--band2 .link-more:hover { color: var(--accent-band); }

/* Obrys focusu musí být vidět i na tmavém podkladu, proto světlejší
   varianta akcentu. Platí pro všechny tmavé plochy webu. */
.section--band  :focus-visible,
.section--band2 :focus-visible,
.hd    :focus-visible,
.menu  :focus-visible,
.rail  :focus-visible,
.ft    :focus-visible,
.mobar :focus-visible,
.burger:focus-visible { outline-color: var(--accent-band); }

/* --- 3.1 Formulář na tmavém pásu (sekce Kontakt) --------------------------
   Formulář je jediné místo, kde návštěvník na tmavém pásu něco vypisuje,
   popisky, rámečky i placeholder proto jdou o stupeň výš než ostatní
   „tichý“ text sekce. Tlumená --on-band-mute se tu záměrně nepoužívá. */

.section--band .field > label,
.section--band .field__lbl,
.section--band .form__legend { color: var(--on-band); }

.section--band .field input:not([type="checkbox"]),
.section--band .field select,
.section--band .field textarea {
  color: var(--on-band);
  /* jen background-color, zkratka `background` by u <select> smazala
     pozici šipky nastavenou v base.css */
  background-color: color-mix(in oklab, var(--on-band) 10%, transparent);
  border-color: color-mix(in oklab, var(--on-band) 46%, transparent);
}

.section--band .field ::placeholder { color: color-mix(in oklab, var(--on-band) 62%, transparent); }

.section--band .field input:not([type="checkbox"]):hover,
.section--band .field select:hover,
.section--band .field textarea:hover { border-color: var(--on-band); }

.section--band .field input:focus-visible,
.section--band .field select:focus-visible,
.section--band .field textarea:focus-visible {
  border-color: var(--accent-band);
  outline-color: var(--accent-band);
}

.section--band .field select { background-image: var(--ico-chevron-band); }

/* Na tmavém pásu se čtvereček chová jako pole vedle něj: průsvitný,
   s linkou pásu. Bílý by tam svítil jako jediná plná plocha. */
.section--band .field input[type="checkbox"] {
  background-color: transparent;
  border-color: var(--line-band-2);
}

.section--band .field input[type="checkbox"]:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.section--band .field--check > label { color: var(--on-band-mute); }

.section--band .field.is-invalid input,
.section--band .field.is-invalid select,
.section--band .field.is-invalid textarea,
.section--band [aria-invalid="true"] { border-color: var(--err-band); }

.section--band .field__err { color: var(--err-band); }
.section--band .field__hint { color: var(--on-band-mute); }

.section--band .form__status { color: var(--on-band-mute); }
.section--band .form__status.is-err { color: var(--err-band); }


/* =========================================================================
   4. OBSAH NAD ZRNITOSTÍ
   Textura tmavého pásu leží v ::after na z-indexu 1. Obsah musí být nad ní,
   jinak by ji režim prolnutí „overlay“ propsal i do písma.

   Pozn.: vzhled .sec-head (velikosti, --center, číslo sekce) patří
   sections.css, tady je jen tohle jedno pravidlo o vrstvení.
   ========================================================================= */

.section > .wrap,
.section > .sec-head { position: relative; z-index: 2; }


/* =========================================================================
   5. HLAVIČKA STRÁNKY (.hd)

   Tmavý plný pás, žádný backdrop-filter, žádná průhlednost. Při scrollu
   přibude jen vlasová linka dole, výška ani krytí se nemění.
   ========================================================================= */

.hd {
  position: sticky;
  top: 0;
  z-index: 100;

  /* Tmavý pás kreslí background-IMAGE, ne background-color. iOS Safari 26
     si barvu svých lišt bere z background-color lepivého prvku u hrany okna
     a obrázek k ní nedosáhne, takže mu tady zůstane --chrome a rám okna se
     nepřebarví. Podrobně base.css, oddíl 3.1. Nepřepisujte to zkratkou
     `background:`, ta by barvu vrátila zpátky. */
  background-color: var(--chrome);
  background-image: linear-gradient(var(--band), var(--band));
  color: var(--on-band);

  transition: box-shadow var(--t-hover) var(--e-soft);

  /* Zlomy hlavičky (oddíl 5.5) se ptají na šířku TÉTO hlavičky, ne okna.
     Bez toho by se navigace překryla s telefonem pokaždé, když je stránka
     užší než okno, Design studio ji odsouvá vedle panelu. */
  container-type: inline-size;
  container-name: hlavicka;
}

.hd--scrolled { box-shadow: 0 1px 0 var(--line-band); }

/* --- 5.0b Hlavička na mobilu odjede se stránkou ---------------------------
   Do 1080 px (tam, kde se navigace skládá do burgeru) hlavička přestává být
   lepivá a odroluje pryč jako každá jiná sekce. Nahoře po ní nezůstane nic,
   navigaci drží plovoucí burger v pravém horním rohu (oddíl 5.4), takže se
   menu nemá jak ztratit.

   Pozn. k iOSu: dřív se hlavička na mobilu sbalovala a zprůhledňovala, což
   rozblikalo horní lištu Safari (bere barvu z obsahu pod sebou), proto se
   to tehdy zrušilo. Tady se pás nesbaluje ani neprůhlední, jen odjede jednou
   nahoru a při návratu se vrátí. Kdyby lišta přesto přebarvovala, řeší se to
   metatagem theme-color v <head>, ne návratem k lepivé hlavičce.
   ------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hd { position: static; }
}

.hd__in {
  display: flex;
  align-items: center;
  gap: 24px;

  width: 100%;
  /* Přesně stejná šířka i odsazení jako .wrap v base.css. Díky tomu začíná
     jméno „Petr Škola“ na levé hraně obsahového sloupce a logo RE/MAX končí
     na pravé, v jedné svislici s nadpisy sekcí pod hlavičkou. Tuhle dvojici
     hodnot proto neměňte odděleně od .wrap. */
  max-width: calc(var(--wrap) + var(--pad) * 2);
  /* Výška je zadaná napevno, ne přes --header-h. Ten token dopočítává app.js
     ze skutečné výšky hlavičky a zapisuje ho inline na <html>; kdyby na něm
     zároveň výška visela, měřila by se sama sebe a hodnota by se nikdy
     nevrátila zpět dolů. Čísla odpovídají výchozím hodnotám --header-h. */
  min-height: 76px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

@media (max-width: 768px) {
  .hd__in { min-height: 60px; }
}

/* Burger už není součástí řádku, ale plave nad ním (oddíl 5.4). Obsah
   hlavičky proto musí sám uhnout, jinak mu logo RE/MAX vjede pod tlačítko.
   Šířka tlačítka (44 px) plus mezera. Bez JS žádný burger není, takže se
   místo nedrží. Pravidlo musí stát až za `padding-inline` výš, jinak by
   ho obecnější zápis přebil. */
@media (max-width: 1080px) {
  .js .hd__in { padding-inline-end: calc(var(--pad) + 58px); }
}

/* --- 5.1 Značka ----------------------------------------------------------- */

.hd__brand {
  flex: none;
  min-width: 0;
  display: flex;
  align-items: center;
}

.hd__logo {
  display: block;
}

/* Kontaktní sloupeček na pravé straně: nahoře telefon, pod ním sociální
   sítě. Šířku určuje telefon, ikony se přes ni rozprostřou. */
.hd__reach {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}

.hd__social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 5px;
  border-top: var(--border-w) solid var(--line-band);
}

.hd__social a {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--on-band-mute);
  transition: color var(--t-hover) var(--e-soft),
              transform var(--t-hover) var(--e-soft);
}

.hd__social a:hover {
  color: var(--accent-band);
  transform: scale(1.12);
}

.hd__social svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* Jméno v hlavičce není podpis, ale značka: nadpisový řez, verzálky
   a prostrkání. Začíná přesně na obsahové šířce stránky (--wrap), takže
   stojí v jedné svislici s nadpisy sekcí pod ním. */
.hd__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: var(--display-weight);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--on-band);
  white-space: nowrap;
}

/* Zázemí značky patří na pravý kraj hlavičky, ne k vlastnímu jménu.
   Vlasová linka před logem odděluje cizí značku od kontaktů.
   Rozměry jsou v pixelech oběma směry, z `width: auto` si Chrome
   ve flexu občas odvodí nulovou šířku a logo zmizí. */
.hd__remax {
  flex: none;
  display: flex;
  align-items: center;
  padding-inline-start: 18px;
  border-inline-start: var(--border-w) solid var(--line-band-2);
}

.hd__remax img {
  display: block;
  flex: none;
  width: 68px;
  height: 30px;
}

/* --- 5.2 Navigace --------------------------------------------------------- */

.hd__nav {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: auto;
}

.hd__link {
  position: relative;
  padding-block: 6px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-band);
  white-space: nowrap;
}

.hd__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent-band);
  transition: width calc(.25s * var(--motion)) var(--e-soft);
}

.hd__link:hover { color: var(--on-band); }

.hd__link:hover::after,
.hd__link.is-active::after,
.hd__link[aria-current]::after { width: 100%; }

.hd__link.is-active,
.hd__link[aria-current] { color: var(--on-band); }

/* Tlačítko na konci navigace. Drží řez i verzálky ostatních položek,
   liší se jen výplní, takže z řádku nevyčnívá výškou, ale barvou. */
.hd__link--cta {
  padding: 8px 18px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--r-sm);
  transition: background-color var(--t-hover) var(--e-soft);
}

/* Podtržení patří odkazům, ne tlačítku. */
.hd__link--cta::after { content: none; }

.hd__link--cta:hover,
.hd__link--cta.is-active,
.hd__link--cta[aria-current] {
  color: var(--on-accent);
  background: var(--accent-hover);
}

/* --- 5.3 Pravá strana ----------------------------------------------------- */

.hd__side {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: 36px;
}

.hd__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--on-band);
  white-space: nowrap;
}

.hd__tel svg { width: 16px; height: 16px; color: var(--accent-band); }

.hd__tel:hover { color: var(--accent-band); }

/* --- 5.4 Plovoucí burger (.burger) ---------------------------------------
   Není v hlavičce, je to samostatné tlačítko připnuté k oknu. Hlavička na
   mobilu odjede (oddíl 5.0b), tohle zůstane viset v pravém horním rohu nad
   obsahem, vždycky na stejném místě, ať je návštěvník kdekoli na stránce.

   Tlačítko se NEHÝBE. Otevřít i zavřít se dá přesně tam, kam návštěvník
   sáhl poprvé; palec nemusí za měnícím se terčem. Mění se jen kresba uvnitř
   (tři linky → křížek) a plocha pod ní: zavřený burger je tmavá dlaždice nad
   stránkou, otevřený je jen jemný kroužek na panelu, protože panel už mu
   podklad dodává sám. Jiné zavírací tlačítko menu nemá, tohle je obojí.

   V markupu proto stojí mimo <header>: hlavička má container-type, což z ní
   dělá vztažný rám i pro position:fixed, a tlačítko uvnitř by se s ní
   odscrollovalo. -------------------------------------------------------- */

.burger {
  display: none;      /* zapne se až na úzkém displeji, a jen když běží JS */
  place-items: center;
  align-content: center;
  gap: 5px;

  position: fixed;
  /* Svisle na střed mobilní hlavičky (60 px), aby při nule vypadal jako
     její součást. Vodorovně končí na pravé hraně obsahového sloupce.
     Odsazení shora je token, protože stejnou hodnotu si bere i horní řádek
     v panelu menu; jinak by popiska ujela z osy křížku. */
  top: var(--burger-top);
  right: var(--pad);
  z-index: 140;       /* nad panelem menu (130), leží na jeho ploše */

  width: 46px;
  height: 46px;
  cursor: pointer;
  color: var(--on-band);
  background-color: var(--band);
  border: var(--border-w) solid var(--line-band-2);
  border-radius: var(--r-sm);
  /* Vnitřní světlá linka nahoře: dlaždice tím dostane hranu a nevypadá
     jako plochý obdélník položený na fotku. */
  box-shadow: var(--shadow-sm),
              inset 0 var(--border-w) 0 color-mix(in oklab, var(--on-band) 12%, transparent);

  transition: border-color var(--t-hover) var(--e-soft),
              background-color calc(.22s * var(--motion)) var(--e-soft),
              box-shadow var(--t-hover) var(--e-soft),
              transform calc(.16s * var(--motion)) var(--e-soft);
}

.burger:hover {
  border-color: var(--accent-band);
  background-color: color-mix(in oklab, var(--band) 88%, var(--on-band));
}

.burger:active { transform: scale(.94); }

.burger span {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform calc(.32s * var(--motion)) var(--e-out),
              width     calc(.32s * var(--motion)) var(--e-out),
              opacity   calc(.14s * var(--motion)) var(--e-soft);
}

/* Kratší prostřední linka: znak tím dostane rytmus a nevypadá jako tři
   stejné čárky. Při otevření stejně mizí. */
.burger span:nth-child(2) { width: 12px; }

/* Otevřeno: tlačítko zůstává na místě, linky se překříží a dlaždice pod
   nimi změkne na kroužek, protože pod ním už leží panel menu. */
.burger[aria-expanded="true"] {
  background-color: color-mix(in oklab, var(--on-band) 10%, transparent);
  border-color: transparent;
  box-shadow: none;
  /* Barva se mění se zpožděním, aby se dlaždice rozplynula až ve chvíli,
     kdy pod ni dojede panel, ne dřív nad holou stránkou. */
  transition-delay: 0s, calc(.14s * var(--motion)), 0s, 0s;
}

.burger[aria-expanded="true"]:hover {
  background-color: color-mix(in oklab, var(--on-band) 18%, transparent);
  border-color: transparent;
}

.burger[aria-expanded="true"] span:nth-child(1) { width: 20px; transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.burger[aria-expanded="true"] span:nth-child(3) { width: 20px; transform: translateY(-7px) rotate(-45deg); }

/* Burger se objeví tam, kde se navigace složí, dřív to řídil @container
   hlavičky, jenže tlačítko už v ní nestojí, takže se ptáme okna. */
@media (max-width: 1080px) {
  .js .burger { display: grid; }
}

/* --- 5.5 Zlomy hlavičky ---------------------------------------------------
   Šest položek verzálkami se do řádku vejde zhruba od 1080 px. Rozestupy
   se ale musí utahovat dřív, plné mezery se vejdou až nad 1500 px.

   Měří se šířka hlavičky (@container), ne okna. Hlavička je totiž užší než
   okno pokaždé, když Design studio odsune web vedle panelu; na media query
   by se to nepoznalo a navigace by se překryla s telefonem. */

@container hlavicka (max-width: 1500px) {
  .hd__nav  { gap: 26px; }
  .hd__side { margin-left: 26px; gap: 14px; }
}

/* Telefon v hlavičce je první, co ustoupí. Zůstává v hero, v mobilní liště
   i v patičce, takže se návštěvníkovi neztratí. */
@container hlavicka (max-width: 1200px) {
  .hd__tel { display: none; }
}

@container hlavicka (max-width: 1080px) {
  .js .hd__nav { display: none; }
  .hd__side { margin-left: auto; }
}

/* Nejtěsnější pásmo: navigace je ještě v řádku, ale osm položek s tlačítkem
   a telefonem už logo na pravém kraji vytlačuje z okna. Pod 1080 px se
   navigace složí do burgeru a místo se vrátí, takže tam logo zůstává. */
@container hlavicka (min-width: 1081px) and (max-width: 1439px) {
  .hd__remax { display: none; }
}

/* Na telefonu z hlavičky mizí ikony sítí, a s nimi celý sloupeček .hd__reach:
   telefon z něj vypadl už na 1200 px, takže by tu zbyla prázdná položka,
   která ve flexu jen drží mezeru navíc. Neztrácí se nic, ikony jsou v sekci
   kontaktu, v pásu „Sledujte mě“ i v patičce.

   Logo RE/MAX naopak zůstává, hlavička je na mobilu jméno vlevo a logo
   vpravo. Místo pro plovoucí burger si vedle nich drží .hd__in svým
   padding-inline-end (oddíl 5.0b), takže se logo pod tlačítko nedostane. */
@container hlavicka (max-width: 640px) {
  .hd__reach { display: none; }

  /* Vlasová linka oddělovala logo od kontaktů, bez nich nemá co dělit. */
  .hd__remax {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

@container hlavicka (max-width: 900px) {
  .hd__name { font-size: 1.1rem; letter-spacing: .12em; }
}

/* Bez telefonu nemá linka nad ikonami co oddělovat a ikony si vystačí
   s vlastní šířkou. */
@container hlavicka (max-width: 1200px) {
  .hd__social {
    justify-content: flex-end;
    gap: 10px;
    padding-top: 0;
    border-top: 0;
  }
}

/* Mezipásmo nad 640 px: ikony se ještě vejdou, ale musí se smrsknout,
   aby vedle nich zbylo místo na logo RE/MAX i burger. */
@container hlavicka (min-width: 641px) and (max-width: 760px) {
  .hd__social { gap: 8px; }
  .hd__social a { width: 16px; height: 16px; }
  .hd__social svg { width: 14px; height: 14px; }
}

@container hlavicka (max-width: 380px) {
  .hd__name { font-size: .95rem; letter-spacing: .08em; }
}

/* Bez JS se menu nedá otevřít, navigace proto zůstane vidět a zalomí se. */
@container hlavicka (max-width: 1080px) {
  html:not(.js) .hd__in  { flex-wrap: wrap; padding-block: 12px; }
  html:not(.js) .hd__nav { order: 3; width: 100%; flex-wrap: wrap; gap: 8px 20px; margin-left: 0; }
}


/* =========================================================================
   6. MOBILNÍ MENU (.menu) A ZASTÍNĚNÍ STRÁNKY (.scrim)
   Panel u pravého kraje přes --menu-w šířky okna. Zavřený stojí za hranou
   okna, otevřený se vysune dovnitř; zbytek stránky pod ním ztmaví .scrim
   (oddíl 6.1).

   Stavba panelu shora dolů:
     .menu__top     značka (monogram, jméno, role), drží místo křížku
     .menu__nav     položky, přilétají po sobě
     .menu__foot    telefon, e-mail a sociální sítě u spodní hrany

   Otevírání a zavírání není totéž. Otevřít je gesto, na které se návštěvník
   dívá: panel dojede a položky se za ním rozsvítí jedna po druhé. Zavřít je
   jen odchod, tam by odpočítávání pozpátku zdržovalo, takže všechno zhasne
   naráz. Proto se zpoždění (--d) nastavuje výhradně v .is-on.

   Viditelnost řídí app.js třídou .is-on, ne atributem `hidden`; přes
   display:none by se neměl přechod kde odehrát. `hidden` v markupu zůstává
   jako pojistka pro stránku bez JS (viditelné menu by tam překrylo obsah)
   a app.js ho při startu jednou sundá; stejný postup má tlačítko „nahoru“.

   Zavřený panel schovává `visibility`, takže z něj nejde tabulátorem ani
   odečítačem obrazovky nic vytáhnout, atribut `hidden` proto nechybí.
   ========================================================================= */

.menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--menu-w);
  z-index: 130;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Barva jde přes background-image, viz base.css oddíl 3.1, pojistka
     k vypínači vzorkování níž.

     Vrstvy odshora: záře v pravém horním rohu (pod křížkem, aby roh panelu
     nebyl mrtvá plocha), pak svislý přechod z o stupeň světlejší černé do
     plné. Panel tím dostane hloubku a odliší se od pásů na stránce. */
  background-color: var(--chrome);
  background-image:
    radial-gradient(115% 55% at 100% 0%,
                    color-mix(in oklab, var(--accent-band) 20%, transparent),
                    transparent 68%),
    linear-gradient(180deg,
                    color-mix(in oklab, var(--band) 90%, var(--on-band)) 0%,
                    var(--band) 46%);
  color: var(--on-band);

  /* Levý roh se zaoblí, panel tím přestane být useknutý sloupec a začne
     vypadat jako list položený přes stránku. Poloměr jde z tvarosloví,
     takže hranaté varianty (ostry, brutal) zůstanou hranaté. */
  border-left: var(--border-w) solid var(--line-band-2);
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: var(--shadow-lg);

  /* Horní hranu okna hlídá .edge-guard (base.css, oddíl 3.2), panel se k ní
     tedy nedostane. Backdrop-filter tu kvůli tomu žádný není, viz poznámka
     v témž oddílu, na iOSu po něm zlobilo vykreslení okna. */

  visibility: hidden;
  transform: translateX(100%);
  transition: transform calc(.34s * var(--motion)) var(--e-panel),
              visibility calc(.34s * var(--motion)) step-end;
}

.menu.is-on {
  visibility: visible;
  transform: none;
  transition: transform calc(.42s * var(--motion)) var(--e-out),
              visibility 0s;
}

/* Zrnitost jako na tmavých pásech, ať panel patří ke zbytku webu.
   Nesmí chytat kliknutí ani přejet přes zaoblený roh. */
.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain);
  background-image: var(--grain-img);
  background-size: 160px 160px;
  border-radius: inherit;
  mix-blend-mode: overlay;
}

.menu__in {
  position: relative;
  z-index: 1;                 /* nad zrnitostí */
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;             /* na vysokém displeji drží patičku dole */
  width: 100%;
  max-width: calc(var(--wrap) + var(--pad) * 2);
  margin-inline: auto;
  padding: var(--burger-top) var(--pad) calc(32px + env(safe-area-inset-bottom, 0px));
}

/* Řádek nahoře. Plovoucí křížek stojí mimo panel (je to #burger), tenhle
   řádek mu drží místo a zároveň nese značku: monogram, jméno, role, stejná
   trojice jako v patičce. Hlavička na mobilu odscrolluje pryč, tady je
   jméno znovu po ruce. Výška 46 px = výška křížku, značka s ním tím sedí
   v jedné ose. */
.menu__top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding-inline-end: 56px;   /* místo pro křížek */
  margin-bottom: 20px;
}

/* Monogram v rámečku, převzatý z patičky (.ft__mono), jen o dva pixely
   menší, aby se vešel do výšky křížku. */
.menu__mono {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: var(--display-weight);
  letter-spacing: .02em;
  color: var(--accent-band);
  border: var(--border-w) solid var(--line-band-2);
  border-radius: var(--r-xs);
}

.menu__brand {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.menu__name {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--on-band);
}

.menu__role {
  margin-top: 2px;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--on-band-mute);
}

.menu__nav {
  display: flex;
  flex-direction: column;
}

.menu__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: var(--display-weight);
  /* Nadpisové písmo si nesmí brát řádkování běžného textu (1.7), řádky by
     se roztáhly a seznam by přerostl obrazovku. Řádek pak měří 57 px,
     pořád dost velký terč pro palec. */
  line-height: 1.15;
  letter-spacing: calc(var(--display-track) * .5);
  color: var(--on-band);

  /* Položky nepřiletí naráz, ale po sobě shora dolů (--d níže). Zpoždění
     je jen na příletu; barva při najetí se musí měnit hned. */
  opacity: 0;
  transform: translateX(14px);
  --d: 0s;
  transition: opacity   calc(.34s * var(--motion)) var(--e-out) var(--d),
              transform calc(.44s * var(--motion)) var(--e-out) var(--d),
              color     var(--t-hover) var(--e-soft) 0s;
}

.menu.is-on .menu__link {
  opacity: 1;
  transform: none;
}

/* Zavírání je jedno gesto: panel odjede a položky zhasnou najednou,
   žádné odpočítávání pozpátku. Proto se --d nastavuje jen v .is-on. */
.menu.is-on .menu__link:nth-child(1) { --d: calc(.08s * var(--motion)); }
.menu.is-on .menu__link:nth-child(2) { --d: calc(.13s * var(--motion)); }
.menu.is-on .menu__link:nth-child(3) { --d: calc(.18s * var(--motion)); }
.menu.is-on .menu__link:nth-child(4) { --d: calc(.23s * var(--motion)); }
.menu.is-on .menu__link:nth-child(5) { --d: calc(.28s * var(--motion)); }
.menu.is-on .menu__link:nth-child(6) { --d: calc(.33s * var(--motion)); }
.menu.is-on .menu__link:nth-child(7) { --d: calc(.38s * var(--motion)); }
.menu.is-on .menu__link:nth-child(8) { --d: calc(.43s * var(--motion)); }

/* Dělicí linka mezi položkami. Není to border, ale pruh, který doprava
   vyhasíná; sloupec pak nevypadá jako tabulka a linky nekončí useknuté
   u kraje panelu. Stejný motiv má vlasová linka nad kontakty. */
.menu__link::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--border-w);
  background: linear-gradient(90deg,
              var(--line-band-2),
              color-mix(in oklab, var(--line-band) 25%, transparent) 82%);
}

/* Šipka napovídá, že položka někam vede. Je to maska, takže bere barvu
   textu a při najetí se posune, jinak by menu byl jen sloupec slov. */
.menu__link::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-inline-start: auto;
  background: currentColor;
  opacity: .35;
  mask: var(--ico-arrow) center / contain no-repeat;
  -webkit-mask: var(--ico-arrow) center / contain no-repeat;
  transition: transform var(--t-hover) var(--e-soft),
              opacity   var(--t-hover) var(--e-soft);
}

.menu__link:hover,
.menu__link.is-active { color: var(--accent-band); }

.menu__link:hover::after,
.menu__link.is-active::after { opacity: 1; transform: translateX(4px); }

/* Aktivní položka dostane ještě jemný nádech barvy zleva, aby bylo poznat,
   kde na stránce návštěvník právě je, i kdyby si barvy textu nevšiml. */
.menu__link.is-active {
  background-image: linear-gradient(90deg,
      color-mix(in oklab, var(--accent-band) 14%, transparent),
      transparent 62%);
}

/* Tlačítko uvnitř seznamu, stejné jako v hlavičce, jen přes celou šířku. */
.menu__link--cta {
  justify-content: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 17px 24px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}

/* Tlačítko dělicí linku nemá, je to samostatný blok pod seznamem. */
.menu__link--cta::before { content: none; }

.menu__link--cta::after {
  margin-inline-start: 0;
  width: 17px;
  height: 17px;
  opacity: .8;
}

.menu__link--cta:hover,
.menu__link--cta.is-active {
  color: var(--on-accent);
  background: var(--accent-hover);
  box-shadow: none;
}

.menu__link--cta:hover::after,
.menu__link--cta.is-active::after { opacity: 1; }

/* Patička panelu: kontakty. Drží se u spodní hrany, aby seznam nahoře
   a spojení dole tvořily dva jasné bloky, ne jeden dlouhý sloupec. */
.menu__foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 26px;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity   calc(.3s * var(--motion)) var(--e-out),
              transform calc(.4s * var(--motion)) var(--e-out);
}

.menu.is-on .menu__foot {
  opacity: 1;
  transform: none;
  transition-delay: calc(.34s * var(--motion));
}

/* Vlasová linka nad kontakty, natažená přes celou šířku panelu (proto
   záporné odsazení o --pad na obě strany). */
.menu__foot::before {
  content: "";
  height: var(--border-w);
  margin: 0 calc(var(--pad) * -1) 8px;
  background: linear-gradient(90deg,
              var(--line-band-2), color-mix(in oklab, var(--line-band) 30%, transparent));
}

.menu__mail,
.menu__tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: var(--on-band);
  transition: color var(--t-hover) var(--e-soft);
}

.menu__tel { font-weight: 600; font-size: 1.08rem; }

.menu__mail { overflow-wrap: anywhere; color: var(--on-band-mute); }

/* Ikony v kroužku: dvě holé ikonky pod sebou vypadají jako odrážky,
   v kroužku z nich je dvojice tlačítek. */
.menu__mail svg,
.menu__tel svg {
  flex: none;
  box-sizing: content-box;
  width: 17px;
  height: 17px;
  padding: 9px;
  color: var(--accent-band);
  border: var(--border-w) solid var(--line-band-2);
  border-radius: var(--r-pill);
  transition: border-color var(--t-hover) var(--e-soft),
              background-color var(--t-hover) var(--e-soft);
}

.menu__mail:hover,
.menu__tel:hover { color: var(--accent-band); }

.menu__mail:hover svg,
.menu__tel:hover svg {
  border-color: var(--accent-band);
  background-color: color-mix(in oklab, var(--accent-band) 14%, transparent);
}

/* Sociální sítě na jednom řádku pod kontakty. Adresy plní content.js,
   prázdná adresa = odkaz se schová (viz [data-href] v app.js). */
.menu__social {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.menu__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--on-band-mute);
  border: var(--border-w) solid var(--line-band);
  border-radius: var(--r-pill);
  transition: color var(--t-hover) var(--e-soft),
              border-color var(--t-hover) var(--e-soft);
}

.menu__social a:hover {
  color: var(--accent-band);
  border-color: var(--accent-band);
}

/* Na nízkém displeji (starší telefony, telefon položený na šířku) se panel
   stáhne, aby se do něj vešel celý seznam i kontakty. Rolovat se v menu dá,
   ale posouvat sedmi položkami je práce navíc za nic. */
@media (max-height: 720px) {
  /* min-height se nesnižuje, drží značku v ose křížku (viz .menu__top). */
  .menu__top  { margin-bottom: 6px; }
  .menu__link { padding: 11px 0; font-size: 1.24rem; }
  .menu__link--cta { margin-top: 16px; padding: 14px 24px; }
  .menu__foot { gap: 10px; padding-top: 18px; }
  .menu__social { display: none; }
}


/* --- 6.1 Zastínění stránky pod panelem (.scrim) ---------------------------
   Panel překrývá jen část obrazovky, zbytek stránky pod ním by jinak dál
   vypadal jako místo, kam se dá sáhnout. Scrim ho ztmaví a rozostří, takže
   je vidět, že menu je teď to jediné aktivní. Klepnutí do něj menu zavře;
   nepotřebuje k tomu vlastní obsluhu, app.js zavírá při každém kliknutí
   mimo #menu a #burger.

   Zapíná se sourozeneckým selektorem od .menu.is-on, proto musí v markupu
   stát ZA panelem. Žádný JS to neřídí, a bez JS se menu neotevře, takže se
   scrim nikdy neobjeví sám.

   Barva jde znovu přes background-image (base.css 3.1): prvek je fixní,
   přes celou šířku a dotýká se obou hran okna, tedy přesně to, co si
   Safari na iOSu vzorkuje pro barvu svých lišt.
   ------------------------------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 120;               /* pod panelem (130), nad stránkou */
  background-color: transparent;
  background-image: linear-gradient(
      color-mix(in oklab, var(--band) 55%, transparent),
      color-mix(in oklab, var(--band) 68%, transparent));
  /* Rozostření je tu kvůli vzhledu, ale zároveň dělá to, co u .menu výše
     `opacity(1)`: vypíná vzorkování barvy lišt (base.css, oddíl 3.2).
     Scrim je fixní přes celé okno, bez toho by si z něj Safari na iOSu
     barvu vzalo. Proto v background-color transparent a barva až
     v background-image. */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);

  opacity: 0;
  visibility: hidden;
  transition: opacity    calc(.3s * var(--motion)) var(--e-soft),
              visibility calc(.3s * var(--motion)) step-end;
}

.menu.is-on ~ .scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity calc(.3s * var(--motion)) var(--e-soft),
              visibility 0s;
}

/* Když je menu otevřené, stránka pod ním se nesmí posouvat. Třídu dává
   app.js (a detail.js) na <html> i na <body>.

   Na <html> to není z rozmaru: `overflow` z <body> se na okno přenese jen
   tehdy, když má kořen ve VŠECH osách `visible`. Náš kořen má
   `overflow-x: clip` (base.css, oddíl 3, pojistka proti vodorovnému
   posunu), takže se přenos nekoná a `body { overflow: hidden }` samo o sobě
   nedělá vůbec nic: <body> má výšku podle obsahu, není tedy co ořezávat.
   Stránka se pod otevřeným menu posouvala dál a po zavření se návštěvník
   našel jinde, než kde menu otvíral.

   Zamyká se proto kořen, a jen ve svislé ose, aby `overflow-x: clip`
   zůstal. Pravidlo pro <body> je tu navíc jako pojistka pro prohlížeč,
   který by řešil přenos jinak. */
html.is-locked { overflow-y: hidden; }
body.is-locked { overflow: hidden; }


/* =========================================================================
   7. SVISLÁ NAVIGACE (.rail)
   Výchozí stav: skrytá. Zapíná ji variants.css u data-layout="panel".
   Tady je jen její vzhled, aby ji varianta zapnula jediným `display`.
   ========================================================================= */

.rail {
  display: none;      /* bez !important, varianta to musí umět přebít */

  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  width: 240px;

  flex-direction: column;
  gap: 28px;
  padding: 32px 24px;
  overflow-y: auto;

  /* Barva jde přes background-image, viz base.css oddíl 3.1. Pás sice stojí
     u levé hrany, ale zabírá celou výšku okna, takže se dotýká i horní
     a spodní hrany. */
  background-color: var(--chrome);
  background-image: linear-gradient(var(--band), var(--band));
  color: var(--on-band);
  border-right: var(--border-w) solid var(--line-band);
}

/* Značka stojí ve sloupci: monogram nahoře, pod ním jméno a role.
   Ve 240 px širokém pásu by se vedle sebe nevešly a text by se roztrhal. */
.rail__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: var(--border-w) solid var(--line-band);
}

.rail__mono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: var(--display-weight);
  letter-spacing: .02em;
  color: var(--accent-band);
  border: var(--border-w) solid var(--line-band-2);
  border-radius: var(--r-xs);
  transition: border-color var(--t-hover) var(--e-soft);
}

.rail__brand:hover .rail__mono { border-color: var(--accent-band); }

.rail__name {
  display: block;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--on-band);
}

.rail__role {
  display: block;
  margin-top: 4px;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--on-band-mute);
}

.rail__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail__link {
  position: relative;
  padding: 10px 0 10px 16px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-band);
}

.rail__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--accent-band);
  transform: translateY(-50%);
  transition: height calc(.25s * var(--motion)) var(--e-soft);
}

.rail__link:hover,
.rail__link.is-active { color: var(--on-band); }

.rail__link:hover::before,
.rail__link.is-active::before { height: 60%; }

/* Hlavní akce dole v pásu. Vypadá jako tlačítko, protože jím je. */
.rail__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  min-height: 46px;
  padding: 12px 16px;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--r-sm);
  transition: background-color var(--t-hover) var(--e-soft);
}

.rail__cta:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}


/* =========================================================================
   8. PATIČKA (.ft)
   ========================================================================= */

.ft {
  position: relative;
  background: var(--footer-bg);
  color: var(--on-band);
}

.ft__top,
.ft__bot {
  width: 100%;
  max-width: calc(var(--wrap) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.ft__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 64px;
  padding-top: 72px;
  padding-bottom: 56px;
}

/* --- 8.1 Značka v patičce -------------------------------------------------
   Stejná stavba jako v hlavičce: monogram v rámečku, vedle něj jméno
   a nad/pod ním role verzálkami. */

.ft__brand { max-width: 42ch; }

.ft__brand p,
.ft__brand .note { color: var(--on-band-mute); }

.ft__logo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}

.ft__mono {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: var(--display-weight);
  letter-spacing: .02em;
  color: var(--accent-band);
  border: var(--border-w) solid var(--line-band-2);
  border-radius: var(--r-xs);
  transition: border-color var(--t-hover) var(--e-soft);
}

.ft__logo:hover .ft__mono { border-color: var(--accent-band); }

.ft__name {
  display: block;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--on-band);
}

.ft__role {
  display: block;
  margin-top: 3px;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--on-band-mute);
}

.ft__tagline {
  margin-top: 18px;
  font-size: .9rem;
  line-height: 1.65;
}

/* --- 8.2 Sloupce s odkazy ------------------------------------------------- */

.ft__nav,
.ft__contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ft__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ft__nav a,
.ft__contact a {
  font-size: .9rem;
  color: var(--on-band-mute);
}

.ft__nav a:hover,
.ft__contact a:hover { color: var(--on-band); }

.ft__title {
  margin-bottom: 4px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-band);
}

.ft__bot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding-block: 24px;
  border-top: var(--border-w) solid var(--line-band);
}

.ft__copy {
  margin: 0;
  max-width: none;
  font-size: .78rem;
  color: var(--on-band-mute);
  opacity: .6;
}

/* Levý sloupec spodní lišty: copyright, identifikace podnikatele (IČO
   a sídlo) a věta o mimosoudním řešení sporů. Tři samostatné řádky, ne
   jedna dlouhá věta: každý říká něco jiného a na mobilu by se slily
   v jeden šedý odstavec, ve kterém by se IČO ztratilo. */
.ft__legal {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* Zákonné řádky jsou stejně tlumené jako copyright — nikdo si je nepřišel
   přečíst, ale musí být k nalezení. Šířka je omezená na míru odstavce,
   aby se přes celou patičku netáhl jeden řádek od kraje ke kraji. */
.ft__law {
  margin: 0;
  max-width: 62ch;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--on-band-mute);
  opacity: .6;
}

/* Odkazy vpravo dole. Vedle zásad sem js/cookies.js dopisuje „Nastavení
   cookies“, takže obal musí vypadat dobře s jedním i se dvěma odkazy. */
.ft__bot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

/* .ft__privacy stačí obecné pravidlo .ft__bot a, vlastní nepotřebuje. */

.ft__bot a {
  font-size: .78rem;
  color: var(--on-band-mute);
}

.ft__bot a:hover { color: var(--on-band); }

@media (max-width: 1024px) {
  .ft__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 40px;
  }
  .ft__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .ft__top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}


/* =========================================================================
   9. MOBILNÍ LIŠTA (.mobar)
   Objeví se, až uživatel odscrolluje hero; třídu .mobar--on dává app.js.
   Jen na malém displeji.
   ========================================================================= */

.mobar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  /* Barva jde přes background-image, viz base.css oddíl 3.1. Lišta sedí na
     spodní hraně okna, tedy přesně tam, odkud si iOS Safari 26 bere barvu
     spodního pruhu s adresou. */
  background-color: var(--chrome);
  background-image: linear-gradient(var(--band), var(--band));

  padding-bottom: env(safe-area-inset-bottom, 0px);

  /* Vzorkování barvy lišt tady řeší hlídka u spodní hrany (base.css,
     oddíl 3.2). Kdyby přestala platit, přečte si Safari background-color
     výše, což je --chrome, takže ani tak nevyjde černá. */

  /* Lišta nevjíždí jen posunem, zároveň se prolne, takže spodní hrana
     obrazovky nezačne „blikat“ černým pruhem. `visibility` ji ve schovaném
     stavu vyřadí i z tabulátoru; přepne se až po dojetí posunu. */
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform calc(.55s * var(--motion)) var(--e-out),
              opacity calc(.3s * var(--motion)) var(--e-soft),
              visibility 0s linear calc(.55s * var(--motion));
}

/* Vlasová linka nahoře je pseudoprvek, ne rámeček: u prvku na spodní hraně
   okna sahá vzorkování iOS Safari (base.css, oddíl 3.1) i po barvě rámečku.
   Absolutní pozice ji vyřadí z mřížky a zároveň ji nakreslí až nad tlačítky,
   jinak by ji plná varianta (--fill) na své polovině překryla. */
.mobar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--border-w);
  background: var(--line-band);
  pointer-events: none;
}

.mobar--on {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s, 0s;
}

.mobar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--on-band);

  /* Obsah dojíždí o kousek za lištou a každé tlačítko o chlup později,
     pohyb tím dostane hloubku místo jednoho tuhého bloku. */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity calc(.34s * var(--motion)) var(--e-soft),
              transform calc(.44s * var(--motion)) var(--e-out),
              background-color var(--t-hover) var(--e-soft);
}

.mobar--on .mobar__btn {
  opacity: 1;
  transform: none;
}

/* Zpoždění patří jen příchodu (opacity, transform), barva při stisku
   musí reagovat okamžitě, proto má ve výčtu nulu. */
.mobar--on .mobar__btn:nth-child(1) {
  transition-delay: calc(.1s * var(--motion)), calc(.1s * var(--motion)), 0s;
}

.mobar--on .mobar__btn:nth-child(2) {
  transition-delay: calc(.16s * var(--motion)), calc(.16s * var(--motion)), 0s;
}

.mobar__btn svg { width: 17px; height: 17px; }

/* Plná varianta: jedno z tlačítek v liště nese akcent, aby bylo poznat,
   která akce je hlavní. Kterému patří, určuje markup třídou --fill. */
.mobar__btn--fill {
  background: var(--accent);
  color: var(--on-accent);
}

.mobar__btn--fill:hover { background: var(--accent-hover); color: var(--on-accent); }

.mobar__btn + .mobar__btn:not(.mobar__btn--fill) {
  border-left: var(--border-w) solid var(--line-band);
}

@media (max-width: 768px) {
  .mobar { display: grid; }
  /* Aby lišta nepřekryla poslední řádek patičky. */
  .ft__bot { padding-bottom: 84px; }
}


/* --- 9.1 Zpět nahoru -----------------------------------------------------
   Kolečko v pravém dolním rohu. Ukáže se, až návštěvník sjede o víc než
   obrazovku (řeší app.js atributem hidden). Na mobilu se posadí nad
   plovoucí lištu, aby ji nepřekrývalo.
   ------------------------------------------------------------------------- */

.totop {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 96;

  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;

  cursor: pointer;
  color: var(--on-accent);
  background: var(--accent);
  border: var(--border-w) solid transparent;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);

  /* Kolečko nevyskočí, ale vyroste zespodu: prolne se, popojede nahoru
     a doskočí do své velikosti. Delší křivka --e-out dává pohybu doraz,
     kratší prolnutí zajistí, že se to nezdá pomalé.
     Viditelnost se vypíná až po dojetí, aby přechod stihl doběhnout
     a zároveň drží tlačítko mimo tabulátor, dokud není vidět. Proto se
     `hidden` po startu JS sundá (app.js, detail.js): display:none nemá
     co animovat. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.85);
  transition: opacity calc(.3s * var(--motion)) var(--e-soft),
              transform calc(.5s * var(--motion)) var(--e-out),
              background-color var(--t-hover) var(--e-soft),
              visibility 0s linear calc(.5s * var(--motion));
}

.totop.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s, 0s;
}

.totop:hover { background: var(--accent-hover); }

/* Šipka se při najetí nadzvedne a při stisku se celé kolečko lehce
   promáčkne, potvrzení akce ještě před tím, než stránka vyjede.
   Promáčknutí musí být okamžité (půlsekundový příjezd je na odezvu prstu
   dlouhý), zpátky se ale kolečko vrátí zase pomalou křivkou z .totop. */
.totop.is-on:active {
  transform: scale(.94);
  transition-duration: var(--t-hover), calc(.1s * var(--motion)),
                       var(--t-hover), 0s;
}

.totop svg {
  width: 20px;
  height: 20px;
  transition: transform var(--t-hover) var(--e-out);
}

.totop:hover svg { transform: translateY(-2px); }

@media (max-width: 768px) {
  /* 56 px lišta + bezpečná zóna + mezera */
  .totop { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* Dokud stojí u spodní hrany lišta se souhlasem, tlačítko „nahoru“ jí
   uhne. Výšku lišty do --cbar-h měří js/cookies.js: závisí na tom, na
   kolik řádků se text zalomí, a spočítat se dopředu nedá. */
.is-cbar .totop { bottom: calc(clamp(16px, 3vw, 28px) + var(--cbar-h, 0px) + 12px); }

@media (max-width: 768px) {
  .is-cbar .totop {
    bottom: calc(68px + var(--cbar-h, 0px) + 12px + env(safe-area-inset-bottom, 0px));
  }
}


/* --- 9.2 Lišta se souhlasem (.cbar) --------------------------------------
   Ptá se na dvě věci najednou: jestli se smí měřit návštěvnost přes Google
   Analytics a jestli se smí načíst mapa z Google Maps. Staví ji
   js/cookies.js, na každé stránce, dokud není rozhodnuto.

   Nezakrývá stránku a nic nepředvybírá. Je to karta u spodní hrany, ne
   modální okno přes celý web: dokud se nerozhodne, neběží ani měření, ani
   mapa, takže není nic, co by se muselo vyřešit dřív, než si návštěvník
   web přečte.

   Obě tlačítka jsou stejně velká. „Odmítnout“ je jen odlehčené (btn--ghost)
   jako všude jinde na webu, kde stojí vedle sebe hlavní a vedlejší akce;
   schované ani menší být nesmí, to by nebyla platná volba.
   ------------------------------------------------------------------------- */

.cbar {
  position: fixed;
  left: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);

  /* Nad plovoucí lištou (95) i tlačítkem nahoru (96), pod mobilním menu
     (130): otevřené menu překrývá celou stránku a lišta pod ním nemá co
     vykukovat. */
  z-index: 110;

  /* Karta drží šířku textu. Přes celou obrazovku by na monitoru byla dvě
     tlačítka na jednom konci a věta na druhém. */
  max-width: 560px;

  padding: clamp(16px, 2.4vw, 22px);
  color: var(--text);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);

  /* Vyjede zespodu a prolne se. `visibility` ji ve schovaném stavu vyřadí
     z tabulátoru; přepne se až po dojetí, stejně jako u .mobar. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity calc(.3s * var(--motion)) var(--e-soft),
              transform calc(.45s * var(--motion)) var(--e-out),
              visibility 0s linear calc(.45s * var(--motion));
}

.cbar.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}

.cbar__in {
  display: grid;
  gap: 16px;
}

.cbar__text {
  margin: 0;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--text-mute);
}

.cbar__text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tlačítka doprava, ale zalomí se doleva: na 360 px se vedle sebe nevejdou
   a spadnou pod sebe přes celou šířku (o to se stará pojistka v oddílu 10). */
.cbar__akce {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* Obě tlačítka stejně široká, ať ani na první pohled jedno nepřebíjí
   druhé. Základní tvar drží .btn v base.css, oddílu 6. */
.cbar__btn {
  flex: 1 1 auto;
  min-width: 132px;
  justify-content: center;
}

@media (min-width: 560px) {
  .cbar__btn { flex: 0 0 auto; }
}

/* Na mobilu sedí nad plovoucí lištou, aby ji nepřekryla. */
@media (max-width: 768px) {
  .cbar { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* Tisk lištu neřeší: na papíře se nic nenačítá. */
@media print {
  .cbar { display: none; }
}


/* =========================================================================
   10. POJISTKY PRO ÚZKÉ DISPLEJE
   Na 360 px nesmí vzniknout vodorovný posun v žádném rozvržení.
   ========================================================================= */

/* Dlouhé slovo (e-mail, adresa) nesmí roztlačit sloupec. */
p, li, h1, h2, h3, h4, .lead, .note, blockquote {
  overflow-wrap: break-word;
}

/* Mřížkové a flex položky se musí umět zúžit pod svůj obsah. */
.section > .wrap > *,
.hd__in > *,
.ft__top > * { min-width: 0; }

@media (max-width: 480px) {
  .btn,
  .btn--lg { width: 100%; }

  /* Terciární odkaz zůstává odkazem, ne tlačítkem. */
  .btn--link,
  .link-more { width: auto; }
}


/* =========================================================================
   11. TISK
   Barvy překlápí na papírové už base.css (přepíše rovnou tokeny), tady
   zbývá jen posbírat rozvržení.
   ========================================================================= */

@media print {

  .section { padding-block: 18px; }

  .section--band::after,
  .section--band2::after { display: none; }

  .hd__nav,
  .hd__side { display: none; }

  .hd__in { min-height: 0; padding-block: 12px; }

  .ft { border-top: var(--border-w) solid var(--line-strong); }

  .ft__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-block: 16px;
  }

  .ft__bot { padding-bottom: 0; }
}