/* ============================================================
   pages.css — Page-specific styles.
   Listing (kapslove-domky), FAQ, Kontakt, Error.
   ============================================================ */

/* Detail/listing page h1 — menší než HP hero display (106px).
   Jen desktop; tablet/mobile řeší --font-size-display breakpointy. */
@media (min-width: 1024px) {
  .page-kapslove-domky .display-headline,
  .page-faq .display-headline,
  .page-kontakt .display-headline,
  .page-sluzby .display-headline {
    font-size: 7rem;   /* 70px @ 1920 (1rem = 10px) */
  }
}

/* ============================================================
   Homepage — fixed sections (1. Hero / 2. About / 3. Advantages / 4. Domky)
   ============================================================ */

/* Hero — image jako absolute background za topbarem + headline overlay
   Aspect 1920:1100 ≈ Figma layout. object-position: center bottom →
   subjekt (kapsle) sedí dole, top se ořízne pokud je třeba. */
/* Hero — fixed 1200 height (Figma MAIN frame), image full-bleed bg.
   Headline y=245 (Figma) → padding-top 24.5rem od top hero.
   1rem = 10px @ 1920 → 120rem = 1200px (scaluje s viewportem fluid). */
.home-hero {
  position: relative;
  /* Full-bleed mimo body max-width 1920px — hero pokrývá celý viewport. */
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -11rem;       /* extend pod topbar (topbar ~10.5rem s logo) */
  height: 120rem;           /* 1200px @ 1920 */
  display: flex;
  flex-direction: column;
  align-items: center;      /* horizontal center pouze */
  padding-top: 24.5rem;     /* per Figma 3:348 (headline y=245) */
  text-align: center;
  isolation: isolate;
}
.home-hero__bg {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  z-index: -1;
}
.home-hero__bg-image,
.home-hero__bg picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;   /* image větší než kontejner → vystředěné, ořez stejnoměrný */
}
.home-hero__bg-fade {
  position: absolute;
  inset: auto 0 -2px 0;     /* extend o 2px pod hero — zaplní sub-pixel rounding gap při scrollu */
  height: calc(50% + 2px);
  background: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%);
  pointer-events: none;
}
/* Mobile/desktop hero image switch — když je nahraný mobile bg, na <1024 se použije on (jinak desktop fallback). */
.home-hero__bg--mobile { display: none; }
@media (max-width: 1023px) {
  .home-hero--has-mobile .home-hero__bg--desktop { display: none; }
  .home-hero--has-mobile .home-hero__bg--mobile { display: block; }
  /* Hero proporce na mobil — výška místo fixních 1200px */
  .home-hero {
    height: auto;
    min-height: 100vh;
    padding-top: 15rem;
    padding-bottom: 8rem;
    margin-top: -8rem;      /* topbar overlap menší */
  }
  .home-hero__title { max-width: none; }
}
.home-hero__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}
.home-hero__title { max-width: 18ch; }

/* Mobile-only line breaks (např. v hero h1) — display: none na desktop. */
.mobile-br { display: none; }
@media (max-width: 1023px) {
  .mobile-br { display: inline; }
}

/* Sekce po hero — stacking context nad parallax bg image (která žije v home-hero isolation) */
.home-about,
.home-advantages,
.home-domky {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
}
.home-about {
  padding-block: var(--space-5) var(--space-9);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}
@media (max-width: 1023px) {
  .home-about { gap: var(--space-4); padding-bottom: 30px; }
}
.home-about__h2 {
  font-size: var(--font-size-h2);
  font-weight: 600;
  line-height: 1.2;
  max-width: 90rem;
}
.home-about__body,
.home-about__body p,
.home-about__body li {
  font-size: 2.1rem;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 90rem;
}
.home-about__body > * + * { margin-top: 1em; }
@media (max-width: 1023px) {
  .home-about__body,
  .home-about__body p,
  .home-about__body li { font-size: 1.3rem; }
}

.home-advantages {
  padding-block: var(--space-7);
}

.home-domky {
  padding-block: var(--space-9);
}
@media (max-width: 1023px) {
  .home-domky { padding-bottom: 40px; }
}

/* ============================================================
   Sluzby page top headline
   ============================================================ */
.sluzby-headline {
  padding-top: var(--space-9);
  padding-bottom: var(--space-8);   /* 65px (z 40) */
  text-align: center;
}
.sluzby-headline .display-headline { max-width: 18ch; margin: 0 auto; }
/* První blok pod nadpisem těsně naváže — žádný top padding */
.sluzby > .block:first-child { padding-top: 0; }

