/* ==================================================================
   DETAIL NEMOVITOSTI — /nemovitosti/<slug>/

   Rytmus sekcí, hlavička sekce a závěrečné CTA jsou v sekce.css,
   karty podobných nemovitostí v nemovitosti.css, mapa v mapa.css.
   Tady je jen to, co má detail vlastní: hlavička s cenou, galerie
   a její dva dialogy, klíčová čísla, popis, tabulka parametrů, sdílení.
   ================================================================== */

/* ------------------------------------------------------------------
   1 — HLAVIČKA
   ------------------------------------------------------------------ */

.detail { padding-block: var(--pad-m) var(--pad-s); }

@media (max-width: 63.9375rem) {
  .detail { padding-top: var(--pad-l); }
}

.detail__hlavicka h1 { max-width: 22ch; }

.detail__adresa {
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--vaha-ui);
}
.detail__adresa a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.22em;
  white-space: nowrap;
}
.detail__adresa a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.detail__cenovka {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-7);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.detail__popis-ceny {
  margin: 0 0 var(--space-1);
  color: var(--text-label);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.detail__cena {
  margin: 0;
  font-family: var(--font-nadpis);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.1;
}

.detail__energie {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.4;
}

/* Písmeno třídy v rámečku — bez barevné škály, jen typografie. */
.detail__trida {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding-inline: var(--space-2);
  border: 1px solid var(--text);
  font-family: var(--font-nadpis);
  font-weight: 500;
  font-size: var(--fs-h4);
  color: var(--text);
}

/* ------------------------------------------------------------------
   2 — GALERIE: jedna velká, pod ní náhledy
   ------------------------------------------------------------------ */

.sekce--galerie { padding-block: 0 var(--pad-s); }

.galerie__hlavni {
  position: relative;
  aspect-ratio: 16 / 9;
  /* Vodorovný tah prstem patří galerii (listování), svislý stránce.
     Bez toho si tah vzal prohlížeč a swipe nikdy nedorazil. */
  touch-action: pan-y pinch-zoom;
  background: var(--c-placeholder);
  overflow: hidden;
}

.galerie__velka {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.galerie__velka img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.galerie__velka:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Šipky — stejná sazba jako u recenzí, jen položené na fotku. */
.galerie__sipka {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(18, 18, 19, 0.45);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background var(--prechod), border-color var(--prechod);
}
.galerie__sipka svg { width: 1.125rem; height: 1.125rem; }
.galerie__sipka--zpet  { left: var(--space-4); }
.galerie__sipka--vpred { right: var(--space-4); }
.galerie__sipka:hover { background: var(--accent); border-color: var(--accent); }
.galerie__sipka:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.galerie__pocitadlo {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  background: rgba(18, 18, 19, 0.55);
  color: #fff;
  font-size: var(--fs-mini);
  line-height: 1.6;
  letter-spacing: 0.06em;
  pointer-events: none;
}

/* Řádek náhledů — posouvá se do strany, aktivní má zlatý rám. */
.galerie__nahledy {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.galerie__nahledy::-webkit-scrollbar { display: none; }

.galerie__nahled {
  flex: 0 0 auto;
  width: 6.5rem;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: var(--c-placeholder);
  scroll-snap-align: start;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity var(--prechod);
}
.galerie__nahled img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galerie__nahled:hover,
.galerie__nahled.je-aktivni { opacity: 1; }
.galerie__nahled.je-aktivni { outline: 2px solid var(--accent); outline-offset: -2px; }
.galerie__nahled:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }

.galerie__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-5);
}

.galerie__video {
  color: var(--text-muted);
  font-size: var(--fs-small);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.28em;
}
.galerie__video:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* --- dialogy: společné ----------------------------------------------
   <dialog> zvládne fokus, Esc i zatmavení sám. */

.galerie-mrizka,
.prohlizec {
  padding: 0;
  border: 0;
  color: var(--text);
}
.galerie-mrizka::backdrop { background: rgba(18, 18, 19, 0.6); }
.prohlizec::backdrop { background: rgba(18, 18, 19, 0.96); }

.galerie__zavrit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--prechod), color var(--prechod);
}
.galerie__zavrit:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.galerie__zavrit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- mřížka všech fotek ------------------------------------------- */

.galerie-mrizka {
  width: min(100vw - 2 * var(--space-4), 80rem);
  max-height: calc(100svh - 2 * var(--space-4));
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.galerie-mrizka__hlava {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.galerie-mrizka__hlava .label { grid-column: 1; margin: 0; }
.galerie-mrizka__hlava h2 { grid-column: 1; font-size: var(--fs-blok); line-height: var(--lh-h2); }
.galerie-mrizka__hlava .galerie__zavrit { grid-column: 2; grid-row: 1 / span 2; }
.galerie-mrizka__pocet { color: var(--text-label); font-weight: 400; }

.galerie-mrizka__sit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-2);
  padding: var(--space-5);
}

