/*
Theme Name: ProEt
Theme URI: https://proet.fi
Author: ProEt Oy
Description: ProEt Oy:n custom-koodattu WordPress-teema. Etiikan täydennyskoulutusta, verkkokoulutuksia ja konsultointia tarjoavan sote-alan koulutusyrityksen sivusto.
Version: 0.24.6
Requires PHP: 8.0
Text Domain: proet
*/

:root {
  --bg: #f4f1f4;
  --surface: #ffffff;
  --surface-sunk: #ebe7ea;
  --text: #2a232b;
  --text-muted: #6b6270;
  --border: #e1dbe1;
  --brand: #8c1b6b;
  --brand-dark: #6a1450;
  --brand-tint: #f7ebf3;
  --gold: #a99400;
  --gold-tint: #f7f4dc;
  --neutral: #8f8a91;
  --focus: #2f6fb3;
  /* Metsä: taustakuvien ja vihreän kerroksen sävyt.
     --lime on korostusväri, jota käytetään aina taustana tummalla tekstillä
     tai tekstinä tummanvihreällä — valkoisella sen kontrasti jää 1,9:1. */
  --forest: #2f5d3a;
  --forest-dark: #17301e;
  --forest-tint: #eef3ed;
  --lime: #c7c400;
  --lime-dark: #9d9b00;
  --lime-text: #24240a;
  --footer-bg: #17301e;
  --shadow: 0 24px 48px -24px rgba(43, 20, 38, 0.28);
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Karla', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: 'Roboto Slab', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--brand);
  text-wrap: balance;
  margin: 0 0 0.5em;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  /* Vähimmäisreunus 1,5rem: kapealla näytöllä 4vw jäisi noin 15 pikseliin,
     jolloin teksti alkaisi liian läheltä näytön reunaa. */
  padding: 0 clamp(1.5rem, 4vw, 2.5rem);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--brand);
  color: #fff;
  padding: 0.75em 1.25em;
  z-index: 999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Header */
header.site-header {
  background: var(--surface);
  border-top: 4px solid var(--lime);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}
/* Yksi rivi työpöydällä: logo ja työkalut pitävät kokonsa, valikko saa
   loput tilasta ja luovuttaa ylimenevät kohdat "Lisää"-valikkoon. */
/* flex-wrap: wrap, jotta valikkopaneeli (flex-basis 100 %) taittuu omalle
   rivilleen koko palkin levyisenä. Ilman tätä se puristuisi nappien
   oikealle puolelle. */
.header-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 1rem 0;
  flex-wrap: wrap;
}
.logo {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex: none;
  /* Väljyyttä logon ja nappien väliin, jotta ne eivät sulaudu yhteen. */
  margin-right: 1.4rem;
  font-family: 'Roboto Slab', serif;
  font-size: 1.75rem;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.logo img { max-height: 52px; width: auto; display: block; }
.logo span { color: var(--text); font-size: 1.05rem; font-family: 'Karla', sans-serif; }

/* Valikkonappi näkyy vain kun JavaScript on käytössä — muuten valikko on
   jo valmiiksi näkyvissä eikä nappia tarvita. */
.nav-toggle { display: none; }

.js-nav .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  flex: none;
  order: 2;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.55em 1.1em;
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.js-nav .nav-toggle:hover,
.js-nav .nav-toggle:focus-visible { background: var(--brand-dark); outline: none; }

/* Kolme viivaa, jotka muuttuvat ristiksi kun valikko on auki. */
.nav-toggle-kuvake {
  position: relative;
  width: 1rem;
  height: 0.7rem;
  flex: none;
}
.nav-toggle-kuvake span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.15s ease, top 0.25s ease;
}
.nav-toggle-kuvake span:nth-child(1) { top: 0; }
.nav-toggle-kuvake span:nth-child(2) { top: calc(50% - 1px); }
.nav-toggle-kuvake span:nth-child(3) { top: calc(100% - 2px); }

.on-valikko-auki .nav-toggle-kuvake span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.on-valikko-auki .nav-toggle-kuvake span:nth-child(2) { opacity: 0; }
.on-valikko-auki .nav-toggle-kuvake span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

/* --- Avautuva valikkopaneeli ---
   Paneeli kelluu palkin alla absoluuttisesti sijoitettuna eikä työnnä
   sisältöä. Näin palkin korkeus ei muutu, sivu ei hyppää eikä selaimen
   vierityksen ankkurointi laukea avattaessa. */
.js-nav nav.primary-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 45;
  display: block;
  width: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 18px 30px -22px rgba(23, 48, 30, 0.55);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}
.site-header.on-valikko-auki nav.primary-nav {
  max-height: 34rem;
  opacity: 1;
  padding: 1rem 0 1.25rem;
}

/* Kaikki kohdat kerralla ruudukkona, sisältö samaan linjaan muun
   sivuston kanssa.

   Sarakemäärät ovat valikkokohtien lukumäärän (12) jakajia, jotta
   viimeinen rivi täyttyy eikä jää vajaaksi. Neljä saraketta antaa myös
   pisimmille otsikoille tilaa pysyä yhdellä rivillä. */
.js-nav nav.primary-nav ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.2rem 1rem;
  align-items: stretch;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 2.5rem);
  width: 100%;
}
/* Linkki täyttää solunsa, jolloin rivit ovat samankorkuisia ja
   osumatarkkuus on sama kaikilla kohdilla. */
.js-nav nav.primary-nav li { display: flex; }
.js-nav nav.primary-nav a {
  white-space: normal;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0.6rem 0.7rem;
}

