/* ------------------------------------------------------------------
   Rezidence Brandlova — vlastní vrstva nad šablonou Omai.
   Vlastní názvy tříd, aby nic nezáviselo na tom, které Tailwind
   utility se do zbuildovaného CSS šablony dostaly.
   ------------------------------------------------------------------ */

/* --- Wordmark místo SVG loga -------------------------------------- */
/* Ponechává třídu .header-logo, takže invertování barvy na světlých
   sekcích, fade-in i animace přechodu stránky fungují beze změny.    */
.brand-wordmark {
  display: block;
  font-family: var(--font-heading), Georgia, serif;
  font-weight: 250;
  font-size: 19px;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  text-indent: .2em; /* vyrovná optické odsazení posledního prostrkání */
}

@media (max-width: 479px) {
  .brand-wordmark { font-size: 15px; letter-spacing: .15em; }
}

.brand-wordmark--footer { font-size: 17px; text-align: center; }

@media (min-width: 640px) {
  .brand-wordmark--footer { text-align: left; }
}

/* --- Hero: dorovnání nedoběhlé úvodní animace -----------------------
   Animační skript šablony nastaví fotce, tmavému závoji i jednotlivým
   slovům titulku inline `opacity:0` a teprve pak je má odkrýt. V téhle
   statické kopii sekvence nedoběhne (chybí jí úvodní krok, který dodával
   WordPress) a hero zůstane prázdný. Držíme je proto viditelné natvrdo —
   inline styl jde přebít jedině `!important`.                          */
[data-hero-img] {
  opacity: 1 !important;
  visibility: visible !important;
}

[data-hero-title],
[data-hero-title] * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Hlavička patří do téže sekvence a uvázne skrytá nahodile — jednou se
   objeví, jindy ne, a nepomůže ani scrollování. Držíme ji tedy viditelnou.
   Přicházíme tím o skrývání hlavičky při scrollování dolů; na jednostránkovém
   webu je ale trvale dostupná navigace spíš výhoda.                        */
[data-header] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Vlastní ztmavení pod textem. Nekreslíme ho do prvku, na který sahá
   animace, ale jako vrstvu sekce — nad fotkou (z-10) a pod textem (z-30). */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background:
    /* pruh nahoře drží čitelnou hlavičku proti světlé obloze */
    linear-gradient(to bottom,
      rgba(28, 25, 23, .40) 0%,
      rgba(28, 25, 23, 0) 18%),
    linear-gradient(to top,
      rgba(28, 25, 23, .68) 0%,
      rgba(28, 25, 23, .28) 38%,
      rgba(28, 25, 23, 0) 68%),
    linear-gradient(90deg,
      rgba(28, 25, 23, .46) 0%,
      rgba(28, 25, 23, .14) 55%,
      rgba(28, 25, 23, 0) 100%);
}

/* --- Hero -----------------------------------------------------------
   Titulek záměrně jiným písmem než logo: logo je serifová Canela Text,
   hero je bezpatkový Decagram ve verzálkách. Šablona má od každého písma
   jen jeden řez, takže těžší dojem doděláváme obtahem písma — vypadá to
   čistěji než dopočítaný faux bold samotný.                            */
/* Stejné písmo jako wordmark v hlavičce — serifová Canela Text. Má jediný
   řez, takže tučnost nedopočítáváme (u světlého serifu se rozpíjí) a sílu
   dodáváme velikostí a prostrkáním jako u loga.                           */
.hero-title {
  font-family: var(--font-heading), Georgia, serif;
  font-weight: 250;
  color: #fff;
  font-size: clamp(32px, 5.4vw, 74px);
  line-height: 1.12;
  letter-spacing: -.005em;
  text-shadow: 0 2px 30px rgba(28, 25, 23, .5);
}

/* Titulek s tlačítky sedí v levém dolním rohu, nad indikátorem scrollování. */
.hero-content {
  padding-bottom: clamp(72px, 11vh, 132px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
  opacity: 0;
  animation: heroActionsIn .6s ease-out 1.1s forwards;
}

@keyframes heroActionsIn { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero-actions { opacity: 1; animation: none; }
}

/* Průhledné tlačítko, jen obrys. */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .75);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading), Georgia, serif;
  font-size: 13px;
  font-weight: 250;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .25s ease-out, background-color .25s ease-out;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, .14);
}