.galerie-mrizka__polozka {
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: var(--c-placeholder);
  cursor: zoom-in;
}
.galerie-mrizka__polozka img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--prechod); }
.galerie-mrizka__polozka:hover img { opacity: 0.85; }
.galerie-mrizka__polozka:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- prohlížeč přes celou obrazovku ------------------------------- */

.prohlizec {
  width: 100vw;
  height: 100svh;
  max-width: none;
  max-height: none;
  background: transparent;
  /* Přetažení prstem posouvá fotky, ne stránku pod nimi. */
  touch-action: pan-y pinch-zoom;
}

.prohlizec__telo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--space-6) var(--space-4);
  box-sizing: border-box;
}

.prohlizec__obr {
  display: block;
  max-width: 100%;
  max-height: calc(100svh - 2 * var(--space-6) - 2rem);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.prohlizec__pocitadlo {
  margin: var(--space-4) 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
}

.prohlizec__zavrit {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
}
.prohlizec__sipka { position: absolute; }

@media (min-width: 64rem) {
  .prohlizec__sipka--zpet,
  .galerie__sipka--zpet.prohlizec__sipka  { left: var(--space-6); }
  .galerie__sipka--vpred.prohlizec__sipka { right: var(--space-6); }
}

/* ------------------------------------------------------------------
   3 — KLÍČOVÁ ČÍSLA
   ------------------------------------------------------------------ */

.klicove {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  padding-block: var(--space-5);
  border-block: 1px solid var(--line);
}

.klicove li { display: flex; flex-direction: column; gap: var(--space-1); }

.klicove__hodnota {
  font-family: var(--font-nadpis);
  font-weight: 500;
  font-size: var(--fs-cislo);
  line-height: 1.1;
}

.klicove__popis {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}

@media (min-width: 48rem) {
  .klicove { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------
   4 — POPIS
   ------------------------------------------------------------------ */

/* Šířka čteného sloupce.

   Všechno ostatní na stránce — galerie, pás čísel, tabulka parametrů —
   jde přes celou šířku obsahu (1260 px). Texty se předtím lámaly na
   694 px, tedy v polovině, a vedle nich zůstal prázdný pruh: vypadalo
   to, jako by tam něco chybělo.

   Přes celou šířku jít nemůžou. Na 1260 px má řádek přes sto znaků
   a oko na konci řádku ztrácí, kde začíná další. 52 rem je kompromis:
   asi osmdesát znaků na řádek, o pětinu míň řádků než dřív.

   Na mobilu a na tabletu se nic nemění — tam je okno užší než tahle
   hodnota, takže se vůbec neuplatní. */
.popis {
  display: grid;
  gap: var(--space-7);
  max-width: 52rem;
}

/* Úvodní odstavec nad popisem má stejnou hranici, aby oba texty
   končily na stejné svislici. Dřív se lišily o 73 px, což bylo málo
   na záměr a dost na to, aby to vypadalo nedbale. */
.sekce__hlavicka p:not(.label) { max-width: 52rem; }

.popis__blok h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

.popis__blok p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.popis__blok p + p { margin-top: var(--space-4); }

.popis__seznam {
  display: grid;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.popis__seznam li {
  position: relative;
  padding-left: var(--space-5);
}
/* Zlatá tečka místo obyčejné odrážky — stejná jako v legendě mapy. */
.popis__seznam li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
}

/* Delší řádek potřebuje víc vzduchu mezi řádky, jinak oko na konci
   řádku sklouzne zpátky na ten stejný. Platí jen na širokých oknech,
   kde je řádek opravdu dlouhý — na mobilu by to text jen natáhlo.

   Stojí to až tady schválně: výš by to pravidla nad ním přebila. */
@media (min-width: 64rem) {
  .popis__blok p,
  .popis__seznam { line-height: 1.6; }
}


/* ------------------------------------------------------------------
   4b — LIŠTA S KONTAKTEM VEDLE POPISU

   Kdo si popis přečte a chce se ozvat, měl by to mít po ruce hned.
   Dřív musel doscrollovat na konec stránky nebo odejít na Kontakt
   a tam teprve vypisovat, o kterou nemovitost jde. Odkazy odsud
   vezou název nemovitosti s sebou.

   Vejde se to až od 1200 px. Nejdřív tu stálo 1024 a lišta se vedle
   textu o pevné šířce 832 px mačkala do dvou set pixelů: telefon se
   lámal uprostřed čísla a věta vedle něj měla tři slova na řádek.
   Od 1200 px má lišta vždycky svých 352 px a užší okno ubírá textu,
   ne jí.

   Na užším displeji se lišta schová — pod textem by jen zdvojovala
   závěrečnou výzvu, která na konci stránky stojí tak jako tak.
   ------------------------------------------------------------------ */

.akce { display: none; }

@media (min-width: 75rem) {
  .detail__sloupce {
    display: grid;
    /* Lišta má přednost: dostane svých 352 px a text si vezme, co
       zbude. Opačně — text napevno, lišta ze zbytku — to bylo dřív
       a na užším okně z lišty zbyl proužek.

       Text se přitom nerozteče: drží ho vlastní strop 52 rem, takže
       na širokém monitoru zůstane řádek stejně dlouhý jako dřív
       a přibývá jen vzduch mezi sloupci. */
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem);
    gap: var(--space-8);
    align-items: start;
  }

  .akce {
    display: grid;
    justify-items: start;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--line);
    /* Veze se s sebou, dokud je vedle ní co číst, a zastaví se na
       konci popisu. Dělá to sticky, ne skript — stejně jako fotka
       na Kontaktu. Sticky funguje jen u položky zarovnané nahoru,
       proto align-items: start výš. */
    position: sticky;
    top: calc(var(--vyska-headeru) + var(--space-5));
  }

  .akce .label { margin: 0; }

  .akce__veta {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  /* Telefon je po tlačítku druhá nejnápadnější věc. Kdo chce volat,
     nemá kvůli tomu vyplňovat formulář. */
  .akce__telefon {
    margin-top: var(--space-2);
    color: var(--text);
    font-size: var(--fs-h4);
    line-height: 1.25;
    font-weight: var(--vaha-ui);
    text-decoration: none;
  }
  .akce__telefon:hover { color: var(--accent); }

  .akce__pozn {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-mini);
    line-height: 1.6;
  }

  .akce__email {
    color: var(--text);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 0.22em;
  }
  .akce__email:hover { color: var(--accent); text-decoration-color: var(--accent); }
}

/* ------------------------------------------------------------------
   5 — PODROBNÉ INFORMACE
   ------------------------------------------------------------------ */

.parametry {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line-papir);
}

