/* ==========================================================================
   Vendre — WordPress-kohtaiset lisäykset
   Nämä EIVÄT ole leiskassa, vaan syntyvät siitä että sivusto on nyt CMS:
   kuvapaikat, lomakkeen palautteet, ohituslinkki ja kielivalitsin.

   Erillinen tiedosto siksi, että assets/css/vendre.css on GENEROITU
   (_tyokalut/portaa_css.py) ja portin uudelleenajo pyyhkisi tänne
   kirjoitetut säännöt.
   ========================================================================== */

/* ---- Kuvapaikka: näkyy kun lohkoon ei ole vielä valittu kuvaa ---- */
.ph-kuva{display:block;width:100%;aspect-ratio:4/3;
  background:repeating-linear-gradient(45deg,#E7E4DE 0 10px,#EFEDE8 10px 20px)}

/* ---- Lomake ---- */
.f-hunaja{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-viesti{padding:.9em 1.1em;border-radius:.2em;font-size:var(--fs-card)}
.f-viesti--onnistui{background:var(--sun);color:var(--deep)}
.f-viesti--virhe{background:#F0A79C;color:#3B2535}

/* ---- Kielivalitsin ---- */
.lang{display:flex;gap:.55rem;align-items:center;font-size:var(--fs-small);
  letter-spacing:.08em;text-transform:uppercase}
.lang a{text-decoration:none;opacity:.62}
.lang a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:.28em}

/* ---- Aikajanan kuvan rajauskohta ----
   Leiskassa jokaiselle kuvalle annettiin object-position tiedostonimen
   perusteella. WP:ssä nimet vaihtuvat, joten arvo tulee lohkon asetuksesta
   muuttujana. Oletus 30 % vastaa leiskan yleisintä arvoa. */
.prose ol.aikajana .tl-kuva img{object-position:50% var(--tl-kohdistus,30%)}

/* ---- Sitaattikaruselli: Trustmary-upotus ----
   Kun upotuskoodi on annettu, se korvaa omat sitaatit. Kolmannen osapuolen
   iframe saa oman kaarensa, jottei se riko osion asettelua. */
.tm-embed{width:100%;max-width:60rem;margin-inline:auto}
.tm-embed iframe{display:block;width:100%;border:0}

/* ---- Arvot-lista .prose-osion sisalla ----
   ANSA: .prose ol li (0,1,2) on tarkempi kuin .arvot li (0,1,1), joten
   perusrivin gap, border ja padding palaisivat. Sama ansa on aikajanalla. */
.prose ol.arvot{margin:clamp(2.2rem,4vw,3.4rem) 0 0;padding:0}
.prose ol.arvot li{grid-template-columns:auto 1fr;
  gap:clamp(1.1rem,2.4vw,2.2rem);
  padding-block:clamp(1.3rem,2.3vw,2rem);border-bottom:0}
.prose ol.arvot li:last-child{border-bottom:1px solid var(--line);
  border-bottom-color:color-mix(in srgb, var(--ink-2) 42%, transparent)}

/* ---- Taustakuvan paikanvaraaja ----
   .hero .bg ja .career .bg ovat position:absolute;inset:0, joten niiden sisalla
   4:3-suhteinen paikanvaraaja jattaisi kannen puoliksi tyhjaksi ennen kuin
   kuva on valittu. Taytetaan koko ala. */
.hero .bg .ph-kuva,
.career .bg .ph-kuva,
.pagehead--split .ph .ph-kuva,
.artmedia .ph-kuva{height:100%;aspect-ratio:auto}