@media (max-width: 479px) {
  .btn-outline { min-height: 38px; padding: 0 16px; font-size: 12px; }
  .hero-actions { gap: 10px; margin-top: 24px; }
}

/* --- Byty: svisle pod sebou, žádný horizontální scroll ------------- */
.byty-groups { margin-top: 56px; }

.byty-group + .byty-group { margin-top: 72px; }

.byty-group__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 20px;
  border-top: 1px solid rgba(45, 41, 40, .16);
  padding-top: 20px;
  margin-bottom: 36px;
}

.byty-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px 24px;
}

@media (min-width: 640px) {
  .byty-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .byty-grid { grid-template-columns: repeat(3, 1fr); gap: 56px 32px; }
}

.byt-card { display: flex; flex-direction: column; }

.byt-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #eae7e3;
}

.byt-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.byt-card__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 20px;
}

.byt-card__disp {
  font-family: var(--font-subheading), sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #2d2928;
  border: 1px solid rgba(45, 41, 40, .25);
  padding: 3px 8px;
  line-height: 1.3;
}

.byt-card__meta {
  display: block;
  margin-top: 10px;
  font-family: var(--font-subheading), sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.byt-card__text { margin-top: 14px; }

/* --- Nabídka detailu po najetí na kartu ---------------------------- */
.byt-card__toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(45, 41, 40, 0);
  transition: background-color .3s ease-out;
}

/* Fotka je jen klikací plocha — výzva k akci sedí pod textem karty,
   ať je vidět i bez najetí myší a na dotykových zařízeních. */
.byt-card__media:hover .byt-card__toggle { background: rgba(45, 41, 40, .16); }

/* --- Výzva k akci na kartě ------------------------------------------ */
.byt-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* karta je flex sloupec — bez tohoto by se tlačítko roztáhlo přes celou
     její šířku a text by v něm plaval nalevo od prázdna */
  align-self: flex-start;
  width: auto;
  min-height: 36px;
  margin-top: 20px;
  padding: 0 14px;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(45, 41, 40, .24);
  color: #2d2928;
  font-family: var(--font-subheading), sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: background-color .25s ease-out, border-color .25s ease-out, color .25s ease-out;
}

.byt-card__sipka {
  flex: none;
  width: 15px;
  height: 6px;
  transition: transform .25s ease-out;
}

/* Celá karta je jeden cíl — tlačítko se rozsvítí i při najetí na fotku. */
.byt-card:hover .byt-card__cta,
.byt-card__cta:focus-visible {
  background: #2d2928;
  border-color: #2d2928;
  color: #fff;
}

.byt-card:hover .byt-card__sipka,
.byt-card__cta:focus-visible .byt-card__sipka { transform: translateX(3px); }

/* --- Rozbalený detail ---------------------------------------------- */
.byt-card__detail { display: none; }

/* Detail se otevírá v panelu přes obrazovku, ne rozbalením karty:
   rozbalení posouvalo kartu mimo viewport a fotka zmizela. Doscrollovat
   zpět nejde — šablona používá Lenis, který svou instanci nevystavuje
   a přebíjí window.scrollTo i navigaci na kotvu. */

.byt-detail__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 800px) {
  .byt-detail__cols { grid-template-columns: 1fr 1fr; gap: 48px; }
}

.byt-rooms { margin: 16px 0 0; }

.byt-rooms__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(45, 41, 40, .12);
}

.byt-rooms__row dt,
.byt-rooms__row dd {
  margin: 0;
  font-family: var(--font-body), sans-serif;
  font-size: 16px;
  line-height: 1.37;
  color: #2d2928;
}

