/* ==========================================================================
   1. Fonty, základní proměnné a reset
   ========================================================================== */

/* Typografie je teď postavená na Google Fonts v headu a na fallback zásobnících
   níže v proměnných, takže lokální složka s fonty už není potřeba. */

:root {
  --viewport-width: 1440px;
  --page-gutter: clamp(100px, 6vw, 140px);
  --container-width: 1240px;
  --container-narrow: 904px;
  --wide-canvas-width: 1780px;
  --hero-media-width: 1960px;
  --space-sm: 80px;
  --space-md: 120px;
  --space-lg: 150px;
  --space-xl: 255px;
  /* Záložní mezera nad patičkou (.spacer--footer). Běžně dělá místo nad
     patičkou spacer pod posledním blokem podle jeho space_below, takže se dá
     nastavit i na nulu; tahle proměnná platí jen tam, kde poslední blok mezeru
     neurčuje – stránky bez bloků, statické šablony a typy ze
     SI_NO_SPACER_AROUND (viz includes/block_spacing.php). */
  --footer-space: clamp(48px, 5vw, 80px);
  --space-overlap-hero: -118px;
  --color-bg: #0f1d17;
  --color-bg-dark: #0f1d17;
  /* Pozadí celé spodní části stránky – patička, pruh s logy partnerů a spodní
     lišta. Dřív byla v každém z těch tří pravidel zvlášť poloprůhledná
     rgba(14, 26, 21, 0.4); teď je to jedna krycí barva na jednom místě, aby ty
     tři pruhy nešlo rozladit. Shodou okolností je to stejný odstín jako
     --color-surface-card, ale významem je to jiná věc – nespojuj je. */
  --color-footer-bg: #16261f;
  --color-green: #0b291e;
  --color-green-muted: #205a45;
  --color-beige: #f5edd6;
  --color-accent: #ff9147;
  --color-accent-dark: #5b2400;
  --color-accent-positive: #58b031;
  --color-accent-negative: #aa1a1a;
  --color-line: rgba(32, 90, 69, 0.85);
  --color-line-strong: rgba(245, 237, 214, 0.18);
  --color-border-soft: rgba(245, 237, 214, 0.15);
  --color-border-subtle: rgba(245, 237, 214, 0.12);
  --color-border-emphasis: rgba(245, 237, 214, 0.3);
  --color-card: rgba(217, 217, 217, 0.15);
  --color-shadow: rgba(0, 0, 0, 0.25);
  --color-text-faint: rgba(245, 237, 214, 0.35);
  --color-text-soft: rgba(245, 237, 214, 0.72);
  --color-text-soft-strong: rgba(245, 237, 214, 0.82);
  --color-text-body: rgba(245, 237, 214, 0.88);
  --color-text-strong: rgba(245, 237, 214, 0.94);
  --color-text-high: rgba(245, 237, 214, 0.96);
  --color-surface-primary: #0a241a;
  --color-surface-secondary: #0b2928;
  --color-surface-tertiary: #24290b;
  --color-surface-emphasis: #144231;
  --color-surface-card: #16261f;
  --color-surface-cta: #063220;
  --color-surface-negative: #3b1810;
  --color-surface-highlight: #174535;
  --color-brand-green-soft: #2d7e64;
  --color-program-muted-primary: #1c7a68;
  --color-program-muted-secondary: #147989;
  --color-program-muted-tertiary: #718212;
  --color-button-light-bg: #f1e8cf;
  --color-button-light-text: #183329;
  /* ── Cookie lišta ──────────────────────────────────────────────────────
     Vlastní sada, protože lišta je samostatný panel NAD stránkou, ne její
     pruh – nesmí se hnout, když se přebarvuje web pod ní. Pozadí má shodou
     okolností stejnou hodnotu jako --color-surface-secondary, ale významem
     je to jiná věc – nespojuj je (stejně jako --color-footer-bg výš).
     Tlačítka lišty se na hover nepřevrací jako jinde na webu: plné jen
     ztmavne, obrysové se vyplní světlejší oranžovou. Tmavá varianta je
     schválně o dost níž než --color-accent, aby bylo najetí myší poznat
     na první pohled – dřív byla tak blízko, že se změna skoro ztratila. */
  --color-cookie-bg: #0b2928;
  --color-cookie-accent-dark: #c2611c;
  --color-cookie-accent-light: #ffb07d;
  --overlay-catalog-callout: linear-gradient(90deg, rgba(7, 22, 16, 0.76) 0%, rgba(7, 22, 16, 0.44) 34%, rgba(7, 22, 16, 0.28) 100%);
  /* Karta carouselu s textem na fotce: text sedí nahoře i dole, proto se
     ztmavuje z obou konců a střed fotky zůstává nejsvětlejší. */
  --overlay-photo-card: linear-gradient(180deg, rgba(7, 22, 16, 0.74) 0%, rgba(7, 22, 16, 0.34) 42%, rgba(7, 22, 16, 0.78) 100%);
  /* Adobe Fonts (Typekit) – kit taa8oru, načítá se v includes/config.php.
     Názvy rodin musí být přesně takto, jinak se font nenajde a spadne to na fallback.
     POZOR: kit je zatím osekaný na Latin-1 a NEOBSAHUJE české znaky (č ř ě š ž ů ď ť ň).
     Playfair Display / Inter jsou proto dočasně druhé v pořadí – prohlížeč z nich dokreslí
     chybějící znaky. Až grafik přepne kit na plný znakový set, můžou (i s Google Fonts
     odkazem v config.php) zase zmizet.

     Neue Haas Grotesk je v kitu ve dvou optických velikostech a NEJSOU zaměnitelné:
     - "neue-haas-grotesk-text"    = textový řez, kreslený pro malé velikosti.
                                     Silnější tahy, volnější prostrkání. Patří sem
                                     běžný text, navigace, tlačítka, popisky.
     - "neue-haas-grotesk-display" = titulkový řez, kreslený pro velké velikosti.
                                     Tenké tahy a těsné prostrkání – na 16px působí
                                     nedotištěně.
     ROZHODNUTÍ: celý web jede na textovém řezu, včetně velkých nadpisů. Titulkový
     řez se nepoužívá nikde – proměnná --font-sans-display zůstává jen jako příprava,
     kdyby se to někdy mělo vrátit. Nepřidávej ji do pravidel bez domluvy, mimo jiné
     kvůli úvodnímu lomítku u section-labelů, které v titulkovém řezu vychází o 44 %
     slabší než ve zbytku webu.

     Do kitu jsou u obou nahrané jen řezy 400 a 700. Cokoliv mezi (100–500) proto
     prohlížeč vykreslí jako 400 a 600–900 jako 700; font-synthesis: none navíc
     zakazuje dopočítat mezilehlou tučnost. Chce-li grafik Medium/500, musí ten řez
     nejdřív přidat do kitu – v CSS se to nedá obejít.

     Fields (patkové) má úplně stejný problém a je na tom hůř. Rodina existuje
     ve třech optických velikostech – "fields" (textový), "fields-display"
     (titulkový) a "fields-big" – ale v kitu je nahraný JEN titulkový, a z něj
     jen řezy 400 a 700. Web tedy jede na titulkovém řezu i tam, kde by podle
     stejné logiky jako u Neue Haas Grotesk měl jet na textovém; proto působí
     na běžných velikostech tence. font-weight: 500 níže v souboru je z tohohle
     důvodu bez efektu – Fields Display Medium v rodině JE, ale v kitu není,
     takže 500 spadne na 400.
     Dvě věci k doplnění do kitu taa8oru (obojí je v účtu Adobe Fonts pár
     kliknutí, v CSS se ani jedno obejít nedá):
       1. rodina "fields" (textový řez) – pak sem místo "fields-display",
       2. řez Medium 500 – pak začne fungovat font-weight: 500.
     Až se to stane, smaž náplast s -webkit-text-stroke hned pod body. */
  --font-display: "fields-display", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "neue-haas-grotesk-text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans-display: "neue-haas-grotesk-display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius-pill: 60px;
  --transition-fast: 180ms ease;

  /* ── Vrstvy (z-index) ──────────────────────────────────────────────────
     Jediná škála pro celý web. Platí jen pro prvky v KOŘENOVÉM stacking
     kontextu (přímí potomci body / .site-shell a jejich pozicované děti).

     POZOR: prvek s position != static a z-index != auto vytváří vlastní
     stacking kontext a UVĚZNÍ v něm všechny své potomky – i ty s position:
     fixed. Proto .hero-detail (obal navigace) nesmí mít z-index; jinak by
     navigace nikdy nepřebila blok s vyšším z-index, ať má uvnitř cokoliv.
     Nové hodnoty přidávej sem, ne ad-hoc do jednotlivých bloků. */
  --z-hero-media: 0;         /* fotka/slidy v hero */
  --z-hero-content: 1;       /* titulek + CTA v hero */
  --z-content: 3;            /* <main> a bloky, které přesahují přes hero */
  --z-hero-stats: 3;         /* karty parametrů přesahující pod hero */
  --z-sticky-cta: 900;       /* plovoucí tlačítko na formulář – pod navigací */
  --z-nav: 1000;             /* fixní horní navigace – nad veškerým obsahem */
  --z-floating-actions: 1010;/* mobilní lišta akcí sedí nad pozadím navigace */
  --z-cookie-consent: 1100;  /* cookie lišta – úplně nahoře, i nad navigací */

  /* ── Lišta rychlých akcí v navigaci ───────────────────────────────────
     Tři barevná tlačítka (telefon, katalog ke stažení, katalog do schránky).
     Na desktopu sedí vpravo nahoře uvnitř navigace, na mobilu jsou fixním
     pruhem přes celou šířku nad logem.

     --si-quick-actions-inset je to, o kolik se kvůli nim změnila výška
     navigace. Je to rozdíl proti původním paddingům – nahoře i dole, protože
     lišta zvedla horní a zúžila spodní. Připočítává se všude, kde se počítá
     s výškou fixní navigace: k průhlednému pruhu bloku site-nav-bar
     i k odsazení plovoucího tlačítka na formulář. Klidně vyjde záporně,
     to jen znamená, že je navigace nižší než dřív.

     Na mobilu je přírůstek nulový: tam navigaci odsazuje
     --detail-mobile-nav-top-offset a výšky se počítají zvlášť. */
  --si-quick-actions-height: 0px;
  --si-quick-actions-inset: 0px;

  /* Mezera mezi logem a hranou navigace. Používá se dvakrát – pod logem
     (padding-bottom navigace) a nad ním jako odstup od lišty rychlých akcí.
     Jedna hodnota schválně: díky ní má logo pevnou svislou úroveň, sedí
     přesně uprostřed pásu mezi lištou a spodkem navigace. Kdyby se obě
     mezery psaly zvlášť, začne logo při každé úpravě plavat. */
  --si-nav-edge-gap: 6px;
}

@media (min-width: 769px) {
  :root {
    --si-quick-actions-height: 40px;
    /* Horní padding navigace = lišta + mezera = 46px, spodní = 6px.
       Naladěné na 1920 px, kde původní paddingy vycházely na 34 / 28 px –
       proto je přírůstek na téhle šířce záporný (navigace je o 10px nižší).
       Mezera je schválně pevná, ne clamp: v řádu jednotek pixelů nemá
       škálování s šířkou okna co ukázat. */
    --si-quick-actions-inset: calc(
      /* změna nahoře: nový padding-top − původní */
      (var(--si-quick-actions-height) + var(--si-nav-edge-gap) - clamp(22px, 2.1vw, 34px))
      /* změna dole: nový padding-bottom − původní */
      + (var(--si-nav-edge-gap) - clamp(18px, 1.75vw, 28px))
    );
  }
}

/* Globální reset a základ dokumentu pro všechny stránky. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-bg);
}

body {
  margin: 0;
  min-width: 1280px;
  background: var(--color-bg);
  color: var(--color-beige);
  font-family: var(--font-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ⚠ DOČASNÁ NÁPLAST – SMAZAT, až se do kitu doplní Fields Display Medium 500.
   Patkové nadpisy mají v CSS font-weight: 500, ale kit servíruje jen řezy 400
   a 700, takže 500 spadne na 400. Změřeno na produkci: stejný text má ve 400
   i 500 šířku 830.09 px (v 700 pak 813.97 px) – ten Medium tam prostě není.

   text-stroke glyfy jemně obtáhne a tah tím opticky přibere. Není to pravý
   Medium: obtahují se i patky a teardrop terminály, takže při vyšších
   hodnotách písmo začne působit zakulaceně. Drž se pod 0.015em.
   Hodnota je v em schválně, ať se drží velikosti písma (0.008em = 0.45 px
   na 56px nadpisu, 0.19 px na 24px jménu v týmu). Chce-li grafik jinou
   tloušťku, ladí se právě tady, po ~0.002em.

   currentColor je nutný – jinak se obtah vykreslí černě a rozbije to
   .display-title__accent, který jede v akcentové barvě.

   Předchozí pokus přes -webkit-font-smoothing: auto tu byl zbytečně: macOS
   od Mojave subpixelové vyhlazování nepoužívá, takže `auto` i `antialiased`
   renderují stejně a nedělalo to nic. */
.display-title,
.display-title__accent,
.team-card__name,
.text-split-callout__title,
.rich-text h4 {
  -webkit-text-stroke: 0.008em currentColor;
}

/* Proměnné detailu upravují rozměry, mezery a typografii jen pro detai.php. */
.page-detail {
  --detail-frame-gutter: clamp(28px, 3.75vw, 54px);
  --detail-frame-edge: max(var(--detail-frame-gutter), calc((100vw - var(--wide-canvas-width)) / 2 + var(--detail-frame-gutter)));
  --detail-stats-overlap: clamp(72px, 8svh, 96px);
  --detail-stat-min-height: clamp(54px, 6.4svh, 67px);
  --detail-stats-row-gap: clamp(8px, 0.9vw, 12px);
  --detail-title-stats-gap: clamp(28px, 3svh, 42px);
  --detail-title-bottom: calc(var(--detail-stat-min-height) + var(--detail-stat-min-height) + var(--detail-stats-row-gap) - var(--detail-stats-overlap) + var(--detail-title-stats-gap));
  --detail-space-lg: 200px;
  --detail-space-sm: clamp(56px, 5vw, 72px);
  --detail-copy-line: 1.5;
  --detail-heading-line: 1.12;
  --detail-copy-gap: 24px;
  --detail-copy-gap-sm: 16px;
  --detail-section-gap: 36px;
  --detail-section-gap-lg: 42px;
  --detail-meta-gap: 4px;
  --detail-ui-size: 16px;
  --detail-nav-size: 16px;
  --detail-stat-size: 16px;
  --detail-label-size: 16px;
  --detail-small-title-size: 18px;
  --detail-footer-title-size: 16px;
  --detail-mobile-nav-size: 28px;
  --detail-mobile-nav-group-size: 20px;
  --detail-mobile-nav-sub-size: 17px;
  --detail-copy-regular-size: 16px;
  --detail-copy-regular-line: var(--detail-copy-line);
  --detail-copy-compact-size: 16px;
  --detail-copy-compact-line: var(--detail-copy-line);
  --detail-card-title-size: 20px;
  --detail-showcase-title-size: 40px;
  --detail-section-title-size: 40px;
  --detail-display-title-size: 56px;
}

/* Větší monitory rozšíří obsah detailu, běžný desktop zůstává beze změny. */
@media (min-width: 1921px) {
  .page-detail {
    --wide-canvas-width: 1880px;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  background: transparent;
  padding: 0;
}

/* Sémantické hooky pro skládání bloků – kořen bloku je pozicovací rámec pro
   své absolutně pozicované potomky.

   ⚠ Patří sem, mezi resety, a ne dolů ke komponentám. Selektor [data-block] má
   specificitu 0,1,0 – stejnou jako jednotlivá třída bloku – takže když stojí
   v souboru níž, přebije `position` každému bloku, který si ho nastavuje sám.
   Přesně to se stávalo plovoucímu tlačítku (.sticky-form-cta): mělo mít
   `position: fixed`, ale vyhrálo pozdější [data-block] a tlačítko spadlo do
   toku stránky. Tady, nad komponentami, si ho každý blok normálně přepíše. */
[data-block] {
  position: relative;
}

[data-space-before],
[data-space-after],
[data-size-token] {
  --token-debug: 1;
}

/* ==========================================================================
   2. Základní layout
   ========================================================================== */

/* Ořez postranního přesahu MUSÍ být `clip`, ne `hidden`.
   `overflow-x: hidden` totiž podle specifikace přepne druhou osu z `visible`
   na `auto` – z obalu celého webu se tím stane scrollovací kontejner. Uvnitř
   přitom leží prvky, které reveal animace odsouvá o ±52 px do stran (viz
   [data-reveal="fade-left|right"]), takže kontejner měl ~36 px scrollovací
   plochy, kterou `hidden` zároveň zakazuje posunout. Kolečko a swipe se do ní
   propadaly a gesto vyšlo naprázdno – „scrolluju něčím neviditelným“.
   `clip` ořízne úplně stejně, ale žádný scrollovací kontejner nezakládá
   (overflow-y zůstane `visible`). Řádek s `hidden` je fallback pro Safari < 16. */
.site-shell {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-x: clip;
}

.container {
  width: 100%;
  margin: 0 auto;
}

.container--contained {
  max-width: var(--container-width);
}

/* Sdílená šířka opakovatelných bloků na detailu. */
.page-detail .detail-intro__grid,
.page-detail .program-pricing > .container--contained,
.page-detail .detail-columns > .container--contained,
.page-detail .detail-inclusions > .container--contained,
.page-detail .program-comparator__inner,
.page-detail .testimonials__intro,
.page-detail .detail-feature-section__intro,
.page-detail .contact-split__grid,
.page-detail .catalog-email-form > .container--contained,
.page-detail .catalog-order-form > .container--contained,
.page-detail .link-list > .container--contained,
.page-detail .faq-accordion > .container--contained,
.page-detail .article-split > .container--contained,
.page-detail .reference-list > .container--contained,
.page-detail .blog-list > .container--contained,
.page-detail .text-content > .container--contained,
.page-detail .error-page > .container--contained,
.page-detail .pros-cons > .container--contained {
  width: min(100%, var(--wide-canvas-width));
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--detail-frame-gutter);
}

/* Lokální zarovnání kontaktního formuláře na detailu. Obecný formulář je níže. */
.page-detail .contact-split__address {
  margin-top: 84px;
}

.page-detail .contact-split .social-links {
  margin-top: 36px;
}

.page-detail .contact-form {
  gap: 24px 76px;
}

.page-detail .form-field {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  border-bottom: 0;
}

.page-detail .form-field label {
  order: 1;
  margin-bottom: 8px;
  color: var(--color-green-muted);
}

.page-detail .form-field input,
.page-detail .form-field textarea {
  order: 2;
  display: block;
  margin: 0;
  padding: 0;
  line-height: var(--detail-copy-line);
}

.page-detail .form-field::after {
  position: static;
  order: 3;
  width: 100%;
  margin-top: 4px;
  background: var(--color-line);
}

.page-detail .form-field__error {
  order: 4;
  margin-top: 6px;
}

.page-detail .form-field textarea {
  min-height: 56px;
}

.page-detail .contact-form__actions {
  margin-top: 0;
}

.page-detail .display-title--split,
.page-detail .display-title--contact,
.page-detail .testimonials__title {
  font-size: var(--detail-display-title-size);
  line-height: var(--detail-heading-line);
  letter-spacing: 0;
}

.page-detail .hero-nav__list a,
.page-detail .hero-nav__dropdown-trigger {
  font-size: var(--detail-nav-size);
  line-height: var(--detail-copy-line);
  letter-spacing: 0;
}

.page-detail .button,
.page-detail .text-link,
.page-detail .form-field__error,
.page-detail .contact-form__message {
  font-size: var(--detail-ui-size);
  line-height: var(--detail-copy-line);
  letter-spacing: 0;
}

.page-detail .display-title--detail,
.page-detail .section-label,
.page-detail .program-card__title,
.page-detail .program-card__price,
.page-detail .program-pricing__cta-title,
.page-detail .detail-copy-card__title,
.page-detail .review-card__name,
.page-detail .feature-badge-card h3,
.page-detail .video-card h3 {
  line-height: var(--detail-heading-line);
  letter-spacing: 0;
}

.page-detail .section-label span,
.page-detail .program-pricing__cta-title span,
.page-detail .detail-copy-card__title span,
.page-detail .review-card__name span,
.page-detail .feature-badge-card h3 span {
  line-height: inherit;
}