@media (max-width: 1000px) {
  .js-nav nav.primary-nav ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Koodin lunastus on toiminto eikä sivu, joten se erottuu muista
   valikkokohdista limenkeltaisella merkillä. */
.nav-lunasta a {
  position: relative;
  padding-left: 1.5rem !important;
  font-weight: 700;
  color: var(--brand) !important;
}
.nav-lunasta a::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-radius: 50%;
  background: var(--lime);
}
.nav-lunasta a:hover,
.nav-lunasta a:focus-visible { color: #fff !important; }
.nav-lunasta a:hover::before,
.nav-lunasta a:focus-visible::before { background: #fff; }

/* Yläpalkin kauppatyökalut: lunastus ja ostoskori. */
.header-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}
.header-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  text-decoration: none;
  font-family: 'Karla', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.5em 0.8em;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.header-tool:hover,
.header-tool:focus-visible {
  background: var(--brand-tint);
  border-color: var(--brand);
  outline: none;
}
.header-tool--kori { background: var(--forest-tint); border-color: transparent; color: var(--forest); }
.header-tool--kori:hover { background: var(--forest); color: #fff; border-color: var(--forest); }
.kori-merkki {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45em;
  height: 1.45em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--lime);
  color: var(--lime-text);
  font-size: 0.74rem;
  font-weight: 700;
}

/* --- Navigaatio ---
   Ilman JavaScriptiä valikko on normaalisti näkyvissä ja taittuu riveille.
   Skriptin ollessa käytössä (.js-nav) se piilotetaan ja avataan napista
   koko palkin levyisenä ruudukkona: kaikki kohdat kerralla, ei osittaista
   näkymää eikä erillistä pudotuslaatikkoa. */
nav.primary-nav {
  display: flex;
  flex: 1 1 100%;
  min-width: 0;
  gap: 0.2rem 0.4rem;
}

nav.primary-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
nav.primary-nav a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.86rem;
  padding: 0.5rem 0.6rem;
  border-radius: 3px;
  white-space: nowrap;
  display: block;
  transition: background 0.15s ease, color 0.15s ease;
}
nav.primary-nav a:hover,
nav.primary-nav a:focus-visible {
  background: var(--brand);
  color: #fff;
  outline: none;
}
nav.primary-nav .current-menu-item > a,
nav.primary-nav .current_page_item > a {
  color: var(--brand);
  font-weight: 700;
}

@media (max-width: 900px) {
  .header-row { gap: 0.5rem; }
  .logo { font-size: 1.45rem; margin-right: 0.8rem; }
  .logo img { max-height: 42px; }
  .logo span { font-size: 0.92rem; }
  /* Kapealla näytöllä sama paneeli, mutta kaksi saraketta (12 = 2 x 6). */
  .js-nav nav.primary-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem 0.6rem; }
  .js-nav nav.primary-nav a { padding: 0.55rem 0.5rem; }
  .header-tools { order: 3; }
  .js-nav .nav-toggle { order: 2; padding: 0.5em 0.9em; font-size: 0.8rem; }
}

