/* =====================================================================
   LYDEN AV HØVE STØTT — side-spesifikke stiler.
   styles.css + styles-sections.css er kopiert ORDRETT fra hovestott
   (design-fasit). Her ligger bare det som er nytt for lydenav:
   kortene (fasit: «Litt av utvalget»-kortene fra dola.css), seriehero,
   den consent-gatede avspillingsflaten og footer-tilpasning.
   ===================================================================== */

/* ---------- Aktivt menypunkt ---------- */
.nav a[aria-current="page"]{color:var(--ink);background:var(--paper-2)}

/* ---------- Kort (fasit: .ov-item fra dola.css, tilpasset lenker/covers) ---------- */
.ovs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:760px){.ovs{grid-template-columns:1fr}}
.ov-item{position:relative;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line);
  display:grid;grid-template-columns:1fr 220px;align-items:stretch;gap:0;
  transition:transform .25s var(--ease)}
/* Fasit bruker aspect-ratio:1/1 på bildekolonnen, men med lengre tekst (og
   avspilleren) gir det sirkulær høydeberegning som klipper ingressen —
   fast kolonnebredde gir samme uttrykk uten klippen. */
.ov-item .ov-body{padding:28px 24px 26px;min-width:0}
.ov-item .ov-pic{position:relative;align-self:stretch;height:100%;min-height:220px;background:var(--paper-2);border-left:1px solid var(--line)}
.ov-item .ov-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:520px){.ov-item{grid-template-columns:1fr}.ov-item .ov-pic{aspect-ratio:16/9;min-height:0;border-left:none;border-top:1px solid var(--line);order:-1}}
.ov-item:hover{transform:translateY(-4px)}
/* Lange ubrytelige ord (f.eks. «S02E08_Wangensten_…») skal brytes i egen
   kolonne – aldri renne under bildekolonnen (punkt 03) */
.ov-item h3,.ov-item p{overflow-wrap:break-word;word-break:break-word}
.ov-item .no{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.ov-item .barcolor{position:absolute;left:0;top:0;bottom:0;width:6px;z-index:1}
.ov-item.o .barcolor{background:var(--orange)} .ov-item.b .barcolor{background:var(--blue)} .ov-item.l .barcolor{background:var(--lime)}
.ov-item h3{font-size:clamp(22px,2.5vw,28px);margin:10px 0 10px;letter-spacing:-.01em}
.ov-item p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.5}

/* Episodekort (design-review 02–04): bildet er ALLTID kvadratisk — fast
   220px 1:1-rute øverst til høyre (full bredde over teksten på mobil),
   object-fit:cover via .ov-pic img. Avspilleren ligger på egen
   full-bredde-rad UNDER tekst + bilde: da presser den verken bildet ut av
   form eller klipper teksten, og kortformen består. Samtykkeflaten har
   NØYAKTIG samme høyde som Spotify-iframen (152px), så kortet – og dermed
   sidehøyden – er identisk før og etter at embeds lastes. Det er viktig
   for punkt 04: høvestøv-laget (stov.js, fasit) måler sidehøyden én gang
   ved load; en flate høyere enn iframen fikk siden til å krympe når alle
   embeds ble lastet i samme økt, og footeren ble stående midt i støvlaget. */
.ov-item.episode{grid-template-columns:minmax(0,1fr) 232px}
.ov-item.episode .ov-body{padding-bottom:16px}
.ov-item.episode .spiller{grid-column:1/-1;margin:0 24px 24px}
@media (max-width:520px){
  .ov-item.episode{grid-template-columns:1fr}
  .ov-item.episode .spiller{margin:0 18px 18px}
}

/* ---------- Polaroid (episodekort) ----------
   Digitalt motstykke til Påls fysiske Instax-bilder. Ren CSS-ramme rundt
   det eksisterende 1:1-bildet: jevn kant topp/sider (11px ≈ 6 % av foto-
   bredden 178px), markant tykkere bunn (34px ≈ 19 %) til den håndskrevne
   captionen. To-lags skygge = tett kontaktskygge + diffus løfteskygge.
   Rotasjon og nål settes DETERMINISTISK per episode-indeks i render.js
   (CSS-variabler i inline style) – identisk ved hver build/reload.
   Holderen har nok luft (padding) til at rotasjon + nål aldri klippes av
   kortets overflow:hidden eller skaper horisontal scroll. Polaroiden har
   fast høyde uansett samtykketilstand, så sidehøyden er stabil (jf.
   støv/footer-fiksen, design-review punkt 04). */
.pol-holder{display:flex;align-items:flex-start;justify-content:center;padding:26px 14px 12px}
.polaroid{position:relative;margin:0;width:200px;flex:none;background:#fdfbf4;border-radius:3px;
  padding:11px 11px 34px;transform:rotate(var(--pol-rot,0deg));
  box-shadow:0 1px 2px rgba(36,31,24,.32), 0 16px 30px -12px rgba(36,31,24,.42)}