.page-detail .contact-split__address p,
.page-detail .footer-list a,
.page-detail .footer-list__text,
.page-detail .form-field label,
.page-detail .form-field input,
.page-detail .form-field textarea {
  font-size: var(--detail-ui-size);
  line-height: var(--detail-copy-line);
  letter-spacing: 0;
}

.page-detail .footer-list h3,
.page-detail .footer-list__text h4 {
  font-size: var(--detail-footer-title-size);
  line-height: var(--detail-heading-line);
  letter-spacing: 0;
}

/* ==========================================================================
   3. Pomocné mezery
   ========================================================================== */

.spacer {
  width: 100%;
  pointer-events: none;
}

/* Nepoužívá detai.php:
   .spacer--overlap {
     margin-top: var(--space-overlap-hero);
   }
*/

.spacer--sm {
  height: var(--space-sm);
}

/* Nepoužívá detai.php:
   .spacer--md {
     height: var(--space-md);
   }
*/

.spacer--lg {
  height: var(--space-lg);
}

/* Poslední spacer stránky, když mezeru nad patičkou nemá co určit – viz
   siFooterSpacer() v includes/block_spacing.php. Vykresluje ho renderer, ne
   patička: patička sama margin-top nemá, aby šel poslední blok posadit až
   na ni (space_below = 'none'). */
.spacer--footer {
  height: var(--footer-space);
}

.page-detail .spacer--sm {
  height: var(--detail-space-sm);
}

/* Nepoužívá detai.php:
   .page-detail .spacer--md {
     height: var(--space-md);
   }
*/

.page-detail .spacer--lg {
  height: var(--detail-space-lg);
}

/* Nepoužívá detai.php:
   .spacer--xl {
     height: var(--space-xl);
   }
*/

/* ==========================================================================
   4. Logo a úvodní hero
   ========================================================================== */

.brand {
  display: inline-flex;
  align-items: center;
}

.brand img {
  width: 92px;
  height: auto;
  aspect-ratio: 137 / 51;
  object-fit: contain;
}

/* Nepoužívá detai.php:
   .hero-home {
     position: relative;
     min-height: 804px;
   }

   .hero-home__media {
     position: absolute;
     inset-block: 0;
     left: 50%;
     width: min(100%, var(--hero-media-width));
     transform: translateX(-50%);
     background:
       linear-gradient(180deg, rgba(0, 0, 0, 0.6) 14.42%, rgba(0, 0, 0, 0) 44.71%),
       url("../images/hero-background.jpg") center center / cover no-repeat;
   }

   .hero-home__inner {
     position: relative;
     min-height: 804px;
     width: min(100%, var(--wide-canvas-width));
     margin: 0 auto;
   }

   .hero-home .brand {
     position: absolute;
     top: 93px;
     left: var(--page-gutter);
   }
*/

/* ==========================================================================
   5. Navigace
   ========================================================================== */

.hero-nav {
  position: absolute;
  right: var(--page-gutter);
}

.hero-nav--primary {
  top: 64px;
}

.hero-nav--secondary {
  top: 106px;
}

.hero-nav__list {
  display: flex;
  align-items: center;
  gap: 27px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-nav__item {
  position: relative;
}

.hero-nav__list a,
.hero-nav__dropdown-trigger {
  position: relative;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  transition: color var(--transition-fast);
}

.hero-nav__list a::after,
.hero-nav__dropdown-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-fast);
}

.hero-nav__dropdown-trigger {
  cursor: pointer;
}

.hero-nav__list--light a,
.hero-nav__list--light .hero-nav__dropdown-trigger {
  color: var(--color-beige);
}

.hero-nav__list a:hover::after,
.hero-nav__list a:focus-visible::after,
.hero-nav__dropdown-trigger:hover::after,
.hero-nav__dropdown-trigger:focus-visible::after {
  transform: scaleX(1);
}

/* Otevřená položka musí být nad sousedy – submenu se šířkou přes víc položek
   se jinak může krýt s neviditelným submenu vedlejší položky. */
.hero-nav__item--dropdown:hover,
.hero-nav__item--dropdown:focus-within,
.hero-nav__item--dropdown.is-open {
  z-index: 210;
}

.hero-nav__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 200;
  display: grid;
  gap: 10px;
  min-width: 222px;
  margin: 0;
  padding: 16px 18px;
  list-style: none;
  background: rgba(10, 36, 26, 0.94);
  border: 1px solid var(--color-line-strong);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* Můstek přes mezeru mezi položkou a submenu. Je součástí submenu, takže platí
   jen když je submenu otevřené (zavřené má pointer-events: none) a je široký
   přesně jako submenu. Dřív visel na položce (.hero-nav__item--dropdown::after,
   222px doleva od jejího pravého okraje) a trvale přebíral kurzor sousedním
   položkám vlevo – cestou dolů z jedné položky se otevřelo submenu té vedlejší. */
.hero-nav__dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.hero-nav__item--dropdown:hover .hero-nav__dropdown,
.hero-nav__item--dropdown:focus-within .hero-nav__dropdown,
.hero-nav__item--dropdown.is-open .hero-nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.hero-nav__list--light .hero-nav__dropdown a {
  color: var(--color-text-soft-strong);
  white-space: nowrap;
}

.hero-nav__list--light .hero-nav__dropdown a:hover,
.hero-nav__list--light .hero-nav__dropdown a:focus-visible {
  color: var(--color-beige);
}

.page-detail .hero-nav__dropdown {
  background: var(--color-beige);
  border: 0;
}

.page-detail .hero-nav__list--light .hero-nav__dropdown a {
  color: var(--color-green);
}

.page-detail .hero-nav__list--light .hero-nav__dropdown a:hover,
.page-detail .hero-nav__list--light .hero-nav__dropdown a:focus-visible {
  color: var(--color-green-muted);
}

/* Stránky bez foto-hero (katalog, page builder, /domy/) –
   navigace má zelené pozadí stránky; submenu zůstává žluté jako na titulce */
body.has-solid-nav,
body.page-catalog,
body.page-all-houses,
body.page-builder-page {
  background: var(--color-bg);
}

body.has-solid-nav .hero-detail__nav {
  background: var(--color-bg);
}

/* Stejné žluté submenu jako na titulce / detailu domu */
body.has-solid-nav .hero-nav__dropdown {
  background: var(--color-beige);
  border: 0;
}

body.has-solid-nav .hero-nav__list--light .hero-nav__dropdown a {
  color: var(--color-green);
}

body.has-solid-nav .hero-nav__list--light .hero-nav__dropdown a:hover,
body.has-solid-nav .hero-nav__list--light .hero-nav__dropdown a:focus-visible {
  color: var(--color-green-muted);
}

/* site-nav-bar musí ignorovat výšky/pozadí z .hero-detail (detail domu).
   --si-quick-actions-inset je přírůstek výšky navigace o lištu rychlých akcí;
   bez něj by obsah stránky vlezl pod ni. */
.page-detail .hero-detail.site-nav-bar,
.hero-detail.site-nav-bar {
  height: calc(clamp(96px, 10vw, 130px) + 30px + var(--si-quick-actions-inset));
  min-height: 0;
  background: transparent;
  overflow: visible;
}

/* Nepoužívá detai.php:
   .hero-home__content {
     position: absolute;
     top: 237px;
     left: calc(var(--page-gutter) - 11px);
   }
*/

/* ==========================================================================
   6. Nadpisy a rating boxy
   ========================================================================== */

.display-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
}

/* Nepoužívá detai.php:
   .display-title--hero {
     width: 683px;
     font-size: 130px;
     line-height: 0.84615;
     color: var(--color-beige);
   }
*/

.display-title--split,
.display-title--contact {
  font-size: 72px;
  line-height: 1.11111;
  color: var(--color-beige);
}

/* Nepoužívá detai.php:
   .display-title--panel {
     font-size: 72px;
     line-height: 0.9;
     color: var(--color-green);
   }
*/

.display-title__italic {
  display: inline-block;
  /* Přepnutí z ozdobného patkového písma (dědí se z .display-title) na groteskový
     textový řez. Uvádět se musí explicitně – bez toho by se sem propsal patkový
     font z rodičovského pravidla. */
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  transform: skewX(-10deg);
  transform-origin: left 80%;
}

.display-title__accent {
  font-family: var(--font-display);
  font-weight: 500;
  transform: none;
  color: var(--color-accent);
}

/* Nepoužívá detai.php:
   .hero-home__ratings {
     display: flex;
     gap: 30px;
     margin-top: 38px;
   }

   .rating-pill {
     display: flex;
     align-items: center;
     gap: 15px;
     width: max-content;
     min-height: 62px;
     padding: 12px 18px 11px 17px;
     border-radius: var(--radius-pill);
     background: linear-gradient(90deg, rgba(217, 217, 217, 0.15), rgba(255, 255, 255, 0.15));
     box-shadow: 0 4px 4px var(--color-shadow);
     backdrop-filter: blur(5px);
   }

   .rating-pill__brand {
     flex: none;
   }

   .rating-pill:first-child .rating-pill__brand {
     width: 33px;
   }

   .rating-pill:last-child .rating-pill__brand {
     width: 30px;
   }

   .rating-pill__headline {
     display: flex;
     align-items: center;
     gap: 8px;
   }

   .rating-pill__score {
     font-size: 20px;
     letter-spacing: 0.05em;
     color: #fff;
   }

   .rating-pill__stars {
     width: 86px;
     height: auto;
   }

   .rating-pill p {
     margin: 3px 0 0;
     font-size: 14px;
     letter-spacing: 0.05em;
     color: #9f9f9f;
   }
*/

/* Opakovatelný styl nadpisů uvnitř obsahových bloků. */
.section-label {
  margin: 0;
  font-size: 40px;
  line-height: 1.125;
  letter-spacing: 0.05em;
  color: var(--color-beige);
  /* Text sem plní redakce a některé bloky ho dávají do úzkého sloupce –
     ať dlouhé slovo radši zlomí, než vyteče z karty. Na text, který se
     vejde, pravidlo nesahá. */
  overflow-wrap: break-word;
}

.section-label span {
  color: var(--color-accent);
}

/* Nepoužívá detai.php:
   .section-label--multi {
     line-height: 1.125;
   }
*/

/* Nepoužívá detai.php:
   .section-label--hero {
     max-width: 447px;
   }
*/

/* ==========================================================================
   7. Carousel
   ========================================================================== */

.carousel,
.carousel__viewport {
  position: relative;
}

/* Nepoužívá detai.php:
   .carousel-section__heading,
   .carousel-section__heading--split {
     position: relative;
   }

   .carousel-section--news,
   .carousel-section--houses {
     width: 100%;
   }

   .carousel-section__heading {
     padding-left: var(--page-gutter);
   }

   .carousel-section--news .carousel-section__heading {
     margin-bottom: 57px;
   }

   .carousel-section__heading--split {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     width: calc(100% - (var(--page-gutter) * 2));
     margin-left: var(--page-gutter);
     padding-left: 0;
     margin-bottom: 74px;
   }
*/

.carousel {
  width: 100%;
}

.carousel__viewport {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: var(--page-gutter);
  padding-right: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: none;
  scrollbar-width: none;
}

.page-detail .carousel__viewport {
  padding-left: var(--detail-frame-edge);
  padding-right: 0;
}

.carousel__viewport::-webkit-scrollbar {
  display: none;
}

.carousel__track {
  display: flex;
  gap: 10px;
  min-width: 100%;
}

.carousel.is-static .carousel__viewport {
  padding-right: var(--page-gutter);
  overflow-x: hidden;
}

.page-detail .carousel.is-static .carousel__viewport {
  padding-right: var(--detail-frame-edge);
}

.carousel.is-static .carousel__track {
  min-width: 0;
}

.carousel[data-carousel="logos"].is-static .carousel__track {
  justify-content: center;
}

/* Nepoužívá detai.php:
   .carousel__track--benefits {
     gap: 25px;
   }

   .carousel__track--houses {
     gap: 10px;
   }
*/

.carousel__controls {
  display: flex;
  align-items: center;
  gap: 18px;
}

.carousel__controls[hidden],
.carousel.is-static .carousel__controls {
  display: none;
}

.carousel__controls--bottom {
  justify-content: flex-end;
  padding-right: var(--page-gutter);
  margin-top: 62px;
}

.page-detail .carousel__controls--bottom {
  padding-right: var(--detail-frame-edge);
}

/* Nepoužívá detai.php:
   .carousel__controls--top {
     margin-top: 129px;
   }
*/

.carousel__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 18px;
  color: rgba(245, 237, 214, 0.7);
  cursor: pointer;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.carousel__button svg {
  width: 30px;
  height: 16px;
}

.carousel__button:disabled {
  opacity: 0.3;
  cursor: default;
}

.carousel__button:not(:disabled):hover,
.carousel__button:not(:disabled):focus-visible {
  color: var(--color-beige);
}

/* ==========================================================================
   8. Karty výpisů a textové odkazy
   ========================================================================== */

/* Nepoužívá detai.php:
   .news-card,
   .house-card {
     flex: 0 0 406px;
   }

   .news-card__image-link,
   .house-card__image-link {
     display: block;
     overflow: hidden;
   }

   .news-card__image-link img,
   .house-card__image-link img {
     width: 406px;
     height: 237px;
     object-fit: cover;
   }

   .news-card__title {
     margin: 21px 0 17px;
     font-size: 40px;
     line-height: 1.125;
     font-weight: 400;
     letter-spacing: 0.05em;
   }
*/

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  letter-spacing: 0.08em;
}

.text-link--accent {
  color: var(--color-accent);
}

.text-link--accent > span {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}

.rating-summary__action {
  display: inline-block;
  position: relative;
}

.text-link--accent > span::after,
.rating-summary__action::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-fast);
}

/* Nepoužívá detai.php:
   .text-link--dark {
     color: var(--color-green);
   }
*/

.text-link:hover,
.text-link:focus-visible {
  opacity: 0.82;
}

.text-link--accent:hover,
.text-link--accent:focus-visible {
  opacity: 1;
}

.text-link--accent:hover > span::after,
.text-link--accent:focus-visible > span::after,
.rating-summary:hover .rating-summary__action::after,
.rating-summary:focus-visible .rating-summary__action::after {
  transform: scaleX(1);
}

.icon-svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   9. Obsahové bloky úvodní stránky
   ========================================================================== */

/* Nepoužívá detai.php:
   .benefits-feature__intro {
     display: grid;
     grid-template-columns: 592px 614px;
     gap: 34px;
     align-items: start;
     width: min(100%, calc(592px + 614px + 34px + (var(--page-gutter) * 2)));
     max-width: none;
     margin-inline: 0;
     padding-inline: var(--page-gutter);
   }

   .benefits-feature {
     width: 100%;
   }

   .benefits-feature__text {
     padding-top: 4px;
   }

   .benefits-feature__text p {
     margin: 0;
     font-size: 22px;
     line-height: 1.3636;
     letter-spacing: 0;
   }

   .benefits-feature__text p + p {
     margin-top: 18px;
   }

   .carousel--text {
     margin-top: 150px;
   }

   .benefit-card {
     flex: 0 0 392px;
   }

   .benefit-card p {
     margin: 0;
     font-size: 16px;
     line-height: 1.25;
     letter-spacing: 0;
   }

   .benefit-card .section-label {
     margin-bottom: 36px;
   }

   .house-card .section-label {
     margin-bottom: 26px;
   }

   .house-card__meta {
     margin: 12px 0 0;
     font-size: 16px;
     line-height: 1.5;
     letter-spacing: 0.08em;
     color: var(--color-beige);
   }

   .media-callout__frame {
     position: relative;
     min-height: 666px;
   }

   .media-callout__image-wrap {
     width: 1143px;
   }

   .media-callout__image-wrap img {
     width: 1143px;
     height: 375px;
     object-fit: cover;
   }

   .media-callout__panel {
     position: absolute;
     top: 258px;
     left: 102px;
     width: 1138px;
     min-height: 408px;
     padding: 84px 128px 72px 68px;
     background: var(--color-beige);
   }

   .media-callout__panel p {
     max-width: 904px;
     margin: 30px 0 28px;
     font-size: 22px;
     line-height: 1.3636;
     letter-spacing: 0;
     color: var(--color-green);
   }

   .catalog-cta {
     position: relative;
     min-height: 394px;
   }

   .catalog-cta__media {
     position: absolute;
     inset: 0;
     background:
       linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
       url("../images/catalog-background.jpg") center center / cover no-repeat;
   }

   .catalog-cta__inner {
     position: relative;
     width: min(100%, var(--wide-canvas-width));
     max-width: none;
     margin: 0 auto;
     padding-inline: var(--page-gutter);
     padding-top: 107px;
   }

   .catalog-cta__actions {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-top: 138px;
   }
*/

/* ==========================================================================
   10. Tlačítka
   ========================================================================== */

.button {
  --button-bg: transparent;
  --button-color: currentColor;
  --button-border-color: transparent;
  --button-hover-bg: var(--button-bg);
  --button-hover-color: var(--button-color);
  --button-hover-border-color: var(--button-border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 32px;
  border: 1px solid var(--button-border-color);
  background-color: var(--button-bg);
  color: var(--button-color);
  font-size: 15px;
  letter-spacing: 0.08em;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.button svg {
  width: 18px;
  height: 18px;
}

/* Atribut `hidden` musí na tlačítku fungovat. Prohlížeč ho řeší pravidlem
   [hidden]{display:none} ze svého výchozího stylu, jenže to má nižší
   specificitu než .button s display: inline-flex – bez tohohle řádku by
   skryté tlačítko zůstalo vidět. Používá to výměna odesílacího tlačítka
   za tlačítko ke stažení v bloku catalog-email-form. */
.button[hidden] {
  display: none;
}

.button--filled {
  --button-bg: var(--color-accent);
  --button-color: var(--color-green);
  --button-border-color: var(--color-accent);
  --button-hover-bg: transparent;
  --button-hover-color: var(--color-accent);
  --button-hover-border-color: var(--color-accent);
}

.button--outline {
  --button-bg: transparent;
  --button-color: var(--color-beige);
  --button-border-color: var(--color-beige);
  --button-hover-bg: var(--color-beige);
  --button-hover-color: var(--color-green);
  --button-hover-border-color: var(--color-beige);
}

.button:hover,
.button:focus-visible {
  border-color: var(--button-hover-border-color);
  background-color: var(--button-hover-bg);
  color: var(--button-hover-color);
}

/* ── Lišta rychlých akcí ───────────────────────────────────────────────────
   Telefon / Stáhnout katalog / Katalog do schránky. Vypisuje ji
   renderQuickActions() (includes/site.php) zevnitř navigace, takže je na každé
   stránce. Název tříd je historický – lišta bývala jen na detailu domu.

   Rozvržení řeší až média dole: desktop = shluk vpravo nahoře uvnitř fixní
   navigace, mobil = fixní pruh přes celou šířku nad logem. Tady zůstávají jen
   barvy, které jsou pro obě stejné. */
.page-detail .detail-floating-actions {
  display: none;
}

.page-detail .detail-floating-actions__button--secondary {
  --button-bg: var(--color-program-muted-secondary);
  --detail-floating-button-bg: var(--color-program-muted-secondary);
  --button-hover-bg: #1a8ea0;
}

.page-detail .detail-floating-actions__button--tertiary {
  --button-bg: var(--color-program-muted-tertiary);
  --detail-floating-button-bg: var(--color-program-muted-tertiary);
  --button-hover-bg: #809316;
}

.page-detail .detail-floating-actions__button--emphasis {
  --button-bg: var(--color-surface-emphasis);
  --detail-floating-button-bg: var(--color-surface-emphasis);
  --button-hover-bg: #1a5640;
}

@media (min-width: 769px) {
  /* Tlačítka vedle sebe, nalepená na horní hranu okna a zarovnaná doprava na
     stejný okraj jako menu. Stačí `absolute` – navigace je `position: fixed`,
     takže je pro lištu vztažným rámcem. Místo pod ní si navigace dělá sama
     horním paddingem (--si-quick-actions-height + gap, viz níž). */
  .page-detail .detail-floating-actions {
    position: absolute;
    top: 0;
    right: var(--detail-frame-edge);
    display: flex;
    gap: 1px;
  }

  .page-detail .detail-floating-actions__button {
    --button-hover-color: var(--button-color);
    --button-color: var(--color-beige);
    --button-border-color: var(--detail-floating-button-bg);
    --button-hover-border-color: var(--detail-floating-button-bg);
    min-width: 0;
    min-height: var(--si-quick-actions-height);
    padding: 0 18px;
    font-size: 13px;
    letter-spacing: 0;
  }
}

/* ── Plovoucí tlačítko na formulář (blok sticky-form-cta) ─────────────────
   Blok se vykresluje kdekoli v pořadí stránky, ale v toku nezabírá nic –
   drží ho position: fixed. Vodorovně sedí na stejném odsazení jako logo
   v navigaci (--detail-frame-edge), svisle pod fixní navigací. Výšku
   navigace nejde spočítat z jedné proměnné (skládá se z paddingů a výšky
   loga), takže odsazení kopíruje výšku toho průhledného pruhu, kterým si
   navigaci odsazuje blok site-nav-bar. Chceš tlačítko jinde? Stačí přepsat
   --sticky-form-cta-top.

   Skrývání, když je formulář vidět, dělá initializeStickyFormCta()
   v assets/js/site.js přes třídu is-hidden. Bez JS zůstane tlačítko
   viditelné a funguje jako obyčejná kotva – to je správný fallback. */
.sticky-form-cta {
  --sticky-form-cta-top: calc(clamp(96px, 10vw, 130px) + 30px + var(--si-quick-actions-inset) + 24px);
  position: fixed;
  top: var(--sticky-form-cta-top);
  /* Fallback pro případ, že by blok skončil na stránce bez .page-detail –
     tam by se --detail-frame-edge nedědilo a left by spadlo na auto. */
  left: var(--detail-frame-edge, 24px);
  z-index: var(--z-sticky-cta);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.sticky-form-cta.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
}

/* Výchozí .button--filled se na hover vyprázdní na obrys – plovoucí tlačítko
   místo toho jen zesvětlí pozadí a nechá text i rám, jak jsou. Světlejší
   odstín je napevno, protože v paletě k --color-accent žádný není; stejně to
   řeší i .detail-floating-actions__button pár řádků výš. */
.sticky-form-cta__button {
  --button-hover-bg: #ffa869;
  --button-hover-color: var(--button-color);
  --button-hover-border-color: #ffa869;
}

/* V showroomu i v náhledu bloku není kam scrollovat a fixní tlačítko by
   viselo přes prázdnou stránku – tam se vykreslí normálně v toku. */
.page-components .sticky-form-cta {
  position: static;
  display: flex;
}

/* ==========================================================================
   11. Kontakt a formuláře
   ========================================================================== */

.contact-split__grid {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 108px;
}

.contact-split__details {
  padding-top: 1px;
}

.contact-split__address {
  margin-top: 108px;
  font-style: normal;
}

.contact-split__address p {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
}

.contact-split__address p + p {
  margin-top: 21px;
}

.contact-split__address a:hover,
.contact-split__address a:focus-visible {
  color: var(--color-accent);
}

/* Odkazy na sítě ve výchozím sloupci kontaktů (když blok nemá vlastní text).
   Mezera 21 px je stejná jako mezi odstavci adresy nad nimi, takže skupiny
   drží jeden rytmus. */
.contact-split__social {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin: 21px 0 0;
  padding: 0;
  list-style: none;
}

/* Stejné chování jako u telefonu a e-mailu nad nimi – zoranžovění místo
   ztlumení, které si odkazy nesou z .text-link. */
.contact-split__social a:hover,
.contact-split__social a:focus-visible {
  color: var(--color-accent);
  opacity: 1;
}

.contact-split__social-arrow {
  flex: none;
  color: var(--color-accent);
  font-size: 18px;
  line-height: 1;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}

.social-links img {
  height: 24px;
  width: auto;
}

.social-links [data-social] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-beige);
}