.byt-rooms__row dd { white-space: nowrap; color: #6b645f; }

.byt-rooms__row--total dt,
.byt-rooms__row--total dd {
  font-family: var(--font-heading), Georgia, serif;
  font-size: 18px;
  color: #2d2928;
}

.byt-rooms__note { margin-top: 16px; }

.byt-detail__plan {
  position: relative;
  background: #fff;
  padding: 16px;
}

.byt-detail__plan img { width: 100%; height: auto; display: block; }

.byt-detail__equip { margin-top: 40px; }

.byt-equip {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 32px;
}

@media (min-width: 640px) { .byt-equip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .byt-equip { grid-template-columns: repeat(4, 1fr); } }

.byt-equip li {
  font-family: var(--font-body), sans-serif;
  font-size: 15px;
  line-height: 1.42;
  color: #4a443f;
  border-top: 1px solid rgba(45, 41, 40, .12);
  padding-top: 12px;
}

.byt-equip strong {
  display: block;
  font-family: var(--font-subheading), sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #2d2928;
  margin-bottom: 6px;
}

.byt-detail__gallery { margin-top: 40px; }

.byt-gallery {
  margin-top: 16px;
  display: grid;
  align-items: start;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) { .byt-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .byt-gallery { grid-template-columns: repeat(3, 1fr); } }

.byt-gallery__item { margin: 0; position: relative; }

/* Fotky jsou na šířku i na výšku — necháme jim vlastní poměr stran,
   ať se u snímků na výšku neuřízne polovina místnosti. */
.byt-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
}

.byt-gallery__item figcaption {
  margin-top: 10px;
  font-family: var(--font-subheading), sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #7a736e;
}

.byt-card__close { margin-top: 40px; }

/* --- Náklady: příkladový součet ------------------------------------ */
.naklady-example {
  border-top: 1px solid rgba(45, 41, 40, .16);
  margin-top: 40px;
  padding-top: 24px;
  max-width: 640px;
}

/* --- Kontaktní panel (místo poptávkového formuláře) ---------------- */
.kontakt-list { margin-top: 8px; }

.kontakt-list dt {
  font-family: var(--font-subheading), sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #7a736e;
  margin-top: 24px;
}

.kontakt-list dd {
  margin: 4px 0 0;
  font-family: var(--font-heading), Georgia, serif;
  font-weight: 250;
  font-size: 22px;
  line-height: 1.3;
  color: #2d2928;
}

.kontakt-list dd a { text-decoration: none; }
.kontakt-list dd a:hover { text-decoration: underline; }

/* --- Kontakt v patičce --------------------------------------------- */
.footer-kontakt { margin-top: 24px; text-align: center; }

@media (min-width: 640px) {
  .footer-kontakt { text-align: left; }
}

.footer-kontakt a { color: #fff; text-decoration: none; }
.footer-kontakt a:hover { text-decoration: underline; }

/* Indikátor scrollování patří do hero sekce, ať drží stejné písmo. */
.hero-section [data-scroll-indicator] span {
  font-family: var(--font-heading), Georgia, serif !important;
  font-weight: 250;
  letter-spacing: .16em;
}

/* --- Kontaktní sekce nad patičkou ---------------------------------- */
.kontakt-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 900px) {
  .kontakt-layout { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
}

.kontakt-intro .kontakt-list { margin-top: 32px; }

/* Tmavá varianta výpisu kontaktů. */
.kontakt-list--dark dt { color: #a49c95; }
.kontakt-list--dark dd { color: #fff; }
.kontakt-list--dark dd a { color: #fff; }

.kontakt-form__row { margin-bottom: 20px; }

.kontakt-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 20px;
}

@media (min-width: 520px) { .kontakt-form__grid { grid-template-columns: 1fr 1fr; } }

.kontakt-form label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-subheading), sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #a49c95;
}

.kontakt-form input,
.kontakt-form select,
.kontakt-form textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-family: var(--font-body), sans-serif;
  font-size: 16px;
  line-height: 1.37;
  padding: 13px 14px;
  border-radius: 0;
  transition: border-color .2s ease-out;
  -webkit-appearance: none;
  appearance: none;
}

.kontakt-form textarea { resize: vertical; min-height: 110px; }

