/* ==========================================================================
   Optopro Learning — yhteinen landing-sivu (/my-learning/)
   Shared Landing Page v1.0 — PO-päätökset P1–P3, 18.8.2026
   --------------------------------------------------------------------------
   Ladataan VAIN /my-learning/-näkymään access.css:n päälle (Auth\render_page,
   head_extra). Sama tuoteperhe kuin hyväksytty Course Landing Page v1.0 ja
   CH07 / Learning Workspace: tumma navy/petrol-hero, vaaleat kaistat,
   pyöreä kieli harkitusti, ei korttiviidakkoa, ei varjoylikuormaa.

   v1.5 (PO 19.8.2026): Optopro Learning -pill pois herosta; oppimismalli
   heroon neljana disclosure-triggerina (paneeli overlay, ei layout-hyppya);
   erillinen Nain opit -kaista poistettu.

   v1.4 (PO 19.8.2026): ydinhyodyt disclosureen, metriikat yhdelle riville,
   disclosure + CTA samalle action-riville, matalan desktopin (max-height 800)
   saannot — "Nain opit" nakyy ensimmaisessa nakymassa 15" lapparilla.

   v1.3 (PO 19.8.2026): sisaltoalue 1280 px; desktopilla paaalue = koulutustarjonta
   (paapalsta) + Oma oppiminen (<aside>, ~28 %); Hero -> Valitse koulutuksesi -vali lyhyt.

   HERO ON MATALA TARKOITUKSELLA (PO v1.1/v1.2, 19.8.2026: ~280–320 px;
   heron CTA poistettu v1.2:ssa — koulutustarjonta on sivun ainoa toimintokohta).
   Otsikko, ingressi, CTA ja kuva mahtuvat ~320 px:iin, jolloin "Valitse
   koulutuksesi" JA molempien koulutusten nimet näkyvät ensimmäisessä
   näkymässä. Tiivistys tehtiin paddingista, väleistä ja kuvan korkeudesta —
   ei pelkästään kirjasimesta.

   KOULUTUSTARJONTA EI OLE TUOTEKORTTEJA (PO v1.1): ei laatikkoa, ei taustaa,
   ei varjoa — kaksi avointa palstaa, joita erottaa ohut pystyviiva, ja
   hierarkia tehdään typografialla.
   ========================================================================== */

:root {
	--sl-navy: #071b3b;
	--sl-navy2: #0b2b5d;
	--sl-hero: #07172f;
	--sl-blue: #1769e8;
	--sl-ink: #10213f;
	--sl-text: #3b4b68;
	--sl-muted: #61708a;
	--sl-line: #dfe7f3;
	--sl-soft: #f4f8fd;
	--sl-teal-ink: #1b8480;
	--sl-violet: #8257e6;
	--sl-green-ink: #2d8548;
	--sl-pill: 999px;
	--sl-radius: 18px;
	--sl-focus: 3px solid rgba(23, 105, 232, .45);
}

