/* =====================================================================
   RENOVIO — katalog nemovitostí (výpis .nl- + detail .nm-)
   Navazuje na tokeny ze shell.css (--st-*).
   ===================================================================== */

/* ---------------- společné ---------------- */
.nm, .nl { max-width: 1320px; margin: 0 auto; padding: 0 22px 4rem; }

.nm-drobky, .nl-drobky {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: 1.4rem 0 1rem; font-size: .84rem; color: var(--st-faint);
}
.nm-drobky a, .nl-drobky a { color: var(--st-muted); text-decoration: none; }
.nm-drobky a:hover, .nl-drobky a:hover { color: var(--st-brasshi); }

/* ---------------- výpis ---------------- */
.nl-hlava { padding: 1rem 0 2rem; border-bottom: 1px solid var(--st-line); margin-bottom: 2rem; }
.nl-hlava h1 {
  font-family: var(--st-disp); font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.06; margin: 0 0 .8rem; letter-spacing: -.01em;
}
.nl-hlava h1 em { font-style: normal; color: var(--st-brasshi); }
.nl-hlava p { color: var(--st-muted); max-width: 62ch; line-height: 1.7; margin: 0; }

.nl-filtry {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: 1.2rem 0 1.6rem;
}
.nl-filtry select, .nl-filtry input {
  background: rgba(255,255,255,.04); border: 1px solid var(--st-line2);
  color: var(--st-paper); border-radius: 10px; padding: .6rem .8rem;
  font: inherit; font-size: .9rem; min-width: 140px;
}
.nl-filtry select:focus, .nl-filtry input:focus {
  outline: 2px solid var(--st-brass); outline-offset: 1px;
}
.nl-filtry option { background: var(--st-panel); color: var(--st-paper); }
.nl-filtry__reset {
  background: none; border: 1px solid var(--st-line2); color: var(--st-muted);
  border-radius: 10px; padding: .6rem 1rem; font: inherit; font-size: .88rem; cursor: pointer;
}
.nl-filtry__reset:hover { color: var(--st-paper); border-color: var(--st-brass); }
.nl-pocet { color: var(--st-faint); font-size: .88rem; margin-left: auto; }

.nl-mrizka {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}