.kontakt-form select {
  /* vlastní šipka, ať select vypadá stejně jako ostatní pole */
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 12px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.kontakt-form select option { color: #2d2928; }

.kontakt-form input:focus,
.kontakt-form select:focus,
.kontakt-form textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, .7);
}

.kontakt-form input:user-invalid,
.kontakt-form textarea:user-invalid { border-color: #d4756c; }

.kontakt-form__submit { margin-top: 8px; width: 100%; }

@media (min-width: 520px) { .kontakt-form__submit { width: auto; min-width: 240px; } }

.kontakt-form__note--chyba { color: #e0a99f; }

.kontakt-form__note {
  margin-top: 14px;
  font-family: var(--font-body), sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #a49c95;
}

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }

.kontakt-intro__text { margin-top: 24px; }
.kontakt-intro h2 + .kontakt-intro__text { margin-top: 20px; }

/* --- Náklady: nadpis vlevo, číslované položky vpravo ---------------- */
.naklady-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 900px) {
  .naklady-split {
    grid-template-columns: minmax(280px, 5fr) 7fr;
    gap: 80px;
    align-items: start;
  }
  /* nadpis zůstává stát, zatímco položky projíždějí kolem */
  .naklady-split__head { position: sticky; top: 140px; }
}

.naklady-split__head { padding-left: 30px; }

@media (min-width: 640px) { .naklady-split__head { padding-left: 0; } }

.naklady-split__intro { margin-top: 28px; max-width: 380px; }

.naklady-items {
  margin: 0;
  padding: 0 30px 0 0;
  list-style: none;
  counter-reset: naklady;
}

@media (min-width: 640px) { .naklady-items { padding-right: 0; } }

.naklady-items > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px 24px;
  align-items: start;
  border-top: 1px solid rgba(45, 41, 40, .16);
  padding: 28px 0;
  padding-left: 30px;
}

@media (min-width: 640px) {
  .naklady-items > li { padding-left: 0; gap: 20px 40px; padding-top: 32px; padding-bottom: 32px; }
}

.naklady-items > li:last-child { border-bottom: 1px solid rgba(45, 41, 40, .16); }

.naklady-items__num {
  font-family: var(--font-heading), Georgia, serif;
  font-weight: 250;
  font-size: 44px;
  line-height: .9;
  color: rgba(45, 41, 40, .22);
  letter-spacing: -.02em;
}

@media (min-width: 640px) { .naklady-items__num { font-size: 60px; } }

.naklady-items__body h3 { margin-bottom: 12px; }

.naklady-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  margin-top: 56px;
  padding-left: 30px;
}

@media (min-width: 640px) { .naklady-foot { padding-left: 0; margin-top: 72px; } }

.naklady-foot p { max-width: 460px; margin: 0; }

/* --- Minimalistická patička ---------------------------------------- */
.footer-min {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px 40px;
  padding: 40px 0 28px;
}

@media (min-width: 640px) { .footer-min { padding: 48px 0 32px; } }

.footer-min__adresa {
  margin: 12px 0 0;
  font-family: var(--font-body), sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: #a49c95;
}

.footer-min__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.footer-min__nav a {
  font-family: var(--font-subheading), sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #d8d2cc;
  text-decoration: none;
  transition: color .2s ease-out;
}

.footer-min__nav a:hover { color: #fff; }

.footer-min__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 32px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 20px 0 32px;
  font-family: var(--font-body), sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #8d857e;
}

/* --- Obrazovka s mapou v sekci Dům --------------------------------- */
.mapa-panel {
  width: 100%;
  max-width: 420px;
  margin-top: 34vh;
  background: rgba(28, 25, 23, .55);
  backdrop-filter: blur(2px);
  padding: 32px 28px;
}

@media (min-width: 640px) { .mapa-panel { padding: 40px 36px; } }
@media (min-width: 900px) { .mapa-panel { margin-top: 0; } }

.mapa-body { margin: 28px 0 0; }

.mapa-body > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.mapa-body dt,
.mapa-body dd {
  margin: 0;
  font-family: var(--font-body), sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #fff;
}