/* ============================================================
   Listing — /kapslove-domky
   ============================================================ */
.listing .display-headline { margin-bottom: var(--space-7); }
.listing__perex {
  max-width: 70ch;
  margin: 0 auto var(--space-7);
  text-align: center;
  color: var(--color-muted);
  font-size: var(--font-size-h4);
}
/* Listing section bottom — víc dechu k pre-footeru, vizuálně sedne s HP (kde domky-featured má button row před pre-footerem) */
.listing.section { padding-bottom: var(--space-9); }
.listing__grid {
  list-style: none;
  display: grid;
  gap: var(--space-6);                              /* 30px Figma */
  /* 3 sloupce napevno × max 45rem (450px Figma); justify-content centers
     když je míň karet než sloupců (např. 2 produkty). */
  grid-template-columns: repeat(3, minmax(0, 45rem));
  justify-content: center;
  padding: 0;
}
/* Tablet: 2 sloupce — minmax(0, 1fr) zabraňuje overflow při dlouhém content */
@media (max-width: 1023px) {
  .listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}
/* Mobil: 1 sloupec */
@media (max-width: 600px) {
  .listing__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}
.listing__item { display: flex; margin-top: 0; min-width: 0; }    /* aby card vyplnil výšku grid cell + override globální li+li margin + min-width: 0 zabraňuje grid-blowout od dlouhého obsahu */

/* Card product (Vypis listing + DOMKY featured) — per Figma 80:681 (450×608) */
.card-product {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  position: relative;
  padding-bottom: var(--space-6);
  width: 100%;
  /* Bez explicitní výšky: listing__item stretch v gridu zarovná všechny kartičky
     v řadě na výšku nejvyšší. Aspect-ratio 4/3 na image-wrap drží proporci obrázku. */
}
.card-product__image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  overflow: hidden;
  background: #362828;
}
.card-product__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.card-product:hover .card-product__image { transform: scale(1.04); }
.card-product__label {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  height: 3rem;
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  background: rgba(16, 15, 15, 0.35);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: var(--radius-main);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-fg);
}
.card-product__body {
  padding: var(--space-6) var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  flex: 1;
  min-height: 0;            /* aby body nepřetékalo a chips/cena seděly dole přes margin-top: auto */
}
.card-product__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.card-product__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 2.6rem;
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-fg);
}
.card-product__title-icon {
  color: var(--color-accent);
  transition: transform 0.2s ease;
}
.card-product:hover .card-product__title-icon { transform: translateX(0.4rem); }
.card-product__perex {
  font-size: var(--font-size-body);
  color: var(--color-muted);
  line-height: 1.6;
}
.card-product__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
}
/* Tablet only — price pod chips (vertikální stack), aby se chips nezalamovaly */
@media (min-width: 601px) and (max-width: 1023px) {
  .card-product__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}
.card-product__chips {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.card-product__chip {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--font-size-body);
  color: var(--color-muted);
}
.card-product__chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  background: var(--color-accent-glow);
  border-radius: var(--radius-mini);
  color: var(--color-accent);
}
.card-product__chip-icon .icon { width: 1.8rem; height: 1.8rem; }
.card-product__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.card-product__price-before {
  font-size: 1.3rem;
  color: #f1e9db;                        /* plná barva — průhlednost přes opacity, ať se čára nestáčí přes text */
  opacity: 0.5;
  text-decoration: line-through;
  white-space: nowrap;
}
.card-product__price {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
}

/* Kompaktnější karty na mobilu/tabletu — menší ribbon, chip ikony, paddingy */
@media (max-width: 1023px) {
  .card-product__chip-icon { width: 2.4rem; height: 2.4rem; border-radius: 0.5rem; }
  .card-product__chip-icon .icon { width: 1.3rem; height: 1.3rem; }
  .card-product__chip { font-size: 1rem; gap: 0.6rem; }
  .card-product__label { height: 1.6rem; padding: 0 0.6rem; font-size: 0.8rem; border-radius: 0.6rem; }
  .card-product__title { font-size: 2rem; }
  .card-product__perex { font-size: 1.2rem; }
  .card-product__price { font-size: 1.2rem; }
  .card-product__prices { align-items: flex-start; }
  .card-product__price-before { font-size: 0.9rem; }
  .card-product__body { padding: var(--space-4) var(--space-4) 0; gap: var(--space-4); }
  .card-product { padding-bottom: var(--space-4); }
}

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq .display-headline { margin-bottom: var(--space-7); text-align: center; }
.faq__intro {
  max-width: 70ch;
  margin: 0 auto var(--space-7);
  text-align: center;
  color: var(--color-muted);
  font-size: var(--font-size-h4);
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;                            /* 10px Figma — mezi položkami */
  max-width: 93rem;                     /* 930px Figma */
  margin: 0 auto;
}
/* Item = jen wrapper bez vizuálu, vizuál je na <summary> a <answer> samostatně */
.faq__item {
  background: transparent;
  border: 0;
}
.faq__question {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2rem;                            /* 20px Figma */
  padding: 2rem;                        /* 20px Figma */
  background: var(--color-glass-i);
  -webkit-backdrop-filter: blur(var(--blur-glass));
          backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--color-glass-ii);
  border-radius: var(--radius-main);    /* 12px Figma */
  font-size: 2rem;                      /* 20px Figma */
  font-weight: 600;                     /* SemiBold */
  color: var(--color-fg);
  line-height: 1.3;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question-text { flex: 1; min-width: 0; }
