/* AI Tasonnosto, yleiskuva: sivun omat osat. Ladataan sivu.css:n jälkeen; värit, fontit ja napit tulevat sieltä.
   Luokat alkavat yk- (yleiskuva), jotta ne eivät sekoitu päätössivun tn-luokkiin. */

/* ---------- alku ---------- */
/* Otsikko katkeaa virkkeiden kohdalta: "Tekoälyn käyttö / on taito. / Se opitaan tekemällä."
   Koko rajataan palstan leveyteen (cqi), jotta jälkimmäinen virke mahtuu yhdelle riville. */
.yk-hero .hero-teksti{container-type:inline-size}
.yk-hero h1{font-size:clamp(36px,4vw,56px);font-size:min(clamp(36px,4vw,56px),9.2cqi);line-height:1.07;letter-spacing:-.02em}
.yk-hero h1 .lause{display:inline-block;text-wrap:wrap}
.yk-vuosi-kehys{position:relative;margin:0;isolation:isolate}
.yk-vuosi-kehys::before{content:"";position:absolute;inset:26px -16px 34px 26px;z-index:-1;border-radius:26px;background:var(--sand-card);transform:rotate(2.4deg)}
.yk-vuosi-kehys figcaption{margin-top:16px;padding:0 4px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.yk-vuosi{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 24px 20px;box-shadow:0 1px 2px rgba(54,53,55,.05),0 46px 80px -48px rgba(54,53,55,.5)}
.yk-vuosi-yla{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.yk-vuosi-otsake{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.yk-valinta{display:inline-flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.yk-valinta button{border:0;border-radius:999px;background:transparent;padding:7px 13px;font-size:12.5px;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
.yk-valinta button:hover{color:var(--ink)}
.yk-valinta button[aria-pressed="true"]{background:#fff;color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 14px -8px rgba(54,53,55,.45)}
.yk-kaavio{--nimi:118px;display:grid;gap:8px}
.yk-asteikko,.yk-rivi{display:grid;grid-template-columns:var(--nimi) minmax(0,1fr);align-items:center;column-gap:12px}
.yk-asteikko{grid-template-columns:var(--nimi) repeat(12,minmax(0,1fr));column-gap:0;font-family:var(--mono);font-size:10px;color:var(--muted)}
.yk-asteikko span{padding-left:3px}
.yk-asteikko .yk-kk{padding-left:0;padding-right:12px;letter-spacing:.1em;text-transform:uppercase}
.yk-rivi{min-height:40px;border-top:1px solid #f0ede7;padding-top:8px}
.yk-rivi-nimi{margin:0;font-size:12.5px;font-weight:500;line-height:1.25;color:var(--ink);hyphens:manual}
.yk-maara{display:inline-block;min-width:1.6em;margin-left:2px;padding:1px 6px;border-radius:999px;background:var(--green-soft);color:var(--green-deep);font-family:var(--mono);font-size:10.5px;font-weight:400;text-align:center}
.yk-rata{position:relative;height:28px;border-radius:8px;background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 12 - 1px),#eeeae2 calc(100% / 12 - 1px) calc(100% / 12))}
.yk-merkki{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(66,106,90,.14)}
.yk-merkki.alku{left:2px}
.yk-merkki.loppu{right:2px}
.yk-kiihdytys{position:absolute;left:0;top:3px;bottom:3px;width:max(48px,calc(100% / 24));display:flex;align-items:center;justify-content:center;border-radius:7px;background:var(--green);transform-origin:left;transition:width .5s var(--ease)}
.yk-vuosi[data-paketti="pro"] .yk-kiihdytys{width:max(56px,calc(100% / 12))}
.yk-kiihdytys b{font-family:var(--mono);font-size:10.5px;font-weight:400;color:#fff;white-space:nowrap}
.yk-kurssit{position:absolute;left:0;right:0;top:9px;height:10px;border-radius:999px;background:linear-gradient(90deg,#f4a261,rgba(244,195,142,.35));transform-origin:left}
.yk-pallo{position:absolute;top:50%;left:calc((var(--kk) - .5) * 100% / 12);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--green);opacity:0;transform:scale(.4);transition:opacity .35s ease,transform .35s var(--ease)}
.yk-pallo.on{opacity:1;transform:none}
html:not(.js) .yk-pallo:is([data-kk="2"],[data-kk="4"],[data-kk="6"],[data-kk="8"],[data-kk="10"]){opacity:1;transform:none}
html:not(.js) .yk-valinta{display:none}
.yk-raportti{display:flex;align-items:center;gap:11px;margin-top:16px;padding:11px 14px;border-radius:14px;background:var(--night);color:var(--cream-muted)}
.yk-raportti .ik{flex:none;width:18px;height:18px;color:var(--mint);stroke-width:2.2}
.yk-raportti p{margin:0;font-size:12.5px;line-height:1.45}
.yk-raportti b{color:var(--cream-2);font-weight:600}

/* animaatio: yleiskuva.js lisää .soi, kun kortti tulee näkyviin; ilman skriptiä kaikki näkyy heti */
.js .yk-vuosi .yk-merkki,.js .yk-vuosi .yk-raportti{opacity:0}
.js .yk-vuosi .yk-kiihdytys,.js .yk-vuosi .yk-kurssit{transform:scaleX(0)}
.js .yk-vuosi.soi .yk-merkki.alku{animation:ykPop .45s var(--ease) .3s both}
.js .yk-vuosi.soi .yk-kiihdytys{animation:ykKasvu .6s var(--ease) .7s both}
.js .yk-vuosi.soi .yk-kurssit{animation:ykKasvu 1.8s cubic-bezier(.3,.6,.3,1) 1.1s both}
.js .yk-vuosi.soi .yk-merkki.loppu{animation:ykPop .45s var(--ease) 3.3s both}
.js .yk-vuosi.soi .yk-raportti{animation:ykNousu .6s var(--ease) 3.6s both}
.js .yk-vuosi.valmis .yk-merkki,.js .yk-vuosi.valmis .yk-raportti{opacity:1}
.js .yk-vuosi.valmis .yk-kiihdytys,.js .yk-vuosi.valmis .yk-kurssit{transform:none}
@keyframes ykPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes ykKasvu{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ykNousu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.yk-luvut{grid-column:1/-1;list-style:none;margin:6px 0 0;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.yk-luvut li{display:flex;flex-direction:column;gap:6px;min-width:0}
.yk-luvut b{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.05;letter-spacing:-.01em;color:var(--green-deep)}
.yk-luvut span{font-size:14px;line-height:1.4;color:var(--muted)}

/* ---------- tilanne ---------- */
.yk-tilanteet{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.yk-tilanteet li{border:1px solid var(--line);border-radius:20px;padding:24px 24px 26px;background:var(--bg);min-width:0}
.yk-tilanteet h3{font-family:var(--serif);font-size:21px;line-height:1.28;margin:12px 0 10px;text-wrap:balance}
.yk-tilanteet p{margin:0;font-size:15px;line-height:1.55;color:var(--text2)}
.yk-vertailu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.yk-vertailu-kortti{border-radius:20px;padding:24px 26px 20px;min-width:0}
.yk-vertailu-kortti .kicker{margin-bottom:12px}
.yk-vertailu-kortti.tavallinen{background:#fbf3ee;border:1px solid #f0dccf}
.yk-vertailu-kortti.tavallinen .kicker{color:var(--rust)}
.yk-vertailu-kortti.tasonnosto{background:var(--green-soft);border:1px solid #d5e3db}
.yk-merkit{list-style:none;margin:0;padding:0}
.yk-merkit li{position:relative;padding:6px 0 6px 32px;font-size:15.5px;line-height:1.5;color:var(--text2)}
.yk-merkit li::before{content:"";position:absolute;left:0;top:8px;width:20px;height:20px;border-radius:50%;background:var(--green)}
.yk-merkit li::after{content:"";position:absolute;left:7px;top:12px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.yk-merkit.ei li::before{background:var(--rust)}
.yk-merkit.ei li::after{left:5px;top:17px;width:10px;height:2px;border:0;background:#fff;transform:none}

/* ---------- ohjelma ---------- */
.yk-ikoni{width:42px;height:42px;border-radius:12px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center}
.yk-ikoni .ik{width:20px;height:20px}
.yk-osat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}
.yk-osa{background:#fff;border:1px solid var(--sand-line);border-radius:22px;padding:24px 24px 22px;min-width:0}
.yk-osa-meta{margin:16px 0 2px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.yk-osa h3{font-family:var(--serif);font-size:23px;line-height:1.25;margin:0 0 10px}
.yk-osa>p{margin:0 0 12px;font-size:15px;line-height:1.58;color:var(--text2)}
.yk-osa .pienet{margin-top:4px}
.yk-kurssit-lista{list-style:none;margin:4px 0 0;padding:0}
.yk-kurssit-lista li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #f0ede7;font-size:14px;color:var(--ink)}
.yk-kurssit-lista .pro-merkki{flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--rust);border:1px solid #f0dccf;border-radius:999px;padding:1px 7px}
.yk-kuplat{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.yk-kuplat li{position:relative;max-width:92%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:var(--bg);border:1px solid var(--line);font-size:13.5px;line-height:1.45;color:var(--ink)}
.yk-kuplat li:nth-child(2){justify-self:end;border-radius:16px 16px 4px 16px;background:var(--green-soft);border-color:#d5e3db}
.js .yk-osa .yk-kuplat li{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s var(--ease)}
.js .yk-osa.nakyy .yk-kuplat li{opacity:1;transform:none}
.js .yk-osa.nakyy .yk-kuplat li:nth-child(1){transition-delay:.5s}
.js .yk-osa.nakyy .yk-kuplat li:nth-child(2){transition-delay:1.1s}
.js .yk-osa.nakyy .yk-kuplat li:nth-child(3){transition-delay:1.7s}
.yk-kaksi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.yk-kaksi-kortti{border:1px solid var(--sand-line);border-radius:20px;padding:22px 24px;background:var(--cream-2);min-width:0}
.yk-kaksi-kortti .kicker{margin-bottom:10px}
.yk-kaksi-kortti p:last-child{margin:0;font-size:15px;line-height:1.58;color:var(--text2)}

/* ---------- vuosi ---------- */
.yk-aikajana{position:relative;list-style:none;margin:0;padding:34px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.yk-aikajana::before,.yk-aikajana::after{content:"";position:absolute;left:25px;right:25px;top:9px;height:2px;border-radius:2px;background:var(--line)}
.yk-aikajana::after{background:var(--green);transform-origin:left;transform:scaleX(0);transition:transform 2.8s var(--ease) .3s}
.yk-aikajana.nakyy::after,html:not(.js) .yk-aikajana::after{transform:scaleX(1)}
.yk-aikajana li{position:relative;border:1px solid var(--line);border-radius:18px;padding:18px 20px 20px;background:var(--bg);min-width:0}
.yk-aikajana li::before{content:"";position:absolute;top:-32px;left:18px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--green-line);transition:background .4s,box-shadow .4s}
.yk-aikajana li:nth-child(2)::before{transition-delay:.9s}
.yk-aikajana li:nth-child(3)::before{transition-delay:1.8s}
.yk-aikajana li:nth-child(4)::before{transition-delay:2.7s}
.yk-aikajana.nakyy li::before,html:not(.js) .yk-aikajana li::before{background:var(--green);box-shadow:0 0 0 5px rgba(66,106,90,.14)}
.yk-aika{margin:0 0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.yk-aikajana h3{font-family:var(--serif);font-size:21px;line-height:1.25;margin:0 0 8px}
.yk-aikajana p:last-child{margin:0;font-size:14.5px;line-height:1.55;color:var(--text2)}
.yk-lupaus{margin:36px 0 0;padding:22px 0 0;border-top:1px solid var(--line);font-family:var(--serif);font-size:clamp(21px,2.1vw,27px);line-height:1.35;color:var(--ink);max-width:36em;text-wrap:balance}

/* ---------- paketit ---------- */
.yk-paketit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.yk-paketti{background:#fff;border:1px solid #d5e3db;border-radius:22px;padding:26px 28px 22px;min-width:0}
.yk-paketti h3{font-family:var(--serif);font-size:24px;margin:0 0 8px}
.yk-hinta{display:flex;align-items:baseline;gap:8px;margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.yk-hinta b{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.4vw,44px);letter-spacing:-.02em;color:var(--green-deep)}
.yk-hinta span{font-family:var(--mono);font-size:12px;color:var(--muted)}
.yk-paketit-huom{margin-top:16px}

/* ---------- kouluttaja ---------- */
.osio.yk-kouluttaja-osio{background:var(--sand);border-top:1px solid var(--sand-line);border-bottom:1px solid var(--sand-line)}
.yk-kouluttaja{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:80px;align-items:start}
.yk-kouluttaja-kuva{margin:0;border-radius:26px;overflow:hidden;background:var(--sand-card);aspect-ratio:503/520;box-shadow:0 34px 64px -40px rgba(54,53,55,.55)}
.yk-kouluttaja-kuva img{display:block;width:100%;height:100%;object-fit:cover}
.yk-kouluttaja-teksti h2{font-family:var(--serif);font-size:clamp(30px,3.3vw,44px);line-height:1.14;letter-spacing:-.008em;margin:0 0 22px;text-wrap:balance}
.yk-kouluttaja-teksti .yk-merkit{margin-bottom:28px}
.yk-media{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- sopii ---------- */
.yk-sopii{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.yk-sopii-kortti{border-radius:20px;padding:24px 26px 20px;background:var(--green-soft);border:1px solid #d5e3db;min-width:0}
.yk-sopii-kortti .kicker{margin-bottom:12px}
.yk-sopii-kortti.ei{background:#fbf3ee;border-color:#f0dccf}
.yk-sopii-kortti.ei .kicker{color:var(--rust)}

/* ---------- päätöksen tueksi ---------- */
.osio.yk-paatos{padding:96px 0;background:#fff;border-top:1px solid var(--line)}
.yk-paatos-sisalto{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:center}
.yk-paatos h2{font-family:var(--serif);font-size:clamp(28px,3vw,40px);line-height:1.16;letter-spacing:-.008em;margin:0 0 18px;text-wrap:balance}
.yk-paatos-napit{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}

/* ---------- kapeammat näytöt ---------- */
@media screen and (max-width:980px){.brand .name{display:none!important}}
@media (max-width:1100px){
  .yk-osat{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .yk-osat .yk-osa:last-child{grid-column:1/-1}
  .yk-aikajana{grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
  .yk-aikajana::before,.yk-aikajana::after,.yk-aikajana li::before{display:none}
  .yk-kouluttaja{gap:56px;grid-template-columns:minmax(0,280px) minmax(0,1fr)}
}
@media (max-width:900px){
  .yk-vuosi-kehys{max-width:640px}
  .yk-luvut{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .yk-tilanteet{grid-template-columns:minmax(0,1fr)}
  .yk-vertailu,.yk-kaksi,.yk-sopii,.yk-paketit{grid-template-columns:minmax(0,1fr)}
  .yk-osat{grid-template-columns:minmax(0,1fr)}
  .yk-kouluttaja{grid-template-columns:minmax(0,1fr);gap:36px}
  .yk-kouluttaja-kuva{max-width:280px}
  .yk-paatos-sisalto{grid-template-columns:minmax(0,1fr);gap:28px}
  .yk-paatos-napit{justify-content:flex-start}
}
@media (max-width:640px){
  .yk-hero h1{font-size:clamp(32px,9.4vw,44px);font-size:min(clamp(32px,9.4vw,44px),9.2cqi)}
  .yk-vuosi{padding:18px 14px 16px;border-radius:18px}
  .yk-vuosi-kehys::before{inset:20px -8px 30px 14px}
  .yk-kaavio{--nimi:0px}
  .yk-asteikko{grid-template-columns:repeat(12,minmax(0,1fr))}
  .yk-asteikko .yk-kk{display:none}
  .yk-rivi{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .yk-aikajana{grid-template-columns:minmax(0,1fr)}
  .yk-media{grid-template-columns:minmax(0,1fr)}
  .osio.yk-paatos{padding:72px 0}
  .yk-paketti{padding:22px 20px 18px}
}
@media (max-width:340px){
  .yk-luvut{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .js .yk-vuosi .yk-merkki,.js .yk-vuosi .yk-raportti{opacity:1;animation:none!important}
  .js .yk-vuosi .yk-kiihdytys,.js .yk-vuosi .yk-kurssit{transform:none;animation:none!important}
  .yk-pallo,.yk-kiihdytys{transition:none}
  .yk-aikajana::after{transition:none}
  .js .yk-osa .yk-kuplat li{opacity:1;transform:none;transition:none}
}

/* ---------- tulostus ---------- */
@media print{
  .js .yk-vuosi .yk-merkki,.js .yk-vuosi .yk-raportti{opacity:1!important;animation:none!important}
  .js .yk-vuosi .yk-kiihdytys,.js .yk-vuosi .yk-kurssit{transform:none!important;animation:none!important}
  .js .yk-osa .yk-kuplat li{opacity:1!important;transform:none!important}
  .yk-vuosi-kehys::before{display:none}
  .yk-vuosi{box-shadow:none;border-color:#ddd}
  .yk-valinta,.yk-paatos-napit{display:none}
  .yk-pallo{transition:none!important}
  .yk-pallo.on{opacity:1!important;transform:none!important}
  .yk-aikajana::after{transform:scaleX(1)!important;transition:none}
  .yk-tilanteet li,.yk-vertailu-kortti,.yk-osa,.yk-kaksi-kortti,.yk-aikajana li,.yk-paketti,.yk-sopii-kortti,.yk-kouluttaja{break-inside:avoid;box-shadow:none}
  .osio.yk-kouluttaja-osio,.osio.yk-paatos{background:#fff!important}
  .osio-otsake,.kys-otsake{break-inside:avoid;break-after:avoid}
  .kicker{break-after:avoid}
  .yk-paketit,.yk-vertailu,.yk-kaksi,.yk-sopii{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10pt}
}