/* Sivukehys: landing on täysleveä kaistasivu, ei 46rem-kortti. */
.ola-body--landing { background: #fff; color: var(--sl-ink); }
.ola-body--landing .ola-main { max-width: none; margin: 0; padding: 0; }
.ola-body--landing .ola-head { position: sticky; top: 0; z-index: 20; }
.ola-body--landing .ola-footer { border-top: 1px solid var(--sl-line); margin-top: 0; padding-top: 1.5rem; max-width: none; }
.ola-body--landing .ola-footer p { width: min(1280px, calc(100% - 40px)); margin-inline: auto; }
.ola-body--landing h1, .ola-body--landing h2, .ola-body--landing h3 { margin: 0; }

/* v1.3: sisaltoalue 1180 -> 1280 px (PO: paasisalto liian kapea 1440:lla). */
.sl-shell { width: min(1280px, calc(100% - 40px)); margin-inline: auto; }
.sl-band { padding: clamp(44px, 5vw, 64px) 0; }
.sl-band--soft { background: var(--sl-soft); }
.sl-title {
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
	letter-spacing: -.03em;
	font-weight: 800;
	color: var(--sl-navy);
}
.sl-lead { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.5; color: var(--sl-text); margin: 10px 0 0; max-width: 44rem; }
.sl-head { margin-bottom: 26px; }
.sl-muted { color: var(--sl-muted); font-size: .95rem; margin: 6px 0 0; }

/* Painikkeet — sama muoto kuin Learning Workspace / Course Landing. */
.sl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--sl-pill);
	font: inherit;
	font-size: 16.5px;
	font-weight: 700;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease;
	color: #fff;
	background: linear-gradient(135deg, var(--sl-navy2), var(--sl-navy));
}
.sl-btn:hover { transform: translateY(-1px); color: #fff; }
.sl-btn--primary { background: linear-gradient(135deg, var(--sl-blue), #0c48b3); box-shadow: 0 10px 28px rgba(23, 105, 232, .26); }
.sl-btn--small { padding: 10px 18px; font-size: 15px; }
.sl-btn:focus-visible { outline: var(--sl-focus); outline-offset: 4px; }

/* ---------- 1. HERO (matala) ---------- */
.sl-hero {
	position: relative;
	/* v1.5: pystysuunta EI leikkaa — oppimismallin paneeli avautuu heron
	   alareunan yli overlay'na. Vaakasuunta leikataan (clip), jotta kuvan
	   negatiivinen marginaali ei tuota vaakavieritystä. z-index nostaa
	   paneelin seuraavan kaistan yläpuolelle. */
	overflow-x: clip;
	overflow-y: visible;
	z-index: 10;
	color: #fff;
	background-color: var(--sl-hero);
	background-image:
		radial-gradient(ellipse 60% 70% at 100% 100%, rgba(34, 166, 161, .16), transparent 70%),
		radial-gradient(ellipse 50% 60% at 0% 0%, rgba(23, 105, 232, .16), transparent 70%),
		linear-gradient(160deg, #061a36 0%, #07172f 55%, #082038 100%);
}
.sl-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	grid-template-rows: minmax(0, 1fr) auto;
	gap: 0 32px;
	min-height: 280px;
	align-items: stretch;
}
.sl-hero__copy { align-self: center; padding: 26px 0 18px; max-width: 680px; }
.sl-hero__title {
	font-size: clamp(30px, 2.9vw, 40px);
	line-height: 1.06;
	letter-spacing: -.03em;
	font-weight: 800;
	margin: 0;
	max-width: 26ch;
	color: #fff;
}
.sl-hero__lede { font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.5; color: #d6e4f8; max-width: 40rem; margin: 10px 0 0; }

/* Kuva sulautuu heroon: ei kehystä, ei korttia; reunat häivytetään maskilla
   ja musta tausta päästetään heron pohjan läpi (screen). TEMPORARY FALLBACK
   -asset; periaate pysyy samana lopullisella assetilla. */
.sl-hero__art {
	position: relative;
	grid-row: 1 / -1;
	grid-column: 2;
	min-height: 280px;
	margin-right: calc((100vw - min(1280px, 100vw - 40px)) / -2);
	pointer-events: none;
}
/* v1.5 TRANSPARENT HERO EYE (PO 21.8.2026).
   Hero-assetti ei ole enaa suorakulmainen valokuva vaan irrallinen lapinakyva
   objekti (landing-hero-eye.png, RGBA). Siksi vanha valokuvakasittely purettiin:
   - mix-blend-mode: screen oli olemassa, jotta kuvan oma tumma tausta katoaisi
     heroon. Lapinakyvalla objektilla taustaa ei ole, ja screen olisi haitallinen:
     se sytyttaisi silman tummat rakenteet (pupilli) heron pohjavarin lapi.
   - maskit haivyttivat suorakulmion reunat heroon. Objektilla ei ole reunoja,
     joten maski vain syoisi bulbuksen yla- ja alakaaren.
   - object-fit: cover rajasi kuvaa; objektin kohdalla koko kohde on nakyttava.
   Malli on nyt: HERON TAUSTA = CSS, SILMA = lapinakyva objekti sen paalla.
   top/height 5 %/90 % antaa kohteelle hengitystilan heron ylä- ja alareunaan
   ilman etta heron korkeus muuttuu (prosentti skaalautuu myos matalaan
   mobiilikaistaan). */
.sl-hero__img {
	position: absolute;
	inset: 0;
	top: 5%;
	width: 100%;
	height: 90%;
	object-fit: contain;
	object-position: 50% 50%;
}

/* v1.5 hero crop micro-refinement (PO 21.8.2026).
   Lopullisessa hero-assetissa silman poikkileikkaus istuu kuvan oikeassa
   laidassa (subjekti ulottuu 0.53–0.99 kuvan leveydesta). Koska hero__art
   ulottuu bleedilla ruudun oikeaan reunaan, cover-skaalaus vei nakohermon
   4–6 px:n paahan nayton reunasta ja venytti kuvan korkeussuunnassa niin,
   etta bulbuksen yla- ja alakaari jaivat pystymaskin haivytysvyohykkeelle
   (alpha 0.20 @1366x768). Silma naytti katkaistulta.
   Desktopissa kuva sovitetaan nyt korkeuteen (contain): koko silma nakyy,
   se saa ilmaa oikealle eika osu maskin haivytykseen. Layout, hero-korkeus,
   maskit, blendaus ja object-position sailyvat ennallaan; <=1080px pitaa
   coverin, koska siella art-alue on matala kaista ja contain kutistaisi
   silman turhaan.
   Kuva ankkuroidaan oikeaan reunaan kiintealla 24 px:n marginaalilla, ei keskiteta:
   contain jattaa laatikkoon vapaata tilaa, joka kasvaa nayton leveyden mukana, ja
   keskitettyna silma irtosi reunasta (1920 px: 142 px tyhjaa oikealla, 2560 px: 302 px).
   Oikea reuna on hero-art-alueen bleed-reuna, joten ankkurointi sinne pitaa sommittelun
   samana joka leveydella. Vasempaan reunaan ei synny saumaa: lahdekuvan vasen laita on
   kaytannossa musta (max 5/255) ja mix-blend-mode: screen tekee siita nakymattoman
   (mitattu sauma <=2/255 leveyksilla 1440-2560). */
@media (min-width: 1081px) {
	.sl-hero__img { object-position: right 24px top 50%; }
	/* v1.5 hero height micro-refinement (PO 21.8.2026): +24 px pystyhengitystilaa
	   vain desktopissa. Perussaantoa (280 px) ei kosketa, jotta 861-1080 px:n
	   tablettinakyma pysyy ennallaan. Matala desktop saa oman arvonsa alempana. */
	.sl-hero__grid, .sl-hero__art { min-height: 304px; }
}

/* ---------- 1b. HERON OPPIMISMALLI (v1.5) ------------------------------
   Nelja INFORMATIIVISTA disclosure-triggeria heron alareunassa — ei CTA,
   ei navigaatio. Natiivi details/summary; paneeli on absoluuttinen overlay
   heti rivin alla, joten avaaminen ei tyonna "Valitse koulutuksesi" -osiota
   alas eika peita hero-otsikkoa. landing.js: hover + Esc + yksi kerrallaan. */
.sl-hero__model {
	grid-column: 1;
	grid-row: 2;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 0 22px;
	z-index: 5;
}
.sl-model { position: static; }
.sl-model__trigger {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	list-style: none;
	cursor: pointer;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--sl-pill);
	background: rgba(255, 255, 255, .07);
	color: #e6eefb;
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	transition: background .15s ease, border-color .15s ease;
}
.sl-model__trigger::-webkit-details-marker { display: none; }
.sl-model__trigger::marker { content: ""; }
.sl-model__trigger:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .5); color: #fff; }
.sl-model__trigger:focus-visible { outline: 3px solid rgba(255, 255, 255, .85); outline-offset: 3px; }
.sl-model[open] .sl-model__trigger { background: #fff; border-color: #fff; color: var(--sl-navy); }
.sl-model__num { font-size: 11px; letter-spacing: .1em; color: var(--sl-teal-ink); font-weight: 800; }
.sl-model[open] .sl-model__num { color: var(--sl-blue); }
.sl-model__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% - 12px);
	background: #fff;
	color: var(--sl-ink);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	padding: 14px 18px;
	box-shadow: 0 14px 34px rgba(7, 27, 59, .14);
	z-index: 30;
}
.sl-model__panel p { margin: 0; font-size: 15px; line-height: 1.5; }

/* ---------- 2. PAAALUE: koulutustarjonta + Oma oppiminen -aside (v1.3) ---------- */
/* Hero -> Valitse koulutuksesi: lyhyt hallittu siirtyma (ei suurta valkoista). */
.sl-main { padding-top: 36px; }
.sl-main__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 40px 56px;
	align-items: start;
}
.sl-main__primary { min-width: 0; }
.sl-main .sl-head { margin-bottom: 22px; }

