/* ===========================================================================
   MAINOKSET-NÄKYMÄ · lasi A 2.2 -sopimuksella
   Jonokohta #201, porttaus tuotantoon 4.9.2026. Lähde ja mittaus:
   web-design-agentti-23, web/_kehitys/mainokset/mainokset-a.html + tämä
   tiedosto sellaisenaan. Speksi: docs/superpowers/specs/2026-09-04-mainoskone.md
   kohta 2. 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.
   - Ei turkoosia (vain live-piste ja hoidettu-chip saavat sen muualla).
   - Ei backdrop-filteriä.
   - Gradientti (--act) vain näkymän YHDELLÄ päätoiminnolla, ei rivitoiminnoilla.
     Siksi "Tuotantoon" ei ole .btn-primary kolmesti: ks. varianttien ero alla.
   - "Mark hoitaa" käyttää valmista .btn.hoitaa -luokkaa, ei omaa.
   =========================================================================== */

/* Paikanvaraus navi-linkille kunnes tiedetään onko Mainostoimisto
   ostettu (jono #201-jatko, 5.9.2026). Sama tekniikka ja sama syy kuin
   dashboard.css:n .navlink.vk-varaus: nakymaton mutta varaa paikkansa,
   jottei alempien valikkokohtien tarvitse hypata kun vastaus saapuu. */