@media (max-width: 560px) {
  /* Hyvin kapealla näytöllä napin teksti pois, pelkkä kuvake riittää. */
  .js-nav .nav-toggle-teksti { display: none; }
  .js-nav .nav-toggle { padding: 0.55em 0.7em; }
  .js-nav nav.primary-nav ul { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .header-tool { font-size: 0.76rem; padding: 0.45em 0.6em; }
}

/* Page header (non-front pages) */
.page-hero {
  background:
    linear-gradient(100deg,
      rgba(23, 48, 30, 0.95) 0%,
      rgba(23, 48, 30, 0.88) 45%,
      rgba(23, 48, 30, 0.55) 78%,
      rgba(23, 48, 30, 0.34) 100%),
    url('assets/images/metsa-kesa.jpg') center 60% / cover no-repeat;
  color: #fff;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  border-bottom: 4px solid var(--lime);
}
/* Vuodenaikavariantit: proet_page_hero( ..., 'syksy' | 'talvi' ) */
.page-hero--syksy { background-image:
  linear-gradient(100deg, rgba(23,48,30,0.95) 0%, rgba(23,48,30,0.88) 45%, rgba(23,48,30,0.55) 78%, rgba(23,48,30,0.34) 100%),
  url('assets/images/metsa-syksy.jpg'); }
.page-hero--talvi { background-image:
  linear-gradient(100deg, rgba(23,48,30,0.95) 0%, rgba(23,48,30,0.88) 45%, rgba(23,48,30,0.58) 78%, rgba(23,48,30,0.38) 100%),
  url('assets/images/metsa-talvi.jpg'); }
.page-hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--lime);
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.page-hero h1 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 0.3em; }
.page-hero p { color: #e4eee2; max-width: 60ch; margin: 0; }

/* Murupolku yläkuvan yläreunassa. Pitkä viimeinen kohta (esim. kirjoituksen
   otsikko) lyhennetään, koska sama teksti on heti alla otsikkona. */
.murupolku ol { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; margin: 0 0 0.9rem; padding: 0; font-size: 0.8rem; }
.murupolku li { display: flex; min-width: 0; color: #cfe0cc; }
.murupolku li + li::before { content: "›"; margin: 0 0.5em; color: var(--lime); }
.murupolku a { color: #e4eee2; text-decoration: none; }
.murupolku a:hover { text-decoration: underline; }
.murupolku [aria-current] { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hero (front page) */
.hero {
  /* Tupasvillakuva ("yhdessä") taustalla, tummanvihreä verho vasemmalta, jotta
     teksti pysyy luettavana ja kuva jää näkyviin oikealle. */
  background:
    linear-gradient(100deg,
      rgba(23, 48, 30, 0.95) 0%,
      rgba(23, 48, 30, 0.88) 40%,
      rgba(23, 48, 30, 0.48) 74%,
      rgba(23, 48, 30, 0.26) 100%),
    url('assets/images/kuvat/suovilla.jpg') center 55% / cover no-repeat;
  /* Kevyempi WebP selaimille, jotka tukevat image-set()-tyyppiä. */
  background-image:
    linear-gradient(100deg,
      rgba(23, 48, 30, 0.95) 0%,
      rgba(23, 48, 30, 0.88) 40%,
      rgba(23, 48, 30, 0.48) 74%,
      rgba(23, 48, 30, 0.26) 100%),
    image-set(url('assets/images/kuvat/suovilla.webp') type('image/webp'), url('assets/images/kuvat/suovilla.jpg') type('image/jpeg'));
  color: #fff;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(6.5rem, 12vw, 9rem);
  position: relative;
  overflow: hidden;
}
/* Pehmeä tummennus alareunaan, jotta päälle limittyvä .index-card erottuu. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to bottom, transparent, rgba(23, 48, 30, 0.6));
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 40rem; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--lime);
  font-weight: 700;
  margin-bottom: 1rem;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.15;
  margin-bottom: 0.7em;
}
.hero p.lede {
  font-size: 1.1rem;
  color: #e4eee2;
  max-width: 38ch;
  margin: 0 0 1.8em;
}
.hero-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.75em 1.5em;
  border-radius: 2px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: #fff; color: var(--brand-dark); }
.btn-primary:hover { background: var(--gold-tint); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); }
.btn-ghost { border-color: rgba(255,255,255,0.6); color: #fff; background: transparent; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
/* Limenkeltainen aina tummalla tekstillä — kontrasti 8,3:1. */
.btn-lime { background: var(--lime); color: var(--lime-text); }
.btn-lime:hover { background: var(--lime-dark); color: #fff; }
/* Reunaviivanappi vaalealle taustalle (.btn-ghost on tummaa taustaa varten). */
.btn-outline { border-color: var(--brand); color: var(--brand); background: transparent; }
.btn-outline:hover { background: var(--brand-tint); }

/* Overlapping index card */
.index-card {
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: 6px;
  margin-top: clamp(-5.5rem, -9vw, -4rem);
  position: relative;
  z-index: 10;
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
/* Erilliset laatat joustavassa rivissä, neljä rinnakkain (kapealla kaksi).
   Vajaan rivin laatat keskitetään eivätkä veny: yhtenäisessä ruudukossa
   yksittäinen laatta venyi koko rivin levyiseksi. Seitsemää rinnakkain ei
   käytetä, koska esim. "Etiikkakortti®" ei mahdu niin kapeaan laattaan. */
.index-grid {
  --index-sarakkeet: 4;
  --index-vali: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--index-vali);
}
@media (max-width: 700px) { .index-grid { --index-sarakkeet: 2; } }
.index-item {
  flex: 0 1 calc((100% - (var(--index-sarakkeet) - 1) * var(--index-vali)) / var(--index-sarakkeet));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  padding: 1.1rem 1.15rem;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s ease;
}
.index-item:hover, .index-item:focus-visible { background: var(--brand-tint); outline: none; }
/* Tekstipalsta saa kutistua kohdan levyiseksi: ilman min-width: 0
   flex-elementti ei kutistu sisältöään pienemmäksi. */
.index-item > span:last-child { min-width: 0; }
.index-item strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.index-item small {
  color: var(--text-muted);
  font-size: 0.8rem;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Kapealla näytöllä kohdat tiivistetään kahteen sarakkeeseen: pienempi
   täyte ja vihjeteksti pois. */
@media (max-width: 700px) {
  .index-item { padding: 0.7rem 0.75rem; }
  .index-item strong { font-size: 0.86rem; }
  .index-item small { display: none; }
}

/* Sections */
main { padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
section { padding: clamp(2.25rem, 5vw, 3.5rem) 0; }
section + section { border-top: 1px solid var(--border); }

.intro-block {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 780px) { .intro-block { grid-template-columns: 1fr; } }
.intro-block h2 { font-size: 1.9rem; }
.intro-block p { color: var(--text-muted); }

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.stat-tile { background: var(--surface); padding: 1.25rem; }
.stat-tile .n {
  font-family: 'Roboto Slab', serif;
  font-size: 1.9rem;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  display: block;
}
.stat-tile .l { font-size: 0.82rem; color: var(--text-muted); overflow-wrap: break-word; hyphens: auto; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.section-head h2 { font-size: 1.7rem; margin: 0; }
.section-head .link-more { font-size: 0.88rem; font-weight: 700; text-decoration: none; color: var(--brand); white-space: nowrap; }
.section-head .link-more:hover { text-decoration: underline; }
.section-intro { color: var(--text-muted); max-width: 60ch; margin-top: -1rem; margin-bottom: 1.75rem; }

.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1.4rem 1.5rem;
}
.card .tag {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-tint);
  padding: 0.25em 0.6em;
  border-radius: 2px;
  margin-bottom: 0.7em;
}
.card h3 { font-size: 1.05rem; margin-bottom: 0.4em; }
.card p { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.card ul.parts { margin: 0.6em 0 0; padding-left: 1.1em; color: var(--text-muted); font-size: 0.85rem; }
.card .price { margin-top: 0.8em; font-weight: 700; color: var(--brand); font-size: 0.9rem; }
.card { display: flex; flex-direction: column; }
.card .card-actions { margin-top: auto; padding-top: 1.1em; }
.card .card-actions .btn { padding: 0.6em 1.2em; font-size: 0.85rem; }

.schedule {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.schedule-row {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 1.25rem;
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
}
.schedule-row + .schedule-row { border-top: 1px solid var(--border); }
.schedule-row:hover { background: var(--brand-tint); }
.schedule-date { font-family: 'Roboto Slab', serif; color: var(--brand); font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.schedule-title { font-size: 0.94rem; }
.schedule-title .time { display: block; color: var(--text-muted); font-size: 0.8rem; }
.schedule-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-tint);
  padding: 0.3em 0.55em;
  border-radius: 2px;
  white-space: nowrap;
}
@media (max-width: 620px) { .schedule-row { grid-template-columns: 1fr; row-gap: 0.3rem; } }

.theme-heading {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 2rem 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.theme-heading::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 3px;
  background: var(--lime);
}
.theme-heading:first-child { margin-top: 0; }

.video-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.video-card {
  scroll-snap-align: start;
  background: var(--surface-sunk);
  border-radius: 5px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  display: block;
}
.video-card.is-disabled { opacity: 0.55; pointer-events: none; }
.video-thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Videon pikkukuva täyttää ruudun; YouTuben 4:3-kuvien mustat reunat
   rajautuvat pois. Numero ja toistonappi pysyvät kuvan päällä. */
.video-thumb .video-kuva { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-thumb:has(.video-kuva)::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), transparent 45%);
}
.video-thumb .num { z-index: 1; }
.video-card:hover .play { background: #fff; transform: scale(1.08); }
.video-thumb .play {
  position: relative; z-index: 1; transition: transform 0.15s ease;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-dark);
  font-size: 0.9rem;
}
.video-thumb .num { position: absolute; top: 0.5rem; left: 0.6rem; font-family: 'Roboto Slab', serif; color: #f3d9ea; font-size: 0.78rem; }
.video-card .vc-body { padding: 0.75rem 0.9rem; }
.video-card .vc-body p { margin: 0; font-size: 0.85rem; }
.video-osio:first-child { padding-top: 0; }
.video-osio:last-child { padding-bottom: 0; }

/* Laatikko, joka on itse .wrap (etusivun akatemia): reunat samaan linjaan
   muun sisällön kanssa, eikä laatikko osu puhelimessa näytön reunoihin. */
.wrap.cta-band {
  --reuna: clamp(1.5rem, 4vw, 2.5rem);
  width: calc(100% - 2 * var(--reuna));
  max-width: calc(var(--maxw) - 2 * var(--reuna));
}
.cta-band {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dark) 100%);
  color: #fff;
  border-radius: 6px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cta-band h2 { font-size: 1.5rem; margin-bottom: 0.3em; color: #fff; }
.cta-band p { margin: 0; color: #d7e4d5; max-width: 40ch; }

/* Sidebar layout (generic content pages) */
.page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.page-layout.has-sidebar { grid-template-columns: 2.4fr 1fr; }
@media (max-width: 820px) { .page-layout.has-sidebar { grid-template-columns: 1fr; } }
.page-content { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: clamp(1.5rem, 4vw, 2.5rem); }
.page-content h2 { font-size: 1.5rem; }
.page-content .ingressi { font-size: 1.2rem; font-style: italic; color: var(--text-muted); margin: 0 0 1.2em; }
.page-content blockquote { margin: 1.5em 0; padding: 0.4em 0 0.4em 1.25em; border-left: 4px solid var(--lime); font-family: 'Roboto Slab', serif; font-size: 1.1rem; line-height: 1.6; color: var(--brand-dark); }
.page-content blockquote p { margin: 0; }
.page-content .kirja-tiedot { margin-top: 1.5em; padding-top: 0.8em; border-top: 1px solid var(--border); font-size: 0.88rem; color: var(--text-muted); }
/* Tarinasivun yhteyshenkilö: kuva ja yhteystiedot sivupalkin yläosassa. */
.henkilo-kortti { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--brand); border-radius: 5px; overflow: hidden; margin-bottom: 1.25rem; }
.henkilo-kortti img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.henkilo-tiedot { padding: 1.1rem 1.25rem 1.25rem; }
.henkilo-tiedot h2 { font-size: 1.1rem; margin-bottom: 0.5em; }
.henkilo-tiedot p { margin: 0 0 0.7em; font-size: 0.92rem; line-height: 1.55; }
.henkilo-tiedot p:last-child { margin-bottom: 0; }
.henkilo-tiedot a { color: var(--brand); }
@media (max-width: 820px) { .henkilo-kortti { max-width: 22rem; } }
.sidebar-nav { list-style: none; margin: 0; padding: 0; }
.sidebar-nav li + li { margin-top: 0.4rem; }
.sidebar-nav a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  padding: 0.75em 1em;
  border-radius: 4px;
  font-size: 0.92rem;
}
.sidebar-nav a:hover, .sidebar-nav a.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }

.purple-box { background: var(--brand); color: #fff; padding: 2em; border-radius: 5px; margin-bottom: 1.5rem; }
.purple-box h2, .purple-box h3 { color: #fff; margin-top: 0; }

table.proet-table, .page-content .wp-block-table table { width: 100%; border-collapse: collapse; margin: 1em 0; }
table.proet-table th, table.proet-table td,
.page-content .wp-block-table th, .page-content .wp-block-table td { border: 1px solid var(--border); padding: 0.6em 0.8em; text-align: left; font-size: 0.92rem; vertical-align: top; }
table.proet-table th, .page-content .wp-block-table th { background: var(--surface-sunk); }
.page-content .wp-block-table { margin: 0; overflow-x: auto; }

/* Yksipalstainen, luettavan levyinen sisältö (tekstisivut, blogi, Etiikkakortti). */
.lukupalsta { max-width: 820px; margin-left: auto; margin-right: auto; }
.lukupalsta--vali { margin-top: 2rem; }
.page-content.lukupalsta h2 { margin-top: 1.6em; }
.page-content.lukupalsta h2:first-child { margin-top: 0; }

/* Footer */
/* Footerin sävy tulee --footer-bg:sta: vaihda takaisin #241a20, jos haluat
   entisen luumunvärisen alatunnisteen. */
footer.site-footer { background: var(--footer-bg); color: #e3ece1; margin-top: 3rem; border-top: 4px solid var(--lime); }
footer.site-footer a { color: var(--lime); text-decoration: none; }
footer.site-footer a:hover { text-decoration: underline; }
/* Vain ylä- ja alapadding: sivureunat tulevat .wrap-luokasta (pelkkä
   padding-lyhenne nollaisi ne, jolloin teksti osuu puhelimessa reunaan). */
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; padding-top: 3rem; padding-bottom: 2rem; }
.footer-grid h3 { color: #fff; font-size: 1.05rem; margin-bottom: 0.8em; }
.footer-grid p, .footer-grid address { margin: 0 0 0.6em; font-size: 0.88rem; color: #bdd0bb; font-style: normal; }
.footer-form label { display: block; font-size: 0.8rem; margin-bottom: 0.3em; color: #bdd0bb; }
.footer-form input {
  width: 100%; padding: 0.5em 0.7em; margin-bottom: 0.7em;
  border: 1px solid #315139; border-radius: 3px;
  background: #1f3e27; color: #fff; font-family: inherit; font-size: 0.88rem;
}
.footer-form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.footer-form .btn { margin-top: 0.4rem; }

/* Lomakkeen lähetyksen jälkeinen viesti (uutiskirje ja yhteydenotto). */
.lomake-viesti {
  padding: 0.7em 0.9em; border-radius: 3px; font-size: 0.9rem;
  background: var(--forest-tint); border-left: 4px solid var(--forest); color: var(--text);
}
.lomake-viesti--virhe { background: #fdf0ef; border-left-color: #b3261e; }
/* Footerin kappaletyyli vaalentaisi tekstin vaalealla taustalla lukukelvottomaksi. */
.footer-grid p.lomake-viesti { color: var(--text); }
.footer-bottom {
  border-top: 1px solid #2d4b34; padding-top: 1.1rem; padding-bottom: 1.6rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.8rem; color: #9db59c;
}

/* Kapealla näytöllä alatunnisteen sarakkeet menevät allekkain, jolloin
   2rem väli niiden välissä on liikaa. */
@media (max-width: 700px) {
  .footer-grid { gap: 1.5rem; padding-top: 2.25rem; padding-bottom: 1.5rem; }
}

/* Kurssikortin otsikkolinkki ja lisätietolinkki */
.card-linkki { text-decoration: none; color: inherit; }
.card-linkki:hover { color: var(--brand); text-decoration: underline; }
.card-lisatiedot {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  align-self: center;
}
.card-lisatiedot:hover { text-decoration: underline; }

/* Yksittäisen kurssin sivu */
.kurssin-osat { padding-left: 1.2em; }
.kurssin-osat li { margin-bottom: 0.35em; }
.osto-laatikko {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand);
  border-radius: 5px;
  padding: 1.25rem;
}
.osto-hinta {
  font-family: 'Roboto Slab', serif;
  font-size: 1.5rem;
  color: var(--brand);
  margin: 0 0 0.9rem;
}
.osto-hinta .woocommerce-price-suffix {
  display: block;
  font-family: 'Karla', sans-serif;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
}
.osto-laatikko .card-actions { margin-bottom: 1rem; }
.osto-tiedot { list-style: none; margin: 0; padding: 0; }
.osto-tiedot li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.5em;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.osto-tiedot li::before { content: "✔"; position: absolute; left: 0; color: var(--forest); }
.osto-eimyynnissa { font-size: 0.9rem; color: var(--text-muted); }

/* Vinkki koodin lunastuksesta */
.koodi-vinkki {
  background: var(--gold-tint);
  border-left: 4px solid var(--lime);
  border-radius: 4px;
  padding: 0.9rem 1.15rem;
  margin-bottom: 2rem;
}
.koodi-vinkki p { margin: 0; font-size: 0.92rem; }
.koodi-vinkki a { color: var(--brand); font-weight: 700; }

/* Tyhjän ostoskorin viesti */
.kori-tyhja {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--forest);
  border-radius: 5px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 34rem;
}
.kori-tyhja h2 { font-size: 1.4rem; margin-top: 0; }
.kori-tyhja p { color: var(--text-muted); }
.kori-tyhja .btn { margin-top: 0.5rem; }

/* Paluulinkki korisivulla ja kassalla */
.kori-paluu { margin: 0 0 1.5rem; font-size: 0.9rem; font-weight: 700; }
.kori-paluu a { color: var(--brand); text-decoration: none; }
.kori-paluu a:hover { text-decoration: underline; }
/* Kun JavaScript on siirtänyt linkin tilausyhteenvedon sisään. */
.kori-paluu--yhteenvedossa {
  margin: 0.25rem 0 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}

/* Ostoskorin yhteenveto verkkokoulutussivulla */
.kori-yhteenveto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--forest-tint);
  border-left: 4px solid var(--forest);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}
.kori-yhteenveto-teksti { margin: 0; font-size: 0.95rem; }
.kori-yhteenveto-teksti strong { color: var(--forest); }
.kori-yhteenveto-napit { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.kori-yhteenveto-napit .btn { padding: 0.55em 1.1em; font-size: 0.85rem; }
.card-korissa {
  align-self: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--forest);
}
.card .card-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }

/* Paikkakoodin lunastuslomake */
.proet-lunastus { max-width: 30rem; }
.proet-lunastus-lomake p { margin: 0 0 1.1rem; }
.proet-lunastus-lomake label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.35em; }
.proet-lunastus-lomake input {
  width: 100%; padding: 0.65em 0.85em;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 1rem;
}
.proet-lunastus-lomake input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.proet-lunastus-lomake small { display: block; color: var(--text-muted); font-size: 0.8rem; margin-top: 0.35em; }
/* Koodikenttä tasavälisenä, jotta merkit erottuvat toisistaan. */
.proet-lunastus-lomake #proet-koodi {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.proet-lunastus-viesti { padding: 1rem 1.15rem; border-radius: 4px; margin-bottom: 1.5rem; }
.proet-lunastus-viesti--ok { background: var(--forest-tint); border-left: 4px solid var(--forest); }
.proet-lunastus-viesti--virhe { background: #fdf0ef; border-left: 4px solid #b3261e; }

/* Täysleveä metsäkaista osioiden väliin. */
.metsa-kaista {
  height: clamp(130px, 17vw, 230px);
  background-position: center 60%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.metsa-kaista::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--lime);
}
.metsa-kaista--kesa  { background-image: url('assets/images/metsa-kesa.jpg'); }
/* Etusivun kaistoissa omat kuvat, rajattu valmiiksi kaistan muotoon
   täysikokoisista alkuperäisistä, jotta ne pysyvät terävinä. Edellinen
   pari (kaista-syksy.jpg ja kaista-talvi.jpg) on tallessa samassa kansiossa. */
.metsa-kaista--syksy {
  background-image: url('assets/images/kaista-aita.jpg');
  background-image: image-set(url('assets/images/kaista-aita.webp') type('image/webp'), url('assets/images/kaista-aita.jpg') type('image/jpeg'));
  background-position: center 50%;
}
.metsa-kaista--talvi {
  background-image: url('assets/images/kaista-talvi.jpg');
  background-image: image-set(url('assets/images/kaista-talvi.webp') type('image/webp'), url('assets/images/kaista-talvi.jpg') type('image/jpeg'));
  background-position: center 50%;
}

/* Blogikirjoituksen loppu: muut kirjoitukset ja etäkoulutukset. */
.lue-myos { margin-top: 2rem; }
.lue-myos h2 { font-size: 1.3rem; margin-bottom: 0.6em; }
.lue-myos ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.lue-myos li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6em 0; border-bottom: 1px solid var(--border); }
.lue-myos li a { color: var(--brand); text-decoration: none; font-weight: 700; }
.lue-myos li a:hover { text-decoration: underline; }
.lue-myos li span { flex: none; font-size: 0.82rem; color: var(--text-muted); }
.lue-myos-linkit { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-weight: 700; }
.lue-myos-linkit a { color: var(--brand); text-decoration: none; }

/* Kirjan kansi kortissa kokonaisena vaalealla pohjalla, kirjan sivulla
   sivupalkin yläosassa. */
.card .card-kuva.card-kuva--kansi { object-fit: contain; background: var(--surface-sunk); padding: 0.75rem 0; box-sizing: border-box; }
.tuote-kansi { display: block; width: 100%; max-width: 10rem; height: auto; margin: 0 auto 1.25rem; box-shadow: var(--shadow); border-radius: 2px; }

/* <picture> ei saa muuttaa asettelua: kuva käyttäytyy kuin suora lapsi. */
.card picture, .yke-nosto-kuva picture, .henkilo-kortti picture { display: contents; }

/* Kun sivu päättyy kuvakaistaan, kaista liittyy suoraan alatunnisteeseen:
   väliin ei jää tyhjää valkoista aluetta. Kaistan oma vihreä alareuna
   korvaa alatunnisteen yläreunan. */
main:has(> .metsa-kaista:last-child) { padding-bottom: 0; }
main:has(> .metsa-kaista:last-child) + footer.site-footer { margin-top: 0; border-top: 0; }

/* Tarinasivun lisäosiot (esim. tutkimus ja kehittäminen). */
.tarina-osio { margin-top: 1.5rem; }

/* Live-koulutuskortin lisätiedot. */
.card .card-teema { font-size: 0.8rem; margin-top: 0.3em; }

/* Ilmoittautumislomake */
.ilmoittautuminen { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.lomake p { margin: 0 0 1rem; }
.lomake label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.35em; }
.lomake input:not([type="hidden"]), .lomake textarea {
  width: 100%; padding: 0.6em 0.8em;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 1rem;
}
.lomake input:focus-visible, .lomake textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.lomake small { display: block; color: var(--text-muted); font-size: 0.8rem; margin-top: 0.35em; }
.lomake input[type="number"] { max-width: 8rem; }
.lomake-valinnat { border: 1px solid var(--border); border-radius: 3px; padding: 0.8rem 1rem; margin: 0 0 1rem; }
.lomake-valinnat legend { font-weight: 700; font-size: 0.9rem; padding: 0 0.3em; }
.lomake .lomake-valinnat label { display: flex; gap: 0.5em; align-items: baseline; font-weight: 400; margin: 0.25em 0; }
.lomake .lomake-valinnat input { width: auto; }
.lomake .lomake-valinnat--rivi label { display: inline-flex; margin-right: 1.4rem; }
.lomake-ohje { font-size: 0.85rem; color: var(--text-muted); }
.lomake-vapaaehtoinen { font-weight: 400; font-size: 0.85em; color: var(--text-muted); }
.lomake-osio { border: 1px solid var(--border); border-radius: 4px; padding: 0.9rem 1.1rem 0.1rem; margin: 0 0 1.25rem; min-width: 0; }
.lomake-osio > legend { font-weight: 700; color: var(--brand); padding: 0 0.3em; }
.lomake-tapaotsikko { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
/* Skriptin kanssa näkyy vain valitun laskutustavan ryhmä, joten otsikko on turha. */
.js-lomakkeet .lomake-tapaotsikko { display: none; }
.lomake-laskutustapa[hidden] { display: none; }

/* Arjen etiikan kurssit: kortti valitaan klikkaamalla, tilaus korttien alla. */
.lomake label.card--valittava { display: flex; position: relative; font-weight: inherit; font-size: inherit; margin: 0; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.lomake .card-valinta { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.card--valittava:hover { border-color: var(--brand); }
.card--valittava:has(.card-valinta:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand); }
.card--valittava:has(.card-valinta:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.card-valittu {
  display: none; position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  background: var(--brand); color: #fff; font-size: 0.75rem; font-weight: 700;
  padding: 0.3em 0.75em; border-radius: 999px;
}
.card--valittava:has(.card-valinta:checked) .card-valittu { display: block; }
.arki-valinta-palkki { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 1.25rem; }
.arki-valinta-maara { font-weight: 700; color: var(--forest); }
.arki-valinta-maara.on-virhe { color: #b3261e; }
.arki-valinta-tiedot { max-width: 640px; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-h, 4.6rem) + 1rem); }
.arki-valinta-tiedot[hidden] { display: none; }
@media (max-width: 900px) { .arki-valinta-tiedot { scroll-margin-top: calc(var(--header-h, 4.6rem) + 4.5rem); } }

/* Kortin kuva reunasta reunaan kortin yläosassa. */
.card .card-kuva {
  display: block;
  width: calc(100% + 3rem);
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: -1.4rem -1.5rem 1rem;
  border-radius: 5px 5px 0 0;
}
/* auto-fill eikä auto-fit: yksittäinen kortti ei veny koko rivin levyiseksi. */
/* Kurssikaupan kortit noin 10 % muita kortteja pienempiä, jotta riville
   mahtuu enemmän. Kuvan negatiiviset reunat seuraavat pienempää täytettä. */
.card-row--kauppa { grid-template-columns: repeat(auto-fill, minmax(210px, 250px)); gap: 1.1rem; }
@media (max-width: 560px) { .card-row--kauppa { grid-template-columns: 1fr; } }
.card-row--kauppa .card { padding: 1.25rem 1.35rem; }
.card-row--kauppa .card .card-kuva { width: calc(100% + 2.7rem); margin: -1.25rem -1.35rem 0.9rem; }
.card-row--kauppa .card h3 { font-size: 0.98rem; }
.card-row--kauppa .card p, .card-row--kauppa .card .parts { font-size: 0.84rem; }
.card-row--kauppa .card .card-actions { padding-top: 1em; }
/* Kortti on flex-sarake, jolloin merkki venyisi muuten koko leveydelle. */
.card .tag { align-self: flex-start; }
.card .parts li { margin-bottom: 0.15em; }

/* Muokkaajalle näkyvä täydennysmuistutus. */
.taydenna {
  font-size: 0.8rem; font-weight: 700; color: var(--brand);
  background: var(--brand-tint); border: 1px dashed var(--brand);
  border-radius: 3px; padding: 0.35em 0.6em; margin: 0.5em 0;
}

/* Kurssikauppa */
.kauppa-johdanto { margin-bottom: 1.5rem; }
/* Valintapuu: leveällä näytöllä vasen palsta, joka pysyy näkyvissä
   vieritettäessä; kapealla näytöllä otsakkeen alle kiinnittyvä
   "Siirry osioon" -alasvetovalikko. --header-h tulee main.js:stä. */
/* Kurssikauppa käyttää koko näytön leveyttä: puu näytön vasemmassa
   reunassa ja sisältö loppuun tilaan (enintään 1400 px, keskitettynä). */
.kauppa-wrap { max-width: none; padding: 0 clamp(1rem, 2vw, 2rem); }
/* Puu on tiivis, jotta se mahtuu kokonaan läppärin näytölle (noin 700 px
   korkea selainikkuna); matalammassa ikkunassa se vierii itsenäisesti. */
.kauppa-layout { display: grid; grid-template-columns: clamp(15rem, 17vw, 18rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.kauppa-sisalto { width: 100%; max-width: 1400px; justify-self: center; }
.kauppa-puu {
  position: sticky; top: calc(var(--header-h, 4.6rem) + 0.75rem);
  max-height: calc(100vh - var(--header-h, 4.6rem) - 1.5rem); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
  padding: 0.6rem 0.5rem;
}
.kauppa-puu summary { display: none; }
.kauppa-puu ul { list-style: none; margin: 0; padding: 0; }
.kauppa-puu a {
  display: block; padding: 0.3em 0.55em; border-radius: 3px;
  font-size: 0.88rem; font-weight: 700; line-height: 1.25; text-decoration: none; color: var(--text);
}
.kauppa-puu ul ul { margin: 0.1rem 0 0.3rem 0.55rem; padding-left: 0.4rem; border-left: 2px solid var(--border); }
.kauppa-puu ul ul a { padding-top: 0.22em; padding-bottom: 0.22em; font-size: 0.8rem; font-weight: 400; color: var(--text-muted); }
.kauppa-puu a:hover { background: var(--brand-tint); color: var(--brand); }
.kauppa-puu a.is-active { background: var(--brand); color: #fff; }
.kauppa-puu a.is-active .kauppa-puu-maara { color: inherit; }
.kauppa-puu-maara { font-size: 0.75rem; color: var(--neutral); }
.kauppa-sisalto [id] { scroll-margin-top: calc(var(--header-h, 4.6rem) + 1rem); }
.kauppa-sisalto > section:last-of-type { padding-bottom: 1rem; }

@media (max-width: 900px) {
  .kauppa-wrap { padding: 0 clamp(1.5rem, 4vw, 2.5rem); }
  .kauppa-layout { display: block; }
  .kauppa-puu {
    top: var(--header-h, 4.6rem); z-index: 30; max-height: none; overflow: visible;
    margin: 0 0 1.25rem; padding: 0; box-shadow: var(--shadow);
  }
  .kauppa-puu summary {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1rem; cursor: pointer; font-weight: 700; color: var(--brand); list-style: none;
  }
  .kauppa-puu summary::-webkit-details-marker { display: none; }
  .kauppa-puu summary::after { content: "▾"; transition: transform 0.15s ease; }
  .kauppa-puu details[open] summary::after { transform: rotate(180deg); }
  .kauppa-puu nav { max-height: 60vh; overflow-y: auto; padding: 0 0.6rem 0.8rem; border-top: 1px solid var(--border); }
  .kauppa-puu nav > ul { padding-top: 0.5rem; }
  .kauppa-sisalto [id] { scroll-margin-top: calc(var(--header-h, 4.6rem) + 4.5rem); }
}
.kauppa-hinnat { font-weight: 700; color: var(--forest); max-width: 75ch; }
.kauppa-ohjeet { margin: 0 0 1rem; max-width: 75ch; }
.kauppa-ohjeet summary { cursor: pointer; font-weight: 700; color: var(--brand); }

/* Yhteiskehittävä etiikka: etusivun nosto ja oma sivu */
/* Hillitty nosto: kapea kuva reunassa, ei varjoa. */
.yke-nosto {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand);
  border-radius: 5px; overflow: hidden;
}
/* Kuva täyttää palstan absoluuttisesti, jolloin tekstin korkeus ratkaisee
   noston korkeuden eikä pystykuva venytä sitä. */
.yke-nosto-kuva { position: relative; min-height: 10rem; }
.yke-nosto-kuva img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yke-nosto-teksti { padding: 1.25rem 1.6rem; align-self: center; }
.yke-nosto-teksti h2 { font-size: 1.35rem; margin-bottom: 0.4em; }
.yke-nosto-teksti p { max-width: 75ch; font-size: 0.95rem; margin: 0 0 0.6em; color: var(--text-muted); }
.yke-nosto-teksti .link-more { font-size: 0.9rem; font-weight: 700; color: var(--brand); text-decoration: none; }
.yke-nosto-teksti .link-more:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .yke-nosto { grid-template-columns: 1fr; }
  .yke-nosto-kuva { min-height: 0; aspect-ratio: 3 / 1; }
}

.yke-sisalto .yke-vaihe {
  background: var(--forest-tint); border-left: 4px solid var(--forest);
  border-radius: 4px; padding: 1.25rem 1.5rem; margin: 1.5rem 0;
}
.yke-sisalto .yke-vaihe h3 { margin-top: 0; }
.yke-sisalto .yke-vaihe > :last-child, .yke-sisalto .yke-vaihe .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.yke-sivupalkki { display: flex; flex-direction: column; gap: 1.25rem; }
.yke-laatikko { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--brand); border-radius: 5px; padding: 1.25rem 1.4rem; }
.yke-laatikko h2 { font-size: 1.1rem; margin-bottom: 0.6em; }
.yke-laatikko p { font-size: 0.92rem; }
.yke-laatikko > :last-child { margin-bottom: 0; }
.yke-laatikko--yhteys { border-top-color: var(--lime); }
.yke-koulutukset { list-style: none; margin: 0; padding: 0; }
.yke-koulutukset li + li { border-top: 1px solid var(--border); }
.yke-koulutukset a { display: block; padding: 0.6em 0; text-decoration: none; color: var(--text); font-size: 0.92rem; line-height: 1.35; }
.yke-koulutukset a:hover { color: var(--brand); }
.yke-pvm { display: block; font-size: 0.78rem; font-weight: 700; color: var(--brand); margin-bottom: 0.15em; }
.yke-vinkki { margin-bottom: 1.5rem; }

/* Koulutuskalenteri: kuukauden ruudukko ja tapahtumalista rinnakkain. */
.kalenteri-johdanto { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 0.5rem; }
.kalenteri-johdanto p { max-width: 70ch; margin: 0; color: var(--text-muted); }
.kalenteri-kuukausi h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.kalenteri-kuukausi-sisus { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.kalenteri-ruudukko {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
  background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--lime);
  border-radius: 5px; padding: 0.75rem;
}
.kalenteri-ruudukko .kalenteri-vkpv { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; text-align: center; color: var(--text-muted); padding-bottom: 0.3rem; }
.kalenteri-paiva { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.82rem; color: var(--text); text-decoration: none; }
.kalenteri-paiva.on-tapahtuma { background: var(--brand); color: #fff; font-weight: 700; }
.kalenteri-paiva.on-tapahtuma:hover { background: var(--brand-dark); }
.kalenteri-paiva.on-tanaan { box-shadow: inset 0 0 0 2px var(--lime); }
.kalenteri-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.kalenteri-tapahtuma { scroll-margin-top: calc(var(--header-h, 4.6rem) + 1rem); }
.kalenteri-rivi {
  display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto auto; gap: 1rem; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand);
  border-radius: 5px; padding: 0.85rem 1.1rem; color: var(--text); text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kalenteri-rivi:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.kalenteri-tapahtuma:target .kalenteri-rivi { box-shadow: 0 0 0 3px var(--lime); }
.kalenteri-pvm { display: flex; flex-direction: column; align-items: center; line-height: 1; color: var(--brand); }
.kalenteri-pvm-paiva { font-family: 'Roboto Slab', serif; font-size: 1.9rem; font-weight: 700; }
.kalenteri-pvm-vkpv { margin-top: 0.3rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.kalenteri-tiedot { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.kalenteri-teema { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--forest); }
.kalenteri-otsikko { font-family: 'Roboto Slab', serif; font-weight: 400; font-size: 1.05rem; line-height: 1.3; color: var(--brand); }
.kalenteri-aika { font-size: 0.85rem; color: var(--text-muted); }
.kalenteri-merkit { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.kalenteri-nuoli { font-weight: 700; color: var(--brand); }
@media (max-width: 760px) {
  .kalenteri-kuukausi-sisus { grid-template-columns: 1fr; }
  .kalenteri-ruudukko { max-width: 20rem; }
}
@media (max-width: 560px) {
  .kalenteri-rivi { grid-template-columns: 3rem minmax(0, 1fr); gap: 0.4rem 0.9rem; }
  .kalenteri-merkit { grid-column: 2; }
  .kalenteri-nuoli { display: none; }
}

/* Kurssikaupan kalenterikyltti ja valintapuun kalenterilinkki. */
.kalenteri-kyltti {
  display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.5rem; padding: 1rem 1.4rem;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dark) 100%);
  border-radius: 6px; color: #fff; text-decoration: none; box-shadow: var(--shadow);
}
.kalenteri-kyltti-kuvake { flex: none; width: 3.6rem; min-height: 3.6rem; background: #fff; border-radius: 5px; overflow: hidden; text-align: center; }
.kalenteri-kyltti-kk { display: block; padding: 0.2rem 0; background: var(--lime); color: var(--lime-text); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.kalenteri-kyltti-pv { display: block; padding: 0.15rem 0 0.3rem; font-family: 'Roboto Slab', serif; font-size: 1.6rem; font-weight: 700; color: var(--forest-dark); }
.kalenteri-kyltti-teksti { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.kalenteri-kyltti-teksti strong { font-family: 'Roboto Slab', serif; font-size: 1.2rem; font-weight: 400; }
.kalenteri-kyltti-teksti span { font-size: 0.9rem; color: #d7e4d5; }
.kalenteri-kyltti-nuoli { flex: none; padding: 0.55em 1em; border-radius: 3px; background: var(--lime); color: var(--lime-text); font-size: 0.85rem; font-weight: 700; }
.kalenteri-kyltti:hover .kalenteri-kyltti-nuoli { background: #fff; }
@media (max-width: 620px) {
  .kalenteri-kyltti { flex-wrap: wrap; }
  .kalenteri-kyltti-nuoli { width: 100%; text-align: center; }
}
/* Verkkokaupan Etiikkakoulu-kyltti: toistonappi päivämäärän paikalla. */
.kalenteri-kyltti-kuvake--video { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--brand); }
.kalenteri-kyltti--alas { margin: 2rem 0 0; }
.kauppa-tulossa { padding: 1rem 1.25rem; background: var(--surface); border: 1px dashed var(--border); border-radius: 5px; color: var(--text-muted); max-width: 60ch; }
/* Kalenterista tai etusivulta tullessa kohdekoulutus korostuu. */
.card--live:target, .card--kauppa:target { box-shadow: 0 0 0 3px var(--brand); }

/* Etäkoulutukset: näkymän valinta kalenterin ja teemojen välillä. */
.nakyma-valinta { display: inline-flex; margin: 1.5rem 0 0.5rem; border: 1px solid var(--brand); border-radius: 999px; overflow: hidden; }
.nakyma-valinta[hidden] { display: none; }
.nakyma-nappi { border: 0; background: var(--surface); color: var(--brand); font: inherit; font-size: 0.9rem; font-weight: 700; padding: 0.5em 1.3em; cursor: pointer; }
.nakyma-nappi + .nakyma-nappi { border-left: 1px solid var(--brand); }
.nakyma-nappi[aria-pressed="true"] { background: var(--brand); color: #fff; }
.nakyma-nappi:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.nakyma[hidden] { display: none; }
.nakyma [id] { scroll-margin-top: calc(var(--header-h, 4.6rem) + 1rem); }
.nakyma .theme-heading:first-child { margin-top: 1.5rem; }

/* Etäkoulutuksen hinnat osallistujamäärän mukaan. */
.koulutus-hinnat { list-style: none; margin: 0.8em 0 0; padding: 0; font-size: 0.82rem; }
/* Otsikko ja hinta allekkain, koska "2 osallistujaa samasta työyhteisöstä"
   ei mahdu kapeaan korttiin hinnan viereen. */
.koulutus-hinnat li { display: flex; flex-direction: column; padding: 0.3em 0; border-bottom: 1px dotted var(--border); }
.koulutus-hinnat li:last-child { border-bottom: 0; }
.koulutus-hinnat span { color: var(--text-muted); }
.koulutus-hinnat strong { color: var(--brand); }
.koulutus-hinnat--iso { font-size: 0.95rem; margin: 0 0 0.6rem; }
.koulutus-hinnat-tieto { margin: 0.4em 0 0; font-size: 0.75rem; line-height: 1.4; color: var(--text-muted); }
.osto-laatikko .koulutus-hinnat-tieto { font-size: 0.82rem; margin-bottom: 1rem; }
.lomake-hinnat { margin: 0 0 1rem; padding: 0.75rem 1rem; background: var(--brand-tint); border-radius: 4px; }
.lomake-hinnat .koulutus-hinnat { margin: 0.3em 0 0; font-size: 0.9rem; }
.lomake-hinnat .lomake-tapaotsikko { display: block; margin: 0; }

/* Etusivun uutuuskortti on kokonaan linkki kurssikaupan kortin kohdalle. */
.card--linkki { color: var(--text); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.card--linkki:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.card--linkki h3 { color: var(--brand); }
.card--linkki .card-lisatiedot { margin-top: auto; padding-top: 0.8em; }

/* Hyvän hoidon akatemia */
.akatemia-tilaisuus .akatemia-vuosi { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; font-weight: 700; color: var(--lime); margin: 0 0 0.4rem; }
.akatemia-tilaisuus .akatemia-alaotsikko { font-size: 1.05rem; margin-top: -0.3em; }
.akatemia-napit { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.25rem 0 0; }
.akatemia-historia { list-style: none; padding: 0; }
.akatemia-historia li { padding: 0.45em 0; border-bottom: 1px solid var(--border); }
.akatemia-historia strong { display: inline-block; min-width: 3.5rem; color: var(--brand); }
.akatemia-kysely { margin-top: 2rem; padding: 1.25rem 1.5rem; background: var(--forest-tint); border-radius: 5px; }

@media (prefers-reduced-motion: reduce) {
  .btn, html { transition: none; scroll-behavior: auto; }
}