/* Oma oppiminen -aside: hillitty, kevyt paneeli — ei dashboard-kortti. */
.sl-aside {
	background: var(--sl-soft);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	padding: 22px 24px 20px;
	margin-top: 6px;
}
.sl-aside .sl-progress__head { margin-bottom: 14px; }
.sl-aside .sl-title { font-size: 20px; letter-spacing: -.02em; }
.sl-aside .sl-muted { font-size: 13.5px; margin-top: 4px; }
.sl-aside .sl-progress-list { border-top: 1px solid var(--sl-line); }
.sl-aside .sl-progress-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 0; }
.sl-aside .sl-progress-row__title { font-size: 15.5px; }
.sl-aside .sl-progress-row__status { font-size: 13.5px; margin-top: 2px; }
.sl-aside .sl-progress-row__bar { max-width: none; height: 6px; margin-top: 8px; }
.sl-aside .sl-progress-row__action { justify-self: start; }
.sl-aside .sl-progress__note { font-size: 12.5px; margin-top: 12px; }
.sl-aside .sl-progress__foot { margin-top: 12px; font-size: 13.5px; }
.sl-aside .sl-notice { font-size: 14px; padding: 10px 12px; }
.sl-aside .sl-review { margin-top: 16px; padding: 16px 18px; background: #fff; }

/* ---------- 2a. VALITSE KOULUTUKSESI ---------- */
/* v1.1 (PO): koulutustarjonta, ei tuotekortit. Ei laatikkoa, taustaa eikä
   varjoa: kaksi avointa, tasavahvaa palstaa, joita erottaa ohut pystyviiva;
   yläreunassa yhteinen hiusviiva. Hierarkia typografialla. Ruudukko
   skaalautuu: 2 → 4 → 6+ koulutusta samalla säännöllä. */
.sl-course-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 0;
	border-top: 1px solid var(--sl-line);
	align-items: stretch;
}
.sl-course {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 30px 0 0;
}
.sl-course + .sl-course { padding-left: 30px; border-left: 1px solid var(--sl-line); }
.sl-course__audience {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sl-blue);
}
.sl-course--coming .sl-course__audience { color: var(--sl-teal-ink); }
.sl-course__title { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -.025em; font-weight: 800; color: var(--sl-navy); }
.sl-course__lede { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--sl-text); }
.sl-course__outcomes-lead { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--sl-muted); }
.sl-course__outcomes { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sl-course__outcomes-lead + .sl-course__outcomes { margin-top: -8px; }
.sl-course__outcomes li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.45; color: var(--sl-ink); }
.sl-course__outcomes li::before {
	content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%;
	background: var(--sl-green-ink);
}
/* v1.4: metriikat yhdella kompaktilla rivilla: "9 moduulia · 36 kliinista osiota · 149 ...". Data ennallaan. */
.sl-course__metrics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 13.5px; color: var(--sl-muted); }
.sl-course__metrics li { display: inline; }
.sl-course__metrics li { white-space: nowrap; }
.sl-course__metrics li + li::before { content: "\00B7"; margin: 0 6px; color: var(--sl-muted); }
.sl-course__metrics strong { font-size: 14.5px; font-weight: 800; color: var(--sl-navy); }
.sl-course__metrics span { font-size: 13.5px; }
/* v1.4: disclosure + CTA yhdella action-rivilla; avattuna disclosure vie koko leveyden ja CTA siirtyy alle. */
.sl-course__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 2px; }
.sl-course__actions .sl-course__foot { margin-top: 0; padding-bottom: 0; }
.sl-disclosure[open] { flex-basis: 100%; }
.sl-disclosure__heading { margin: 12px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--sl-muted); }
.sl-disclosure .sl-course__outcomes { margin: 0 0 4px; }
.sl-disclosure .sl-modules { margin-top: 4px; border-top: 0; padding-top: 0; }