.mapa-body dd { white-space: nowrap; color: #cfc7c0; }

.mapa-pozn {
  margin-top: 18px;
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: #a49c95;
}

/* --- Náklady: nadpis vlevo, číslované položky vpravo ---------------- */
.naklady-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 900px) {
  .naklady-split {
    grid-template-columns: minmax(280px, 5fr) 7fr;
    gap: 80px;
    align-items: start;
  }
  /* nadpis zůstává stát, zatímco položky projíždějí kolem */
  .naklady-split__head { position: sticky; top: 140px; }
}

.naklady-split__head { padding-left: 30px; }

@media (min-width: 640px) { .naklady-split__head { padding-left: 0; } }

.naklady-split__intro { margin-top: 28px; max-width: 380px; }

.naklady-items {
  margin: 0;
  padding: 0 30px 0 0;
  list-style: none;
  counter-reset: naklady;
}

@media (min-width: 640px) { .naklady-items { padding-right: 0; } }

.naklady-items > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px 24px;
  align-items: start;
  border-top: 1px solid rgba(45, 41, 40, .16);
  padding: 28px 0;
  padding-left: 30px;
}

@media (min-width: 640px) {
  .naklady-items > li { padding-left: 0; gap: 20px 40px; padding-top: 32px; padding-bottom: 32px; }
}

.naklady-items > li:last-child { border-bottom: 1px solid rgba(45, 41, 40, .16); }

.naklady-items__num {
  font-family: var(--font-heading), Georgia, serif;
  font-weight: 250;
  font-size: 44px;
  line-height: .9;
  color: rgba(45, 41, 40, .22);
  letter-spacing: -.02em;
}

@media (min-width: 640px) { .naklady-items__num { font-size: 60px; } }

.naklady-items__body h3 { margin-bottom: 12px; }

.naklady-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  margin-top: 56px;
  padding-left: 30px;
}

@media (min-width: 640px) { .naklady-foot { padding-left: 0; margin-top: 72px; } }

.naklady-foot p { max-width: 460px; margin: 0; }

/* --- Minimalistická patička ---------------------------------------- */
.footer-min {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px 40px;
  padding: 40px 0 28px;
}

@media (min-width: 640px) { .footer-min { padding: 48px 0 32px; } }

.footer-min__adresa {
  margin: 12px 0 0;
  font-family: var(--font-body), sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: #a49c95;
}

.footer-min__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.footer-min__nav a {
  font-family: var(--font-subheading), sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #d8d2cc;
  text-decoration: none;
  transition: color .2s ease-out;
}

.footer-min__nav a:hover { color: #fff; }

.footer-min__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 32px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 20px 0 32px;
  font-family: var(--font-body), sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #8d857e;
}

/* --- Obrazovka s mapou v sekci Dům --------------------------------- */
.mapa-panel {
  width: 100%;
  max-width: 420px;
  margin-top: 34vh;
  background: rgba(28, 25, 23, .55);
  backdrop-filter: blur(2px);
  padding: 32px 28px;
}

@media (min-width: 640px) { .mapa-panel { padding: 40px 36px; } }
@media (min-width: 900px) { .mapa-panel { margin-top: 0; } }

.mapa-body { margin: 28px 0 0; }

.mapa-body > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.mapa-body dt,
.mapa-body dd {
  margin: 0;
  font-family: var(--font-body), sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #fff;
}

.mapa-body dd { white-space: nowrap; color: #cfc7c0; }

.mapa-pozn {
  margin-top: 18px;
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: #a49c95;
}

/* Mapa není přes celou plochu — sedí jako zaoblený obrázek na tmavém
   pozadí. Karta drží poměr stran obrázku, takže se mapa nikde neořízne
   a značka domu zůstane vidět. Panel s místy je vedle ní, ne přes ni. */
.mapa-slide { background: #2f2b28; }

.mapa-plocha {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  width: min(88%, 900px);
  aspect-ratio: 1568 / 783;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
}

.mapa-plocha img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.5) contrast(.95) brightness(1.03);
}

@media (min-width: 900px) {
  .mapa-plocha {
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: min(56%, 880px);
    border-radius: 20px;
  }
}