.social-links .icon-svg {
  width: 24px;
  height: 24px;
}

.social-links [data-social="youtube"] .icon-svg {
  width: 30px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  transition: opacity var(--transition-fast);
}

.social-links a:hover,
.social-links a:focus-visible {
  opacity: 0.78;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 35px 76px;
}

.form-field {
  position: relative;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--color-line);
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.05em;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-beige);
  outline: none;
}

.form-field textarea {
  min-height: 84px;
  resize: vertical;
}

.form-field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: transparent;
  transition: background var(--transition-fast);
}

.form-field:focus-within::after {
  background: var(--color-beige);
}

.form-field__error {
  display: block;
  min-height: 16px;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: transparent;
  transition: color var(--transition-fast);
}

.form-field.is-invalid {
  border-bottom-color: rgba(255, 145, 71, 0.7);
}

.form-field.is-invalid::after {
  background: rgba(255, 145, 71, 0.9);
}

.form-field.is-invalid .form-field__error {
  color: var(--color-accent);
}

.contact-form__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}

/* Jen šířka. Barvu schválně neřeší – všude jinde jde tlačítko dohromady
   s `.button--filled`, které zelenou nastaví přes --button-color. Kdyby ji
   tohle pravidlo psalo natvrdo, přebilo by hover stav (`.button:hover` má
   stejnou specificitu) a text by na hoveru zůstal v původní barvě. */
.button--submit {
  min-width: 129px;
}

.contact-form__message {
  min-height: 20px;
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: rgba(245, 237, 214, 0.76);
}
.contact-form__message--ok {
  color: #6ee87a;
}
.contact-form__message--error {
  color: #ff7a7a;
}

/* ── Poděkování po odeslání ────────────────────────────────────────────────
   Používá ho objednávka katalogu do schránky: po úspěšném odeslání JS odkryje
   `.contact-form__success` a formuláři přidá `is-sent`. Skrýt zbytek přes
   `hidden` na každém poli by znamenalo vyjmenovat je v JS – takhle o tom ví
   jen tohle jediné pravidlo. `> :not(...)` je schválně jen o přímé potomky,
   ať se poděkování neschová samo sebou. */
.contact-form.is-sent > :not(.contact-form__success) {
  display: none;
}

.contact-form__success {
  grid-column: 1 / -1;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--color-text-strong);
}

/* Fokus na poděkování přesouvá JS kvůli čtečkám – rámeček kolem odstavce by
   ale vypadal jako chyba, proto se nekreslí. */
.contact-form__success:focus {
  outline: none;
}

.contact-form__success p {
  margin: 0;
}

.contact-form__success p + p {
  margin-top: 18px;
}

.contact-form__success a {
  color: var(--color-accent);
}

.contact-form__success a:hover,
.contact-form__success a:focus-visible {
  color: var(--color-beige);
}

/* Formulář na jeden sloupec (malý formulář na e-mail za katalog). */
.contact-form--single {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

/* ── Souhlas se zpracováním osobních údajů ─────────────────────────────────
   Vlastní obálka `.form-consent`, ne `.form-field` – ta má podtržítko a je
   na detailu přepsaná na flex sloupec s `order`, což by rozbilo řádek
   „čtvereček + text". Sbírá ji ale stejná validace v assets/js/site.js. */
/* Obálka obou zaškrtávátek (povinný souhlas + nepovinný newsletter). Mřížka
   formuláře má mezi řádky 35 px, což by dvě související zaškrtávátka od sebe
   odtrhlo – uvnitř skupiny proto platí vlastní, menší mezera. */
.form-consent-group {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
}

.form-consent {
  grid-column: 1 / -1;
}

/* Zaškrtávátko sedí u POSLEDNÍHO řádku textu, ne u prvního – souhlas se
   zpracováním údajů je dlouhý a čtvereček nahoře zůstal opticky sám. */
.form-consent__label {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  cursor: pointer;
}

/* Nativní zaškrtávátko se nedá obarvit na béžové, tak se překreslí. Zůstává
   ale skutečným inputem – kvůli klávesnici, čtečkám i `required`. */
.form-consent__input {
  flex: none;
  width: 18px;
  height: 18px;
  /* Dolní odsazení dorovnává řádkování textu (13/1.5), aby čtvereček seděl
     na účaří posledního řádku a nevisel pod ním. */
  margin: 0 0 1px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color-border-emphasis);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.form-consent__input:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  /* Fajfka jako pozadí – ::after by na `appearance: none` inputu nefungovalo
     ve všech prohlížečích (input je nahrazený element). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%230b291e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.form-consent__input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.form-consent__text {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-soft);
}

.form-consent__text p {
  margin: 0;
}

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

/* Chybějící souhlas hlásí jen rámeček zaškrtávátka – vlastní hláška tu není,
   aby pod formulářem nedržela místo. Text je společný u tlačítka. */
.form-consent.is-invalid .form-consent__input {
  border-color: var(--color-accent);
}

/* ==========================================================================
   11b. Katalogové formuláře
   ========================================================================== */

/* Oba katalogové formuláře stojí na stejném panelu: nadpis vlevo, pole vpravo.
   Liší se jen poměrem sloupců – objednávka má devět polí, takže formulář
   dostane víc místa a nadpis se drží u kraje. */
.catalog-email-form__inner,
.catalog-order-form__inner {
  display: grid;
  gap: clamp(40px, 5vw, 96px);
  padding: clamp(40px, 4.5vw, 72px) clamp(28px, 5vw, 88px);
  background: var(--color-surface-primary);
}

.catalog-email-form__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.catalog-order-form__inner {
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
}

.catalog-email-form__copy,
.catalog-order-form__copy {
  margin-top: 28px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--color-text-strong);
}

.catalog-email-form__copy p,
.catalog-order-form__copy p {
  margin: 0;
}

.catalog-email-form__copy p + p,
.catalog-order-form__copy p + p {
  margin-top: 12px;
}

/* Formulář na e-mail má jediné pole, takže se svisle vycentruje k textu. */
.catalog-email-form__form {
  align-content: center;
}

/* Odesílací tlačítko je tady obráceně než jinde na webu: nejdřív jen obrys,
   na hover se vyplní. Po odeslání ho vystřídá tlačítko ke stažení, které to
   má klasicky (plné → na hover obrys), takže je výměna vidět na první pohled.
   Nastavují se jen proměnné, žádné `color` – to za obojí stav dosadí `.button`
   a `.button:hover`. */
.catalog-email-form__submit {
  --button-bg: transparent;
  --button-color: var(--color-accent);
  --button-border-color: var(--color-accent);
  --button-hover-bg: var(--color-accent);
  --button-hover-color: var(--color-green);
  --button-hover-border-color: var(--color-accent);
}

/* Tlačítko ke stažení katalogu stojí po odeslání na místě odesílacího
   tlačítka, takže musí mít stejnou výšku i minimální šířku. Barvy si drží
   po `.button--light` (béžové plné → na hover obrys) – proti oranžovému
   obrysu odesílacího tlačítka je výměna vidět i barvou, ne jen převrácením.
   Béžová schválně, ne čistá bílá: světlá tlačítka jsou po webu všude béžová
   a bílá by se z palety vylomila. */
.catalog-email-form__download {
  min-width: 129px;
}


/* Objednávka katalogu má devět polí – ta se drží dvousloupcové mřížky
   `.contact-form`, jen s menší mezerou, aby se sekce nenatáhla. */
.catalog-order-form__form {
  gap: 28px 48px;
}

/* Dva sloupce vedle sebe přestanou dávat smysl dřív než u ostatních bloků –
   devět polí v polovině šířky je užší než popisky. */
@media (max-width: 1024px) {
  .catalog-email-form__inner,
  .catalog-order-form__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .catalog-email-form__inner,
  .catalog-order-form__inner {
    padding: 32px 24px 36px;
  }

  .catalog-email-form__copy,
  .catalog-order-form__copy {
    margin-top: 20px;
  }
}

@media (max-width: 480px) {
  .catalog-email-form__inner,
  .catalog-order-form__inner {
    padding: 28px 20px 32px;
  }
}

/* ==========================================================================
   12. Patička
   ========================================================================== */

/* Výška se řídí obsahem sloupců. Původní min-height: 682px byla z návrhu,
   kde patička končila stránku; dneska pod ní jsou ještě loga partnerů a
   spodní lišta, takže by jen přidávala prázdné místo nad nimi. */
/* Bez margin-top: místo nad patičkou dělá poslední spacer stránky (viz
   siFooterSpacer()), aby ho šlo v builderu zmenšit i úplně vypnout. Vlastní
   odsazení patičky by se k němu přičítalo a nulu by nikdy nepustilo. */
.footer-global {
  padding-top: 72px;
  padding-bottom: 80px;
  background: var(--color-footer-bg);
}

/* Čtyři stejně široké sloupce – minmax(0, 1fr), aby dlouhý nezalomitelný
   odkaz sloupec nerozšířil na úkor ostatních. */
.footer-global__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 57px clamp(36px, 4vw, 57px);
  width: calc(100% - (var(--page-gutter) * 2));
  max-width: none;
  margin-inline: var(--page-gutter);
  padding-inline: 0;
}

.page-detail .footer-global__grid {
  width: min(100%, var(--wide-canvas-width));
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--detail-frame-gutter);
}

.footer-list h3,
.footer-list__text h4 {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

.footer-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-list li + li {
  margin-top: 2px;
}

.footer-list a {
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.05em;
  color: var(--color-green-muted);
  transition: color var(--transition-fast);
}

.footer-list a:hover,
.footer-list a:focus-visible {
  color: var(--color-beige);
}

/* Textový sloupec patičky – obsah z editoru (odstavce, seznamy, mezinadpisy). */
.footer-list__text {
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.05em;
  color: var(--color-green-muted);
}

.footer-list__text p {
  margin: 0;
}

.footer-list__text p + p,
.footer-list__text ul + p,
.footer-list__text ol + p {
  margin-top: 17px;
}

.footer-list__text ol {
  margin: 0;
  padding-left: 1.2em;
}

.footer-list__text h3,
.footer-list__text h4 {
  margin: 17px 0 20px;
}

.footer-list__text > :first-child {
  margin-top: 0;
}

/* Pruh s logy partnerů pod patičkou – na každé stránce, obsah z administrace
   (Menu a patička → Loga partnerů). Vykresluje renderPartnerLogos()
   v includes/site.php, uvnitř je komponenta `logo-carousel`.
   Bez dělicí linky nad pruhem – patička, loga i spodní lišta mají plynule
   navazovat, oddělují je jen mezery. */
.partner-logos {
  padding-top: 44px;
  padding-bottom: 48px;
  background: var(--color-footer-bg);
}

/* Šipky jsou hned pod logy, ne o 62 px níž jako uprostřed stránky. */
.partner-logos .carousel__controls--bottom {
  margin-top: 26px;
}

/* Spodní lišta úplně dole – podpis autora webu, text o dotaci, logo kraje.
   Volný obsah z editoru (Menu a patička → Pod patičkou), vykresluje
   renderFooterBottom() v includes/site.php. */
.footer-bottom {
  padding-top: 36px;
  padding-bottom: 44px;
  background: var(--color-footer-bg);
}

.footer-bottom__inner {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--color-text-soft-strong);
}

.footer-bottom__inner p {
  margin: 0;
}

.footer-bottom__inner p + p {
  margin-top: 14px;
}

.footer-bottom__inner a {
  color: var(--color-accent);
}

.footer-bottom__inner a:hover,
.footer-bottom__inner a:focus-visible {
  color: var(--color-beige);
}

/* Logo v liště (kraj, dotace) – z editoru chodí s width/height v atributech. */
.footer-bottom__inner img {
  display: block;
  height: auto;
  max-width: 100%;
  margin-inline: auto;
}

/* ==========================================================================
   13. Hero detailu
   ========================================================================== */

/* ZÁMĚRNĚ bez z-index: hero obaluje fixní navigaci (.hero-detail__nav).
   Jakýkoliv z-index tady vytvoří stacking kontext, navigace do něj spadne
   a začne ji překrývat každý blok s vyšším z-index (např. <main> = 3).
   Vrstvení uvnitř hero řeší __media / __content / __stats níže. */
.hero-detail {
  position: relative;
  height: clamp(720px, 82svh, 860px);
  min-height: clamp(720px, 82svh, 860px);
  overflow: visible;
}

.hero-detail__media {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  width: 100%;
  z-index: var(--z-hero-media);
  background:
    linear-gradient(rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.18) 30.67%, rgba(5, 16, 12, 0.18) 71.01%, rgba(5, 18, 13, 0.8)),
    url("../images/hero/desktop.jpeg") center center / cover no-repeat;
}

.hero-detail__inner {
  position: relative;
  min-height: inherit;
  height: inherit;
  width: min(100%, var(--wide-canvas-width));
  margin: 0 auto;
}

.hero-detail__nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(40px, 4vw, 88px);
  row-gap: 18px;
  align-items: start;
  padding: clamp(40px, 3.4vw, 58px) var(--detail-frame-edge) 36px;
  background: transparent;
  z-index: var(--z-nav);
  overflow: visible;
  transition: background-color var(--transition-fast);
}

body.page-detail.is-page-scrolled .hero-detail__nav {
  background: var(--color-bg);
}

/* Detail používá stejnou navigaci jako hero, jen ji přepíná na fixní layout. */
.hero-detail__nav .brand {
  position: relative;
  top: auto;
  left: auto;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  /* Původní posunutí loga níž: transform: translateY(calc(50% - 1px)); */
  transform: none;
}

.hero-detail .brand img {
  width: 100%;
  height: auto;
}

.brand--detail-inline {
  width: clamp(168px, 13vw, 220px);
}

.hero-detail__nav .hero-nav {
  position: relative;
  top: auto;
  right: auto;
  justify-self: end;
}

.hero-detail__nav .hero-nav--primary {
  grid-column: 2;
  grid-row: 1;
}

.hero-detail__nav .hero-nav--secondary {
  grid-column: 2;
  grid-row: 2;
}

.hero-detail__nav--secondary-only .hero-nav--primary {
  display: none;
}

.hero-detail__nav--secondary-only {
  grid-template-rows: auto;
  row-gap: 0;
  align-items: center;
  padding-top: clamp(22px, 2.1vw, 34px);
  padding-bottom: var(--si-nav-edge-gap);
}

/* Na desktopu si navigace nechává nahoře místo na lištu rychlých akcí, která
   v ní sedí absolutně na `top: 0` (viz .detail-floating-actions výš). Odstup
   od lišty je --si-nav-edge-gap, tedy tentýž jako pod logem – logo tak sedí
   přesně uprostřed pásu mezi lištou a spodní hranou navigace, ne někde mezi.

   Musí to být až tady, za výchozím paddingem obou variant navigace – stejná
   specificita, rozhoduje pořadí v souboru. Na mobilu se lišta odsazuje jinak
   (--detail-mobile-nav-top-offset), proto jen v tomhle média dotazu. */
@media (min-width: 769px) {
  .hero-detail__nav,
  .hero-detail__nav--secondary-only {
    padding-top: calc(var(--si-quick-actions-height) + var(--si-nav-edge-gap));
  }
}

.hero-detail__nav--secondary-only .brand {
  grid-row: 1;
}

.hero-detail__nav--secondary-only .hero-nav--secondary {
  grid-row: 1;
  align-self: center;
}

.page-detail .hero-detail__nav--secondary-only .mobile-nav-panel__list:not(.mobile-nav-panel__list--secondary) {
  display: none;
}

.page-detail .hero-detail__nav--secondary-only .mobile-nav-panel__list--secondary {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.hero-detail__nav .hero-nav--primary .hero-nav__list {
  gap: clamp(18px, 1.85vw, 35px);
}

.hero-detail__nav .hero-nav--secondary .hero-nav__list {
  gap: clamp(16px, 1.7vw, 32px);
}

/* Nadpis je navázaný na překrytý blok dispozic přes --detail-title-bottom. */
.hero-detail__content {
  position: absolute;
  left: clamp(28px, 3.9vw, 56px);
  bottom: var(--detail-title-bottom);
  max-width: none;
}

.display-title--detail {
  font-size: clamp(72px, 11svh, 104px);
  line-height: var(--detail-heading-line);
  color: var(--color-beige);
}

/* Překrytý blok dispozic pod hero fotkou. */
.hero-detail__stats {
  position: absolute;
  left: clamp(28px, 3.75vw, 54px);
  right: clamp(28px, 3.75vw, 54px);
  bottom: calc(var(--detail-stats-overlap) * -1);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--detail-stats-row-gap) clamp(8px, 0.9vw, 12px);
  z-index: var(--z-hero-stats);
}

.detail-stat {
  display: flex;
  align-items: center;
  min-height: var(--detail-stat-min-height);
  padding: clamp(11px, 1.45svh, 15px) clamp(16px, 1.65vw, 24px);
  background: rgba(2, 43, 31, 0.96);
}

.detail-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: clamp(12px, 1vw, 20px);
  color: rgba(62, 104, 86, 0.78);
}

.detail-stat__icon .icon-svg {
  width: clamp(24px, 1.85vw, 35px);
  height: clamp(24px, 1.85vw, 35px);
}