.navlink.mn-varaus {
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Ehdokasruudukko ---------- */
/* Container query kuten bento: leveys tulee levyn sisäleveydestä, ei ruudusta. */
/* Container on lasi.css:ssa nimeltaan `levy` (.main, rivi 368), ei `main`.
   auto-fit on varapolku: jos containeria ei ole (vanha selain), kortit
   asettuvat silti ruudukkoon eivatka veny yhdeksi jattikortiksi. */
.mainos-ehdokkaat {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@container levy (max-width: 1000px) {
  .v-a .mainos-ehdokkaat { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ---------- Ehdokaskortti ---------- */
.mainos-kortti {
  position: relative; display: flex; flex-direction: column;
  background: var(--l-card); border-radius: var(--r-panel);
  box-shadow: var(--l-card-shadow);
  overflow: hidden;
  transition: box-shadow 160ms cubic-bezier(.4,0,.2,1);
}
.mainos-kortti:hover { box-shadow: var(--l-card-shadow), 0 0 0 1px var(--l-gloss); }

/* Valittu ehdokas. Ei uutta väriä: kirkkaampi lasireuna + gloss. */
.mainos-kortti.on {
  box-shadow: var(--l-card-shadow), inset 0 0 0 1.5px rgba(255,255,255,0.14);
  background: var(--l-card-2);
}

/* Kuvapaikka. Markin luoma kuva tulee tähän; paikanpitäjä on rehellisesti
   paikanpitäjä eikä teeskentele mainoskuvaa. Gradientti on --act 10 %,
   eli olemassa olevan tokenin käyttöä, ei uusi väri.

   ⚠ KOKORAJA (jono #277, 6.9.2026). Tämä laatikko täytti ennen kortin koko
   leveyden. Mitattu tuotannon tilanteesta paikallisella harnessilla ennen
   korjausta: 1280 px ruudulla YHDELLÄ ehdokkaalla kuva renderöityi
   966 x 966 px ja kortti oli 1163 px korkea, eli omistajan piti vierittää
   koko ruudun mittainen kuva ohi ennen kuin mainoksen otsikko näkyi.
   Leonardo palauttaa 1024 x 1024, joten neliö on normaali tapaus eikä
   poikkeus: 4:3-laatikko + width/height 100 % teki siitä kortin levyisen
   neliön. Raja on nyt 480 x 320 ja kuva on vasemmalla.

   border-bottom poistettu tarkoituksella: viiva oli kortin levyinen jakaja
   kuvan alla, ja kun kuva ei enää ulotu reunasta reunaan, sama viiva olisi
   näyttänyt katkenneelta alleviivaukselta. Tilalle kuvan oma pyöristys
   (10 px, sama arvo kuin .mainos-hist-kuva tässä samassa tiedostossa) ja
   sisennys, joka on sama kuin .mainos-sisallon padding. */
.mainos-kuva {
  position: relative;
  margin: 16px 18px 0;
  max-width: 480px; max-height: 320px;
  aspect-ratio: 4 / 3;
  border-radius: 10px; overflow: hidden;
  background: var(--l-inset);
  display: grid; place-items: center;
}
.mainos-kuva::before {
  content: ""; position: absolute; inset: 0; opacity: .10;
  background: var(--act);
}
.mainos-kuva span {
  position: relative; font-family: var(--body); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
/* Paikanpitäjä tarvitsee oman vähimmäisleveytensä VAIN vaakalayoutissa
   (alla): siellä kuvasarake on auto-levyinen, ja pelkkä "Kuva tulossa"
   -teksti kutistaisi laatikon tekstinsä levyiseksi. Kuvan sisältävää
   laatikkoa tämä ei koske, ettei kapea pystykuva saisi tyhjiä palkkeja. */
.mainos-kuva:not(:has(img)) { min-width: 200px; }

/* Oikea mainoskuva Leonardolta. Laatikko kutistuu kuvan kokoiseksi, jotta
   paikanpitäjän gradienttia ei jää näkyviin kuvan sivuille.
   align-self: start on pystysuuntaisessa flexissä VAAKA-akseli - se on siis
   tämä rivi joka jättää kuvan vasemmalle eikä venytä sitä kortin levyiseksi. */
.mainos-kuva:has(img) {
  aspect-ratio: auto; max-height: none;
  align-self: start;
  background: none;
}
.mainos-kuva:has(img)::before { content: none; }
/* Klikkaus avaa täysikokoisen kuvan uuteen välilehteen (jono #277): 320 px
   riittää päätökseen "julkaisenko tämän", ei tarkastukseen. */
.mainos-kuva a { display: block; max-width: 100%; border-radius: inherit; }
.mainos-kuva img {
  position: relative; display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 320px;
  object-fit: contain;
}

/* ---------- Kortin sisältö ---------- */
.mainos-sisalto { padding: 16px 18px 4px; flex: 1 1 auto; min-width: 0; }
.mainos-sisalto h3 {
  font-family: var(--l-head); font-weight: 600; font-size: 16px;
  line-height: 1.3; color: var(--ink); margin: 0 0 7px;
}
.mainos-sisalto p {
  font-family: var(--body); font-weight: 300; font-size: 14px;
  line-height: 1.55; color: var(--ink-2); margin: 0;
}

/* Faktarivi: kohderyhmä ja budjetti. Numerot tabulaarisina. */
.mainos-faktat { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 13px 0 0; }
.mainos-faktat div { min-width: 0; }
.mainos-faktat dt {
  font-family: var(--body); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 2px;
}
.mainos-faktat dd {
  font-family: var(--body); font-size: 13.5px; color: var(--ink); margin: 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- Toimintorivi ---------- */
/* "Mark hoitaa" oikeaan reunaan, kuten sopimus määrää muillekin kohteille:
   Vahvista/Hylkää ovat omistajan päätös, delegointi on erillään. */
.mainos-toiminnot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 18px 16px;
}
.mainos-toiminnot .btn.hoitaa { margin-left: auto; }
/* Kopiointikuittaus "Lataa kuva ja kopioi teksti" -napin vieressä. Ei uutta
   väriä eikä komponenttia: .quiet on jo dashboard.css:n vakioluokka. */
.mainos-toiminnot .mn-lataa-tila { font-size: 12.5px; }

/* Tuotantoon on kortin päätoiminto myös ENNEN julkaisua (tuotepäätös
   Sepolta/Simolta 5.9.2026 klo 20.30) - EI gradienttia (se on varattu
   yhdelle näkymän kerrallaan, ei jokaiselle kortille), vaan sama
   korostettu-reuna-tekniikka kuin .bk-cell.bk-selected ja .mainos-
   kortti.on jo käyttävät: inset var(--act-line), ei uusi väri. */
.mainos-toiminnot .btn.mn-paatoiminto {
  /* EI font-weight:600:aa - .btn (dashboard.css) antaa sen jo kaikille
     napeille, myös .btn-ghostille. Tarkoituksellinen poisto (web-design-
     agentti-23 5.9.2026), ei vahinko: erottuvuus tulee YKSIN reunasta. */
  box-shadow: inset 0 0 0 1.5px var(--act-line);
}

/* Julkaisun tulos korvaa Tuotantoon-napin (jono #239, 5.9.2026): linkki
   per onnistunut kanava, virheteksti per epäonnistunut. Ei uutta väriä
   eikä komponenttia - .btn.btn-sm ja .quiet ovat jo olemassa, tämä on
   vain niiden asettelu riviksi Mark hoitaa -napin tapaan. flex-basis:100%
   (web-design-agentti-23:n löydös 5.9.2026): oma rivi aina, ettei pitkä
   virheteksti katkaise toimintorivin puoliksi Lataa kuva -napin kanssa. */
.mainos-julkaisu { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; flex-basis: 100%; }
.mn-julkaisu-virhe { font-size: 12.5px; }
/* Tilasana julkaistun/tuotannossa-olevan kortin linkkien vieressä (web-
   design-agentti-23:n löydös 5.9.2026: kirkkaampi lasireuna ei yksin
   riitä - "Julkaistu" pitää sanoa myös tekstillä). Ei uutta väriä. */
.mainos-tila-sana { font-family: var(--l-head); font-weight: 600; font-size: 13px; color: var(--ink); }

/* ---------- Leveän kortin vaakalayout (jono #277, 6.9.2026) ----------
   Kuva vasemmalle, otsikko/leipä/faktat/napit oikealle samalle riville.

   MIKSI :only-child EIKÄ PELKKÄ RUUDUN LEVEYS. Kortin leveys ei tule
   ruudusta vaan .mainos-ehdokkaat-ruudukosta: mitattu 6.9. samalla
   1280 px ruudulla, että KOLME ehdokasta saa kukin 313 px ja YKSI ehdokas
   saa 966 px. Pelkkä @media (min-width: 901px) olisi siis pakottanut
   vaakalayoutin myös 313 px:n korttiin, jossa 320 px:n kuvan viereen ei jää
   tekstille mitään. auto-fit-ruudukossa yksi kortti = koko rivi, joten
   :only-child on täsmälleen se tapaus jossa kortti on leveä - ja se on myös
   se tapaus jonka Simo näki tuotannossa 6.9. klo 22.18.

   ⚠ Kahden ehdokkaan kortit jäävät pinoon myös erittäin leveällä ruudulla
   (2 x 260 px mahtuu rinnakkain jo 560 px:ssä, joten ne eivät kasva
   leveiksi ennen ~1700 px ruutua). Se ei riko mitään, mutta se on tietoinen
   rajaus eikä unohdus. Kortin oma container query olisi ainoa täysin
   leveyspohjainen tapa, ja se vaatisi kääre-elementin: kysely osuisi
   muuten lähimpään esi-containeriin (.main, "levy"), ei korttiin itseensä. */
@media (min-width: 901px) {
  .mainos-ehdokkaat > .mainos-kortti:only-child {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .mainos-ehdokkaat > .mainos-kortti:only-child > .mainos-kuva {
    grid-column: 1; grid-row: 1 / span 2;
    justify-self: start; align-self: start;
    margin-bottom: 16px;
  }
  .mainos-ehdokkaat > .mainos-kortti:only-child > .mainos-sisalto { grid-column: 2; grid-row: 1; }
  /* align-self: end pitää napit kortin alareunassa myös silloin kun kuva on
     tekstiä korkeampi, jottei rivi näytä kesken jääneeltä. */
  .mainos-ehdokkaat > .mainos-kortti:only-child > .mainos-toiminnot { grid-column: 2; grid-row: 2; align-self: end; }
}

/* ---------- Historia ---------- */
.mainos-hist { display: grid; gap: 0; }
/* align-items: start (oli center) - web-design-agentti-23:n mittaus 5.9.:
   "molemmat"-kanavan rivillä kolmas sarake on kaksi lohkoa korkea, ja
   center keskitti otsikon niiden VÄLIIN. start pitää otsikon ja
   ensimmäisen kanavalohkon (facebook) yläreunat samalla tasolla. */
.mainos-hist-rivi {
  display: grid; grid-template-columns: 44px 1fr auto;
  align-items: start; gap: 14px;
  padding: 13px 4px; border-top: 1px solid var(--l-edge);
}
.mainos-hist-rivi:first-child { border-top: 0; }
.mainos-hist-kuva {
  width: 44px; height: 44px; border-radius: 10px; position: relative; overflow: hidden;
  background: var(--l-inset);
}
.mainos-hist-kuva::before { content: ""; position: absolute; inset: 0; opacity: .12; background: var(--act); }
.mainos-hist-kuva img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.mainos-hist-teksti { min-width: 0; }
.mainos-hist-teksti b {
  display: block; font-family: var(--l-head); font-weight: 600; font-size: 14px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mainos-hist-teksti span {
  font-family: var(--body); font-size: 12.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* Tulokset: luvut tabulaarisina, ei väriä. Suunta luetaan tekstistä. */
.mainos-tulos { display: flex; gap: 18px; text-align: right; }
.mainos-tulos div { min-width: 62px; }
.mainos-tulos dt {
  font-family: var(--body); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 1px;
}
.mainos-tulos dd {
  font-family: var(--l-num); font-weight: 500; font-size: 17px; color: var(--ink);
  margin: 0; font-variant-numeric: tabular-nums;
}

/* Markin analyysi ja julkaisukanava (jono #239, 5.9.2026). Levitetty koko
   rivin levyiseksi samaan tapaan kuin mobiilin oma .mainos-tulos-sääntö
   jo tekee alla - ei uutta väriä, .quiet on dashboard.css:n vakioluokka. */
.mainos-hist-analyysi { grid-column: 1 / -1; margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; }
.mainos-hist-kanava { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

/* "Tulokset tulossa klo X" - kolmannen sarakkeen paikalla kuin .mainos-
   hist-tulokset, jotta rivi ei hyppää kun oikea data saapuu myöhemmin. */
.mainos-hist-odotus { margin: 0; font-size: 12.5px; text-align: right; }

/* Kanavakohtaiset tulokset (Sepon paatos 5.9.2026 klo 17.45): facebook ja
   instagram eivat jaa samaa dl:aa, koska niiden luvut eivat ole vertailu-
   kelpoisia (nayttokerrat vs. uniikki kattavuus, ks. auth-supabase.js:n
   mnHistoriaRivi-kommentti). Pinottu allekkain, ei rinnakkain, jotta
   .mainos-hist-rivi:n auto-leveys kolmas sarake ei levene kohtuuttomasti
   kun molemmat kanavat on julkaistu. */
.mainos-hist-tulokset { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.mainos-hist-tulos-lohko { text-align: right; }
.mainos-hist-tulos-lohko .mainos-hist-kanava { display: block; margin: 0 0 2px; color: var(--ink-3); }

/* ---------- Asetukset ---------- */
.mainos-asetukset { display: grid; gap: 0; }
.mainos-aset-rivi {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 4px; border-top: 1px solid var(--l-edge);
}
.mainos-aset-rivi:first-child { border-top: 0; }
.mainos-aset-teksti { flex: 1 1 auto; min-width: 0; }
.mainos-aset-teksti b {
  display: block; font-family: var(--l-head); font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 3px;
}
.mainos-aset-teksti span { font-family: var(--body); font-weight: 300; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.mainos-aset-rivi .input { width: 96px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.mainos-aset-rivi .input.leve { width: 220px; text-align: left; }

/* Autopilotti on OFF oletuksena ja se sanotaan ääneen, ei vain kytkimen
   asennolla. Sama periaate kuin varauskirjan koeaikatilassa. */
.mainos-aset-rivi[data-korostus] { background: rgba(245,240,232,0.035); border-radius: 12px; padding-left: 14px; padding-right: 14px; }

@media (max-width: 760px) {
  .mainos-tulos { gap: 12px; }
  .mainos-tulos div { min-width: 52px; }
  .mainos-hist-rivi { grid-template-columns: 36px 1fr; }
  /* Vaakavieritys 31px 390:ssä (web-design-agentti-23, sopimusrikko lasi
     A 2.2:aa vastaan - raja on 0). Syy mitattu: facebookin nelja dt/dd-
     saraketta (Näyttökerrat yksin 95px) eivät mahtuneet 240px:n sisältö-
     leveyteen kun padding-left oli 50px. Korjaus: salli rivitys ja pienennä
     sisennys, EI JS-muutosta - täsmälleen designerin mittaama kaksi riviä. */
  .mainos-tulos { flex-wrap: wrap; }
  .mainos-hist-tulokset { grid-column: 1 / -1; align-items: flex-start; padding-left: 12px; gap: 10px; }
  .mainos-hist-tulos-lohko { text-align: left; }
  .mainos-tulos { justify-content: flex-start; text-align: left; }
  .mainos-hist-odotus { grid-column: 1 / -1; text-align: left; padding-left: 12px; }
  .mainos-aset-rivi { flex-wrap: wrap; }
}