.pol-foto{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper-2)}
.pol-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pol-caption{position:absolute;left:11px;right:11px;bottom:2px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-family:"Caveat",cursive;font-weight:600;font-size:21px;line-height:1;
  color:#2b3340;white-space:nowrap;overflow:hidden}
/* Lange captions (gjestepod: «#<Vertshow>» med mellomrom) i mindre grad,
   med litt ekstra tegnbredde-slakk så hele vertshow-navnet alltid vises */
.pol-caption.lang{font-size:14px;letter-spacing:-.01em}
.nal{position:absolute;top:-14px;width:36px;height:36px;
  transform:translateX(-50%) rotate(var(--nal-rot,0deg));z-index:2;pointer-events:none}
.nal svg{width:100%;height:100%;display:block;overflow:visible}
@media (max-width:520px){
  .pol-holder{order:-1;padding:28px 12px 4px}
  .polaroid{width:min(230px,78%)}
}

/* ---------- Seriehero (episodeside) ---------- */
.serie-hero{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:clamp(24px,4vw,48px);align-items:center}
@media (max-width:640px){.serie-hero{grid-template-columns:1fr}}
.serie-cover{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2);aspect-ratio:1/1}
.serie-cover img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Consent-gatet avspilling (mønster: .consent-embed-ph fra hovestott) ----------
   .spiller er låst til 152px = Spotify-embedens høyde → null layout-skift
   når flaten byttes ut med iframen (se episodekort-kommentaren over). */
.spiller{height:152px;border-radius:14px;overflow:hidden}
.spiller iframe{display:block;width:100%;height:152px;border:0;border-radius:14px}
.spiller-flate{height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;
  padding:14px 20px;background:linear-gradient(135deg,#1b2a30,#0c2630);color:#eaf7fb;border-radius:14px;overflow:hidden}
.spiller-flate p{margin:0;font-size:13px;line-height:1.4;color:#cfe6ee;max-width:52ch}
.spiller-rad{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.spill-btn{appearance:none;border:none;cursor:pointer;font:inherit;font-weight:700;font-size:14px;color:#fff;
  background:#dd0079;padding:10px 17px;border-radius:999px;box-shadow:0 5px 0 #a40059;
  transition:transform .15s var(--ease-back),background .2s,box-shadow .15s}
.spill-btn:hover{transform:translateY(-2px);background:#c97be8;box-shadow:0 7px 0 #9b56c2}
.spill-btn:active{transform:translateY(2px);background:#8c8c8c;box-shadow:0 2px 0 #6e6e6e}
.spiller-husk{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:12.5px;color:#cfe6ee;cursor:pointer;user-select:none}
.spiller-husk input{accent-color:#dd0079;width:15px;height:15px;cursor:pointer}

/* ---------- Video-variant av avspillingsflaten (radioarkiv-teaser) ----------
   Boksen eier størrelsen (16:9, full kortbredde) – flate og iframe fyller
   den likt, så byttet ved samtykke er skiftfritt (jf. støv/footer). */
.spiller.video{height:auto;aspect-ratio:16/9}
.spiller.video iframe{height:100%;border:0}
.spiller.video .spiller-flate{align-items:center;justify-content:center;text-align:center;padding:20px}
.spiller.video .spiller-flate p{max-width:56ch}
.spiller.video .spiller-rad{justify-content:center}
.spiller-glyphs{display:flex;gap:7px;margin-bottom:2px}
.spiller-glyphs .glyph{width:30px;height:30px;filter:drop-shadow(0 3px 0 #00000033)}
.spiller-tittel{font-weight:800;font-size:clamp(18px,2.4vw,24px);letter-spacing:-.01em;color:#fff !important;margin:0}

/* ---------- BluesBrothers-teaser (radioarkivsiden) ---------- */
.bb-teaser{grid-column:1 / -1;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:clamp(30px,5vw,56px);max-width:760px}
.bb-teaser .no{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.bb-teaser h3{font-size:clamp(26px,3.5vw,40px);margin:12px 0 12px}
.bb-teaser p{margin:0 0 18px;color:var(--ink-2);line-height:1.55}
.bb-teaser .bb-note{margin:14px 0 0;font-family:var(--mono);font-size:13px;color:var(--ink-3)}

/* ---------- «Kommer snart» (radioarkivet er tomt ennå) ---------- */
.kommer{grid-column:1 / -1;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:clamp(30px,5vw,56px);max-width:640px}
.kommer .no{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.kommer h3{font-size:clamp(26px,3.5vw,40px);margin:12px 0 12px}
.kommer p{margin:0;color:var(--ink-2);line-height:1.55}
.kommer a{font-weight:700;border-bottom:2px solid var(--orange)}

/* ---------- Footer: tre kolonner i den forenklede lydenav-footeren ---------- */
.foot .ftop{grid-template-columns:1.3fr .8fr 1.4fr}
.foot .ftop>div:nth-child(3){transform:none}
@media (max-width:860px){.foot .ftop{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot .ftop{grid-template-columns:1fr}}