.detail-stat__icon img {
  width: clamp(24px, 1.85vw, 30px);
  height: clamp(24px, 1.85vw, 30px);
  object-fit: contain;
  opacity: 0.9;
}

/* Mřížka bločků má napevno 4 sloupce, takže na užších monitorech (cca pod
   1300 px) se nejdelší dvojice „Podlahová plocha / 177,99 m²“ vedle sebe
   nevejde. Bez `wrap` se pak láme obojí uprostřed („Podlahová / plocha“ +
   „177,99 / m²“). S `wrap` spadne pod popisek celá hodnota – stejně jako to
   dělá mobilní verze níž (tam je copy rovnou `flex-direction: column`). */
.detail-stat__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(10px, 0.85vw, 15px);
  min-width: 0;
}

.detail-stat__label {
  font-size: var(--detail-stat-size);
  line-height: var(--detail-copy-line);
  letter-spacing: 0;
  color: var(--color-text-high);
}

/* Hodnota je číslo s jednotkou – nesmí se rozpadnout na „177,99“ a „m²“
   na dvou řádcích. Popisek nowrap schválně nemá: na 320px displeji by se
   „Zastavěná plocha“ nevešla a přetekla by z bločku ven. */
.detail-stat__value {
  font-size: var(--detail-stat-size);
  line-height: var(--detail-copy-line);
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--color-accent);
}

.page-detail main {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--detail-stats-overlap) + var(--detail-title-stats-gap));
}

/* ==========================================================================
   14. Galerie a intro detailu
   ========================================================================== */

.page-detail .carousel__controls--bottom {
  margin-top: 40px;
}

.detail-gallery .carousel__controls--bottom {
  margin-top: 30px;
}

.detail-feature-section .carousel__controls--bottom.detail-feature-section__controls {
  width: 100%;
  justify-content: space-between;
  gap: 24px;
  padding-left: var(--detail-frame-edge);
}

.detail-feature-section__controls-link {
  flex: none;
  gap: 8px;
}

.detail-feature-section__controls-nav {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.carousel__track--detail-gallery {
  gap: 10px;
}

.detail-gallery__item {
  flex: 0 0 376px;
  margin: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.detail-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

.detail-gallery__item:nth-child(1) img {
  object-position: left center;
}

.detail-gallery__item:nth-child(2) img {
  object-position: center center;
}

.detail-gallery__item:nth-child(3) img {
  object-position: right center;
}

.detail-intro__grid {
  display: grid;
  grid-template-columns: 392px minmax(0, 1fr);
  gap: 96px;
  align-items: start;
}

.detail-intro__copy p {
  margin: 0;
  font-size: var(--detail-copy-regular-size);
  line-height: var(--detail-copy-regular-line);
  letter-spacing: 0;
  color: var(--color-text-body);
}

.detail-intro__copy p + p {
  margin-top: var(--detail-copy-gap-sm);
}

/* Varianta úvodu s velkým dvojbarevným nadpisem místo malého popisku. */
.detail-intro--heading .display-title--split {
  font-size: var(--detail-display-title-size);
  line-height: var(--detail-heading-line);
  margin: 0;
}

/* ==========================================================================
   15. Cenové programy detailu
   ========================================================================== */

.program-pricing__heading {
  margin-bottom: var(--detail-section-gap);
}

.program-pricing .display-title--split {
  font-size: var(--detail-display-title-size);
  line-height: var(--detail-heading-line);
}

/* Samostatný dvojbarevný nadpis – stejný vzhled/odsazení jako u ceníku */
.split-heading {
  width: 100%;
}

.page-detail .split-heading > .container--contained {
  width: min(100%, var(--wide-canvas-width));
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--detail-frame-gutter);
}

.split-heading__inner {
  margin-bottom: 0;
}

.split-heading .display-title--split {
  font-size: var(--detail-display-title-size);
  line-height: var(--detail-heading-line);
  margin: 0;
}

.program-pricing__grid {
  display: grid;
  /* Počet karet posílá blok jako --program-count; přes proměnnou proto,
     aby responzivní pravidla níž šla přebít (inline styl se přebít nedá). */
  grid-template-columns: repeat(var(--program-count, 3), minmax(0, 1fr));
  gap: 8px;
}

.program-card {
  --program-muted: var(--color-program-muted-primary);
  display: flex;
  flex-direction: column;
  min-height: 403px;
  padding: 36px;
  background: var(--color-surface-primary);
}

/* Bez ceny i tlačítka nemá karta co držet na výšku – jinak by pod textem
   zůstal prázdný pruh do 403 px. */
.program-card--no-footer {
  min-height: auto;
}

.program-pricing__grid .program-card:nth-child(1) {
  background: var(--color-surface-primary);
  --program-muted: var(--color-program-muted-primary);
}

.program-pricing__grid .program-card:nth-child(2) {
  background: var(--color-surface-secondary);
  --program-muted: var(--color-program-muted-secondary);
}

.program-pricing__grid .program-card:nth-child(3) {
  background: var(--color-surface-tertiary);
  --program-muted: var(--color-program-muted-tertiary);
}

.program-card__eyebrow {
  margin: 0;
  font-size: var(--detail-label-size);
  line-height: var(--detail-copy-line);
  letter-spacing: 0;
  color: var(--program-muted);
}

.program-card__title {
  margin: 10px 0 0;
  font-size: var(--detail-section-title-size);
  line-height: var(--detail-heading-line);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-beige);
}

.program-card__description {
  max-width: none;
  margin: var(--detail-copy-gap) 0 0;
  font-size: var(--detail-copy-regular-size);
  line-height: var(--detail-copy-line);
  letter-spacing: 0;
  color: var(--color-text-strong);
}

/* Cena a tlačítko drží u spodní hrany karty, ať jsou zarovnané napříč
   programy bez ohledu na délku popisu. */
.program-card__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
}

.program-card__pricing {
  margin-top: var(--detail-copy-gap);
}

.program-card__price {
  margin: 0;
  font-size: var(--detail-card-title-size);
  line-height: var(--detail-heading-line);
  letter-spacing: 0;
  font-weight: 400;
  color: var(--color-beige);
}

.program-card__price-note {
  margin: var(--detail-meta-gap) 0 0;
  font-size: var(--detail-copy-regular-size);
  line-height: var(--detail-copy-line);
  letter-spacing: 0;
  color: var(--program-muted);
}

.program-card__button {
  --button-border-color: rgba(245, 237, 214, 0.85);
  align-self: flex-start;
  min-width: 208px;
  min-height: 43px;
  margin-top: var(--detail-copy-gap);
  padding: 11px 20px;
  font-size: var(--detail-ui-size);
  letter-spacing: 0;
}

.program-card__button .icon-svg {
  width: 14px;
  height: 14px;
}

.program-pricing__cta {
  --cta-title-col: 288px;
  display: grid;
  grid-template-columns: var(--cta-title-col) minmax(0, 1fr) auto;
  align-items: center;
  gap: 36px;
  margin-top: 8px;
  padding: 34px;
  background: var(--color-surface-emphasis);
}

.program-pricing__cta-title {
  margin: 0;
  font-size: var(--detail-card-title-size);
  line-height: var(--detail-heading-line);
  letter-spacing: 0;
  color: var(--color-beige);
}

/* Šířka se drží čitelné délky řádku, ne pevných pixelů – na širokém monitoru
   měl prostřední sloupec přes 1000 px, ale text se lámal už na 500 px. */
.program-pricing__cta-copy {
  max-width: 72ch;
  margin: 0;
  font-size: var(--detail-copy-compact-size);
  line-height: var(--detail-copy-compact-line);
  letter-spacing: 0;
  color: var(--color-text-strong);
}

.program-pricing__cta-copy span {
  color: var(--color-accent);
}

.button--light.program-pricing__cta-button {
  --button-bg: var(--color-button-light-bg);
  --button-color: var(--color-button-light-text);
  --button-hover-color: var(--color-button-light-bg);
  --button-hover-border-color: var(--color-button-light-bg);
  min-width: 210px;
  min-height: 44px;
  padding: 11px 20px;
  font-size: var(--detail-ui-size);
  letter-spacing: 0;
}

.button--light.program-pricing__cta-button .icon-svg {
  width: 14px;
  height: 14px;
}

.button--light {
  --button-bg: var(--color-beige);
  --button-color: var(--color-green);
  --button-border-color: var(--color-beige);
  --button-hover-bg: transparent;
  --button-hover-color: var(--color-beige);
  --button-hover-border-color: var(--color-beige);
}

.button--compact {
  min-height: 44px;
  padding: 10px 22px;
}

/* ==========================================================================
   16. Textové sloupce a obsah ceny
   ========================================================================== */

.page-detail .detail-columns .container--contained {
  width: min(100%, var(--wide-canvas-width));
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--detail-frame-gutter);
}

.detail-columns__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 52px;
}

.detail-copy-card {
  max-width: none;
}

/* Nadpis i text vyplní celou polovinu mřížky. Dřív měly pevný strop (520 a
   560 px) – na širokých monitorech sloupec rostl dál, ale text se zastavil,
   takže mezi sloupci zůstávala prázdná mezera. Šířku už drží jen mřížka
   (max. --wide-canvas-width). */
.detail-copy-card__title {
  max-width: none;
  margin: 0 0 var(--detail-copy-gap);
  font-size: var(--detail-section-title-size);
  line-height: var(--detail-heading-line);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-beige);
}

.detail-copy-card__title span {
  color: var(--color-accent);
}

.detail-copy-card__body {
  max-width: none;
  margin: 0;
  font-size: var(--detail-copy-regular-size);
  line-height: var(--detail-copy-regular-line);
  letter-spacing: 0;
  color: var(--color-text-strong);
}

.detail-copy-card__cta {
  margin-top: var(--detail-copy-gap);
  gap: 10px;
  font-size: var(--detail-ui-size);
  letter-spacing: 0;
}

.page-detail .detail-copy-card__cta:hover,
.page-detail .detail-copy-card__cta:focus-visible {
  opacity: 1;
}

.detail-copy-card__cta .icon-svg {
  width: 18px;
  height: 18px;
}

.detail-inclusions__heading {
  max-width: 860px;
  margin-bottom: var(--detail-section-gap-lg);
}

.detail-inclusions__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 42px;
}

.detail-inclusion {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.detail-inclusion__icon {
  flex: none;
  color: var(--color-accent);
}

.detail-inclusion__icon .icon-svg {
  width: 20px;
  height: 20px;
}

.detail-inclusion p {
  margin: 0;
  font-size: var(--detail-copy-compact-size);
  line-height: var(--detail-copy-compact-line);
  letter-spacing: 0;
}

/* ==========================================================================
   17. Porovnávací CTA blok
   ========================================================================== */

.program-comparator {
  position: relative;
  min-height: 378px;
}

/* Fotku na pozadí přepíše administrace inline `background-image` na tomhle
   divu – proto je ztmavovací přechod ve vlastní proměnné, aby ho inline styl
   jen zopakoval a nemusel ho znovu vypisovat. (Cesta z administrace nesmí jít
   přes url() v proměnné: prohlížeč by ji počítal vůči assets/css/, ne vůči
   stránce.) Bez vyplněné fotky platí výchozí katalogová. */
.program-comparator__media {
  --comparator-scrim: linear-gradient(90deg, rgba(7, 22, 16, 0.76) 0%, rgba(7, 22, 16, 0.18) 100%);
  position: absolute;
  inset: 0;
  background:
    var(--comparator-scrim),
    url("../images/catalog-background.jpg") center center / cover no-repeat;
}

.program-comparator__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 378px;
  padding-top: 68px;
  padding-bottom: 68px;
}

.program-comparator__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 72px;
  width: 100%;
}

.program-comparator__content {
  max-width: 50%;
}

.program-comparator__content .display-title {
  white-space: nowrap;
}

/* Text bloku je formátovatelný v editoru, obal proto není <p> – musí ale
   dostat stejnou typografii i odsazení. Totéž u .testimonials__summary
   a .feature-badge-card níže. */
.program-comparator__content > .rich-text,
.program-comparator__content p {
  margin: var(--detail-copy-gap) 0 0;
  font-size: var(--detail-copy-compact-size);
  line-height: var(--detail-copy-compact-line);
  letter-spacing: 0;
  color: var(--color-beige);
}

.program-comparator__action {
  display: flex;
  align-items: center;
}

.program-comparator__button {
  width: 224px;
  min-width: 0;
}

/* ==========================================================================
   18. Reference a recenze
   ========================================================================== */

.testimonials__intro {
  display: grid;
  grid-template-columns: 322px minmax(0, 1fr);
  gap: 66px;
  align-items: start;
  margin-bottom: 85px;
}

.testimonials__title {
  font-size: var(--detail-display-title-size);
  line-height: var(--detail-heading-line);
  color: var(--color-beige);
}

.testimonials__summary {
  padding-top: 10px;
}

.testimonials__summary > .rich-text,
.testimonials__summary p {
  max-width: 696px;
  margin: 0;
  font-size: var(--detail-copy-regular-size);
  line-height: var(--detail-copy-line);
  letter-spacing: 0;
  color: var(--color-text-strong);
}

.rating-summary-list {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  margin-top: 34px;
}

.rating-summary {
  display: inline-flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--color-beige);
}

.rating-summary__logo {
  flex: none;
  height: 33px;
  width: auto;
}

.rating-summary__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rating-summary__stars {
  width: 76px;
  height: 12px;
  display: block;
}

.rating-summary__action {
  margin-top: 8px;
  font-size: var(--detail-ui-size);
  line-height: var(--detail-copy-line);
  letter-spacing: 0;
  color: var(--color-accent);
}

.carousel__track--reviews {
  gap: 10px;
  width: auto;
}

.review-card {
  display: flex;
  flex-direction: column;
  /* Širší karta – delší recenze se dřív lámaly do úzkého a hodně vysokého
     sloupce. Mobilní varianty (od 768 px dolů) si drží vlastní flex-basis
     níže v media queries, tenhle strop platí pro desktop. */
  flex: 0 0 570px;
  min-height: 274px;
  padding: 52px 36px 30px;
  background: var(--color-surface-card);
}

.review-card__name {
  margin: 0;
  font-size: var(--detail-small-title-size);
  line-height: var(--detail-heading-line);
  font-weight: 400;
  color: var(--color-beige);
}

.review-card__place {
  margin: var(--detail-meta-gap) 0 0;
  font-size: var(--detail-copy-regular-size);
  line-height: var(--detail-copy-line);
  letter-spacing: 0;
  color: var(--color-brand-green-soft);
}

.review-card__text {
  margin: var(--detail-section-gap) 0 0;
  font-size: var(--detail-copy-regular-size);
  line-height: var(--detail-copy-line);
  letter-spacing: 0;
  color: var(--color-text-high);
}

.review-card__score {
  margin: var(--detail-copy-gap) 0 0;
  font-size: var(--detail-ui-size);
  line-height: var(--detail-copy-line);
  letter-spacing: 0;
  color: var(--color-beige);
}

.review-card__score span {
  font-size: var(--detail-ui-size);
  vertical-align: 1px;
  color: var(--color-beige);
}

/* ==========================================================================
   19. Důvody a video carousel
   ========================================================================== */

.detail-feature-section__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: var(--detail-section-gap);
}

.carousel__track--reasons {
  gap: 10px;
}

.feature-badge-card {
  flex: 0 0 368px;
  min-height: 210px;
  padding: 36px 34px 42px;
  background: var(--color-surface-primary);
}

.feature-badge-card__head {
  display: grid;
  grid-template-columns: 51px minmax(0, 1fr);
  gap: 38px;
  align-items: start;
}

.feature-badge-card__icon {
  width: 51px;
  height: 56px;
  object-fit: contain;
}

.feature-badge-card--plain .feature-badge-card__head {
  display: block;
}

/* Šířku nadpisu drží místo, které v kartě opravdu je: u varianty s ikonou
   sloupec gridu, jinak celá karta. Pevný strop titulek lámal dřív, než na
   něj místo došlo – v adminu si nadpis píše redaktor, ne makety. */
.feature-badge-card h3 {
  margin: 0;
  font-size: var(--detail-card-title-size);
  line-height: var(--detail-heading-line);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-beige);
}

.feature-badge-card h3 span {
  color: var(--color-accent);
}

.feature-badge-card > .rich-text,
.feature-badge-card p {
  margin: var(--detail-copy-gap) 0 0;
  font-size: var(--detail-copy-compact-size);
  line-height: var(--detail-copy-compact-line);
  letter-spacing: 0;
  color: var(--color-text-high);
}

/* Karta bez panelu – blok detail-feature-section-plain. Bez pozadí nemá
   vnitřní odsazení co odsazovat: jen by text uvnitř první karty nesedělo na
   popisek sekce nad ním. Rozestup mezi kartami proto přebírá mezera v tracku
   (níž) a karta je o kus širší, takže text má stejně místa jako dřív.
   Vyšší specificita (.page-detail .feature-badge-card…) je kvůli mobilním
   pravidlům, která odsazení karet nastavují znovu. */
.feature-badge-card--bare,
.page-detail .feature-badge-card.feature-badge-card--bare {
  padding: 0;
  background: none;
}

.feature-badge-card--bare {
  flex-basis: 404px;
}

.detail-feature-section--plain .carousel__track--reasons {
  gap: clamp(28px, 3vw, 48px);
}

.carousel__track--videos {
  gap: 10px;
}

.video-card {
  flex: 0 0 384px;
  display: block;
}

.video-card__thumb {
  position: relative;
  display: block;
  overflow: hidden;
}

.video-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.22));
}

.video-card__thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-fast);
}

.video-card__play .icon-svg {
  width: 58px;
  height: 58px;
}

.video-card:hover .video-card__play,
.video-card:focus-visible .video-card__play {
  transform: translate(-50%, -50%) scale(0.9);
}

.video-card__title-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.video-card h3 {
  margin: 0;
  font-size: var(--detail-small-title-size);
  line-height: var(--detail-heading-line);
  font-weight: 400;
  position: relative;
  padding-bottom: 3px;
}

.video-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-fast);
}

.video-card:hover h3::after,
.video-card:focus-visible h3::after {
  transform: scaleX(1);
}

.video-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.video-card__arrow img {
  width: 16px;
  height: 16px;
  display: block;
}

/* ==========================================================================
   20. CTA pro prohlídku
   ========================================================================== */

.tour-cta {
  width: 100%;
  background: var(--color-surface-cta);
}

.page-detail .tour-cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 30vw);
  align-items: stretch;
  gap: clamp(32px, 3.5vw, 86px);
  width: min(100%, var(--wide-canvas-width));
  max-width: none;
  min-height: 402px;
  margin-inline: auto;
  padding-inline: var(--detail-frame-gutter);
  background: transparent;
  overflow: visible;
}

.tour-cta__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 860px;
  padding: 54px 0 56px;
  align-self: stretch;
}

.tour-cta__copy .section-label--tour {
  max-width: 900px;
  margin-bottom: var(--detail-section-gap-lg);
}

.tour-cta__media {
  position: relative;
  align-self: stretch;
  overflow: visible;
}

.tour-cta__media img {
  position: absolute;
  right: clamp(6px, 1.25vw, 22px);
  bottom: 0;
  width: clamp(405px, 29vw, 430px);
  max-width: none;
  height: auto;
  transform: none;
  transform-origin: bottom right;
}

.tour-cta .button--filled {
  min-width: 0;
  min-height: 44px;
  padding: 10px 22px;
  font-size: var(--detail-ui-size);
  letter-spacing: 0;
}

.mobile-nav-toggle,
.mobile-nav-panel {
  display: none;
}

/* ==========================================================================
   21. Responsivní pravidla detailu
   ========================================================================== */

@media (max-width: 1279px) {
  body.page-detail {
    min-width: 0;
  }

  .page-detail {
    --detail-frame-gutter: clamp(24px, 3.5vw, 44px);
    --detail-frame-edge: max(var(--detail-frame-gutter), calc((100vw - var(--wide-canvas-width)) / 2 + var(--detail-frame-gutter)));
    --detail-space-lg: 164px;
    --detail-space-sm: 56px;
  }
}

