/* ══════════════════════════════════════════════════════════════════════
   STUDIEKOMPASSENS RESULTATKORT: ram, intresseanmälan och utfällning
   ══════════════════════════════════════════════════════════════════════
   Markupen byggs av SKKort.ram() i js/sk-kort.js. Kortet inuti är det
   vanliga utbildningskortet (css/edu-card.css); ramen tar över dess kant
   så att kort, ort-chips, knapp och utfällning läses som ETT kort. */

.skk{position:relative;display:flex}
.skk-in{flex:1;display:flex;flex-direction:column;background:#fff;border:1.5px solid #E8EEF5;border-radius:12px;overflow:hidden;transition:border-color .18s,box-shadow .18s}
.skk:hover .skk-in{border-color:var(--bl)}
.skk-in .edu-grid{grid-template-columns:1fr}
.skk-in .edu-card,.skk-in .fallback-kort{border:0!important;border-radius:0;box-shadow:none!important;transform:none!important}
.skk-in .grupp-orter{margin:0;padding:0 14px 12px}
/* Spetskortet har redan en egen ram (.spk). Den behålls, men utan dubbel kant. */
.skk-in.spk{border-color:#D0E3F5}

.skk-fot{margin-top:auto;display:flex;align-items:center;justify-content:center;position:relative;min-height:50px;padding:8px 12px;border-top:1px solid #EAF0F6;background:#FAFCFD}
.skk-fot-hs{display:none}
.skk-cta{border:0;border-radius:8px;background:var(--ac);color:#fff;font-family:inherit;font-size:.8rem;font-weight:700;padding:9px 16px;cursor:pointer;white-space:nowrap;transition:background .15s}
.skk-cta:hover{background:var(--ah)}
.skk-cta--las{text-decoration:none}
.skk-cta:focus-visible,.skk-mer-knapp:focus-visible{outline:2px solid var(--ah);outline-offset:2px}
/* Spetskortet: anmälan sitter i samma sidfot som "Passar den dig?",
   tummarna till vänster och knappen till höger. Får de inte plats på en
   rad hamnar knappen på en egen rad, fortfarande till höger. */
.skk .spk-fot{margin-top:auto;padding:8px 10px 8px 12px;gap:6px 8px}
.skk .spk-fot .pm{margin-left:0}
.skk .spk-fot .skk-cta{margin-left:auto;padding:8px 12px}
/* "Visa mer" behövs bara där det inte finns hover. */
.skk-mer-knapp{display:none;position:absolute;left:14px;background:none;border:0;padding:6px 0;font-family:inherit;font-size:.78rem;font-weight:700;color:var(--bl);cursor:pointer}
.skk-mer-knapp::after{content:' ▾'}
.skk-mer-knapp[aria-expanded="true"]::after{content:' ▴'}

.skk-mer{padding:14px 16px 16px;border-top:1px solid #EAF0F6;background:#fff}
.skk-laddar{font-size:.78rem;color:var(--li)}
.skk-beskr p{font-size:.82rem;color:var(--mu);line-height:1.6;margin-bottom:6px}
.skk-las{font-size:.8rem;font-weight:700;color:var(--bl);text-decoration:none}
.skk-las:hover{text-decoration:underline}
.skk-krav{margin-top:12px;padding-top:12px;border-top:1px dashed #E3ECF4}
.skk-krav-rubrik{font-size:.78rem;font-weight:700;color:var(--li);margin-bottom:4px}
.skk-krav-intro{font-size:.74rem;color:var(--li);margin-bottom:6px}
.skk-krav ul{list-style:none;display:flex;flex-direction:column;gap:5px;margin:0;padding:0}
.skk-krav li{display:flex;gap:8px;align-items:baseline;font-size:.82rem;color:var(--tx);line-height:1.45}
.skk-krav li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ac);flex-shrink:0;transform:translateY(-1px)}
.skk-krav li[hidden]{display:none}
.skk-krav-fler{margin-top:6px;background:none;border:0;padding:2px 0;font-family:inherit;font-size:.78rem;font-weight:700;color:var(--bl);cursor:pointer}
.skk-krav-fler:hover{text-decoration:underline}
.skk-krav-reell{margin-top:8px;font-size:.76rem;font-weight:600;color:var(--ah)}

/* Dator: den utfällda ramen läggs som ett lager över korten nedanför.
   Höjden på .skk låses i js när lagret läggs på, så rutnätet står still. */
.skk.lager .skk-in{position:absolute;top:0;left:0;right:0;height:auto;min-height:100%;z-index:30;border-color:var(--bl);box-shadow:0 14px 40px rgba(42,79,110,.22)}

@media (hover:none), (pointer:coarse){
  /* Sida vid sida i stället för knapp i mitten: på en smal skärm krockar
     annars "Visa mindre" med den centrerade knappen. */
  .skk-fot{justify-content:space-between;padding-left:14px}
  .skk-mer-knapp{display:block;position:static}
  /* Med "Visa mer" i samma rad räcker inte bredden för texten "Passar den
     dig?" också. Tummarna står kvar och har egna etiketter (aria-label). */
  .skk .spk-fot .pm-etikett{display:none}
  .skk-fot-hs{display:flex}
  .skk.oppen .skk-in{border-color:var(--bl)}
}

/* Lagret med programsidans formulär. Tills formuläret svarat syns en egen
   bakgrund och en snurra; sedan tar formulärets egen bakgrund över. */
.sk-ia-lager{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.sk-ia-lager.klar{background:transparent;backdrop-filter:none}
.sk-ia-lager iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;opacity:0;transition:opacity .15s}
.sk-ia-lager.klar iframe{opacity:1}
.sk-ia-laddar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:22px 26px;font-size:.88rem;color:var(--mu);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.sk-ia-laddar a{font-weight:700;color:var(--bh)}
.sk-ia-laddar button{background:none;border:0;font:inherit;color:var(--li);text-decoration:underline;cursor:pointer}
.sk-ia-lager.klar .sk-ia-laddar{display:none}
.sk-ia-snurr{width:32px;height:32px;border:3px solid var(--al);border-top-color:var(--ac);border-radius:50%;animation:skIaSnurr .8s linear infinite}
@keyframes skIaSnurr{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sk-ia-snurr{animation:none}}