/* ==========================================================================
   slide-content.css — Dian sisällön ulkoasu.

   Yhteinen lähde koulutusnäkymälle (training.html) ja ylläpidon
   esikatseluille (admin.html). Aiemmin nämä säännöt olivat kahtena kopiona,
   jolloin esikatselu ei vastannut koulutussivua. Lisää molemmissa ENNEN
   patevyyspiste-theme.css:ää, jotta teeman korjaukset voittavat kuten ennenkin.

   Vain dian sisällön luokat kuuluvat tähän: navigaatio, tietovisa ja
   ylläpidon oma käyttöliittymä pysyvät sivujensa omissa tyyleissä.
   ========================================================================== */

/* ── Dian runko ja perustypografia ── */
.slide{background:transparent;border:none;border-radius:0;padding:0;margin-bottom:1rem;animation:fi 0.3s ease;}
@keyframes fi{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.slide > h2{font-family:'Outfit',sans-serif;font-size:30px;font-weight:700;line-height:1.2;color:var(--wt-text,#0b1628);margin-bottom:1rem;}
.slide-content > p{font-size:16px;color:var(--wt-text-2,#334155);line-height:1.7;margin-bottom:0.85rem;}
.slide-content > ul > li,.slide-content > ol > li{font-size:16px;line-height:1.7;color:var(--wt-text-2,#334155);}

/* ── Infoboxit ── */
.tbox{background:var(--wt-surface-2,#f1f5f9);border-radius:14px;padding:14px 16px;margin:.9rem 0;}
.tbox p{font-size:15px;line-height:1.65;color:var(--wt-text-2,#334155);margin:0;}
.tlbl{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:500;color:var(--wt-accent,#1e40af);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}
.wbox{background:#fffbeb;border:1px solid #fde68a;border-radius:14px;padding:14px 16px;margin:.9rem 0;}
.wbox p{font-size:15px;line-height:1.65;color:#78350f;margin:0;}
.wlbl{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:500;color:#92400e;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}
.gbox{background:var(--wt-surface-2,#f1f5f9);border-radius:14px;padding:14px 16px;margin:.9rem 0;}
.gbox p{font-size:15px;line-height:1.65;color:var(--wt-text-2,#334155);margin:0;}
.glbl{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:500;color:#059669;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}

/* ── Tarkistuslista ── */
.chk{list-style:none;padding:0;margin:.6rem 0;}
.chk li{display:flex;align-items:flex-start;gap:9px;padding:5px 0;font-size:13px;color:var(--wt-text,#0f172a);border-bottom:1px solid #f1f5f9;}
.chk li:last-child{border-bottom:none;}
.chk li i{font-size:15px;margin-top:2px;flex-shrink:0;}
.ic-ok{color:#059669;}.ic-w{color:#b45309;}.ic-b{color:#b91c1c;}

/* ── HTTPS-vertailu ── */
.hcmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:.75rem 0;}
.hbox{border-radius:8px;padding:12px;border:1px solid var(--wt-border-2,#cbd5e1);}
.hbox.sf{background:#ecfdf5;border-color:#a7f3d0;}
.hbox.us{background:#fef2f2;border-color:#fecaca;}
.hbox h3{font-size:13px;font-weight:500;margin-bottom:6px;}
.hbox.sf h3{color:#065f46;}.hbox.us h3{color:#7f1d1d;}
.hurl{font-family:monospace;font-size:11px;padding:5px 8px;border-radius:6px;margin-bottom:7px;display:flex;align-items:center;gap:5px;}
.hurl.sf{background:#a7f3d0;color:#065f46;}.hurl.us{background:#fecaca;color:#7f1d1d;}
.hbox p{font-size:12px;line-height:1.5;}
.hbox.sf p{color:#059669;}.hbox.us p{color:#991b1b;}
.dflow{margin-top:10px;padding:10px;background:var(--wt-surface-2,#f1f5f9);border-radius:8px;}
.frow{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:12px;}
.frow:last-child{margin-bottom:0;}
.fn{padding:3px 8px;border-radius:6px;font-size:11px;font-weight:500;}
.fn.you{background:#e0e7ff;color:#1e40af;}
.fn.srv{background:#e0e7ff;color:#1e40af;}
.fn.enc{background:#ecfdf5;color:#065f46;}
.fn.pln{background:#fef2f2;color:#7f1d1d;}
.fa{color:var(--wt-faint,#94a3b8);}
@keyframes fp{0%,100%{opacity:.5;}50%{opacity:1;}}
.fanim{animation:fp 1.6s ease infinite;}

/* ── Teams-mockup ── */
.tmock{border:1px solid var(--wt-border-2,#cbd5e1);border-radius:12px;overflow:hidden;margin:.75rem 0;}
.tbar{background:#1e40af;padding:8px 14px;display:flex;align-items:center;gap:8px;}
.tbar span{color:#e0e7ff;font-size:13px;font-weight:500;}
.tbar i{color:#c7d2fe;font-size:16px;}
.tmsg{padding:14px;}
.tbub{display:flex;gap:10px;margin-bottom:12px;}
.tav{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex-shrink:0;}
.tav.ext{background:#fef2f2;color:#b91c1c;}
.tnm{font-size:11px;font-weight:500;color:var(--wt-muted,#64748b);margin-bottom:3px;display:flex;align-items:center;gap:6px;}
.textbadge{font-size:10px;background:#fffbeb;color:#92400e;padding:1px 6px;border-radius:99px;border:1px solid #b45309;}
.ttext{background:var(--wt-surface-2,#f1f5f9);border-radius:0 8px 8px 8px;padding:8px 12px;font-size:13px;line-height:1.5;border:1.5px solid #ef4444;}
.tattach{display:inline-flex;align-items:center;gap:6px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:5px 9px;margin-top:6px;font-size:12px;color:#b91c1c;}
@keyframes wp{0%,100%{opacity:1;}50%{opacity:.7;}}
.twarn{display:flex;align-items:flex-start;gap:8px;background:#fffbeb;border:1px solid #b45309;border-radius:8px;padding:8px 10px;margin-top:10px;font-size:12px;color:#78350f;animation:wp 2.5s ease infinite;}
.twarn i{font-size:15px;color:#b45309;flex-shrink:0;margin-top:1px;}

/* ── Kuva ── */
.sl-img{margin:.75rem 0;text-align:center;}
.sl-img img{max-width:100%;height:auto;border-radius:8px;display:block;margin:0 auto;}
.sl-img figcaption{font-size:12px;color:var(--wt-muted,#64748b);margin-top:5px;font-style:italic;}

/* ── Video ──
   Sovitetaan dian leveyteen mutta ei yli näkyvän korkeuden, jotta koko video
   näkyy vierittämättä. --sl-video-max-h rajaa korkeuden, jolloin leveys
   lasketaan kuvasuhteesta. Upotukselle 16:9, omalle tiedostolle todellinen
   kuvasuhde (--sl-video-ratio asetetaan JS:llä metatietojen latauduttua). */
.sl-video{--sl-video-max-h:68vh;margin:.75rem 0;}
.sl-video video{display:block;margin:0 auto;width:min(100%,calc(var(--sl-video-max-h) * var(--sl-video-ratio,1.7778)));max-width:100%;height:auto;max-height:var(--sl-video-max-h);border-radius:8px;background:#000;object-fit:contain;}
.sl-video-frame{position:relative;margin:0 auto;width:min(100%,calc(var(--sl-video-max-h) * 16 / 9));aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;}
.sl-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* Koko ruutu -tilassa kuvasuhderajat pois, muuten video jäisi pikkuruiseksi */
.sl-video-frame:fullscreen{width:100%;height:100%;aspect-ratio:auto;border-radius:0;}
.sl-video video:fullscreen{width:100%;height:100%;max-width:none;max-height:none;border-radius:0;}
.sl-video-tools{display:flex;justify-content:flex-end;margin-top:6px;}
.sl-video-fs{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:6px;cursor:pointer;border:1px solid var(--wt-border-2,#cbd5e1);background:var(--wt-surface,#fff);color:var(--wt-text-2,#334155);}
.sl-video-fs:hover{background:var(--wt-surface-2,#f1f5f9);}
.sl-video figcaption{font-size:12px;color:var(--wt-muted,#64748b);margin-top:5px;font-style:italic;text-align:center;}

/* ── Äänite ──
   Kuunneltava versio koulutuksesta. Soitin on selaimen oma: sen ulkoasua ei voi
   tyylitellä luotettavasti, joten se kehystetään omaan korttiinsa ja rajataan
   luettavan levyiseksi. */
.sl-audio{margin:.75rem 0;}
.sl-audio audio{display:block;width:100%;max-width:520px;margin:0 auto;}
.sl-audio figcaption{font-size:12px;color:var(--wt-muted,#64748b);margin-top:5px;font-style:italic;text-align:center;}

/* ── Esitys (PowerPoint, Google Slides, PDF) ──
   Kaksi eri esitystapaa samalla figurella:
   - .sl-doc-frame  = upotettu esitys tai selaimessa avautuva PDF. Diaesitykset
                      ovat 16:9, joten sama kuvasuhderajaus kuin videolla.
   - .sl-doc-card   = latauskortti. PowerPoint-tiedostoa selain ei osaa näyttää,
                      joten se tarjotaan latauksena tyhjän kehyksen sijaan. */
.sl-doc{--sl-doc-max-h:68vh;margin:.75rem 0;}
.sl-doc-frame{position:relative;margin:0 auto;width:min(100%,calc(var(--sl-doc-max-h) * 16 / 9));aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0f172a;border:1px solid var(--wt-border,#e2e8f0);}
.sl-doc-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;}
.sl-doc-frame:fullscreen{width:100%;height:100%;aspect-ratio:auto;border-radius:0;}
.sl-doc-actions{display:flex;justify-content:center;margin-top:8px;}
.sl-doc-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--wt-border-2,#cbd5e1);border-radius:10px;background:var(--wt-surface,#fff);text-decoration:none;color:inherit;transition:background .15s,border-color .15s;}
.sl-doc-card:hover{background:var(--wt-surface-2,#f1f5f9);border-color:var(--wt-accent,#1e40af);}
.sl-doc-card i{font-size:30px;color:#b45309;flex-shrink:0;}
.sl-doc-title{font-weight:500;word-break:break-word;}
.sl-doc-hint{font-size:12px;color:var(--wt-muted,#64748b);margin-left:auto;text-align:right;}
.sl-doc-tools{display:flex;justify-content:flex-end;margin-top:6px;}
.sl-doc figcaption{font-size:12px;color:var(--wt-muted,#64748b);margin-top:5px;font-style:italic;text-align:center;}
@media (max-width:640px){
  .sl-doc-card{flex-wrap:wrap;}
  .sl-doc-hint{margin-left:0;width:100%;text-align:left;}
}

/* ── Vimpaimen paikka ── */
.sl-widget{margin:.75rem 0;min-height:40px;}

/* ── Askelistepalkki ── */
.sflow{margin:.75rem 0;}
.sitem{display:flex;gap:12px;align-items:flex-start;padding:10px 0;opacity:0;transform:translateX(-10px);transition:opacity .4s ease,transform .4s ease;}
.sitem.vis{opacity:1;transform:translateX(0);}
.snum{width:28px;height:28px;border-radius:50%;background:#1e40af;color:#fff;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.scont h3{font-size:14px;font-weight:500;color:var(--wt-text,#0f172a);margin-bottom:3px;}
.scont p{font-size:13px;color:var(--wt-muted,#64748b);line-height:1.5;}
.sbdg{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;margin-top:4px;}
.sbdg.urg{background:#fef2f2;color:#b91c1c;}
.sbdg.nrm{background:#e0e7ff;color:#1e40af;}
.sbdg.imp{background:#fffbeb;color:#92400e;}

/* ── Linkki-painike ──
   Määritelty itsenäisesti (ei nojaa sivun .btn-perustyyliin), jotta lohko
   näyttää samalta myös ylläpidon esikatselussa. */
.btn.ext{font-family:inherit;cursor:pointer;transition:all 0.15s;background:#e0e7ff;color:#1e40af;display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:9px 16px;font-size:14px;text-decoration:none;margin-top:.5rem;border:1px solid #1e40af;}
.btn.ext:hover{background:#c7d2fe;}

/* ── Mobiili ── */
@media (max-width:760px){
  .hcmp{grid-template-columns:1fr;}
  .slide{padding:1rem;}
  /* Vaakasuunnassa leviävä sisältö vieritettäväksi omassa laatikossaan */
  .tmock,.dflow{overflow-x:auto;}
  .slide-content img{max-width:100%;height:auto;}
  .slide-content pre{overflow-x:auto;}
  .slide-content table{display:block;overflow-x:auto;max-width:100%;}
  .slide-content{overflow-wrap:anywhere;}
}