@media (max-width: 1200px) {
  /* Tablet / menší desktop: zachová sloupce, jen zmenší mezery a karty. */
  .page-detail {
    --detail-frame-gutter: clamp(22px, 3vw, 36px);
    --detail-space-lg: 156px;
  }

  .page-detail .hero-detail__nav {
    column-gap: 32px;
    row-gap: 14px;
  }

  .page-detail .brand--detail-inline {
    width: clamp(156px, 14vw, 188px);
  }

  .page-detail .hero-detail__nav .hero-nav--primary .hero-nav__list {
    gap: clamp(14px, 1.35vw, 20px);
  }

  .page-detail .hero-detail__nav .hero-nav--secondary .hero-nav__list {
    gap: clamp(12px, 1.25vw, 18px);
  }

  .page-detail .display-title--detail {
    font-size: clamp(68px, 8vw, 90px);
  }

  .page-detail .detail-intro__grid {
    grid-template-columns: minmax(260px, 30%) minmax(0, 1fr);
    gap: 56px;
  }

  .page-detail .program-comparator__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
  }

  .page-detail .program-comparator__content {
    max-width: 60%;
  }

  .page-detail .program-card {
    padding: 30px;
  }

  .page-detail .program-card__description {
    max-width: none;
  }

  .page-detail .program-pricing__cta {
    --cta-title-col: 260px;
    grid-template-columns: var(--cta-title-col) minmax(0, 1fr) auto;
    gap: 28px;
  }

  .page-detail .detail-columns__grid {
    gap: 40px;
  }

  .page-detail .contact-split__grid {
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 64px;
  }
}

@media (max-width: 1024px) {
  /* Větší tablet: zmenší hero a karty před přepnutím na mobilní navigaci. */
  .page-detail {
    --detail-frame-gutter: 24px;
    --detail-space-lg: 128px;
    --detail-display-title-size: 48px;
    --detail-section-title-size: 34px;
    --detail-nav-size: 14px;
    --detail-stat-size: 14px;
  }

  .page-detail .hero-detail {
    height: 640px;
    min-height: 640px;
  }

  .page-detail .hero-detail__nav {
    column-gap: 24px;
  }

  .page-detail .brand--detail-inline {
    width: 150px;
  }

  .page-detail .hero-nav__list a,
  .page-detail .hero-nav__dropdown-trigger {
    font-size: var(--detail-nav-size);
    letter-spacing: 0;
  }

  .page-detail .hero-detail__nav .hero-nav--primary .hero-nav__list,
  .page-detail .hero-detail__nav .hero-nav--secondary .hero-nav__list {
    gap: 12px;
  }

  .page-detail .display-title--detail {
    font-size: clamp(62px, 8vw, 80px);
  }

  /* Nadpis detail-intro sedí v úzkém sloupci (od 1200 px níž minmax(260px, 30%)),
     takže dlouhé jednoslovné popisky – „KARLOVARSKÉ" na /nasi-partneri – se do
     něj ve 40px řezu nevejdou. Titulkový token je tady 34 px a nejdelší z nich
     v něm zbývá ještě pár pixelů rezervy. */
  .page-detail .detail-intro .section-label {
    font-size: var(--detail-section-title-size);
  }

  .page-detail .hero-detail__content {
    bottom: var(--detail-title-bottom);
  }

  .page-detail .detail-stat {
    padding: 10px 12px;
  }

  .page-detail .detail-stat__icon {
    margin-right: 10px;
  }

  .page-detail .detail-stat__icon .icon-svg,
  .page-detail .detail-stat__icon img {
    width: 24px;
    height: 24px;
  }

  .page-detail .detail-stat__copy {
    gap: 8px;
  }

  .page-detail .detail-stat__label,
  .page-detail .detail-stat__value {
    font-size: var(--detail-stat-size);
  }

  .page-detail .detail-gallery__item {
    flex-basis: 320px;
  }

  .page-detail .detail-gallery__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
  }

  /* Tablet na výšku: čtyři programy vedle sebe vyjdou na sloupec kolem 170 px
     a nadpis karty („K dokončení") z ní vyteče. Na jeden sloupec je ještě
     brzy, tak se karty zalomí do mřížky 2×2. */
  .page-detail .program-pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-detail .program-card {
    min-height: auto;
    padding: 24px;
  }

  .page-detail .program-card__description,
  .page-detail .program-card__price-note {
    font-size: var(--detail-copy-regular-size);
  }

  .page-detail .program-card__button {
    min-width: 0;
    padding-inline: 18px;
  }

  .page-detail .program-pricing__cta {
    --cta-title-col: 220px;
    grid-template-columns: var(--cta-title-col) minmax(0, 1fr) auto;
    gap: 24px;
    padding: 28px;
  }

  .page-detail .detail-inclusions__grid {
    gap: 34px 28px;
  }

  .page-detail .testimonials__intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    margin-bottom: 64px;
  }

  .page-detail .rating-summary-list {
    flex-wrap: wrap;
    gap: 24px;
  }

  .page-detail .feature-badge-card {
    flex-basis: 320px;
  }

  .page-detail .video-card {
    flex-basis: 320px;
  }

  .page-detail .video-card__thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .page-detail .tour-cta__media img {
    width: 360px;
  }

  .page-detail .contact-split__grid {
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 48px;
  }

  /* Odsazení patičky je stejné jako v základu, mění se jen mřížka sloupců. */
  .page-detail .footer-global__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 40px;
  }
}

@media (max-width: 920px) {
  body.page-detail.is-menu-open {
    overflow: hidden;
  }

  .page-detail .hero-detail__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 20px;
  }

  .page-detail .hero-detail__nav--secondary-only {
    box-sizing: border-box;
    height: 84px;
  }

  .page-detail .hero-detail__nav .brand {
    z-index: 62;
    align-self: center;
    transform: none;
  }

  .page-detail .brand--detail-inline {
    width: 148px;
  }

  .page-detail .hero-detail__nav .hero-nav {
    display: none;
  }

  .page-detail .mobile-nav-toggle {
    position: relative;
    z-index: 62;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    color: var(--color-beige);
    cursor: pointer;
  }

  body.page-detail.is-menu-open .mobile-nav-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
  }

  .page-detail .mobile-nav-toggle__line {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    transform-origin: center;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
  }

  .page-detail .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .page-detail .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__line:nth-child(2) {
    opacity: 0;
  }

  .page-detail .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .page-detail .mobile-nav-panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: block;
    padding: 96px 20px 36px;
    overflow-y: auto;
    background: rgba(6, 30, 22, 0.98);
  }

  .page-detail .mobile-nav-panel[hidden] {
    display: none;
  }

  .page-detail .mobile-nav-panel__nav {
    width: min(100%, 520px);
    margin-inline: auto;
  }

  .page-detail .mobile-nav-panel__list,
  .page-detail .mobile-nav-panel__sublist {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .page-detail .mobile-nav-panel__list {
    display: grid;
    gap: 18px;
  }

  .page-detail .mobile-nav-panel__list--secondary {
    margin-top: 36px;
    padding-top: 34px;
    border-top: 1px solid var(--color-line-strong);
  }

  .page-detail .mobile-nav-panel__list a,
  .page-detail .mobile-nav-panel__group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    font-size: var(--detail-mobile-nav-size);
    line-height: var(--detail-copy-line);
    letter-spacing: 0;
    color: var(--color-beige);
  }

  .page-detail .mobile-nav-panel__group-toggle {
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
  }

  .page-detail .mobile-nav-panel__list--secondary > li > a,
  .page-detail .mobile-nav-panel__group-toggle {
    font-size: var(--detail-mobile-nav-group-size);
    color: var(--color-text-soft-strong);
  }

  .page-detail .mobile-nav-panel__group {
    display: grid;
  }

  .page-detail .mobile-nav-panel__group-label {
    display: inline-flex;
    align-items: center;
  }

  /* Stejná šipka jako u FAQ akordeonu – icon('chevron') v oranžové, překlopená
     při rozbalení. Šířka 44px je schválně stejná jako u .mobile-nav-toggle:
     oba boxy končí na stejné hraně (odsazení panelu), takže se šipka svisle
     trefí přesně pod křížek, kterým se menu zavírá. */
  .page-detail .mobile-nav-panel__group-arrow {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    color: var(--color-accent);
    transform: none;
    transform-origin: center;
    transition: transform var(--transition-fast);
  }

  .page-detail .mobile-nav-panel__group-toggle[aria-expanded="true"] .mobile-nav-panel__group-arrow {
    transform: rotate(180deg);
  }


  .page-detail .mobile-nav-panel__sublist-wrap {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    transition:
      grid-template-rows var(--transition-fast),
      margin-top var(--transition-fast),
      opacity var(--transition-fast);
  }

  .page-detail .mobile-nav-panel__group-toggle[aria-expanded="true"] + .mobile-nav-panel__sublist-wrap {
    grid-template-rows: 1fr;
    margin-top: 14px;
    opacity: 1;
  }

  .page-detail .mobile-nav-panel__sublist {
    display: grid;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
    padding-left: 18px;
  }

  .page-detail .mobile-nav-panel__sublist a {
    justify-content: flex-start;
    font-size: var(--detail-mobile-nav-sub-size);
    color: rgba(245, 237, 214, 0.68);
  }
}

@media (max-width: 768px) {
  /* Mobil: skryje desktopovou navigaci, zapne mobilní menu a skládá bloky pod sebe. */
  body.page-detail.is-menu-open {
    overflow: hidden;
  }

  .page-detail {
    --detail-frame-gutter: 20px;
    --detail-frame-edge: 20px;
    --detail-stats-overlap: 220px;
    --detail-space-lg: 88px;
    --detail-space-sm: 48px;
    --detail-mobile-floating-actions-safe-top: env(safe-area-inset-top, 0px);
    --detail-mobile-floating-actions-height: 40px;
    --detail-mobile-floating-actions-gap: 8px;
    --detail-mobile-nav-top-offset: calc(
      var(--detail-mobile-floating-actions-safe-top) +
      var(--detail-mobile-floating-actions-height) +
      var(--detail-mobile-floating-actions-gap)
    );
    --detail-mobile-nav-size: 28px;
    --detail-mobile-nav-group-size: 20px;
    --detail-mobile-nav-sub-size: 17px;
    --detail-display-title-size: 40px;
    --detail-showcase-title-size: 32px;
    --detail-section-title-size: 28px;
    --detail-card-title-size: 19px;
  }

  .page-detail .button {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .page-detail .section-label {
    font-size: var(--detail-section-title-size);
    line-height: var(--detail-heading-line);
    letter-spacing: 0;
  }

  .page-detail .hero-detail {
    height: 560px;
    min-height: 560px;
  }

  .page-detail .hero-detail__media {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.16) 30.67%, rgba(5, 16, 12, 0.2) 71.01%, rgba(5, 18, 13, 0.86)),
      url("../images/hero/mobil-v2.jpg");
    background-position: center center;
  }

  .page-detail .hero-detail__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: var(--detail-mobile-nav-top-offset) 20px var(--detail-mobile-floating-actions-gap);
  }

  .page-detail .hero-detail__nav--secondary-only {
    box-sizing: border-box;
    height: calc(var(--detail-mobile-nav-top-offset) + 44px + var(--detail-mobile-floating-actions-gap));
  }

  .page-detail .hero-detail__nav .brand {
    z-index: 62;
    align-self: center;
    transform: none;
  }

  .page-detail .brand--detail-inline {
    width: 148px;
  }

  .page-detail .hero-detail__nav .hero-nav {
    display: none;
  }

  .page-detail .mobile-nav-toggle {
    position: relative;
    z-index: 62;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    color: var(--color-beige);
    cursor: pointer;
  }

  body.page-detail.is-menu-open .mobile-nav-toggle {
    position: fixed;
    top: var(--detail-mobile-nav-top-offset);
    right: 20px;
  }

  /* Lišta sedí nad navigací – navigace má na scrollu plné pozadí a začíná
     také na top: 0 (dolů ji odsazuje --detail-mobile-nav-top-offset). */
  .page-detail .detail-floating-actions {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-floating-actions);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    padding-top: var(--detail-mobile-floating-actions-safe-top);
    background: rgba(6, 30, 22, 0.74);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.page-detail.is-menu-open .detail-floating-actions {
    opacity: 0;
    pointer-events: none;
  }

  .page-detail .detail-floating-actions__button {
    min-width: 0;
    min-height: var(--detail-mobile-floating-actions-height);
    padding: 7px 8px;
    border-width: 0;
    justify-content: center;
    font-size: 11px;
    line-height: 1.15;
    letter-spacing: 0;
    box-shadow: none;
  }

  /* Na mobilu se plovoucí tlačítko stěhuje pod obsah – nahoře by leželo přes
     nadpis stránky a navíc by muselo obcházet lištu akcí detailu domu. */
  .sticky-form-cta {
    top: auto;
    right: 20px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .sticky-form-cta.is-hidden {
    transform: translateY(8px);
  }

  .sticky-form-cta__button {
    width: 100%;
  }

  body.page-detail.is-menu-open .sticky-form-cta {
    opacity: 0;
    pointer-events: none;
  }

  .page-detail .mobile-nav-toggle__line {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    transform-origin: center;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
  }

  .page-detail .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .page-detail .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__line:nth-child(2) {
    opacity: 0;
  }

  .page-detail .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .page-detail .mobile-nav-panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: block;
    padding: calc(var(--detail-mobile-nav-top-offset) + 76px) 20px 36px;
    overflow-y: auto;
    background: rgba(6, 30, 22, 0.98);
  }

  .page-detail .mobile-nav-panel[hidden] {
    display: none;
  }

  .page-detail .mobile-nav-panel__nav {
    width: min(100%, 520px);
    margin-inline: auto;
  }

  .page-detail .mobile-nav-panel__list,
  .page-detail .mobile-nav-panel__sublist {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .page-detail .mobile-nav-panel__list {
    display: grid;
    gap: 18px;
  }

  .page-detail .mobile-nav-panel__list--secondary {
    margin-top: 36px;
    padding-top: 34px;
    border-top: 1px solid var(--color-line-strong);
  }

  .page-detail .mobile-nav-panel__list a,
  .page-detail .mobile-nav-panel__group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    font-size: var(--detail-mobile-nav-size);
    line-height: var(--detail-copy-line);
    letter-spacing: 0;
    color: var(--color-beige);
  }

  .page-detail .mobile-nav-panel__group-toggle {
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
  }

  .page-detail .mobile-nav-panel__list--secondary > li > a,
  .page-detail .mobile-nav-panel__group-toggle {
    font-size: var(--detail-mobile-nav-group-size);
    color: var(--color-text-soft-strong);
  }

  .page-detail .mobile-nav-panel__group {
    display: grid;
  }

  .page-detail .mobile-nav-panel__group-label {
    display: inline-flex;
    align-items: center;
  }

  /* Stejná šipka jako u FAQ akordeonu – icon('chevron') v oranžové, překlopená
     při rozbalení. Šířka 44px je schválně stejná jako u .mobile-nav-toggle:
     oba boxy končí na stejné hraně (odsazení panelu), takže se šipka svisle
     trefí přesně pod křížek, kterým se menu zavírá. */
  .page-detail .mobile-nav-panel__group-arrow {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    color: var(--color-accent);
    transform: none;
    transform-origin: center;
    transition: transform var(--transition-fast);
  }

  .page-detail .mobile-nav-panel__group-toggle[aria-expanded="true"] .mobile-nav-panel__group-arrow {
    transform: rotate(180deg);
  }


  .page-detail .mobile-nav-panel__sublist-wrap {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    transition:
      grid-template-rows var(--transition-fast),
      margin-top var(--transition-fast),
      opacity var(--transition-fast);
  }

  .page-detail .mobile-nav-panel__group-toggle[aria-expanded="true"] + .mobile-nav-panel__sublist-wrap {
    grid-template-rows: 1fr;
    margin-top: 14px;
    opacity: 1;
  }

  .page-detail .mobile-nav-panel__sublist {
    display: grid;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
    padding-left: 18px;
  }

  .page-detail .mobile-nav-panel__sublist a {
    justify-content: flex-start;
    font-size: var(--detail-mobile-nav-sub-size);
    color: rgba(245, 237, 214, 0.68);
  }

  .page-detail .hero-detail__content {
    left: 20px;
    bottom: 130px;
  }

  .page-detail .display-title--detail {
    font-size: clamp(52px, 16vw, 72px);
    line-height: var(--detail-heading-line);
  }

  .page-detail .hero-detail__stats {
    left: 20px;
    right: 20px;
    bottom: calc(var(--detail-stats-overlap) * -1 + 30px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-detail .detail-stat {
    min-height: 54px;
    padding: 12px;
  }

  .page-detail .detail-stat__icon {
    margin-right: 10px;
  }

  .page-detail .detail-stat__copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .page-detail main {
    padding-top: calc(var(--detail-stats-overlap) + 36px);
  }

  .page-detail .carousel__viewport {
    padding-left: 20px;
    padding-right: 0;
  }

  .page-detail .carousel__controls--bottom {
    padding-right: 20px;
    margin-top: 28px;
  }

  .page-detail .detail-feature-section__controls {
    gap: 16px;
  }

  .page-detail .detail-gallery__item {
    flex-basis: min(376px, calc(100vw - 40px));
  }

  .page-detail .detail-gallery__item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .page-detail .detail-intro__grid,
  .page-detail .program-pricing__grid,
  .page-detail .detail-columns__grid,
  .page-detail .testimonials__intro,
  .page-detail .contact-split__grid {
    grid-template-columns: 1fr;
  }

  .page-detail .detail-intro__grid {
    gap: 24px;
  }

  .page-detail .program-pricing__heading {
    margin-bottom: 28px;
  }

  .page-detail .program-card {
    padding: 28px;
  }

  .page-detail .program-card__button {
    align-self: flex-start;
  }

  .page-detail .program-pricing__cta {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px;
  }

  .page-detail .program-pricing__cta-title br,
  .page-detail .program-pricing__cta-copy br {
    display: none;
  }

  .page-detail .detail-columns__grid {
    gap: 36px;
  }

  .page-detail .detail-inclusions__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 22px;
  }

  .page-detail .program-comparator {
    min-height: auto;
  }

  .page-detail .program-comparator__inner {
    min-height: 320px;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .page-detail .program-comparator__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .page-detail .program-comparator__content {
    max-width: none;
  }

  .page-detail .program-comparator__content .display-title {
    white-space: normal;
  }

  .page-detail .testimonials__intro {
    gap: 24px;
    margin-bottom: 44px;
  }

  .page-detail .testimonials__summary {
    padding-top: 0;
  }

  .page-detail .rating-summary-list {
    gap: 20px;
    margin-top: 28px;
  }

  .page-detail .detail-feature-section__intro {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 28px;
  }

  .page-detail .review-card {
    flex-basis: min(380px, calc(100vw - 40px));
    min-height: 254px;
    padding: 40px 28px 26px;
  }

  .page-detail .feature-badge-card {
    flex-basis: min(368px, calc(100vw - 40px));
    min-height: 0;
    padding: 28px 24px 32px;
  }

  .page-detail .feature-badge-card__head {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 22px;
  }

  .page-detail .feature-badge-card--plain .feature-badge-card__head {
    display: block;
  }

  .page-detail .feature-badge-card__icon {
    width: 44px;
    height: 48px;
  }

  .page-detail .video-card {
    flex-basis: min(384px, calc(100vw - 40px));
  }

  .page-detail .tour-cta__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .page-detail .tour-cta__copy {
    padding: 48px 0;
  }

  .page-detail .tour-cta__media {
    display: none;
  }

  .page-detail .contact-split__grid {
    gap: 34px;
  }

  .page-detail .contact-split__address {
    margin-top: 36px;
  }

  .page-detail .contact-form {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-detail .contact-form__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .page-detail .catalog-order-form__form {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  /* Úzké telefony: menší okraje a akční tlačítka přes celou šířku. */
  .page-detail {
    --detail-frame-gutter: 16px;
    --detail-frame-edge: 16px;
    --detail-stats-overlap: 222px;
    --detail-space-lg: 72px;
    --detail-space-sm: 40px;
    --detail-mobile-floating-actions-height: 38px;
    --detail-mobile-floating-actions-gap: 8px;
    --detail-display-title-size: 32px;
    --detail-section-title-size: 22px;
    --detail-card-title-size: 18px;
    --detail-small-title-size: 18px;
    --detail-mobile-nav-size: 24px;
    --detail-mobile-nav-group-size: 18px;
    --detail-mobile-nav-sub-size: 16px;
    --detail-stat-size: 13px;
  }

  .page-detail .hero-detail {
    height: 520px;
    min-height: 520px;
  }

  .page-detail .hero-detail__media {
    background-position: 48% center;
  }

  .page-detail .hero-detail__nav {
    padding: var(--detail-mobile-nav-top-offset) 16px var(--detail-mobile-floating-actions-gap);
  }

  .page-detail .hero-detail__nav--secondary-only {
    height: calc(var(--detail-mobile-nav-top-offset) + 44px + var(--detail-mobile-floating-actions-gap));
  }

  body.page-detail.is-menu-open .mobile-nav-toggle {
    top: var(--detail-mobile-nav-top-offset);
    right: 16px;
  }

  .page-detail .brand--detail-inline {
    width: 132px;
  }

  .page-detail .mobile-nav-panel {
    padding: calc(var(--detail-mobile-nav-top-offset) + 72px) 16px 32px;
  }

  .page-detail .detail-floating-actions__button {
    padding: 7px 5px;
    font-size: 10px;
  }

  .page-detail .mobile-nav-panel__list a {
    font-size: var(--detail-mobile-nav-size);
  }

  .page-detail .mobile-nav-panel__list--secondary a,
  .page-detail .mobile-nav-panel__group-label {
    font-size: var(--detail-mobile-nav-group-size);
  }

  .page-detail .mobile-nav-panel__sublist a {
    font-size: var(--detail-mobile-nav-sub-size);
  }

  .page-detail .hero-detail__content {
    left: 16px;
    bottom: 82px;
  }

  .page-detail .display-title--detail {
    font-size: clamp(48px, 17vw, 58px);
  }

  .page-detail .hero-detail__stats {
    left: 16px;
    right: 16px;
    gap: 8px;
    bottom: calc(var(--detail-stats-overlap) * -1 + 30px);
  }

  .page-detail .detail-stat {
    min-height: 52px;
    padding: 8px 10px;
  }

  .page-detail .detail-stat__icon {
    margin-right: 8px;
  }

  .page-detail .detail-stat__icon .icon-svg,
  .page-detail .detail-stat__icon img {
    width: 22px;
    height: 22px;
  }

  .page-detail .detail-stat__label,
  .page-detail .detail-stat__value {
    font-size: var(--detail-stat-size);
  }

  .page-detail main {
    padding-top: calc(var(--detail-stats-overlap) + 30px);
  }

  .page-detail .carousel__viewport {
    padding-left: 16px;
    padding-right: 0;
  }

  .page-detail .carousel__controls--bottom {
    padding-right: 16px;
  }

  .page-detail .detail-gallery__item,
  .page-detail .review-card,
  .page-detail .feature-badge-card,
  .page-detail .video-card {
    flex-basis: calc(100vw - 32px);
  }

  .page-detail .program-card,
  .page-detail .program-pricing__cta {
    padding: 24px;
  }

  .page-detail .program-card__button,
  .page-detail .program-pricing__cta-button,
  .page-detail .detail-feature-section__intro .button,
  .page-detail .program-comparator .button,
  .page-detail .tour-cta .button,
  .page-detail .contact-form__actions .button {
    width: 100%;
  }

  .page-detail .detail-inclusions__grid {
    grid-template-columns: 1fr;
  }

  .page-detail .program-comparator__inner {
    min-height: 280px;
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .page-detail .tour-cta__copy {
    padding: 40px 0;
  }

  .page-detail .contact-form__actions {
    align-items: stretch;
  }

  .page-detail .footer-global {
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .page-detail .footer-global__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ─── Scroll reveal ──────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal="fade-left"]  { transform: translateX(-52px); }
[data-reveal="fade-right"] { transform: translateX(52px);  }
[data-reveal="fade-in"]    { transform: translateY(0);      }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transform: none;
    transition-duration: 0.15s;
  }
}

/* Carousel items — postupné najetí zleva doprava */
[data-reveal-carousel] .carousel__track > * {
  opacity: 0;
  transform: translateX(28px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal-carousel] .carousel__track > * {
    transform: none;
    transition-duration: 0.15s;
  }
}

/* ==========================================================================
   26. Homepage Hero
   ========================================================================== */

/* Odstraní padding-top který je na detail stránce určen pro překryv stat karet.
   --z-content zajistí, že main (a tedy carousel) je nad obsahem hero. */
body.page-home main {
  padding-top: 0;
  position: relative;
  z-index: var(--z-content);
  /* Záporný margin galerie se bez BFC slévá ven a posune celý <main> nahoru
     přes CTA „prohlédnout si dům“ – a protože main má --z-content, spolkne
     mu kliknutí. `flow-root` nechá přesahovat jen samotnou galerii (ta má
     pointer-events: none), box <main> zůstane až pod hero. Rozvržení se
     tím nemění, jen hitbox. */
  display: flow-root;
}

/* Hero na titulce musí zůstat pod galerií (přesah karet přes spodní okraj
   banneru). Řeší se přes z-index jeho vnitřních vrstev – hero sám z-index
   mít nesmí, viz komentář u .hero-detail (jinak uvězní fixní navigaci). */

/* Obsah hero (titulek + CTA) pod překryvem galerie, ale zůstává klikací
   (galerie má pointer-events: none, klikací jsou jen karty a ovládání). */
body.page-home .hero-detail__content {
  bottom: clamp(44px, 5.5svh, 88px);
  z-index: var(--z-hero-content);
  pointer-events: auto;
}

body.page-home .hero-detail__nav {
  overflow: visible;
}

/* Odstraní hardcoded background-image — slidy ho přebírají dynamicky. */
body.page-home .hero-detail__media {
  background-image: none;
}

/* Každý slide má stejný gradient jako hero-detail__media + vlastní fotku. */
.hero-home__slide {
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg-desktop);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}

@media (max-width: 768px) {
  .hero-home__slide {
    background-image: var(--hero-bg-mobile, var(--hero-bg-desktop));
  }
}

.hero-home__slide.is-active {
  opacity: 1;
}

.hero-home__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0, 0, 0, 0.78),
    rgba(0, 0, 0, 0.18) 30.67%,
    rgba(5, 16, 12, 0.18) 71.01%,
    rgba(5, 18, 13, 0.8)
  );
  pointer-events: none;
}