.nl-karta {
  display: flex; flex-direction: column; background: var(--st-panel);
  border: 1px solid var(--st-line); border-radius: 16px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .3s cubic-bezier(.22,.7,.3,1), border-color .3s, box-shadow .3s;
}
.nl-karta:hover {
  transform: translateY(-4px); border-color: var(--st-line2);
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.9);
}
.nl-karta__foto {
  position: relative; aspect-ratio: 4 / 3; background: #0c141f; overflow: hidden;
}
.nl-karta__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22,.7,.3,1);
}
.nl-karta:hover .nl-karta__foto img { transform: scale(1.05); }
.nl-karta__prazdna {
  display: grid; place-items: center; height: 100%;
  color: var(--st-faint); font-size: .85rem;
}
.nl-karta__telo { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.nl-karta__typ {
  font-family: var(--st-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--st-brass);
}
.nl-karta__nazev {
  font-family: var(--st-disp); font-size: 1.06rem; font-weight: 600;
  line-height: 1.3; margin: 0;
}
.nl-karta__misto { color: var(--st-muted); font-size: .88rem; margin: 0; }
.nl-karta__spod {
  margin-top: auto; padding-top: .8rem; display: flex;
  align-items: baseline; justify-content: space-between; gap: .6rem;
  border-top: 1px solid var(--st-line);
}
.nl-karta__cena { font-family: var(--st-disp); font-weight: 700; font-size: 1.1rem; color: var(--st-brasshi); }
.nl-karta__plocha { color: var(--st-faint); font-size: .84rem; font-family: var(--st-mono); }

.nl-prazdno {
  grid-column: 1 / -1; text-align: center; padding: 4rem 1rem;
  border: 1px dashed var(--st-line2); border-radius: 16px; color: var(--st-muted);
}
.nl-prazdno b { display: block; color: var(--st-paper); font-family: var(--st-disp); font-size: 1.2rem; margin-bottom: .5rem; }

/* štítek stavu — sdílený výpisem i detailem */
.nm-stitek, .nl-stitek {
  display: inline-block; padding: .3rem .7rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; font-family: var(--st-mono);
}
.nm-stitek--rezervovano, .nl-stitek--rezervovano { background: rgba(201,162,91,.18); color: var(--st-brasshi); border: 1px solid rgba(201,162,91,.4); }
.nm-stitek--prodano, .nl-stitek--prodano { background: rgba(150,175,210,.12); color: var(--st-muted); border: 1px solid var(--st-line2); }
.nl-karta__stitek { position: absolute; top: .8rem; left: .8rem; z-index: 2; backdrop-filter: blur(8px); }

/* pásek "chci prodat" na konci výpisu */
.nl-vyzva {
  margin-top: 3.5rem; padding: 2.4rem; border-radius: 20px;
  background: linear-gradient(155deg, rgba(201,162,91,.12), rgba(16,26,40,.6));
  border: 1px solid rgba(201,162,91,.28);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center;
}
.nl-vyzva h2 { font-family: var(--st-disp); font-size: clamp(1.3rem,2.6vw,1.9rem); margin: 0 0 .6rem; }
.nl-vyzva p { color: var(--st-muted); line-height: 1.7; margin: 0; }
@media (max-width: 800px) { .nl-vyzva { grid-template-columns: 1fr; padding: 1.6rem; } }

/* formulář „chci prodat" */
.nl-form { display: flex; flex-direction: column; gap: .6rem; }
.nl-form__radek { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 520px) { .nl-form__radek { grid-template-columns: 1fr; } }
.nl-form input, .nl-form textarea {
  background: rgba(255,255,255,.05); border: 1px solid var(--st-line2);
  color: var(--st-paper); border-radius: 10px; padding: .68rem .85rem;
  font: inherit; font-size: .92rem; width: 100%; box-sizing: border-box;
}
.nl-form textarea { resize: vertical; min-height: 62px; font-family: inherit; line-height: 1.5; }
.nl-form input::placeholder, .nl-form textarea::placeholder { color: var(--st-faint); }
.nl-form input:focus, .nl-form textarea:focus { outline: 2px solid var(--st-brass); outline-offset: 1px; border-color: transparent; }
.nl-form button { margin-top: .2rem; cursor: pointer; border: none; font: inherit; font-weight: 700; }
/* honeypot — mimo obrazovku, ale ne display:none (to roboti poznají) */
.nl-form__past { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.nl-form__stav { font-size: .86rem; margin: .3rem 0 0; min-height: 1.2em; color: var(--st-muted); }
.nl-form__stav.je-uspech { color: #7fd3a4; }
.nl-form__stav.je-chyba { color: #e2917c; }
.nl-form__pozn { font-size: .78rem !important; color: var(--st-faint) !important; margin: .2rem 0 0 !important; line-height: 1.5; }

/* ---------------- detail ---------------- */
.nm-hlava {
  display: flex; gap: 2rem; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; padding-bottom: 1.6rem;
}
.nm-hlava h1 {
  font-family: var(--st-disp); font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.12; margin: .5rem 0 .4rem; letter-spacing: -.01em; max-width: 22ch;
}
.nm-podnadpis { color: var(--st-muted); font-size: 1.02rem; margin: 0 0 .6rem; max-width: 60ch; line-height: 1.6; }
.nm-adresa { display: flex; align-items: center; gap: .45rem; color: var(--st-faint); font-size: .92rem; margin: 0; }
.nm-cenabox { text-align: right; display: flex; flex-direction: column; gap: .25rem; }
.nm-cena {
  font-family: var(--st-disp); font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: var(--st-brasshi); white-space: nowrap;
}
.nm-cena__pozn { color: var(--st-faint); font-size: .82rem; }
@media (max-width: 700px) { .nm-cenabox { text-align: left; } }

.nm-gal { display: grid; grid-template-columns: 1.62fr 1fr; gap: .6rem; margin-bottom: 2.4rem; }
.nm-gal--prazdna {
  display: grid; place-items: center; aspect-ratio: 21/9;
  background: var(--st-panel); border: 1px dashed var(--st-line2);
  border-radius: 16px; color: var(--st-faint);
}
.nm-gal__hlavni, .nm-gal__male {
  padding: 0; border: none; background: #0c141f; cursor: pointer;
  overflow: hidden; border-radius: 14px; position: relative;
}
.nm-gal__hlavni { aspect-ratio: 4/3; }
.nm-gal__hlavni img, .nm-gal__male img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22,.7,.3,1);
}
.nm-gal__hlavni:hover img, .nm-gal__male:hover img { transform: scale(1.04); }
.nm-gal__mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.nm-gal__male { aspect-ratio: 4/3; }
.nm-gal__vic {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(7,11,18,.72); color: var(--st-paper);
  font-family: var(--st-disp); font-size: 1.5rem; font-weight: 700;
}
@media (max-width: 860px) {
  .nm-gal { grid-template-columns: 1fr; }
  .nm-gal__mrizka { grid-template-columns: repeat(4, 1fr); }
}

.nm-telo { display: grid; grid-template-columns: 1fr 360px; gap: 2.4rem; align-items: start; }
@media (max-width: 980px) { .nm-telo { grid-template-columns: 1fr; } }

.nm-popis h2, .nm-param h2, .nm-media h2 {
  font-family: var(--st-disp); font-size: 1.25rem; margin: 0 0 1rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--st-line);
}
.nm-popis p { line-height: 1.8; color: #cfd9e6; margin: 0 0 1rem; }
.nm-param { margin-top: 2.4rem; }
.nm-param dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; }
.nm-param dl > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem .2rem; border-bottom: 1px solid var(--st-line);
}
.nm-param dt { color: var(--st-muted); font-size: .9rem; }
.nm-param dd { margin: 0; font-weight: 600; font-size: .92rem; text-align: right; }
@media (max-width: 620px) { .nm-param dl { grid-template-columns: 1fr; } }

