/* ===========================================================================
   RAKENNUKSET-NÄKYMÄ · lasi A 2.2 -sopimuksella
   Jono #371, MARK RAKENTAA 1.6, 12.9.2026. Malli: assets/ehdotukset.css
   (Mainokset-välilehti, jono #201). Sopimus: design/LUOVUTUS_dashboard_
   lasi_2026-09-03.md.

   SITOVAT RAJAT JOITA TÄMÄ NOUDATTAA
   - Ei yhtään uutta väriä. Jokainen arvo tulee lasi.css:n tokeneista tai
     dashboard.css:n valmiista badge-varianteista (amber/sage).
   - Ei turkoosia.
   - Ei backdrop-filteriä.
   - "Hyväksy" EI ole .btn-primary: sopimus varaa gradientin näkymän YHDELLE
     päätoiminnolle, ja tässä näkymässä voi olla useampi esikatselu-kortti
     yhtä aikaa (sama peruste kuin ehdotukset.css:n "Tuotantoon"-nappi).
   - "Peru" käyttää valmista .btn-danger-luokkaa (dashboard.css): tämä on
     ainoa aidosti peruuttava/riskialtis toiminto tässä näkymässä, ja
     .btn-danger on jo olemassa juuri tähän tarkoitukseen.
   - Mobiili 390 px: kortit pinoutuvat, kuvakaappaukset 390/1440 pinoon
     rinnakkaisen ruudukon sijaan. Jokaisella grid-solulla min-width:0
     (muisti 11.9.2026: puuttuva min-width:0 piilotti vaakavuodon joka
     scrollWidth-mittari ei nähnyt, koska esivanhemmalla oli overflow
     hallinnassa vasta korjauksen jälkeen).
   =========================================================================== */

.rk-lista { display: grid; gap: 14px; }

/* ---------- Kortti ---------- */
.rk-kortti {
  position: relative;
  background: var(--l-card); border-radius: var(--r-panel);
  box-shadow: var(--l-card-shadow);
  padding: 16px 18px 18px;
  min-width: 0;
}

.rk-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
/* Omistajan omat sanat, sitaattina. Ei Markin tiivistelmä (sama peruste
   kuin kannan omistajan_sanat-sarake): näytetään sellaisenaan lainausmerkein,
   jottei kukaan luule tekstin olevan Markin muotoilema otsikko. */
.rk-sanat {
  font-family: var(--l-head); font-weight: 500; font-size: 15px; line-height: 1.4;
  color: var(--ink); margin: 0; min-width: 0;
  flex: 1 1 260px;
  /* min-width:0 YKSIN EI RIITÄ: se sallii kutistumisen, muttei pakota
     TAUOTONTA sanaa rivittymään - sen min-content-leveys on koko sanan
     mittainen. Mitattu 12.9.2026 omalla selaintestillä (rakennukset-
     selain-test.mjs): omistajan sanoissa voi olla pitkä yhdyssana tai
     URL ilman välilyöntejä, ja ilman tätä se työnsi koko kortin ja
     dokumentin leveämmäksi 390 px:ssä (610 vs 390 px, sama vikaluokka
     kuin muistin mobiilivuoto-piiloutuu-overflow-hiddeniin.md). */
  overflow-wrap: anywhere;
}
.rk-sanat::before { content: "\201C"; }
.rk-sanat::after { content: "\201D"; }

.rk-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  flex: 0 0 auto;
}
.rk-aika { font-size: 12.5px; white-space: nowrap; }

.rk-body { min-width: 0; }
.rk-body > p.quiet { margin: 0; font-size: 13.5px; }

/* ---------- Esikatselu ---------- */
.rk-esikatselu { display: grid; gap: 12px; min-width: 0; }

/* KORJAUSKIERROS 1 (12.9.2026): kuvakaappaukset-sopimus on rakentaja.mjs:n
   mukaan {vaihe:'ennen'|'jalkeen', leveys, url}[] - "ennen" = mitä sivulla
   on NYT, "jalkeen" = Markin EHDOTUS. Rakenne on siis kaksitasoinen: yksi
   RIVI per leveys (390, 1440), ja rivin SISÄLLÄ kaksi saraketta "Nyt" ja
   "Ehdotus" rinnakkain. Leveysrivit ovat AINA pinossa (390 ja 1440 eivät
   koskaan rinnakkain, ne ovat eri laitteita), Nyt/Ehdotus ovat rinnakkain
   desktopilla ja pinossa 390 px:ssä (brief 1.6 kohta 1: "mobiili 390 px:
   pino, ei taulukkoa"). */
.rk-kuvat { display: grid; gap: 18px; min-width: 0; }
.rk-leveysrivi { min-width: 0; }
.rk-leveys-otsikko {
  margin: 0 0 8px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}
/* minmax(0,1fr) EIKÄ pelkkä 1fr: img:n intrinsic-leveys ilman min-width:0
   -rajaa pakottaisi sarakkeen leveämmäksi kuin ruutu (sama vikaluokka
   kuin muistin mobiilivuoto-piiloutuu-overflow-hiddeniin.md). */
.rk-pari {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.rk-kuva { min-width: 0; }
.rk-kuva-otsikko {
  display: block; margin-bottom: 6px; font-weight: 600; font-size: 12px;
  color: var(--ink-2);
}
.rk-kuva img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; background: var(--l-inset);
}
/* Puuttuva puoli parista (esim. "Nyt" kun kuvaa ei ole otettu tuotanto-
   sivusta): sama laatikko kuin kuva, jotta rivi ei hyppää kun toinen
   puoli latautuu. Ei uutta väriä (--l-inset on jo lasi.css:n tokeni). */
.rk-kuva-tyhja {
  display: flex; align-items: center; justify-content: center;
  min-height: 90px; border-radius: 10px; background: var(--l-inset);
  color: var(--ink-3); font-size: 12px; text-align: center; padding: 8px;
}

@media (max-width: 480px) {
  /* Mobiili 390 px: Nyt/Ehdotus pinoutuvat, ei rinnakkaista ruudukkoa
     (brief 1.6 kohta 1). */
  .rk-pari { grid-template-columns: 1fr; }
}

.rk-toiminnot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Palautelomake ("Pyydä muutos"). Piilossa oletuksena, JS näyttää sen kun
   omistaja klikkaa - ei omaa väriä, .input on jo dashboard.css:n
   vakiokomponentti. */
.rk-palaute { display: grid; gap: 8px; margin-top: 4px; }
.rk-palaute textarea.input { resize: vertical; min-height: 64px; }
.rk-palaute-napit { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Julkaistu ---------- */
.rk-julkaistu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rk-julkaistu p.quiet { margin: 0; flex: 1 1 auto; min-width: 0; }

/* ---------- Epäonnistui ---------- */
/* .note.is-fail on jo dashboard.css:n vakioluokka (rose-sävyinen teksti
   virheelle) - ei uutta väriä, käytetään sellaisenaan. */
.rk-epaonnistui p.note { margin: 0; }