/* Meta text (typ / dispozice / plocha) pod názvem domu. */
.hero-home__meta {
  margin: clamp(6px, 0.9svh, 12px) 0 0;
  font-size: var(--detail-ui-size);
  letter-spacing: 0.08em;
  color: var(--color-text-soft-strong);
  transition: opacity 0.22s ease;
}

.hero-home__meta-sep {
  color: var(--color-accent);
}

.hero-home__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(12px, 1.5svh, 20px);
}

/* Fade při přepínání textu při scrollu carouselu. */
.display-title--detail.is-updating,
.hero-home__meta.is-updating {
  opacity: 0;
}

.page-home .house-gallery {
  margin-top: clamp(-96px, -8svh, -64px);
  padding-top: clamp(36px, 4svh, 56px);
  padding-bottom: 0;
  position: relative;
  z-index: var(--z-content);
  /* Prázdný překryv nesmí blokovat CTA v hero – klikací jsou jen karty a ovládání */
  pointer-events: none;
}

.page-home .house-gallery .house-gallery-card,
.page-home .house-gallery .carousel__controls {
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .hero-home__slide {
    transition-duration: 0.15s;
  }

  .hero-home__meta {
    transition: none;
  }
}

/* ==========================================================================
   27. Showroom komponent a znovupoužitelné bloky
   ========================================================================== */

/* Tato část navazuje na bloky z komponenty.php.
   Cílem je mít všechny znovupoužitelné sekce na jednom místě a čitelně
   rozdělené podle konkrétních komponent. */

/* Drobné doplňky k sekci s výčtem vlastností a CTA tlačítkem. */
.detail-feature-section__cta-mobile {
    display: none;
}

/* Nadpis sekce v groteskovém textovém řezu – ne v ozdobném patkovém. Titulkový řez
   se tu dřív používal kvůli kresbě na 40 px, ale byl vyhodnocený jako příliš tenký
   a hlavně kvůli úvodnímu lomítku, které v něm vycházelo o 44 % slabší než stejné
   lomítko u ostatních section-labelů na webu. */
.detail-feature-section__intro .section-label {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: 0;
}

/* Sjednocení ovládacích prvků carouselu i pro sekce mimo detail-feature-section. */
.faq-videos .carousel__controls--bottom.detail-feature-section__controls,
.photo-card-carousel .carousel__controls--bottom.detail-feature-section__controls,
.house-gallery .carousel__controls--bottom.detail-feature-section__controls {
    width: 100%;
    justify-content: space-between;
    gap: 24px;
    padding-left: var(--detail-frame-edge);
}

@media (max-width: 768px) {
    .detail-feature-section__cta-mobile {
        display: inline-flex;
    }

    .detail-feature-section__intro .button {
        display: none;
    }

    /* Úvodní řádek karuselu domů z kategorie nemá kromě tlačítka žádný obsah –
       po jeho skrytí by zbyl prázdný řádek s odsazením, skrývá se proto celý. */
    .category-house-carousel__intro {
        display: none;
    }
}

/* Karusel domů z kategorie – volitelné tlačítko „Více“ nad carouselem vpravo.
   Chová se stejně jako CTA u detail-feature-section a faq-videos (na mobilu
   sjede dolů k šipkám), jen tu v úvodním řádku není popisek sekce ani nadpis,
   takže tlačítko zůstává v řádku samo a odsadí se doprava. */
.category-house-carousel__intro,
.page-detail .category-house-carousel__intro {
    justify-content: flex-end;
}

/* Pomocný štítek pro showroom komponent. */
.sc-label {
    text-align: center;
    padding: 2.5rem 1rem 1rem;
    font-family: monospace;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-faint);
}

.sc-label span {
    display: inline-block;
    border: 1px solid var(--color-border-soft);
    border-radius: 4px;
    padding: .25em .75em;
}

/* Galerie domů používaná na homepage i v katalogových blocích. */
.house-gallery {
    width: 100%;
}

.house-gallery .carousel__track {
    gap: 14px;
}

.house-gallery-card {
    flex: 0 0 384px;
}

.house-gallery-card__image-link {
    display: block;
    overflow: hidden;
}

.house-gallery-card__image-link img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
}

.house-gallery-card__title {
    margin: 12px 0 0;
    /* Název domu na kartě je groteskovým textovým řezem, ne ozdobným patkovým
       (ten zůstává jen na velkém nadpisu v hero). Kit má u --font-sans jen
       řezy 400 a 700, proto 400. */
    font-family: var(--font-sans);
    font-size: var(--detail-showcase-title-size);
    line-height: var(--detail-heading-line);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-beige);
}

.house-gallery-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 14px;
    font-size: var(--detail-ui-size);
    line-height: var(--detail-copy-line);
    letter-spacing: 0.08em;
    color: var(--color-text-soft-strong);
}

.house-gallery-card__meta-sep {
    color: var(--color-accent);
}

/* Carousel karet s textem na fotce – blok photo-card-carousel. */
.photo-card-carousel {
    width: 100%;
}

.carousel__track--photo-cards {
    gap: 10px;
}

/* Poměr 4:3 drží samotná karta, ne obrázek – text leží nad fotkou, takže by
   se výška podle obrázku a výška podle textu rozešly.

   Poměr je tu jako min-height dopočítaná ze šířky, ne jako aspect-ratio:
   karta je flex položka tracku, a tomu stretch přebije výšku z poměru, takže
   by dlouhý text z karty vytekl a overflow: hidden by uřízl tlačítko. Šířku
   i výšku proto řídí jedna proměnná – nemůžou se rozejít. Karta se stejně
   natáhne podle nejvyšší v řádku, takže tlačítka zůstávají na jedné lince. */
.photo-card {
    --photo-card-width: 384px;
    /* Velikost nadpisu je tu vlastní, ne ze sdílené škály – ta skáče z 20 px
       (--detail-card-title-size) rovnou na 40 px (--detail-showcase-title-size)
       a na tuhle kartu se hodí něco mezi. */
    --photo-card-title-size: 32px;
    position: relative;
    display: flex;
    flex: 0 0 var(--photo-card-width);
    min-height: calc(var(--photo-card-width) / 4 * 3);
    overflow: hidden;
}

.photo-card__media {
    position: absolute;
    inset: 0;
}

.photo-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-photo-card);
}

.photo-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Obsah sedí u dolní hrany karty – horní část nechává vidět fotku. Rozestupy
   drží gap, ne marginy jednotlivých prvků. */
.photo-card__content {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
    padding: 28px 30px 30px;
}

.photo-card__title {
    margin: 0;
    /* Nadpis karty je groteskový, stejně jako na kartách domů – patkový řez
       zůstává velkým nadpisům sekcí. */
    font-family: var(--font-sans);
    font-size: var(--photo-card-title-size);
    line-height: var(--detail-heading-line);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-beige);
}

/* Úvodní lomítko nadpisu – oranžové, stejně jako u section-labelů. */
.photo-card__title span {
    color: var(--color-accent);
}

/* Text a tlačítko na jednom řádku. Text je počítaný na pár slov; margin-left
   na tlačítku drží pravý okraj i na kartě, kde text není vyplněný. */
.photo-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.photo-card__body {
    margin: 0;
    font-size: var(--detail-copy-compact-size);
    line-height: var(--detail-copy-compact-line);
    letter-spacing: 0;
    color: var(--color-text-high);
}

.photo-card__body > :first-child {
    margin-top: 0;
}

.photo-card__body > :last-child {
    margin-bottom: 0;
}

.photo-card__cta {
    margin-left: auto;
    flex-shrink: 0;
}

/* Carousel log partnerů a referencí. */
.logo-carousel {
    width: 100%;
}

.carousel__track--logos {
    gap: 10px;
}

.logo-card {
    flex: 0 0 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 112px;
    padding: 20px 24px;
}

.logo-card img {
    width: min(100%, 164px);
    height: auto;
    transition: filter .25s ease;
}

/* Loga jsou záměrně tlumená (tmavě zelené varianty `*_g.png` na tmavé
   patičce). Na hover se rozsvítí, aby bylo poznat, že jde o odkaz. */
.logo-card:hover img,
.logo-card a:focus-visible img {
    filter: brightness(1.5);
}

/* Informační panel k ceníku a programům stavby. */
.pricing-info-panel > .container--contained {
    width: min(100%, var(--wide-canvas-width));
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--detail-frame-gutter);
}

.pricing-info-panel__inner {
    padding: clamp(40px, 4.5vw, 72px) clamp(28px, 6vw, 108px) clamp(44px, 4.75vw, 68px);
    background: var(--color-surface-primary);
}

.pricing-info-panel__title {
    margin: 0 0 clamp(24px, 3vw, 54px);
    font-weight: 400;
}

.program-card__title {
    font-size: var(--detail-section-title-size);
}

.pricing-info-panel__body {
    max-width: 1540px;
    margin: 0;
    font-size: var(--detail-copy-regular-size);
    line-height: var(--detail-copy-regular-line);
    letter-spacing: 0;
    color: var(--color-text-strong);
}

/* Blok pro dům na míru s fotkou a přesahem světlého panelu.
   `clip` místo `hidden` ze stejného důvodu jako u .site-shell: `hidden` z bloku
   dělá scrollovací kontejner a reveal animace uvnitř (translateY(40px)) mu dala
   40 px neposunutelné scrollovací plochy. Ořez zůstává stejný. */
.tailored-house-callout {
    --tailored-house-callout-right-gap: clamp(84px, 10vw, 228px);
    --tailored-house-callout-overlap: clamp(74px, 7vw, 102px);
    overflow: hidden;
    overflow: clip;
}

.tailored-house-callout > .container--contained {
    width: min(100%, var(--wide-canvas-width));
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--detail-frame-gutter);
}

.tailored-house-callout__inner {
    position: relative;
}

.tailored-house-callout__media {
    position: relative;
    z-index: 0;
    width: calc(100% - var(--tailored-house-callout-right-gap));
    margin-left: auto;
    overflow: hidden;
}

.tailored-house-callout__media img {
    width: 100%;
    min-height: 438px;
    aspect-ratio: 2.15 / 1;
    object-fit: cover;
    object-position: center;
}

.tailored-house-callout__panel {
    position: relative;
    z-index: 1;
    width: calc(100% + var(--detail-frame-edge) - var(--tailored-house-callout-right-gap));
    margin-top: calc(-1 * var(--tailored-house-callout-overlap));
    margin-left: calc(-1 * var(--detail-frame-edge));
    background: var(--color-beige);
}

.tailored-house-callout__content {
    /* Levé odsazení je --detail-frame-edge, které nad 1780 px roste s šířkou
       okna. Pevný strop (dřív 1020 px) tak textovou plochu na velkých
       monitorech naopak zužoval – panel se roztahoval, text ne. Strop proto
       počítáme až za odsazením, takže textová plocha zůstává konstantní
       a využije i široký panel. */
    width: min(100%, calc(var(--detail-frame-edge) + 1220px));
    padding: clamp(44px, 5vw, 72px) clamp(32px, 4vw, 56px) clamp(46px, 5vw, 64px) var(--detail-frame-edge);
}

.tailored-house-callout__title {
    margin: 0 0 32px;
    font-size: var(--detail-display-title-size);
    line-height: var(--detail-heading-line);
    letter-spacing: 0;
    color: var(--color-green);
}

.tailored-house-callout__copy {
    max-width: 1140px;
    font-size: var(--detail-copy-regular-size);
    line-height: var(--detail-copy-regular-line);
    letter-spacing: 0;
    color: var(--color-green);
}

.tailored-house-callout__link {
    margin-top: 24px;
    color: var(--color-green);
}

.tailored-house-callout__link > span {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}

.tailored-house-callout__link > span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-fast);
}

.tailored-house-callout__link:hover,
.tailored-house-callout__link:focus-visible {
    opacity: 1;
    color: var(--color-green);
}

.tailored-house-callout__link:hover > span::after,
.tailored-house-callout__link:focus-visible > span::after {
    transform: scaleX(1);
}

.tailored-house-callout__link .icon-svg {
    width: 16px;
    height: 16px;
}

/* Hero callout s CTA tlačítky nad fotografií. */
.catalog-hero-callout {
    position: relative;
    min-height: 378px;
}

.catalog-hero-callout__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.catalog-hero-callout__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-catalog-callout);
}

.catalog-hero-callout__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.catalog-hero-callout__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 378px;
    padding-top: 68px;
    padding-bottom: 68px;
}

.catalog-hero-callout__content {
    max-width: 50%;
}

/* Nadpis tohohle banneru jede na groteskovém řezu, ne na patkovém, který se
   dědí z .display-title. Vědomá výjimka jen pro tenhle blok – ostatní
   .display-title zůstávají patkové.

   Spolu s fontem padá i obtah, který .display-title dostává nahoře u
   -webkit-text-stroke: ten je náplast na tenký Fields Display (viz poznámka
   u --font-display) a na grotesku by nadpis jen ztloustl.

   Selektor je schválně dvoutřídní – proti .display-title (0,1,0) by samotné
   .catalog-hero-callout__title vyhrálo jen pořadím v souboru, což je křehké.

   font-weight: 400 je popisné; 500 z .display-title stejně padá na 400,
   protože Medium v kitu není. */
.catalog-hero-callout .catalog-hero-callout__title {
    font-family: var(--font-sans);
    font-weight: 400;
    -webkit-text-stroke-width: 0;
}

/* Nadpis nemá vlastní strop šířky – zalomí se až o sloupec s textem
   (.catalog-hero-callout__content), který drží text nad tmavší levou částí
   fotky. Dřív tu stálo max-width: 447px z návrhu; ta hodnota nereagovala na
   šířku okna, takže nadpis lámala i na velkém monitoru a na tabletu držela
   text užší, než je sloupec sám (68 %). */
.catalog-hero-callout__title {
    font-size: var(--detail-display-title-size);
    line-height: var(--detail-heading-line);
    letter-spacing: 0;
}

.catalog-hero-callout__title span {
    color: var(--color-accent);
}

.catalog-hero-callout__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 46px;
}

.catalog-hero-callout__actions .button {
    min-width: 0;
}