.nm-media { margin-top: 2.4rem; }
.nm-media__odkazy { display: flex; flex-wrap: wrap; gap: .7rem; }
.nm-media__odkazy a {
  padding: .7rem 1.1rem; border: 1px solid var(--st-line2); border-radius: 10px;
  color: var(--st-paper); text-decoration: none; font-size: .9rem;
}
.nm-media__odkazy a:hover { border-color: var(--st-brass); color: var(--st-brasshi); }

.nm-bok { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 980px) { .nm-bok { position: static; } }
.nm-karta {
  background: var(--st-panel); border: 1px solid var(--st-line);
  border-radius: 16px; padding: 1.4rem;
}
.nm-karta h2 { font-family: var(--st-disp); font-size: 1.05rem; margin: 0 0 .8rem; }
.nm-karta p { color: var(--st-muted); font-size: .9rem; line-height: 1.65; margin: 0 0 .8rem; }
.nm-karta__makler { color: var(--st-paper) !important; font-weight: 600; }
.nm-karta__pozn { font-size: .82rem !important; margin: .8rem 0 0 !important; }
.nm-karta--tip { background: linear-gradient(155deg, rgba(201,162,91,.1), rgba(16,26,40,.7)); border-color: rgba(201,162,91,.25); }

.nm-btn {
  display: block; text-align: center; padding: .8rem 1.1rem; border-radius: 11px;
  border: 1px solid var(--st-line2); color: var(--st-paper); text-decoration: none;
  font-weight: 600; font-size: .93rem; margin-bottom: .55rem; transition: border-color .25s, transform .2s;
}
.nm-btn:hover { border-color: var(--st-brass); transform: translateY(-1px); }
.nm-btn:active { transform: scale(.97); }
.nm-btn--hlavni {
  background: linear-gradient(180deg, var(--st-brasshi), var(--st-brass));
  color: #1c1407; border-color: transparent;
  box-shadow: 0 12px 30px -14px rgba(201,162,91,.7);
}

.nm-disc { color: var(--st-faint); font-size: .8rem; line-height: 1.6; margin-top: 3rem; max-width: 80ch; }

/* ---------------- lightbox ---------------- */
.nm-lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(4,7,12,.94);
  display: grid; place-items: center; padding: 3rem 1rem;
}
.nm-lightbox[hidden] { display: none; }
.nm-lightbox img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 8px; }
.nm-lightbox__zavrit, .nm-lightbox__sip {
  position: absolute; background: rgba(255,255,255,.08); border: 1px solid var(--st-line2);
  color: var(--st-paper); width: 46px; height: 46px; border-radius: 50%;
  font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.nm-lightbox__zavrit:hover, .nm-lightbox__sip:hover { background: rgba(255,255,255,.16); }
.nm-lightbox__zavrit { top: 1.2rem; right: 1.2rem; }
.nm-lightbox__sip--vlevo { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.nm-lightbox__sip--vpravo { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.nm-lightbox__pocet {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  font-family: var(--st-mono); font-size: .85rem; color: var(--st-muted);
}

@media (prefers-reduced-motion: reduce) {
  .nl-karta, .nl-karta__foto img, .nm-gal__hlavni img, .nm-gal__male img, .nm-btn { transition: none !important; }
}