/* ==================================================================
   NEMOVITOSTI — sekce podle Figmy (frame „Stránka Nemovitosti", 226:712)

   Hero, rytmus sekcí a závěrečné CTA jsou sdílené v sekce.css.
   Tady je jen to, co má tahle stránka vlastní.
   ================================================================== */

/* Hero končí fotkou, na kterou navazuje první sekce — stejně jako
   na Referencích. */
.sekce--hero-svetly { padding-block: var(--pad-m) var(--pad-s); }

.hero-svetly__tlacitko { margin-top: var(--space-6); }

/* Kotva z tlačítka nesmí skončit pod hlavičkou. */
#nabidka { scroll-margin-top: var(--vyska-headeru); }

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

/* Poslední sekce před tmavým CTA — stejný nádech jako na ostatních
   stránkách. */
.sekce--priprava { padding-bottom: var(--pad-xl); }

/* ------------------------------------------------------------------
   PLNÝ VÝPIS — /nemovitosti/nabidka/ a /nemovitosti/prodane/

   Stránka bez hera: první je rovnou hlavička sekce. Horní odsazení
   proto sedí na heru ostatních stránek, spodní na poslední sekci před
   tmavým CTA — rytmus webu se tím nemění.
   ------------------------------------------------------------------ */

.sekce--vypis { padding-block: var(--pad-m) var(--pad-xl); }

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

/* Když ve výpisu nic není. Stane se to jen u nabídky a jen občas,
   ale prázdná stránka vypadá jako chyba webu. */
.nemovitosti-prazdno {
  margin: var(--space-6) 0 0;
  max-width: 52ch;
  color: var(--text-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

/* ------------------------------------------------------------------
   KARTA NEMOVITOSTI

   Široký pás s fotkou přes celou plochu, text a tlačítko leží na ní.
   Aby byl bílý text čitelný na jakékoli fotce, je pod ním přechod do
   tmavé — plošné ztmavení celé fotky by ji zbytečně ušpinilo.
   Poměr stran se mění: na mobilu je pás vyšší, aby fotka nebyla jen
   proužek, na desktopu má poměr z návrhu.
   ------------------------------------------------------------------ */

.nemovitosti {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.nemovitost {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Ne aspect-ratio, ale minimální výška — kdyby se text na úzkém
     displeji nevešel, karta se roztáhne místo aby ho ořízla.
     Násobí se stejným faktorem jako odsazení sekcí, takže na nízkém
     monitoru nezabere jedna karta skoro celou obrazovku. */
  min-height: calc(clamp(20rem, 16rem + 12vw, 24.6875rem) * var(--f-vyska));
  overflow: hidden;
  background: var(--c-noir);
}

.nemovitost__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Výřez z návrhu — u každé fotky jinde, aby v úzkém pásu zůstalo
     to podstatné. Nastavuje se přes --vyrez u konkrétní karty. */
  object-position: 50% var(--vyrez, 50%);
}

/* Lehké ztmavení celé fotky — jen aby pás nebyl přesvícený. */
.nemovitost::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
}

.nemovitost__obsah {
  position: relative;   /* nad ztmavením fotky */
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  /* Přechod sedí na obsahu, ne na celé kartě. Tím má i štítek nahoře
     vždycky stejný podklad — ať je karta vysoká jakkoli. Horní
     odsazení je schválně větší, aby měl přechod kde doběhnout. */
  padding: var(--space-8) var(--space-5) var(--space-6);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0,
    rgba(0, 0, 0, 0.76) 40%,
    rgba(0, 0, 0, 0.5) 68%,
    rgba(0, 0, 0, 0) 100%
  );
  color: #fff;
}

.nemovitost__stitek {
  margin: 0 0 var(--space-3);
  color: #fff;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.nemovitost h3 {
  margin: 0;
  font-size: var(--fs-blok);
  line-height: 1.25;
}

.nemovitost__cena {
  margin: var(--space-2) 0 0;
  font-family: var(--font-nadpis);
  /* Váhu je nutné vypsat — bez ní by cena zdědila 300 z <body> a web
     by kvůli jednomu řádku stahoval navíc celý Marcelio Light. */
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.3;
}

.nemovitost__popis {
  margin: var(--space-2) 0 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.nemovitost .tlacitko { flex-shrink: 0; }

/* Tlačítko pod mřížkou karet stojí na střed, jako v návrhu. */
.nemovitosti-tlacitko {
  display: flex;
  justify-content: center;
  margin: var(--space-7) 0 0;
}

/* Na užších displejích jsou karty pod sebou a tlačítko na poslední
   z nich lepilo — potřebuje se od mřížky jasně oddělit. */
@media (max-width: 63.9375rem) {
  .nemovitosti-tlacitko { margin-top: var(--pad-m); }
}

@media (min-width: 48rem) {
  .nemovitost__obsah { padding: var(--space-8) var(--space-6) var(--space-7); }
}

@media (min-width: 64rem) {
  .nemovitost__obsah {
    flex-wrap: nowrap;
    align-items: center;
    padding-inline: clamp(2rem, 0.4rem + 2.2vw, 2.5rem);
  }
}

/* ------------------------------------------------------------------
   KDE PRODÁVÁ — mapa a obce

   Mapa je ilustrace kraje, ne interaktivní prvek. Pod ní proto stojí
   obce vypsané textem — je to zároveň jediné místo, kde se dají
   vyjmenovat kvůli vyhledávačům.
   ------------------------------------------------------------------ */

.mapa-obce { margin-top: var(--space-6); }

.mapa-obce__obrazek {
  width: 100%;
  aspect-ratio: 1260 / 728;
  /* Bez stropu byla mapa na nízkém monitoru vyšší než celé okno.
     Díky object-fit: contain se jen zmenší, nic se z ní neztratí. */
  max-height: 68svh;
  object-fit: contain;
  opacity: 0.75;
  mix-blend-mode: luminosity;
}

.mapa-obce__seznam {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* Vyzdvižený případ pod mapou. */
.zvyrazneni {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-8);
  padding: var(--space-7) var(--space-6);
  background: var(--bg-alt);
}

.zvyrazneni__cislo {
  font-family: var(--font-nadpis);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1;
}

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

.zvyrazneni p {
  margin: 0;
  max-width: 62ch;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (min-width: 48rem) {
  .zvyrazneni {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-7);
    padding: var(--space-7);
  }
}