@media (max-width: 768px) {
    .house-gallery-card {
        flex-basis: 304px;
    }

    .house-gallery-card__image-link img {
        width: 100%;
        aspect-ratio: 4 / 3;
        height: auto;
    }

    /* Šířka i dopočítaná výška 4:3 jedou z jedné proměnné, viz .photo-card. */
    .photo-card {
        --photo-card-width: 304px;
        --photo-card-title-size: 26px;
    }

    .photo-card__content {
        gap: 12px;
        padding: 22px 24px 24px;
    }

    .logo-card {
        flex-basis: 220px;
        min-height: 100px;
        padding: 18px 20px;
    }

    .pricing-info-panel__inner {
        padding: 32px 24px 36px;
    }

    .pricing-info-panel__title {
        margin-bottom: 24px;
    }

    .tailored-house-callout {
        --tailored-house-callout-right-gap: 0px;
        --tailored-house-callout-overlap: 36px;
    }

    .tailored-house-callout__media {
        width: 100%;
    }

    .tailored-house-callout__media img {
        min-height: 240px;
        aspect-ratio: auto;
        height: 240px;
    }

    .tailored-house-callout__panel {
        width: 100%;
        margin-left: 0;
    }

    .tailored-house-callout__content {
        width: 100%;
        padding: 32px 24px 36px;
    }

    .tailored-house-callout__title {
        margin-bottom: 28px;
    }

    .tailored-house-callout__link {
        margin-top: 20px;
    }

    .catalog-hero-callout {
        min-height: auto;
    }

    .catalog-hero-callout__inner {
        min-height: 320px;
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .catalog-hero-callout__content {
        max-width: none;
    }

    .catalog-hero-callout__actions {
        width: 100%;
        flex-wrap: wrap;
        margin-top: 28px;
    }

    .catalog-hero-callout__actions .button {
        width: 100%;
        min-width: 0;
    }
}

/* Carousel s milníky firmy. */
.carousel__track--milestones {
    gap: 40px;
}

.milestone-card {
    flex: 0 0 clamp(260px, 26vw, 360px);
}

.milestone-card__year {
    margin: 0 0 18px;
    font-size: var(--detail-showcase-title-size);
    line-height: var(--detail-heading-line);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-beige);
}

.milestone-card__rule {
    display: block;
    width: clamp(140px, 14vw, 200px);
    height: 1px;
    background: var(--color-border-emphasis);
    border: none;
    margin: 0 0 24px;
}

.milestone-card__body {
    margin: 0;
    font-size: var(--detail-copy-regular-size);
    line-height: var(--detail-copy-regular-line);
    letter-spacing: 0;
    color: var(--color-text-body);
}

@media (max-width: 768px) {
    .milestone-card {
        flex-basis: 260px;
    }
}

/* Sekce s týmem a kontaktními kartami. */
.team-section > .container--contained {
    width: min(100%, var(--wide-canvas-width));
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--detail-frame-gutter);
}

.team-section__heading {
    margin-bottom: var(--detail-section-gap-lg);
}

/* Na mobilu se tým posouvá v carouselu, na desktopu přejde do gridu. */
.carousel__track--team {
    gap: clamp(20px, 5vw, 36px);
}

.team-card {
    flex: 0 0 min(320px, 78vw);
}

@media (min-width: 769px) {
    .team-section .carousel__viewport,
    .team-section .carousel.is-static .carousel__viewport {
        width: auto;
        margin-left: 0;
        overflow: visible;
        padding-inline: 0;
    }

    .carousel__track--team {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(24px, 3vw, 48px);
        min-width: 0;
    }

    .team-card {
        flex: none;
    }
}

@media (min-width: 1025px) {
    .carousel__track--team {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Varianta "jeden řádek": karty se do mřížky neskládají ani na desktopu, sekce
   zůstane jedním řádkem s vodorovným posuvem (VEDENÍ / KANCELÁŘ / DĚLNÍCI).
   Sekce se skládají pod sebe, šipky proto drží blíž ke kartám. */
.team-section--scroll .carousel__controls--bottom {
    margin-top: clamp(24px, 3vw, 40px);
}

/* Přebíjí desktopové přepnutí do mřížky výše – proto stejná či vyšší
   specificita a pozdější pořadí v souboru. */
@media (min-width: 769px) {
    .team-section--scroll .carousel__viewport {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        overflow-x: auto;
        overflow-y: hidden;
        padding-left: var(--page-gutter);
        padding-right: 0;
    }

    .page-detail .team-section--scroll .carousel__viewport {
        padding-left: var(--detail-frame-edge);
        padding-right: 0;
    }

    /* Když se karty vejdou bez posuvu, chová se sekce jako statický řádek.
       Box přitom musí zůstat stejně široký jako u posouvané varianty (100vw
       + levý gutter). Grid pravidlo výše má na `.is-static` vyšší specificitu
       a zužovalo viewport do kontejneru – karty pak přetekly za jeho okraj,
       ale `overflow-x: hidden` je odřízl a nešlo je doscrollovat. */
    .team-section--scroll .carousel.is-static .carousel__viewport {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        overflow-x: hidden;
        overflow-y: hidden;
        padding-left: var(--page-gutter);
        padding-right: var(--page-gutter);
    }

    .page-detail .team-section--scroll .carousel.is-static .carousel__viewport {
        padding-left: var(--detail-frame-edge);
        padding-right: var(--detail-frame-edge);
    }

    .team-section--scroll .carousel__track--team {
        display: flex;
        gap: clamp(20px, 2.5vw, 36px);
        min-width: 100%;
    }

    .team-section--scroll .carousel.is-static .carousel__track--team {
        min-width: 0;
    }

    .team-section--scroll .team-card {
        flex: 0 0 clamp(280px, 22vw, 360px);
    }
}

.team-card__photo {
    overflow: hidden;
    margin-bottom: 20px;
}

.team-card__photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.team-card__name {
    margin: 0 0 5px;
    font-family: var(--font-display);
    /* O kousek větší než ostatní titulky karet – jméno je hlavní informace.
       Přes calc() se drží responzivního zmenšování (24 / 23 / 22 px). */
    font-size: calc(var(--detail-card-title-size) + 4px);
    font-weight: 500;
    line-height: var(--detail-heading-line);
    color: var(--color-accent);
}

.team-card__role {
    margin: 0;
    font-size: var(--detail-copy-regular-size);
    line-height: var(--detail-copy-regular-line);
    letter-spacing: 0;
    color: var(--color-accent);
}

.team-card__contact {
    font-style: normal;
    margin-top: 20px;
}

.team-card__contact p {
    margin: 0;
    font-size: var(--detail-copy-regular-size);
    line-height: var(--detail-copy-regular-line);
    letter-spacing: 0;
    color: var(--color-text-soft);
}

.team-card__contact a:hover,
.team-card__contact a:focus-visible {
    color: var(--color-accent);
}

/* Dvousloupcový blok s obrázkem a textem vedle sebe. */
.article-split__grid {
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(48px, 6vw, 96px);
    background-color: var(--color-green);
}

.article-split__media {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.article-split__content {
    min-width: 0;
    padding-right: clamp(24px, 4vw, 56px);
}

.article-split--plain .article-split__grid {
    grid-template-columns: 1fr 1fr;
    background-color: transparent;
}

/* Barva panelu se vybírá v administraci (pole „Barva panelu", ukládá se do
   dat komponenty jako panel_color – viz includes/article_panel_color.php).
   Nabídka je schválně stejná jako u karet ceníku programů, aby si stránka
   nezaváděla vlastní paletu. Bez výběru zůstává výchozí zelená z pravidla
   .article-split__grid výš; variant „bez panelu" se to netýká, ty mají
   pozadí průhledné. */
.article-split--panel-primary .article-split__grid {
    background-color: var(--color-surface-primary);
}

.article-split--panel-secondary .article-split__grid {
    background-color: var(--color-surface-secondary);
}

.article-split--panel-tertiary .article-split__grid {
    background-color: var(--color-surface-tertiary);
}

.article-split--plain .article-split__media {
    aspect-ratio: 4 / 3;
}

.article-split__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ve všech čtyřech komponentách „Článek…" se obrázek do rámu vepisuje celý,
   místo aby se ořezával. Vyšlo to ze schémat konstrukcí na stránce
   /konstrukce-drevostavby/: kresby jsou 900 × 621 (poměr 1,449) a mají
   rámečky s čísly natěsno u okraje plátna, takže vedle nich zbývá jen
   33–36 px. Rám „bez panelu" je 4:3, tedy užší – cover z každé strany ubral
   36 px zdroje a dvěma schématům uřízl rámečkům pravou hranu. U varianty
   „na panelu" je rám čtvercový, takže ořez je ještě větší; ať se komponenty
   nechovají každá jinak, platí vepsání pro obě.

   Podklady jsou dnes připravené přesně na svůj rám (schémata průhledná PNG,
   fotky „bez panelu" 4:3, fotky „na panelu" čtvercové), takže se na desktopu
   vykreslí úplně stejně jako s cover. Rozdíl se projeví až u obrázku v jiném
   poměru: nic se neztratí, jen kolem něj zbude volné místo – u „bez panelu"
   splyne s pozadím stránky, u „na panelu" prosvítá barva panelu. Karet ve
   výpisu referencí a blogu se to netýká, ty třídu .article-split nemají
   a ořez si drží. */
.article-split .article-split__media img {
    object-fit: contain;
}

.article-split__title {
    margin: 0 0 clamp(24px, 2.5vw, 36px);
    max-width: none;
}

/* Popisek nad textem u variant „Článek bez panelu" – akcentní oranžová,
   stejná jako u ostatních zvýrazněných popisků na webu. */
.article-split__label {
    color: var(--color-accent);
}

.article-split__body {
    margin: 0 0 clamp(28px, 3vw, 44px);
    font-size: var(--detail-copy-regular-size);
    line-height: var(--detail-copy-regular-line);
    letter-spacing: 0;
    color: var(--color-text-body);
}

.article-split__content .button {
    min-width: clamp(148px, 14vw, 200px);
}

/* Zrcadlená varianta: obrázek vpravo, text vlevo. Pořadí v HTML zůstává
   „obrázek první" (na mobilu to je požadované pořadí), na desktopu se sloupce
   prohodí přes order. */
.article-split--media-right .article-split__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
}

.article-split--plain.article-split--media-right .article-split__grid {
    grid-template-columns: 1fr 1fr;
}

.article-split--media-right .article-split__media {
    order: 2;
}

.article-split--media-right .article-split__content {
    order: 1;
    padding-right: 0;
    padding-left: clamp(24px, 4vw, 56px);
}

@media (max-width: 768px) {
    .article-split__grid {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-block: 0 clamp(28px, 4vw, 40px);
    }

    .article-split--plain .article-split__grid,
    .article-split--media-right .article-split__grid,
    .article-split--plain.article-split--media-right .article-split__grid {
        grid-template-columns: 1fr;
    }

    .article-split--plain .article-split__grid {
        gap: 24px;
        padding-block: 0;
    }

    /* Zůstává kartám ve výpisu referencí a blogu – ty se ořezávají dál. */
    .article-split__media {
        aspect-ratio: 16 / 9;
    }

    /* Komponenty „Článek…" si naopak i na mobilu nechávají poměr rámu
       z desktopu. Obrázek se do nich vepisuje celý (viz object-fit: contain
       výš) a v rámu 16:9 by kolem podkladů připravených na 1:1 a 4:3 zbyly
       pásy po stranách. Ve vlastním poměru rám vyplní beze zbytku a na
       mobilu se přestanou ořezávat i schémata a čtvercové fotky. */
    .article-split:not(.article-split--plain) .article-split__media {
        aspect-ratio: 1 / 1;
    }

    .article-split--plain .article-split__media {
        aspect-ratio: 4 / 3;
    }

    /* Pod 768 px je jen jeden sloupec – obrázek patří vždy nad text. */
    .article-split--media-right .article-split__media,
    .article-split--media-right .article-split__content {
        order: 0;
    }

    .article-split__content {
        padding-inline: clamp(20px, 4vw, 28px);
    }

    .article-split--media-right .article-split__content {
        padding-inline: clamp(20px, 4vw, 28px);
    }

    .article-split--plain .article-split__content,
    .article-split--plain.article-split--media-right .article-split__content {
        padding-inline: 0;
    }
}

/* Výpis referencí a výpis blogů. Karta má stejné rozvržení jako „Článek na
   panelu" (.article-split__grid), mění se jen barva panelu – bloku se střídají
   dokola, pořadí drží blocks/reference-list.php a blocks/blog-list.php.
   Oba výpisy střídají i stranu fotky přes .article-split--media-right. Tři
   tóny drží obojí společné, ať se výpisy nerozejdou; u blogů je navíc i se
   stranou fotky přepisuje JS po přefiltrování. Každý tón je barevný panel –
   průhledná karta by splynula s pozadím sekce. */
.reference-list__items,
.blog-list__items {
    display: grid;
    gap: clamp(24px, 3vw, 48px);
}

.reference-list__item--tone-0 .article-split__grid,
.blog-list__item--tone-0 .article-split__grid {
    background-color: var(--color-surface-tertiary);
}

.reference-list__item--tone-1 .article-split__grid,
.blog-list__item--tone-1 .article-split__grid {
    background-color: var(--color-surface-secondary);
}

.reference-list__item--tone-2 .article-split__grid,
.blog-list__item--tone-2 .article-split__grid {
    background-color: var(--color-surface-card);
}

.reference-list__item .article-split__media a,
.blog-list__item .article-split__media a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Filtr rubrik nad výpisem blogů. Řádek drobných odkazů s oranžovou špičkou,
   aktivní je béžový. Filtruje JS (initializeBlogFilter v assets/js/site.js);
   bez JS zůstane vidět celý výpis. */
.blog-list__filter {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3.5vw, 56px);
    margin-bottom: clamp(32px, 4vw, 64px);
}

.blog-list__filter-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--color-text-body);
    transition: color 0.18s;
}

.blog-list__filter-mark {
    color: var(--color-accent);
}

.blog-list__filter-item:hover,
.blog-list__filter-item:focus-visible {
    color: var(--color-beige);
}

.blog-list__filter-item.is-active {
    color: var(--color-beige);
}

.blog-list__item[hidden] {
    display: none;
}

.blog-list__empty {
    margin: 0;
    font-size: var(--detail-copy-regular-size);
    line-height: var(--detail-copy-regular-line);
    color: var(--color-text-body);
}

/* Akordeon s častými dotazy. */
.faq-item {
    border-bottom: 1px solid var(--color-line-strong);
}

.faq-item:first-child {
    border-top: 1px solid var(--color-line-strong);
}

.faq-item__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--detail-copy-regular-size);
    line-height: var(--detail-copy-regular-line);
    letter-spacing: 0;
    color: var(--color-beige);
    text-align: left;
    transition: color 0.18s;
}

.faq-item__trigger:hover,
.faq-item__trigger:focus-visible {
    color: var(--color-accent);
}

/* Varianta „Celé rozbalit": otázka je jen nadpis (<h3>), ne tlačítko. Barva je
   akcentová napořád – stejně jako u otevřené položky akordeonu. Hover se přesto
   uvádí taky, aby přebil `.faq-item__trigger:hover` a myš nad otázkou nedělala
   nic (klikat se tu nedá). */
.faq-item__trigger--static,
.faq-item__trigger--static:hover {
    margin: 0;
    font-family: inherit;
    font-weight: inherit;
    color: var(--color-accent);
    cursor: default;
}

.faq-item__trigger .icon-svg {
    flex-shrink: 0;
    color: var(--color-accent);
    transition: transform 0.25s ease;
}

.faq-item.is-open .faq-item__trigger {
    color: var(--color-accent);
}

.faq-item.is-open .faq-item__trigger .icon-svg {
    transform: rotate(180deg);
}

.faq-item__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}

.faq-item.is-open .faq-item__body,
.faq-accordion--expanded .faq-item__body {
    grid-template-rows: 1fr;
}

.faq-item__body-inner {
    overflow: hidden;
}

.faq-item__answer {
    margin: 0;
    padding-bottom: 28px;
    font-size: var(--detail-copy-regular-size);
    line-height: var(--detail-copy-regular-line);
    letter-spacing: 0;
    color: var(--color-text-body);
}

/* Jednoduchý seznam odkazů s ikonou vpravo. */
.link-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    font-size: var(--detail-copy-regular-size);
    line-height: var(--detail-copy-regular-line);
    letter-spacing: 0;
    color: var(--color-beige);
    border-bottom: 1px solid var(--color-line-strong);
    text-decoration: none;
    transition: color 0.18s;
}

.link-list__item:first-child {
    border-top: 1px solid var(--color-line-strong);
}

.link-list__item:hover,
.link-list__item:focus-visible {
    color: var(--color-accent);
}

.link-list__item .icon-svg {
    flex-shrink: 0;
    color: var(--color-accent);
}

/* Fotogalerie s jednotnou šířkou obsahu. */
.page-detail .photo-gallery > .container--contained {
    width: min(100%, var(--wide-canvas-width));
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--detail-frame-gutter);
}

.photo-gallery__heading {
    margin-bottom: clamp(24px, 3vw, 40px);
}

/* U stránek bez hero (page-components) zrušíme mobilní odsazení vzniklé kvůli překryvu statistik.
   POZOR: musí cílit jen na stránky bez hero – .page-detail main by přepsalo i odsazení
   na detailu/hero_domu, kde staty reálně překrývají obsah a odsazení je potřeba. */
@media (max-width: 768px) {
    .page-components main {
        padding-top: 0;
    }
}

/* Přehled kladů a záporů ve dvou sloupcích: klady vlevo, zápory vpravo.
   Zařazení do mřížky je explicitní (sloupec podle typu, řádek přes --pc-row),
   takže na pořadí položek v DOM nezáleží a dvojice si drží stejnou výšku. */
.pros-cons__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

/* Jediná dělící čára přesně mezi sloupci. Dřív ji nesly jednotlivé položky
   (item + item), takže při víc než jedné dvojici vycházela i na kraj sekce. */
.pros-cons__grid--split::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--color-border-subtle);
}

.pros-cons__col-title,
.pros-cons__item {
    grid-row: var(--pc-row);
}

.pros-cons__col-title--pro,
.pros-cons__item--pro {
    grid-column: 1;
}

.pros-cons__col-title--con,
.pros-cons__item--con {
    grid-column: 2;
}

/* Volitelný nadpis skupiny – štítek v rámečku u levého kraje svého sloupce.
   Bez vyplnění se element vůbec nevykreslí a řádek 1 se složí na nulovou
   výšku, takže po něm nezbyde ani mezera.

   Odstavec zůstává přes celou šířku sloupce (drží odsazení a na mobilu i
   předěl mezi skupinami) a rámeček nese až vnitřní <span>, aby se obtáhl
   jen kolem textu, ne kolem celého řádku. Vodorovné odsazení je stejné jako
   u položek, takže rámeček lícuje s jejich textem.

   Svislé odsazení je celé pod štítkem – nahoře nula, aby se štítek držel
   u horní hrany sloupce. */
.pros-cons__col-title {
    --pc-row: 1;
    margin: 0;
    padding: 0 clamp(24px, 4vw, 56px) clamp(36px, 4vw, 60px);
    font-size: var(--detail-copy-regular-size);
    line-height: var(--detail-copy-regular-line);
    letter-spacing: 0;
    text-align: left;
}

/* Rámeček bere barvu přes currentColor, takže ho nejde rozladit s písmem –
   obojí drží barva sloupce níž, shodná s barvou nadpisů položek. */
.pros-cons__col-label {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid currentColor;
}

.pros-cons__col-title--pro {
    color: var(--color-accent-positive);
}

.pros-cons__col-title--con {
    color: var(--color-accent-negative);
}

.pros-cons__item {
    padding: clamp(36px, 4vw, 60px) clamp(24px, 4vw, 56px);
}

/* Odsazení pod nadpisem skupiny už nese samotný nadpis. */
.pros-cons__item--under-title {
    padding-top: 0;
}

.pros-cons__heading {
    margin: 0 0 var(--detail-copy-gap);
    font-size: var(--detail-section-title-size);
    line-height: var(--detail-heading-line);
    font-weight: 400;
    letter-spacing: 0;
}

.pros-cons__item--pro .pros-cons__heading {
    color: var(--color-accent-positive);
}

.pros-cons__item--con .pros-cons__heading {
    color: var(--color-accent-negative);
}

.pros-cons__body {
    margin: 0;
    font-size: var(--detail-copy-regular-size);
    line-height: var(--detail-copy-regular-line);
    letter-spacing: 0;
    color: var(--color-text-body);
}

.pros-cons__cta {
    color: var(--color-beige);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.18s;
}

.pros-cons__cta:hover,
.pros-cons__cta:focus-visible {
    color: var(--color-accent);
}

@media (max-width: 768px) {
    .pros-cons__grid {
        grid-template-columns: 1fr;
    }

    /* Zrušené explicitní zařazení vrací položky do pořadí z DOM –
       tedy nejdřív všechny klady, pak všechny zápory. */
    .pros-cons__col-title,
    .pros-cons__item {
        grid-column: auto;
        grid-row: auto;
    }

    .pros-cons__grid--split::before {
        display: none;
    }

    .pros-cons__divider {
        border-top: 1px solid var(--color-border-subtle);
    }
}