/* --- Standard: dva sloupce sevřené k sobě --------------------------
   Sekce má vlastní max-width. Bez ní se na širokém monitoru sloupce
   rozjedou ke krajům plochy a uprostřed zůstane prázdné místo. */
.standard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  padding-left: 30px;
}

@media (min-width: 900px) {
  .standard-grid {
    grid-template-columns: 1.05fr .95fr;
    gap: 40px 56px;
    align-items: start;
    padding-left: 0;
    max-width: 1060px;
    margin: 0 auto;
  }
  /* pravý sloupec posunutý dolů — drží to sekci v pohybu */
  .standard-col--posun { padding-top: 104px; }
}

.standard-nadpis {
  margin-top: 14px;
  max-width: 480px;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.28;
}

@media (min-width: 900px) { .standard-nadpis { margin-top: 20px; max-width: 100%; } }

.standard-obr {
  margin: 36px 0 0;
  max-width: 100%;
  overflow: hidden;
}

@media (min-width: 900px) {
  .standard-obr { margin-top: 52px; max-width: 100%; }
  .standard-col--posun .standard-obr { margin-top: 0; max-width: 340px; }
}

.standard-obr img { width: 100%; height: auto; display: block; }

.standard-text { margin-top: 28px; max-width: 380px; }

@media (min-width: 900px) { .standard-text { margin-top: 32px; max-width: 340px; } }

.standard-cta { margin-top: 22px; }

/* Delší nadpis o lokalitě se v úzkém sloupci lámal do čtyř řádků. */
@media (min-width: 900px) {
  .dum-panel { max-width: 420px !important; }
}

/* --- Detail bytu: shrnutí klíčových údajů --------------------------- */
.byt-fakta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 32px;
  margin: 0 0 40px;
  border-top: 1px solid rgba(45, 41, 40, .16);
}