.parametry__radek {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line-papir);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.parametry__radek dt { color: var(--text-muted); }
.parametry__radek dd { margin: 0 0 0 auto; text-align: right; }

@media (min-width: 64rem) {
  .parametry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(3rem, 0.5rem + 5.4vw, 5.25rem);
  }
}

/* ------------------------------------------------------------------
   6 — SDÍLENÍ
   ------------------------------------------------------------------ */

.sdileni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
}

.sdileni__tlacitko {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-text);
  font-weight: var(--vaha-ui);
  font-size: var(--fs-small);
  text-decoration: underline;
  text-decoration-color: var(--line-papir);
  text-underline-offset: 0.28em;
  cursor: pointer;
}
.sdileni__tlacitko svg { width: 1rem; height: 1rem; }
.sdileni__tlacitko:hover { color: var(--accent); text-decoration-color: var(--accent); }
.sdileni__tlacitko:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sdileni__hlaska {
  color: var(--text-label);
  font-size: var(--fs-mini);
}

/* ------------------------------------------------------------------
   7 — MAPA
   ------------------------------------------------------------------ */

.detail__mapa-pozn {
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.detail__mapa-pozn a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.22em;
}
.detail__mapa-pozn a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* Poslední světlá sekce před tmavým CTA — stejný nádech jako jinde. */
.sekce--podobne { padding-bottom: var(--pad-xl); }

/* ------------------------------------------------------------------
   TISK — jen to, co si člověk chce vzít na prohlídku
   ------------------------------------------------------------------ */

@media print {
  .header, .menu, .paticka, .zaver, .sekce--podobne,
  .galerie__sipka, .galerie__pocitadlo, .galerie__akce, .galerie__nahledy,
  .sdileni, [data-mapa], .mapa-cr, .detail__adresa a, .detail__mapa-pozn a {
    display: none !important;
  }
  .sekce { padding-block: 1.2rem; }
  .sekce--papir { background: none; }
  .galerie__hlavni { aspect-ratio: auto; }
  .galerie__velka img { height: auto; }
  .odhalit { opacity: 1 !important; transform: none !important; }
  a { color: inherit; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  .galerie__nahled,
  .galerie__sipka,
  .galerie__zavrit,
  .galerie-mrizka__polozka img { transition: none; }
}

.sdileni__tlacitko { padding-block: var(--space-2); }

/* --- videoprohlídka --------------------------------------------------- */

.galerie__prehrat { gap: var(--space-2); }

.video-okno {
  width: min(72rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100svh - 2rem);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.video-okno::backdrop { background: rgba(18, 18, 19, 0.92); }
.video-okno__ramec {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100svh - 7rem);
  margin-inline: auto;
  background: #000;
}
/* Video na výšku (Shorts) — úzký rámeček uprostřed. */
.video-okno__ramec--navysku { aspect-ratio: 9 / 16; width: auto; height: min(80svh, 44rem); }
.video-okno__ramec iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-okno__zavrit {
  position: absolute;
  top: -3.25rem;
  right: 0;
}
.video-okno__pozn {
  margin: var(--space-3) 0 0;
  color: var(--c-kourova);
  font-size: var(--fs-small);
  text-align: center;
}
.video-okno__pozn a { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }

/* Upozornění na fotky upravené umělou inteligencí. Stojí pod galerií,
   protože podle AI Actu (čl. 50, od 2. 8. 2026) to musí být vidět hned
   při prvním zobrazení, ne až někde v zásadách. */
.galerie__ai {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--hnedoseda);
  max-width: 60ch;
}