/* ==========================================================================
   SALME KORTERID — asendiplaan majavalijana
   Avalehe plokk: joonis, hõljumisel maja foto, klõpsul selle maja korterid.
   Nimeruum: slm-asendi- ja slm-modaal-. Laetakse ainult lehel, kus lühikood on.
   ========================================================================== */

.slm-asendi{ margin-top:clamp(28px,4vw,52px); }

/* Joonise taust on tema enda oma (#F7F2E9) ja erineb heledast ribast, millel
   plokk seisab — seega on joonis raamitud pilt, mitte lahtine leht. */
.slm-asendi-lava{
  position:relative; background:#F7F2E9;
  border:1px solid var(--line); border-radius:2px;
}
.slm-asendi-taust{ display:block; width:100%; height:auto; }

/* Hõljumiskiht katab joonise täpselt — mõlemal on sama kuvasuhe. */
.slm-asendi-svg{ position:absolute; inset:0; width:100%; height:100%; }

/* Maja kuju: vaikimisi nähtamatu, hiire all tumendus ja ääris. Joonisel on
   majad juba oma värvi, seega ei ole vaja värvi lisada — piisab sellest, et
   valitud maja tõuseb esile. non-scaling-stroke hoiab joone ühe paksusega,
   ükskõik kui suureks joonis venib. */
.slm-asendi-ala{
  cursor:pointer; outline:none;
  fill:var(--ink); fill-opacity:0;
  stroke:var(--ink); stroke-opacity:0;
  stroke-width:1.5; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  transition:fill-opacity .25s var(--ease), stroke-opacity .25s var(--ease);
}
.slm-asendi-ala:hover,
.slm-asendi-ala:focus-visible,
.slm-asendi-ala.is-aktiivne{ fill-opacity:.16; stroke-opacity:1; }
.slm-asendi-ala:focus-visible{ fill-opacity:.24; stroke-width:2.5; }

/* --- Hõljumiskaart --------------------------------------------------------
   Käib maja järgi, jääb lava sisse. Kõik neli fotot on kaardis korraga ja
   vahetuvad läbipaistvusega — nii ei ole majalt majale liikudes laadimispausi. */
.slm-asendi-kaart{
  position:absolute; z-index:3; top:0; left:0; pointer-events:none;
  width:clamp(176px,18vw,242px);
  background:var(--ink); color:var(--white);
  box-shadow:0 14px 40px rgba(51,48,42,.3);
  /* Püstsuuna annab JS (top), et kaart jääks alati joonise sisse. */
  transform:translateX(-50%);
  opacity:0; transition:opacity .2s var(--ease);
}
.slm-asendi-kaart.on-nahtav{ opacity:1; }
.slm-asendi-kaart[hidden]{ display:none; }

.slm-asendi-pildid{ position:relative; aspect-ratio:5/4; background:var(--taupe-dark); }
.slm-asendi-pilt{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .2s var(--ease);
}
.slm-asendi-pilt.on-nahtav{ opacity:1; }

.slm-asendi-kaart-sisu{ padding:11px 15px 13px; font-family:var(--sans); }
.slm-asendi-nimi{
  margin:0; font-family:var(--display); font-weight:300;
  font-size:19px; line-height:1.15;
}
.slm-asendi-read{ margin:5px 0 0; font-size:14px; color:rgba(255,255,255,.72); }
.slm-asendi-ava{
  margin:9px 0 0; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold);
}

/* Juhisrida seisab juhtlõigu ja joonise vahel — seal, kus ta tegu ka
   toimub. Ta on lehepäise viimane rida, nii et joonisest hoiab teda
   eemal lehepäise alumine polster (`nk-lehepea`), mitte oma veeris. */
.slm-asendi-vihje{ margin:18px 0 0; }

/* --- Nupurida telefonile ---------------------------------------------------
   Joonisel on majad näpu jaoks liiga väikesed, seega saab kitsal ekraanil
   sama tabeli nupurealt. Lauaarvutis piisab joonisest. */