/* Koulutuksen sisältö — käyttäjän avaama disclosure (v1.2). Natiivi
   <details>: avautuu vain painalluksesta, näppäimistöllä Enter/Space,
   tila luetaan ruudunlukijalle. Ei linkkejä — informatiivinen lista. */
.sl-disclosure { margin: 2px 0 0; }
.sl-disclosure__summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	list-style: none;
	font-size: 15px;
	font-weight: 700;
	color: var(--sl-navy2);
	padding: 4px 0;
}
.sl-disclosure__summary::-webkit-details-marker { display: none; }
.sl-disclosure__summary::marker { content: ""; }
.sl-disclosure__summary:hover { color: var(--sl-blue); }
.sl-disclosure__summary:focus-visible { outline: var(--sl-focus); outline-offset: 4px; border-radius: 4px; }
.sl-disclosure__close { display: none; }
.sl-disclosure[open] .sl-disclosure__open { display: none; }
.sl-disclosure[open] .sl-disclosure__close { display: inline; }
.sl-modules {
	list-style: none;
	margin: 10px 0 4px;
	padding: 12px 0 2px;
	border-top: 1px solid var(--sl-line);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 6px 24px;
}
.sl-modules li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; font-size: 14.5px; line-height: 1.4; color: var(--sl-ink); }
.sl-modules__id { font-weight: 800; color: var(--sl-navy); }
.sl-course__foot { margin-top: 6px; padding-bottom: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.sl-course__actions { padding-bottom: 22px; }
.sl-course .sl-btn--primary { padding: 12px 24px; font-size: 16px; }
.sl-course__valid { margin: 0; font-size: 13.5px; color: var(--sl-muted); }
.sl-course__resume { margin: 0; font-size: 14.5px; color: var(--sl-text); }
.sl-course__resume[hidden] { display: none; }

/* Tila sanoina. "Tulossa" ei näytä painikkeelta eikä ole klikattava. */
.sl-status {
	display: inline-block;
	padding: 7px 14px;
	border-radius: var(--sl-pill);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	border: 1px dashed var(--sl-line);
	color: var(--sl-muted);
	background: #fff;
}
.sl-status--coming { color: var(--sl-teal-ink); border-color: rgba(27, 132, 128, .35); }
.sl-status--noaccess { color: var(--sl-muted); }

/* ---------- 3. NÄIN OPTOPRO LEARNINGISSA OPIT ---------- */
.sl-learn { margin-top: 8px; }
.sl-learn .sl-title { margin-bottom: 36px; }
.sl-circles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.sl-circle-item { text-align: center; }
.sl-circle {
	--ring: var(--sl-blue);
	width: min(100%, 172px);
	aspect-ratio: 1;
	margin: 0 auto 18px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--sl-line), 0 0 0 6px #fff, 0 0 0 8px var(--ring);
	color: var(--sl-navy);
}
.sl-circle-item--2 .sl-circle { --ring: var(--sl-teal-ink); }
.sl-circle-item--3 .sl-circle { --ring: var(--sl-violet); }
.sl-circle-item--4 .sl-circle { --ring: var(--sl-green-ink); }
.sl-circle__num { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--ring); }
.sl-circle__name { font-size: clamp(16px, 1.3vw, 19px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; padding: 0 14px; }
.sl-circle-item__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sl-circle-item__text { margin: 0 auto; max-width: 16rem; font-size: 15px; line-height: 1.5; color: var(--sl-text); }

/* ---------- 4. OMA OPPIMINEN ---------- */
.sl-progress__head { margin-bottom: 22px; }
.sl-notice { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #fff8e8; border: 1px solid #ead7a5; color: var(--sl-ink); font-size: 15px; }
.sl-progress-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sl-line); }
.sl-progress-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px 24px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--sl-line);
}
.sl-progress-row__title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--sl-navy); }
.sl-progress-row__status { margin: 4px 0 0; font-size: 14.5px; color: var(--sl-muted); }
.sl-progress-row--coming .sl-progress-row__status { color: var(--sl-teal-ink); font-weight: 600; }
.sl-progress-row__bar { margin: 10px 0 0; height: 8px; max-width: 420px; border-radius: var(--sl-pill); background: #e3ebf7; overflow: hidden; }
.sl-progress-row__bar[hidden] { display: none; }
.sl-progress-row__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sl-blue), var(--sl-teal-ink)); transition: width .5s ease; }
.sl-continue { font-size: 15.5px; font-weight: 700; color: var(--sl-blue); text-decoration: none; white-space: nowrap; }
.sl-continue:hover { text-decoration: underline; }
.sl-continue[hidden] { display: none; }
.sl-progress__foot { margin: 18px 0 0; font-size: 14.5px; }
.sl-progress__note { margin: 14px 0 0; font-size: 13.5px; color: var(--sl-muted); }
.sl-review { margin: 26px 0 0; padding: 22px 24px; border: 1px solid var(--sl-line); border-radius: var(--sl-radius); background: var(--sl-soft); }
.sl-review__title { font-size: 18px; font-weight: 800; color: var(--sl-navy); }
.sl-review p { margin: 8px 0 0; }
.sl-review__feedback { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sl-line); }
.sl-review__feedback h4 { margin: 0; font-size: 16px; }