.faq__chevron {
  flex-shrink: 0;
  width: 1.6rem;                        /* 16px — vizuálně sedí s Figmou (kde se 24×24 ikona vykresluje s drobným chevron stroke) */
  height: 1.6rem;
  color: var(--color-fg);
  transition: transform 0.2s ease;
}
/* Otevřený stav — gold pressed bg + chevron up */
.faq__item[open] .faq__question {
  background: var(--color-accent-pressed);   /* #a67638 Button Gold */
  border-color: var(--color-accent-pressed);
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); }

.faq__answer {
  margin-top: 0.5rem;                   /* 5px Figma — gap mezi otázkou a odpovědí */
  padding: 2rem;                        /* 20px Figma */
  background: var(--color-glass-i);
  -webkit-backdrop-filter: blur(var(--blur-glass));
          backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--color-glass-ii);
  border-radius: var(--radius-main);    /* 12px Figma */
  font-size: var(--font-size-body);     /* 16px Figma */
  line-height: 2.6rem;                  /* 26px Figma */
  color: var(--color-muted);            /* Perex */
}
.faq__answer > * + * { margin-top: 1em; }

@media (max-width: 1023px) {
  .faq__intro { font-size: var(--font-size-body); }
  .faq__question { font-size: 1.1rem; padding: 1.4rem; gap: 1rem; }
  .faq__answer { font-size: 0.95rem; line-height: 1.6; padding: 1.4rem; }
  .faq__chevron { width: 1.2rem; height: 1.2rem; }
}
@media (max-width: 600px) {
  .faq__question { font-size: 1rem; padding: 1.2rem; }
  .faq__answer { font-size: 0.9rem; padding: 1.2rem; }
}

/* ============================================================
   Kontakt page
   ============================================================ */
.kontakt__head { text-align: center; margin-bottom: var(--space-7); }
.kontakt__head .display-headline { margin-bottom: var(--space-5); }
.kontakt__intro {
  max-width: 70ch;
  margin: 0 auto var(--space-7);
  text-align: center;
  color: var(--color-muted);
}
.kontakt__intro,
.kontakt__intro p,
.kontakt__intro li {
  font-size: 2.1rem;                /* sjednoceno s home-about__body */
  line-height: 1.6;
}
.kontakt__info-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-9);
}
/* Tablet — 2-col grid, double-box přes celou šířku, ostatní 50/50 */
@media (max-width: 1023px) {
  .kontakt__info-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontakt__intro,
  .kontakt__intro p,
  .kontakt__intro li { font-size: 1.3rem; line-height: 1.6; }
}
/* Mobil — všechno full šířka, 1 pod druhým */
@media (max-width: 600px) {
  .kontakt__info-boxes { grid-template-columns: minmax(0, 1fr); }
}
.kontakt__info-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-5);   /* 30/20 per Figma */
  gap: var(--space-3);
}
/* Slitá skupina (pod formulářem) — boxy se dotýkají, jedno průběžné
   glass pozadí. card-glass se na boxy nedává; pozadí + rámeček + radius
   nese wrapper, overflow: hidden zaoblí vnější rohy. */
.kontakt__info-boxes--merged {
  gap: 0;
  max-width: 93rem;        /* 930px @ 1920 (1rem = 10px) */
  margin: 10rem auto 14rem;  /* 100 / 140 @ 1920 */
  overflow: hidden;
  background: var(--color-glass-i);
  -webkit-backdrop-filter: blur(var(--blur-glass));
          backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--color-glass-ii);
  border-radius: var(--radius-main);
}
/* Tablet + mobil — vertikální margin cca 1/3 desktopu (≈33 / 47px) */
@media (max-width: 1023px) {
  .kontakt__info-boxes--merged { margin: 2.4rem auto 3.4rem; }
}
.kontakt__info-box-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
/* Double box — Společnost + Adresa pattern (per Figma 19:3550).
   Roztáhne se přes 2 sloupce v gridu, uvnitř má 2 sub-sloupce side-by-side. */