.slm-asendi-nupud{ display:none; }
.slm-asendi-nupp{
  appearance:none; cursor:pointer; text-align:left; width:100%;
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:13px 16px; background:var(--paper); border:1px solid var(--line);
  color:var(--ink); font-family:var(--sans);
}
.slm-asendi-nupp + .slm-asendi-nupp{ border-top:0; }
.slm-asendi-nupp:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.slm-asendi-nupp-n{ font-family:var(--display); font-weight:300; font-size:19px; line-height:1.2; }
.slm-asendi-nupp-m{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

.slm-asendi-lingid{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:8px; }

/* --- Modaal ---------------------------------------------------------------
   Üks dialoog, sees iga maja jaoks oma tabel. Tabel on tahtlikult kitsam kui
   hinnalehel: siin on juba teada, mis majaga tegu, ja ridu peab mahtuma
   ekraanile palju. */
.slm-modaal{
  width:min(860px,calc(100vw - 28px));
  max-height:min(86vh,880px);
  padding:0; border:0; border-radius:3px;
  background:var(--paper); color:var(--ink);
  box-shadow:0 30px 80px rgba(51,48,42,.34);
  overflow:hidden;
}
.slm-modaal::backdrop{ background:rgba(51,48,42,.55); }
.slm-modaal-sees{
  display:flex; flex-direction:column; max-height:inherit;
  max-height:min(86vh,880px);
}

.slm-modaal-pais{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:22px clamp(18px,3vw,30px) 16px;
  border-bottom:1px solid var(--ink);
}
.slm-modaal-nimi{
  margin:0; font-family:var(--display); font-weight:300;
  font-size:clamp(24px,3.4vw,32px); line-height:1.1; letter-spacing:-.01em;
}
.slm-modaal-read{
  margin:6px 0 0; font-family:var(--sans);
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.slm-modaal-sulge{
  appearance:none; cursor:pointer; flex:none;
  width:36px; height:36px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); border-radius:999px;
  color:var(--ink-2);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.slm-modaal-sulge:hover{ border-color:var(--ink); background:rgba(185,164,123,.14); }
.slm-modaal-sulge:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.slm-modaal-keha{ overflow:auto; -webkit-overflow-scrolling:touch; padding:0 clamp(18px,3vw,30px); }
.slm-modaal-maja[hidden]{ display:none; }

.slm-mtabel{ width:100%; border-collapse:collapse; min-width:620px; }
.slm-mtabel thead th{
  position:sticky; top:0; z-index:1; background:var(--paper);
  text-align:left; font-weight:400;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  padding:14px 14px 9px 0; border-bottom:1px solid var(--line); white-space:nowrap;
}
.slm-mtabel tbody td{
  padding:9px 14px 9px 0; border-bottom:1px solid var(--line);
  font-size:15.5px; color:var(--ink-2); white-space:nowrap; vertical-align:middle;
}
.slm-mtabel tbody tr:last-child td{ border-bottom:0; }
.slm-mtr{ cursor:pointer; transition:background .25s var(--ease); }
.slm-mtr:hover{ background:rgba(185,164,123,.12); }
.slm-mtr[data-staatus="muudud"] td{ color:var(--muted); }
.slm-mnr{
  font-family:var(--display); font-weight:300; font-size:20px; line-height:1.2;
  color:var(--ink); text-decoration:none; display:inline-block;
}
.slm-mtr[data-staatus="muudud"] .slm-mnr{ color:var(--muted); }
.slm-mnr:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.slm-mtabel .nk-tag{ font-size:11.5px; padding:5px 12px; }
/* front.css'i siin ei laeta — „Küsi hinda" vajab oma tooni. */
.slm-modaal .slm-kysi{ color:var(--muted); }

.slm-modaal-jalus{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px clamp(18px,3vw,30px) 18px;
  border-top:1px solid var(--line);
}
.slm-modaal-jalus .nk-note{ margin:0; }

/* --- Kitsas ekraan -------------------------------------------------------- */
/* Puutel hõljumist ei ole — klõps avab kohe tabeli, kaarti ei näidata. */
@media (hover:none){
  .slm-asendi-kaart{ display:none; }
}

@media (max-width:700px){
  .slm-asendi-nupud{ display:block; margin-top:18px; }
  .slm-asendi-vihje{ display:none; }
}

@media (max-width:860px){
  .slm-modaal{ width:100vw; max-width:100vw; max-height:92vh; border-radius:0; }
  .slm-modaal-sees{ max-height:92vh; }
  .slm-modaal-jalus{ flex-direction:column; align-items:flex-start; gap:10px; }
}

@media (prefers-reduced-motion:reduce){
  .slm-asendi-ala,.slm-asendi-kaart,.slm-asendi-pilt,.slm-mtr{ transition:none; }
}

/* Joonis on sama lai kui hinnalehe sisu: akna laius miinus gutter
   (23.09.2026; enne 1240 px nk-wrap). Pealkiri ja juhtlõik on
   `nk-lehepea`-s oma laiusega keskel, neid see ei venita. */
.slm-asendi-sektsioon > .nk-wrap{ max-width:none; }