/* ══════════════════════════════════════════════════════════════════════
   UTBILDNINGSKORTET — en enda definition för hela sajten
   ══════════════════════════════════════════════════════════════════════
   Kortet fanns i tre kopior: utbildningslistan, /yrken/resultat och
   /yrken/matcha-yrke. De glider isär, och gjorde det: när listan fick
   bildband + vitt infofält (i stället för foto med svart gradient över)
   följde matcha-yrke inte med, så samma utbildning såg ut på två sätt
   beroende på var man hittade den.

   Reglerna nedan är flyttade hit oförändrade från utbildningar-page.css,
   som nu @import:erar filen — då får de 100+ sidorna under /utbildning
   dem automatiskt, och matcha-yrke laddar filen direkt.

   Markupen som reglerna beskriver byggs av buildEduCard() i
   js/edu-card.js. Ändras den ena måste den andra följa med.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Cards: grid mode ── */
.edu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}

.edu-card{background:#fff;border:1.5px solid #D0E3F5;border-radius:12px;padding:16px 14px 12px;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s;display:flex;flex-direction:column;gap:0;position:relative;text-decoration:none;color:inherit;min-height:240px}
.edu-card:hover{border-color:var(--bl);box-shadow:0 4px 18px rgba(90,143,181,.13);transform:translateY(-2px)}

/* card-body and card-aside are transparent in grid mode */
.edu-grid:not(.list-mode) .card-body{display:contents}
.edu-grid:not(.list-mode) .card-aside{display:contents}
.edu-grid:not(.list-mode) .list-cta{display:none}

.card-name{font-family:'Inter',sans-serif;font-size:.92rem;font-weight:700;line-height:1.25;color:var(--tx);margin-bottom:3px;letter-spacing:-.02em;overflow-wrap:anywhere}
.card-school{font-size:.73rem;font-weight:500;color:var(--mu)}
.card-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.card-mode-badge{font-size:.63rem;font-weight:700;padding:3px 8px;border-radius:8px;white-space:nowrap}
.card-pace{font-size:.63rem;font-weight:700;padding:3px 8px;border-radius:8px;background:var(--wl);color:var(--wa)}
.card-level-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;flex-shrink:0;cursor:default}
.card-level-badge--master{background:#EDE7F6;color:#6B3FA0}
.card-level-badge--komp{background:#E0F4F7;color:#1A7A8C}
/* Stad, längd och startdatum ligger på en gemensam rad med '·' emellan.
   Låg tidigare på tre separata rader, vilket kostade ~35px höjd per kort —
   höjd som i stället går till bildbandet överst. */
.card-metaline{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:4px}
.card-metaline > * + *::before{content:'·';margin-right:6px;color:var(--bo);font-weight:600}
.card-city{font-size:.7rem;color:var(--li);display:inline-flex;align-items:center;gap:3px}
/* Samma program+skola i flera studieorter (se yh_schools_deduped-fixen som
   la city i dedup-nyckeln) — markera staden extra tydligt så det inte ser ut
   som en dubblett när korten hamnar nära varandra i listan. */
.card-city--dup{display:inline-flex;width:fit-content;font-weight:700;color:var(--bl);background:var(--wl2, #EEF4FB);padding:2px 7px 2px 6px;border-radius:6px}
.card-duration{font-size:.7rem;color:var(--li)}
.card-start{font-size:.7rem;color:var(--li);font-weight:600}
/* Ansökningsstatus (js/ansokan-status.js). Tonerna är avsiktligt dova —
   det här är information, inte en kampanj. Bara 'gul' (deadline inom 14
   dagar) och 'rod' (inställd) sticker ut, eftersom bara de två kräver att
   användaren gör något nu. Ligger i .card-metaline och ärver dess
   '·'-separator. */
.card-ansokan{font-size:.7rem;font-weight:700}
.card-ansokan--gron{color:#1B7A4B}
.card-ansokan--gul{color:#9A6205}
.card-ansokan--rod{color:#A32C1E}
.card-ansokan--neutral{color:var(--li);font-weight:600}
.card-cutoff{margin-top:5px;display:flex;align-items:baseline;gap:3px}
/* "På denna utbildning har du X i merit" — se userMeritHtml() i
   js/edu-card.js. Bara synlig om meriträknaren har en sparad profil, se
   CLAUDE.md om att aldrig gissa ett värde när data saknas. */
.card-your-merit{margin-top:5px;font-size:.72rem;color:var(--mu)}
.card-your-merit strong{color:var(--tx);font-weight:800}
.card-open-admission{margin-top:5px;font-size:.63rem;font-weight:600;color:var(--ac);}
.card-cutoff-val{font-size:1rem;font-weight:800;color:var(--tx)}
.card-cutoff-lbl{font-size:.65rem;color:var(--li);font-weight:600}
.card-desc{font-size:.74rem;color:var(--mu);line-height:1.55;margin-top:7px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-desc-more{display:none;font-size:.74rem;color:var(--mu);line-height:1.55;margin-top:4px}
.card-desc-more p+p{margin-top:6px}
.edu-card.desc-open .card-desc{-webkit-line-clamp:unset;overflow:visible}
.edu-card.desc-open .card-desc-more{display:block}
.card-desc-toggle{display:none;background:none;border:none;font-size:.71rem;font-weight:600;color:var(--bl);cursor:pointer;padding:3px 0 0;font-family:'Inter',sans-serif;text-align:left}
.card-desc-toggle:hover{color:var(--bh)}
.edu-grid.list-mode .card-desc-toggle{display:block}
.edu-grid.list-mode .card-desc{-webkit-line-clamp:unset;overflow:visible}
.card-initial{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;flex-shrink:0;margin-bottom:8px}
/* Bokstavsavataren är basen, favicon-bilden lagras ovanpå och tonas in
   bara vid ett bekräftat lyckat, tillräckligt stort svar (se onload i JS) —
   annars förblir bokstaven synlig. */
/* display:inline-block behövs: elementet är ett <span>, och när card-body
   inte längre är display:contents (grid-läget ritar nu ett vitt infofält)
   blir spanet inline igen och width/height ignoreras — då sträcker sig
   dess bakgrund över hela textraden i stället för att bli en 30px-bricka. */
.card-initial-wrap{position:relative;display:inline-block;width:30px;height:30px;flex-shrink:0;margin-bottom:8px}
.card-initial-wrap .card-initial{margin-bottom:0}
.card-initial-img{position:absolute;inset:0;object-fit:contain;background:#fff;padding:4px;opacity:0;transition:opacity .15s;z-index:1}

/* ── Cards: list mode ── */
.edu-grid.list-mode{grid-template-columns:1fr;gap:6px}
.edu-grid.list-mode .edu-card{flex-direction:row;align-items:center;padding:12px 44px 12px 16px;transform:none !important}
.edu-grid.list-mode .edu-card:hover{transform:none !important}
.edu-grid.list-mode .card-body{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}
.edu-grid.list-mode .card-aside{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:14px}
.edu-grid.list-mode .card-meta{margin-top:0}
.edu-grid.list-mode .card-metaline{margin-top:0}
.edu-grid.list-mode .card-cutoff{display:none}
.edu-grid.list-mode .card-your-merit{display:none}
.edu-grid.list-mode .card-name{font-size:.86rem}
.edu-grid.list-mode .card-school{font-size:.71rem}
.list-cta{font-size:.72rem;font-weight:700;color:var(--bl);white-space:nowrap;padding-left:6px}

/* ── Card favorite (heart) button ── */
/* !important på position/z-index behölls när gradient-överlägget togs bort:
   knappen ligger nu ovanpå bildbandet och måste stanna utanför flex-flödet
   oavsett vilka regler som senare läggs till på kortets barn. */
.card-fav-btn{position:absolute!important;top:9px;right:9px;z-index:3!important;width:34px;height:34px;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .15s}
.card-fav-btn:hover{transform:scale(1.1)}
.card-fav-btn svg{width:22px;height:22px;stroke:var(--re);fill:none;stroke-width:2.2;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));transition:fill .15s}
.card-fav-btn.is-fav svg{fill:var(--re)}
.edu-grid.list-mode .card-fav-btn{top:50%;right:12px;transform:translateY(-50%)}
.edu-grid.list-mode .card-fav-btn:hover{transform:translateY(-50%) scale(1.08)}

/* ── Card action buttons (outside the card anchor) ── */
.edu-card-wrap{display:flex;flex-direction:column}
.edu-card-wrap .edu-card{flex:1}
.edu-card-actions{display:flex;gap:5px;padding:5px 0 0}
.edu-grid.list-mode .edu-card-actions{display:none}
.edu-card-act{flex:1;text-align:center;padding:7px 8px;border-radius:8px;font-size:.72rem;font-weight:700;text-decoration:none;border:1.5px solid var(--bo);color:var(--mu);background:#fff;transition:border-color .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edu-card-act:hover{border-color:var(--bl);color:var(--bl)}
.edu-card-act-apply{background:var(--bll);border-color:#A8C8E8;color:var(--bh)}
.edu-card-act-apply:hover{background:var(--bl);color:#fff;border-color:var(--bl)}
@media(max-width:640px){.edu-card-act{font-size:.68rem;padding:7px 5px}}

/* ── Cards: background images ── */
.card-thumb{display:none}
.edu-grid.list-mode .card-thumb{display:block;width:52px;border-radius:8px;flex-shrink:0;background-size:cover;background-position:center;align-self:stretch;margin-right:4px}
.edu-grid.list-mode .edu-card.has-img .card-initial,
.edu-grid.list-mode .edu-card.has-img .card-initial-wrap{display:none}

/* Grid-mode: bildband överst + vitt infofält under — samma princip som
   yrkeskorten (.card-img/.card-info i yrken.html). Kortet var tidigare ETT
   foto med en svart gradient över och all text i vitt med text-shadow. Två
   problem med det: gradienten är fast (.08 överst) men bilderna varierar, så
   kortnamnet tappade kontrast mot ljusa foton, och de nedre 62-72 % svart
   dolde större delen av bilden. Med vitt fält behövs varken gradient eller
   text-shadow, och bilden syns oskuggad. Höjden hålls nere genom att stad,
   längd och start delar en rad (.card-metaline) och att foot-knappen
   "Kontrollera behörighet" tagits bort — hela kortet länkar redan dit. */
.card-band{display:none}
.edu-grid:not(.list-mode) .card-band{display:block;height:112px;background-size:cover;background-position:center;background-color:#E8EFF6;flex-shrink:0}
.edu-grid:not(.list-mode) .edu-card.has-img{padding:0;overflow:hidden}
.edu-grid:not(.list-mode) .edu-card.has-img .card-body{display:block;padding:0 14px;margin-top:-15px}
.edu-grid:not(.list-mode) .edu-card.has-img .card-aside{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:10px 14px 13px}
.edu-grid:not(.list-mode) .edu-card.has-img .card-name{margin-top:8px}
.edu-grid:not(.list-mode) .edu-card.has-img .card-meta{margin-top:0}
/* En enda neutral bricka för hela raden i grid-läget. På foto var alla
   etiketter samma mörka genomskinliga pill; på vitt slog varje etikett
   tillbaka till sin egen färg (blå, gul, lila, turkos, grön) och raden blev
   ett färgkollage. Semantiken bärs av texten, inte av kulören. */
.edu-grid:not(.list-mode) .card-mode-badge,
.edu-grid:not(.list-mode) .card-pace,
.edu-grid:not(.list-mode) .card-level-badge,
.edu-grid:not(.list-mode) .card-city--dup{background:#F2F6FA;color:var(--mu)}
.edu-grid:not(.list-mode) .card-open-admission{color:var(--mu);font-weight:700;background:#F2F6FA;border-radius:8px;padding:3px 8px}

/* Skolloggan lyfts upp så den bryter kanten mellan bild och vitt fält.
   Vit ring via box-shadow i stället för border — border hade krympt
   innehållsytan (box-sizing:border-box) och tryckt ut faviconen. */
/* Barnväljare, inte efterkommande: favicon-bilden bär också klassen
   .card-initial och skulle annars ärva position:relative här och tappa sin
   position:absolute — då hamnar loggan under bokstavsavataren i stället för
   ovanpå, och kortet växer 30px. */
.edu-grid:not(.list-mode) .edu-card.has-img .card-body > .card-initial,
.edu-grid:not(.list-mode) .edu-card.has-img .card-initial-wrap{position:relative;z-index:1;background:#fff;border-radius:8px;box-shadow:0 0 0 2px #fff,0 2px 8px rgba(0,0,0,.2)}

/* Antagningspoängen blir en kompakt bricka i badge-raden i stället för en
   egen rad med stora siffror. */
.edu-grid:not(.list-mode) .card-cutoff{margin-top:0;gap:3px;background:#F2F6FA;border-radius:8px;padding:3px 8px}
.edu-grid:not(.list-mode) .card-cutoff-val{font-size:.72rem;font-weight:800}
.edu-grid:not(.list-mode) .card-cutoff-lbl{font-size:.6rem}
.edu-grid:not(.list-mode) .card-open-admission{margin-top:0}
.edu-grid:not(.list-mode) .card-cutoff-lbl{color:var(--mu)}