.kontakt__info-box--double {
  grid-column: span 2;
  flex-direction: row;
  gap: var(--space-5);
  align-items: stretch;
}
/* Tablet — double-box spans 2 cols (full šířka řády), Společnost vlevo + Adresa vpravo zůstává side-by-side */
@media (max-width: 1023px) {
  .kontakt__info-box--double { grid-column: 1 / -1; }
}
/* Mobil — double-box jen 1 col + uvnitř stack vertikálně (úzké pro 2 sub-cols) */
@media (max-width: 600px) {
  .kontakt__info-box--double { grid-column: auto; flex-direction: column; }
}
/* Pravý sub-sloupec bez ikony — vyrovná se s ikonou-bearing sloupcem (top alignment) */
.kontakt__info-box-col--noicon { padding-top: 0; }
.kontakt__info-box .icon {
  width: 2.9rem;          /* +20 % oproti default .icon (2.4rem) */
  height: 2.9rem;
  color: var(--color-accent);
}
.kontakt__info-box h3 {
  font-size: var(--font-size-h4);
  font-weight: 600;
  color: var(--color-fg);
}
/* Hodnota = stejný styl jako .info-boxy__value v detailu kapsle (20px SemiBold white).
   .info-boxy__value je div, vnitřní <p> z kirbytextu dědí styl. */
.kontakt__info-box .info-boxy__value,
.kontakt__info-box .info-boxy__value p {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-fg);
  line-height: 1.3;
}
.kontakt__info-box .info-boxy__value a {
  color: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
.kontakt__info-box .info-boxy__value a:hover { color: var(--color-accent); }
/* Slitá skupina pod formulářem — jen první kartička má 20px/600,
   ostatní 17px Regular. */
.kontakt__info-boxes--merged .kontakt__info-box:not(:first-child) .info-boxy__value,
.kontakt__info-boxes--merged .kontakt__info-box:not(:first-child) .info-boxy__value p {
  font-size: 1.7rem;   /* 17px @ 1920 */
  font-weight: 400;
}
/* Pravý sloupec (bez ikony) — text per Figma 16px Regular white, leading 26px */
.kontakt__info-box-col--noicon .info-boxy__value,
.kontakt__info-box-col--noicon .info-boxy__value p {
  font-size: var(--font-size-body);   /* 16px */
  font-weight: 400;                    /* Regular per Figma */
  line-height: 2.6rem;                 /* 26px Figma */
}

/* Kontakt page — odsazení k patičce stejné jako u inquiry-form bloku
   (wrapper+section bez bottom paddingu, mezeru drží jen .site-footer padding-top 40px) */
.kontakt.section { padding-bottom: 0; }
.kontakt__form-wrapper {
  max-width: 70rem;
  margin: 0 auto;
  padding: var(--space-7) var(--space-7) 0;
  text-align: center;
}
.kontakt__form-headline {
  text-align: center;
  margin-bottom: var(--space-6);
  font-size: var(--font-size-h2);
}

@media (max-width: 1023px) {
  .kontakt__form-wrapper { padding: var(--space-5) var(--space-5) 0; }
}

/* ============================================================
   Error 404 page
   ============================================================ */
.error {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-5);
  padding: var(--space-9) 0;
}
.error h1 {
  font-size: 16rem;
  background: var(--gradient-display);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
}
.error p {
  font-size: var(--font-size-h4);
  color: var(--color-muted);
}

/* ============================================================
   Default text-only page (T&C, Privacy)
   ============================================================ */
.text-page {
  /* Container roztažený na default 1410px (zděděno z .grid-container).
     Body uvnitř má vlastní max-width pro čitelnost dlouhého textu. */
  padding-block: var(--space-9);
}
.text-page h1 {
  font-size: var(--font-size-h1);
  margin-bottom: var(--space-7);
  text-align: center;
}
.text-page__body {
  font-size: var(--font-size-body);
  line-height: var(--lh-loose);
  color: var(--color-fg);
  max-width: 80ch;        /* optimální měřítko pro čtení (≈ 720px) */
  margin-inline: auto;    /* na střed kontejneru */
}
.text-page__body > * + * { margin-top: 1em; }
.text-page__body h2,
.text-page__body h3 { margin-top: 2em; }