/* Ankkurit (#valitse-koulutuksesi): pehmeä vieritys, kohde fokusoitavissa. */
html { scroll-behavior: smooth; }
.sl-courses:focus { outline: none; }
.sl-courses { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Matala desktop (15" lappari, selaimen palkit nakyvissa) — v1.4 ----------
   Vain leveilla nayttoilla, joiden korkeus on pieni. Hero tiivistyy (~240 px),
   valit pienenevat, katalogitaso on tiivis — jotta "Nain Optopro Learningissa
   opit" -otsikko alkaa nakya ensimmaisessa nakymassa disclosure suljettuna. */
@media (min-width: 1081px) and (max-height: 800px) {
	.sl-hero__grid, .sl-hero__art { min-height: 252px; }  /* v1.5: 228 -> 252 (PO 21.8.2026) */
	.sl-hero__copy { padding: 16px 0 12px; }
	.sl-hero__title { font-size: 32px; }
	.sl-hero__model { padding-bottom: 16px; gap: 6px; }
	.sl-model__trigger { padding: 6px 12px; font-size: 12.5px; }
	.sl-hero__lede { font-size: 15px; margin-top: 8px; max-width: 44rem; }
	.sl-main { padding-top: 22px; padding-bottom: 8px; }
	.sl-main .sl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin-bottom: 10px; }
	.sl-main .sl-title { font-size: 30px; }
	.sl-main .sl-aside .sl-title { font-size: 19px; }
	.sl-main .sl-lead { margin-top: 0; font-size: 15px; }
	.sl-course { padding-top: 16px; gap: 8px; }
	.sl-course__foot { gap: 4px 12px; }
	.sl-course__resume, .sl-course__valid { font-size: 13px; }
	.sl-course__audience { margin-bottom: 4px; font-size: 12px; }
	.sl-course__title { font-size: 21px; }
	.sl-course__lede { margin-top: 6px; font-size: 14.5px; line-height: 1.4; }
	.sl-course__actions { padding-bottom: 14px; }
	.sl-course__metrics { font-size: 12.5px; }
	.sl-course__metrics strong { font-size: 13.5px; }
	.sl-course__metrics span { font-size: 12.5px; }
	.sl-course .sl-btn--primary { padding: 10px 20px; font-size: 15px; }
	.sl-aside { padding: 14px 18px 12px; margin-top: 0; }
	.sl-aside .sl-progress__head { margin-bottom: 8px; }
	.sl-aside .sl-progress-row { padding: 8px 0; gap: 4px; }
	.sl-aside .sl-progress-row__bar { margin-top: 6px; }
	.sl-aside .sl-progress__note { margin-top: 8px; }
	.sl-aside .sl-progress__foot { margin-top: 8px; }
	.sl-learn { margin-top: 0; padding-top: 20px; }
	.sl-learn .sl-title { margin-bottom: 24px; }
}

/* ---------- Responsiivisuus ---------- */
@media (max-width: 1080px) {
	/* Tabletti/mobiili: ei sivupalkkia — koulutustarjonta ensin, Oma oppiminen sen jalkeen. */
	.sl-main__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.sl-aside { margin-top: 0; }
	.sl-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
	.sl-circles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sl-circle { width: min(100%, 150px); }
}
@media (max-width: 860px) {
	.sl-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; gap: 0; }
	.sl-hero__copy { padding: 30px 0 18px; max-width: none; }
	.sl-hero__title { max-width: none; }
	.sl-hero__art { grid-row: auto; grid-column: 1; min-height: 0; height: 170px; margin-inline: -20px; }
	.sl-hero__model { grid-column: 1; grid-row: auto; order: 5; padding: 14px 0 20px; }
	.sl-model { position: relative; }
	.sl-model__panel { position: static; margin-top: 8px; box-shadow: none; }
	/* Maskit poistettu: lapinakyva objekti ei tarvitse reunahaivytysta. */
	.sl-hero__img { object-position: 50% 52%; }
	.sl-course { padding: 24px 0 0; }
	.sl-course + .sl-course { padding-left: 0; border-left: 0; border-top: 1px solid var(--sl-line); }
	.sl-progress-row { grid-template-columns: minmax(0, 1fr); }
	.sl-main { padding-top: 30px; }
	.sl-aside { padding: 18px 18px 16px; }
}
@media (max-width: 480px) {
	.sl-band { padding: 48px 0; }
	.sl-hero__copy { padding: 24px 0 14px; }
	.sl-hero__title { font-size: 30px; }
	.sl-hero__art { height: 150px; }
	.sl-hero__model { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.sl-model__trigger { width: 100%; justify-content: flex-start; white-space: normal; padding: 8px 12px; font-size: 12.5px; }
	.sl-model[open] { grid-column: 1 / -1; }
	.sl-modules { grid-template-columns: minmax(0, 1fr); }
	.sl-btn { padding: 13px 22px; font-size: 16px; }
	.sl-course { gap: 14px; }
	.sl-circles { gap: 24px 14px; }
	.sl-circle { width: min(100%, 132px); }
	.sl-circle__name { font-size: 15px; padding: 0 10px; }
	.sl-course__metrics { gap: 18px; }
}