/* Kontaktní údaje ve třech sloupcích.
   Blok nezávisí na .page-detail — proměnné mají fallbacky, takže ho lze vložit
   i na stránky bez detailových tokenů. */
.contact-info {
    --contact-info-title-size: var(--detail-display-title-size, 56px);
    --contact-info-group-title-size: var(--detail-card-title-size, 20px);
    --contact-info-body-size: var(--detail-copy-regular-size, 16px);
    --contact-info-body-line: var(--detail-copy-regular-line, 1.5);
    --contact-info-heading-line: var(--detail-heading-line, 1.12);
    width: 100%;
}

.contact-info > .container--contained {
    width: min(100%, var(--wide-canvas-width));
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--detail-frame-gutter, var(--page-gutter));
}

.contact-info__title {
    margin: 0 0 clamp(48px, 5vw, 76px);
    font-size: var(--contact-info-title-size);
    line-height: var(--contact-info-heading-line);
    letter-spacing: 0;
    color: var(--color-beige);
}

.contact-info__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 64px);
}

.contact-info__column {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 4.5vw, 68px);
}

/* Stejný recept jako nadpisy karet ve .feature-badge-card. */
.contact-info__group-title {
    margin: 0 0 clamp(20px, 2vw, 30px);
    font-size: var(--contact-info-group-title-size);
    line-height: var(--contact-info-heading-line);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-beige);
}

.contact-info__group-title span {
    color: var(--color-accent);
}

.contact-info__line {
    margin: 0;
    font-size: var(--contact-info-body-size);
    line-height: var(--contact-info-body-line);
    letter-spacing: 0;
    color: var(--color-text-body);
}

.contact-info__line--gap {
    margin-top: clamp(24px, 2.5vw, 36px);
}

.contact-info__part--accent {
    color: var(--color-accent);
}

/* Popisky typu „IČ:" / „DIČ:" drží hodnoty pod sebou ve stejném sloupci. */
.contact-info__part--label {
    display: inline-block;
    min-width: 3.4em;
}

strong.contact-info__part {
    font-weight: 700;
}

a.contact-info__part {
    transition: color var(--transition-fast);
}

a.contact-info__part:hover,
a.contact-info__part:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1024px) {
    .contact-info__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 48px);
    }
}

@media (max-width: 768px) {
    .contact-info__grid {
        grid-template-columns: 1fr;
        gap: clamp(36px, 6vw, 52px);
    }
}

@media (max-width: 480px) {
    .contact-info__title {
        margin-bottom: 36px;
    }

    .contact-info__column {
        gap: 36px;
    }
}

/* Jednoduchý textový callout s barevným pozadím přes polovinu plochy. */
.text-split-callout {
    position: relative;
    overflow: hidden;
}

.text-split-callout__bg {
    position: absolute;
    inset: 0 0 0 50%;
    background: var(--color-surface-secondary);
    pointer-events: none;
}

.text-split-callout > .container--contained {
    position: relative;
    z-index: 1;
    width: min(100%, var(--wide-canvas-width));
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--detail-frame-gutter);
}

.text-split-callout__inner {
    padding-block: clamp(56px, 6vw, 96px);
}

.text-split-callout__title {
    margin: 0 0 clamp(20px, 2.5vw, 36px);
    /* Velký titulek 56px (níž 48/40/32) – stejná velikost jako .display-title
       u ostatních calloutů, např. .tailored-house-callout__title. */
    font-size: var(--detail-display-title-size);
    line-height: var(--detail-heading-line);
    /* Ozdobný (patkový) řez, stejně jako u nadpisu sekce „Výhody s ikonou"
       a dvojbarevných nadpisů. */
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0;
}

.text-split-callout__body {
    margin: 0 0 clamp(20px, 2.5vw, 32px);
    font-size: var(--detail-copy-regular-size);
    line-height: var(--detail-copy-regular-line);
    letter-spacing: 0;
    color: var(--color-text-body);
}

.text-split-callout__link .icon-svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .text-split-callout__bg {
        inset: 0;
    }
}

/* Tabletové doladění větších bloků. */
@media (max-width: 1024px) {
    .tailored-house-callout {
        --tailored-house-callout-right-gap: clamp(40px, 5vw, 84px);
        --tailored-house-callout-overlap: clamp(44px, 5vw, 74px);
    }

    .catalog-hero-callout__content {
        max-width: 68%;
    }

    .catalog-hero-callout__inner {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .article-split__grid {
        gap: clamp(36px, 4vw, 64px);
    }

    .article-split--plain .article-split__grid {
        gap: clamp(32px, 4vw, 56px);
    }
}

/* Nejmenší mobily potřebují o něco kompaktnější mezery a karty. */
@media (max-width: 480px) {
    .house-gallery-card {
        flex-basis: min(304px, calc(100vw - 88px));
    }

    .milestone-card {
        flex-basis: calc(100vw - 32px);
    }

    .logo-card {
        flex-basis: calc(50vw - 14px);
        min-height: 86px;
        padding: 14px 16px;
    }

    .catalog-hero-callout__inner {
        min-height: 260px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .catalog-hero-callout__actions {
        margin-top: 20px;
        gap: 12px;
    }

    .pricing-info-panel__inner {
        padding: 28px 20px 32px;
    }

    .faq-item__trigger {
        padding: 18px 0;
    }

    .link-list__item {
        padding: 18px 0;
    }

    .text-split-callout__inner {
        padding-block: clamp(44px, 8vw, 64px);
    }

    .tailored-house-callout__media img {
        height: 200px;
        min-height: 0;
    }

    .tailored-house-callout__content {
        padding: 28px 20px 32px;
    }
}

/* ==========================================================================
   House Catalog – stránka kategorie
   ========================================================================== */

/* ── Category Hero ─────────────────────────────────────────────────────── */
.category-hero {
    background-color: var(--color-bg);
    color: var(--color-beige);
    padding-top: 0;
}

.category-hero .site-nav--detail {
    position: relative;
}

.category-hero__content {
    padding-top: clamp(48px, 8vw, 96px);
    padding-bottom: clamp(48px, 8vw, 80px);
}

.category-hero__eyebrow {
    margin-bottom: 16px;
    color: var(--color-accent, #c8a96e);
}

.category-hero__title {
    margin-bottom: 24px;
}

.category-hero__desc {
    max-width: 680px;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.7;
    opacity: .85;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb {
    margin-bottom: 24px;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .875rem;
    opacity: .7;
}

.breadcrumb__item + .breadcrumb__item::before {
    content: '/';
    margin-right: 8px;
    opacity: .5;
}

.breadcrumb__link {
    color: inherit;
    text-decoration: none;
}

.breadcrumb__link:hover {
    text-decoration: underline;
}

.breadcrumb__current {
    opacity: .6;
}

/* ── House Catalog Section ──────────────────────────────────────────────── */
/* Grid layout of house-gallery cards (same look as Galerie domů z katalogu) */
.house-catalog {
    width: 100%;
}

.house-catalog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: clamp(24px, 4vw, 40px);
    width: min(100%, var(--wide-canvas-width));
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--detail-frame-gutter, var(--page-gutter));
}

.house-catalog__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.5vw, 32px) 14px;
    width: min(100%, var(--wide-canvas-width));
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--detail-frame-gutter, var(--page-gutter));
}

/* Override fixed carousel width when cards sit in the catalog grid */
.house-catalog__grid .house-gallery-card {
    flex: none;
    width: 100%;
    min-width: 0;
}

.house-catalog__grid .house-gallery-card__image-link img {
    transition: transform .4s ease;
}

.house-catalog__grid .house-gallery-card:hover .house-gallery-card__image-link img {
    transform: scale(1.04);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .house-catalog__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .house-catalog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .house-catalog__grid {
        grid-template-columns: 1fr;
        padding-inline: 20px;
    }

    .house-catalog__header {
        padding-inline: 20px;
    }

    .category-hero__content {
        padding-top: 32px;
    }
}

/* ── site-nav-bar: vždy kompaktní, nikdy hero výška z detailu domu ─────────
   Výška musí zůstat shodná s pravidlem nahoře (~ř. 754) včetně přírůstku
   za lištu rychlých akcí. */
.page-detail .hero-detail.site-nav-bar,
.hero-detail.site-nav-bar {
  height: calc(clamp(96px, 10vw, 130px) + 30px + var(--si-quick-actions-inset)) !important;
  min-height: 0 !important;
  background: transparent !important;
}

body.has-solid-nav .hero-detail.site-nav-bar .hero-detail__nav {
  background: var(--color-bg);
}


/* ── Textový blok (vlastní obsah) ────────────────────────────────────────
   Souvislý text přes celou šířku obsahu – právní a informační stránky.
   Šířku drží .container--contained (na detailu ji přebíjí sdílené pravidlo
   u .container--contained nahoře), tady zůstává jen typografie odstavce.
   Prvky, které uvnitř vyrobí editor, srovnají pravidla .rich-text níž.    */

.text-content__body {
    font-size: var(--detail-copy-regular-size);
    line-height: var(--detail-copy-regular-line);
    letter-spacing: 0;
    color: var(--color-text-body);
}

/* ── Formátovaný text z editoru ──────────────────────────────────────────
   Pole typu `html` v administraci (TinyMCE) vrací hotové HTML – odstavce,
   seznamy, odkazy. Vlastní třída bloku (.article-split__body a spol.) drží
   typografii, tyhle pravidla jen srovnají prvky, které uvnitř vyrobí editor,
   aby neměly výchozí okraje prohlížeče a dědily barvu i velikost písma.

   Element s .rich-text nikdy nesmí být <p> – odstavec z editoru by se do něj
   nevnořil a prohlížeč by ho předčasně uzavřel.                            */

.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child  { margin-bottom: 0; }

/* Když se do editoru vloží text zkopírovaný rovnou ze stránky, přijde s ním
   i obálka komponenty (.container, `…__grid`). Uvnitř rich-textu by znovu
   založila mřížku i vnitřní okraje a obsah by spadl do prvního, úzkého
   sloupce. Rozvržení dělá vždycky blok, obsah z editoru nikdy – tady se
   z takové obálky stane obyčejný blok přes celou šířku.                    */
.rich-text .container,
.rich-text [class*="__grid"] {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.rich-text p {
    margin: 0 0 var(--detail-copy-gap-sm);
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

.rich-text ul,
.rich-text ol {
    margin: 0 0 var(--detail-copy-gap-sm);
    padding-left: 1.25em;
}

.rich-text li + li { margin-top: .35em; }

/* h1 sem chodí z převedených blogových článků – editor je psal jako titulek
   článku, takže je uvnitř obsahu, ne v samostatném bloku. */
.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4 {
    margin: var(--detail-copy-gap) 0 var(--detail-copy-gap-sm);
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

.rich-text h1 { font-size: 1.9em; }
.rich-text h2 { font-size: 1.5em; }
.rich-text h3 { font-size: 1.25em; }
.rich-text h4 { font-size: 1.1em; }

.rich-text a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.rich-text a:hover { text-decoration: none; }

/* Kit má nahrané jen řezy 400 a 700 (viz poznámka u --font-sans), takže 700
   je jediná tučnost, kterou tady jde reálně dostat. */
.rich-text strong,
.rich-text b { font-weight: 700; }

/* Kurzívní řez v kitu není vůbec a `font-synthesis: none` na <body> zakazuje
   prohlížeči dopočítat ho – bez téhle výjimky by tlačítko „kurzíva"
   v editoru nemělo žádný viditelný efekt. Až kit italic dostane, použije se
   skutečný řez a synthesis se neuplatní. */
.rich-text em,
.rich-text i {
    font-style: italic;
    font-synthesis: style;
}

/* Editor umí vložit obrázek i tabulku – ať aspoň nepřetečou ze sloupce. */
.rich-text img {
    max-width: 100%;
    height: auto;
}

.rich-text table {
    width: 100%;
    border-collapse: collapse;
}

/* ── Ceník dle programů – CTA pruh s nevyplněnými poli ──────────────────
   Blok vykresluje jen vyplněné části (blocks/program-pricing.php), takže
   trojsloupcová mřížka musí ustoupit, jinak zbyde prázdné místo. Pravidla
   jsou schválně až tady a přes dvě třídy – musí přebít responzivní
   `.page-detail .program-pricing__cta` výš v souboru. Mobilní jednosloupcové
   rozložení (≤768px) se jich netýká. */
@media (min-width: 769px) {
  .program-pricing__cta.program-pricing__cta--no-title,
  .program-pricing__cta.program-pricing__cta--no-copy {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .program-pricing__cta.program-pricing__cta--no-button {
    grid-template-columns: var(--cta-title-col) minmax(0, 1fr);
  }

  /* Zbyla jediná část – vycentrovat, ať pruh nevypadá rozseknutě. */
  .program-pricing__cta--no-title.program-pricing__cta--no-copy,
  .program-pricing__cta--no-title.program-pricing__cta--no-button,
  .program-pricing__cta--no-copy.program-pricing__cta--no-button {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   Stránka 404 (includes/404.php)
   ========================================================================== */

/* Stránka je jediný blok mezi navigací a patičkou, takže odsazení si musí
   nastavit sama – žádný spacer mezi bloky se sem nevejde. */
.error-page {
  padding-block: clamp(72px, 14vw, 180px);
  color: var(--color-beige);
}

.error-page__title {
  margin: 20px 0 0;
  max-width: 720px;
  font-size: var(--detail-display-title-size);
  line-height: var(--detail-heading-line);
}

.error-page__copy {
  margin: 20px 0 0;
  max-width: 560px;
  font-size: var(--detail-copy-regular-size);
  line-height: var(--detail-copy-line);
}

.error-page__button {
  margin-top: 36px;
}

/* ==========================================================================
   Cookie lišta a nastavení cookies (includes/cookie_bar.php)
   ========================================================================== */

/* Plovoucí panel u spodku okna, nad vším ostatním – i nad fixní navigací
   a plovoucí lištou akcí na detailu (viz škála --z-* nahoře). Kořen je
   `hidden`, dokud JS nerozhodne, jestli se má lišta ukázat.

   Kořen je přes celou šířku okna jen proto, aby šel panel vystředit;
   vidět je z něj jen jeho vnitřek. Odsazení dole a po stranách drží panel
   kousek od kraje, ať je poznat, že je to samostatná lišta a ne pruh
   přilepený ke stránce. */
.cookie-consent {
  --cookie-edge-gap: clamp(16px, 3vw, 32px);
  /* Strop šířky. Lišta by se bez něj roztáhla na ~1020 px a nastavení na
     víc – takhle jsou obě přesně stejně široké a přepnutí mezi nimi
     nepohne okrajem panelu. */
  --cookie-panel-width: 1000px;
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-cookie-consent);
  padding: 0 var(--cookie-edge-gap) var(--cookie-edge-gap);
  color: var(--color-beige);
  pointer-events: none;   /* klikat jde jen do panelu, ne kolem něj */
}

.cookie-consent[hidden],
.cookie-consent [hidden] {
  display: none;
}

/* Náhled v _tmp_cookies_preview.php: obě části pod sebou v běžném toku
   stránky, aby šly porovnat s návrhem naráz. Na webu se nikdy nepoužije. */
.cookie-consent--preview {
  position: static;
}

/* Panel je široký jen tak, jak potřebuje jeho obsah (`fit-content`), ne přes
   celou stránku. Skutečnou šířku tak určuje `max-width` textů uvnitř – bez
   nich by se úvodní odstavec roztáhl na jeden dlouhý řádek. Strop je
   společný pro lištu i nastavení, aby panel po kliknutí na „Přizpůsobit"
   neposkočil do jiné šířky. */
.cookie-bar,
.cookie-settings {
  width: fit-content;
  max-width: min(100%, var(--cookie-panel-width));
  margin-inline: auto;
  background: var(--color-cookie-bg);
  pointer-events: auto;
}

.cookie-consent__inner {
  padding: clamp(28px, 3vw, 44px);
}

/* ── Lišta ─────────────────────────────────────────────────────────────── */

.cookie-bar__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 80px);
}

.cookie-bar__intro {
  margin: 0;
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-body);
}

/* Odkaz na informace o cookies – text béžový, šipka oranžová, stejně jako
   textové odkazy v blocích. Šipka je ikona `diagonal` z includes/site.php. */
.cookie-bar__info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--color-text-body);
  transition: color var(--transition-fast);
}

.cookie-bar__info .icon-svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  transition: transform var(--transition-fast);
}

.cookie-bar__info:hover,
.cookie-bar__info:focus-visible {
  color: var(--color-accent);
}

.cookie-bar__info:hover .icon-svg,
.cookie-bar__info:focus-visible .icon-svg {
  transform: translate(2px, -2px);
}

/* Tlačítka pod sebou a stejně široká – z návrhu. */
.cookie-bar__actions {
  display: grid;
  gap: 16px;
  flex: none;
}

.cookie-consent__button {
  min-width: 246px;
  padding-block: 14px;
}

/* Tlačítka lišty se na hover NEPŘEVRACEJÍ jako jinde na webu (plné by se
   vyprázdnilo na obrys a naopak). Dvě tlačítka pod sebou by si tím
   prohodila vzhled a na okamžik vypadala jako to druhé. Místo toho každé
   zůstane samo sebou a jen ztmavne / zesvětlí. Obojí se skládá přes
   proměnné základního .button, takže focus a přechod fungují samy. */
.cookie-consent__button.button--filled {
  --button-hover-bg: var(--color-cookie-accent-dark);
  --button-hover-color: var(--color-green);
  --button-hover-border-color: var(--color-cookie-accent-dark);
}

/* Obrys v oranžové, ne v béžové jako běžné .button--outline. */
.cookie-consent__button--outline {
  --button-bg: transparent;
  --button-color: var(--color-accent);
  --button-border-color: var(--color-accent);
  --button-hover-bg: var(--color-cookie-accent-light);
  --button-hover-color: var(--color-green);
  --button-hover-border-color: var(--color-cookie-accent-light);
}

/* ── Nastavení ─────────────────────────────────────────────────────────── */

/* Panel je vyšší než lišta a na nízkém okně se musí dát doscrollovat –
   jinak by se k tlačítkům dole nešlo dostat. Nahoře si nechává stejnou
   mezeru jako dole, ať nedosedne na horní hranu okna. */
.cookie-settings {
  max-height: calc(100svh - var(--cookie-edge-gap) * 2);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Groteskový textový řez, ne ozdobný patkový – ten na webu zůstává jen
   velkým nadpisům v hero. Kit má u --font-sans řezy 400 a 700, proto 400. */
.cookie-settings__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--color-accent);
}

.cookie-settings__intro {
  margin: 28px 0 0;
  max-width: 92ch;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-body);
}

.cookie-settings__groups {
  margin: clamp(40px, 4vw, 64px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(28px, 3vw, 40px);
}

/* Celý řádek je popiskem zaškrtávátka – kliknout jde i do textu. */
.cookie-settings__group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  cursor: pointer;
}

.cookie-settings__group-text {
  display: grid;
  gap: 4px;
}

.cookie-settings__group-title {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-high);
}

/* Doplněk v závorce („(marketingové)“) je součástí nadpisu skupiny, ale
   netučný – v návrhu odlišuje název od poznámky. */
.cookie-settings__group-note {
  font-weight: 400;
}

.cookie-settings__group-copy {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-body);
}

/* Překreslené zaškrtávátko: prázdný oranžový čtvereček, zaškrtnutý je celý
   oranžový – bez fajfky, tak je to v návrhu. Zůstává skutečným inputem
   kvůli klávesnici a čtečkám. */
.cookie-settings__input {
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color-accent);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.cookie-settings__input:checked {
  background-color: var(--color-accent);
}

/* Nezbytné cookies jsou disabled – ať kurzor neslibuje, že s nimi jde hnout.
   Modifikátor je na popisku schválně (a ne přes :has), aby řádek nechytal
   ruku ani nad textem. */
.cookie-settings__group-label--locked,
.cookie-settings__input:disabled {
  cursor: default;
}

.cookie-settings__input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.cookie-settings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(40px, 4.5vw, 64px);
}

/* ── Užší okna ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .cookie-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .cookie-bar__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cookie-consent__button {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .cookie-consent__inner {
    padding-block: 28px;
    padding-inline: 20px;
  }

  /* Na mobilu smí lišta zabrat nanejvýš tři čtvrtiny okna – pod ní musí
     zůstat vidět kus stránky, ke které se souhlas vztahuje. */
  .cookie-bar,
  .cookie-settings {
    max-height: 76svh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cookie-bar__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .cookie-settings__group-label {
    gap: 20px;
  }

  .cookie-settings__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}