@media (min-width: 700px)  { .byt-fakta { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .byt-fakta { grid-template-columns: repeat(5, 1fr); } }

.byt-fakta__polozka {
  padding: 16px 0;
  border-bottom: 1px solid rgba(45, 41, 40, .12);
}

.byt-fakta dt {
  font-family: var(--font-subheading), sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #7a736e;
}

.byt-fakta dd {
  margin: 6px 0 0;
  font-family: var(--font-heading), Georgia, serif;
  font-weight: 250;
  font-size: 20px;
  line-height: 1.2;
  color: #2d2928;
}

.byt-gallery__item img { cursor: zoom-in; }

/* --- Akce na konci detailu ------------------------------------------ */
.byt-detail__akce {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid rgba(45, 41, 40, .16);
  text-align: center;
}

/* Hlavní výzva v detailu bytu — otevře kontaktní formulář s předvybraným bytem. */
.byt-cta {
  display: block;
  width: 100%;
  max-width: 620px;
  padding: 24px 28px;
  border: 0;
  cursor: pointer;
  background: #2d2928;
  color: #fff;
  font-family: var(--font-heading), Georgia, serif;
  font-weight: 250;
  font-size: clamp(19px, 3.4vw, 30px);
  line-height: 1.15;
  letter-spacing: .07em;
  text-transform: uppercase;
  /* Canela má ve výchozím stavu skákavé číslice — v kapitálkách by
     číslo bytu sedělo pod účařím jako malé písmeno. */
  font-variant-numeric: lining-nums;
  transition: background-color .25s ease-out;
}
.byt-cta:hover,
.byt-cta:focus-visible { background: #17140f; }

.byt-card__close {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-subheading), sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #7a736e;
  transition: color .2s ease-out;
}

.byt-card__close:hover { color: #2d2928; }

/* --- Prohlížeč fotografií ------------------------------------------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 21, 19, .93);
  padding: 24px;
}

.lb[hidden] { display: none; }

.lb__obr {
  max-width: min(1200px, 92vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.lb__popis {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-family: var(--font-subheading), sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #d8d2cc;
  text-align: center;
  max-width: 80vw;
}

.lb__btn {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 14px;
  line-height: 1;
  opacity: .75;
  transition: opacity .2s ease-out;
}

.lb__btn:hover { opacity: 1; }
.lb__btn--zavrit { top: 18px; right: 20px; font-size: 26px; }
.lb__btn--zpet   { left: 12px;  top: 50%; transform: translateY(-50%); font-size: 34px; }
.lb__btn--dalsi  { right: 12px; top: 50%; transform: translateY(-50%); font-size: 34px; }

@media (max-width: 639px) {
  .lb__btn--zpet  { left: 2px; }
  .lb__btn--dalsi { right: 2px; }
}

body.lb-open { overflow: hidden; }

/* --- Panel s detailem bytu ------------------------------------------ */
.byt-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(28, 25, 23, .55);
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.byt-modal[hidden] { display: none; }

@media (min-width: 900px) { .byt-modal { padding: 40px 24px; } }

.byt-modal__box {
  position: relative;
  width: 100%;
  max-width: 1100px;
  background: #f4f2ee;
  padding: 0 0 48px;
}

@media (min-width: 900px) { .byt-modal__box { border-radius: 14px; overflow: hidden; } }

.byt-modal__hlava {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  background: #f4f2ee;
  border-bottom: 1px solid rgba(45, 41, 40, .14);
}

@media (min-width: 900px) { .byt-modal__hlava { padding: 26px 40px; } }

.byt-modal__nazev {
  font-family: var(--font-heading), Georgia, serif;
  font-weight: 250;
  font-size: 26px;
  line-height: 1.15;
  color: #2d2928;
  margin: 0;
}

.byt-modal__podnadpis {
  display: block;
  margin-top: 6px;
  font-family: var(--font-subheading), sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #7a736e;
}

.byt-modal__zavrit {
  flex: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  padding: 4px 8px;
  color: #2d2928;
  opacity: .7;
  transition: opacity .2s ease-out;
}

.byt-modal__zavrit:hover { opacity: 1; }

.byt-modal__foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.byt-modal__telo { padding: 32px 24px 0; }

@media (min-width: 900px) { .byt-modal__telo { padding: 40px 40px 0; } }

/* uvnitř panelu je detail vždy vidět */
.byt-modal__telo .byt-card__detail { display: block; }

body.byt-modal-open { overflow: hidden; }


/* --- Panel s kontaktním formulářem --------------------------------
 *
 * Formulář je na stránce jen jednou — v sekci Kontakt. Panel si ho na
 * dobu otevření přesune k sobě a při zavření vrátí zpět na místo, takže
 * nevznikají dvě pole se stejným id. Doscrollovat k sekci nejde: šablona
 * používá Lenis, který přebíjí programové scrollování i kotvy.
 */
.kontakt-panel {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(28, 25, 23, .62);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.kontakt-panel[hidden] { display: none; }

@media (min-width: 900px) { .kontakt-panel { padding: 48px 24px; } }

.kontakt-panel__box {
  position: relative;
  width: 100%;
  max-width: 620px;
  background: #17140f;
  padding: 28px 24px 44px;
}

@media (min-width: 900px) {
  .kontakt-panel__box { border-radius: 14px; padding: 36px 44px 48px; }
}

.kontakt-panel__zavrit {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  padding: 4px 8px;
  color: #fff;
  opacity: .65;
  transition: opacity .2s ease-out;
}
.kontakt-panel__zavrit:hover { opacity: 1; }

.kontakt-panel__label {
  display: block;
  font-family: var(--font-subheading), sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #a49c95;
}

.kontakt-panel__nazev {
  margin: 12px 0 0;
  font-family: var(--font-heading), Georgia, serif;
  font-weight: 250;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.15;
  color: #fff;
}

.kontakt-panel__text {
  margin: 14px 0 0;
  font-family: var(--font-body), sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #a49c95;
}

.kontakt-panel__telo { margin-top: 28px; }

body.kontakt-panel-open { overflow: hidden; }

/* Past na roboty — pole je schované, člověk ho nevyplní. Ne přes display:none,
   to některé skripty poznají. */
.kontakt-form__past {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
