/* ============================================================
   Blog — deltas oven på behandling.css, symptom.css og sider.css.
   Loades kun på /blog/ og på blogindlæg (handle: zency-blog).

   Filen ejer KUN det de delte moduler ikke dækker:
     1 · billedbanken under heroen
     2 · video-embeddets ramme
     3 · arkivets flade
     4 · læsebredden på artikelspalten
     5 · metabjælkens tredje felt
     6 · kildeblokken nederst i artiklen

   Alt andet på siderne er eksisterende komponenter — .zs-hero, .zs-chips,
   .zs-pager, .zs-tom, .zb-article__grid, .zb-toc, .zb-meta, .zency-article,
   .zb-cardgrid, .zb-related og .zb-author.

   Kun var(--…). Alt inde i .zency-article bærer .zency-article i selektoren,
   fordi prose-liftets efterkommer-selektorer (0,1,1) ellers vinder.
   ============================================================ */


/* ============================================================
   1 · TOPBILLEDE — .zbl-media
   ------------------------------------------------------------
   Heroen og artiklen er begge cream. Uden en synlig flade imellem løber de
   sammen til ét langt felt, og topbilledet ville se ud som om det svævede.
   Sage-50 giver kanten uden at bryde den varme palette.

   Fast 16:9 frem for billedets eget forhold: featured images på tværs af de 16
   indlæg spænder fra kvadratiske til brede, og en artikelforside der skifter
   højde fra indlæg til indlæg får hele siden til at hoppe.
   ============================================================ */
.zbl-media {
	background: var(--color-sage-50);
	padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}
.zbl-media__figure { margin: 0; }
.zbl-media__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius-xl);
	background: var(--color-sage-100);
}


/* ============================================================
   2 · VIDEO-EMBED — .zbl-embed
   ------------------------------------------------------------
   Kun 2716 har videoer (syv øvelser, som meta-titlen lover). Wrapperen holder
   forholdet, så iframen ikke kollapser til 150px, og runder hjørnerne som
   .z-figure gør ved billeder — så en video læses som samme slags element.
   ============================================================ */
.zency-article .zbl-embed {
	position: relative;
	margin: 1.9rem 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--color-sage-50);
}
.zency-article .zbl-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ============================================================
   3 · ARKIVETS FLADE — .zbl-arkiv
   ------------------------------------------------------------
   .zb-card er hvidt. På cream ville kortene være en svag tone fra baggrunden;
   sage-50 giver dem den samme kant de har i .zb-grid. Sektionen under
   (.zb-related med de fire store guides) er cream, så de to alternerer.
   ============================================================ */
.zbl-arkiv {
	background: var(--color-sage-50);
	padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}
/* .zs-chips ejer selv sin bundmargin — her skal den bare have luft til H2'en. */
.zbl-arkiv__chips { margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }


/* ============================================================
   4 · LÆSEBREDDE — artikelspalten
   ------------------------------------------------------------
   .zb-article__grid--info kollapser booking-kolonnen og giver hele
   1200px-sporet til brødteksten. Det er rigtigt for en symptomside med
   faktabokse, men en artikel bliver ulæselig ved ~110 tegn pr. linje.

   46rem ≈ 70 tegn i .zency-article's brødtekst. Ved ≥1280px cappes selve
   grid-sporet og de to kolonner centreres i wrappen, så indholdsfortegnelsen
   bliver ved med at flugte med teksten i stedet for at efterlade et dødt felt.
   (0,2,0) slår symptom.css' (0,1,0) uanset kildeorden.
   ============================================================ */
.zbl .zb-article__main {
	width: 100%;
	max-width: 46rem;
	margin-inline: auto;
}
@media (min-width: 1280px) {
	.zbl .zb-article__grid--info {
		grid-template-columns: 210px minmax(0, 46rem);
		justify-content: center;
	}
	.zbl .zb-article__main { margin-inline: 0; }
}


/* ============================================================
   5 · METABJÆLKEN — tre felter i stedet for to
   ------------------------------------------------------------
   Blogindlæg har en byline. Modulet er bygget til to felter uden ombrydning,
   så et tredje ville skubbe datoen ud over kanten på 390px.
   ============================================================ */
.zbl .zb-meta {
	flex-wrap: wrap;
	justify-content: flex-start;
}
.zbl .zb-meta a {
	color: var(--color-sage-700);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--color-sage-300);
}
.zbl .zb-meta a:hover,
.zbl .zb-meta a:focus {
	color: var(--color-olive);
	text-decoration-color: var(--color-olive);
}
.zbl .zb-meta a:focus-visible {
	outline: 2px solid var(--color-sage-500);
	outline-offset: 2px;
}


/* ============================================================
   6 · KILDER — .zb-kilder
   ------------------------------------------------------------
   Kildeangivelser er redaktionelt indhold, og på sundhedsstof er de en del af
   troværdigheden. Resolveren hejser dem ud af brødtekstflowet og samler dem
   her, nederst i artiklen og tydeligt adskilt.

   Ingen eksisterende komponent passede: .z-callout er en oliven-markeret NOTE
   (oliven er handling), og .zby-panel ville kræve hele by.css. Blokken er derfor
   ny — men bygget af de samme dele som .zby-panel: sage-50 flade, sage-200 kant,
   --radius-xl. Skal en anden artikelside bruge den, hører den hjemme i
   behandling.css; indtil da bor den her.

   ⚠ Alt er scopet med .zency-article, fordi prose-liftets efterkommer-regler
   (0,1,1) ellers vinder over en enkelt klasse (0,1,0) — også over .z-eyebrow,
   som .zency-article p ville overskrive på font og størrelse.
   ============================================================ */
.zency-article .zb-kilder {
	margin: 2.75rem 0 0;
	padding: clamp(1.1rem, 0.9rem + 1vw, 1.5rem) clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
	background: var(--color-sage-50);
	border: 1px solid var(--color-sage-200);
	border-radius: var(--radius-xl);
}

/* Labelen er en eyebrow — den ene tilladte versaltekst. Egenskaberne gentages
   her, fordi .z-eyebrow alene (0,1,0) taber mod .zency-article p (0,1,1). */
.zency-article .zb-kilder__h,
.zency-article .zb-kilder h2,
.zency-article .zb-kilder h3,
.zency-article .zb-kilder h4 {
	display: block;
	margin: 0 0 0.75rem;
	padding-bottom: 0;
	font-family: var(--font-dosis);
	font-weight: 700;
	font-size: 0.75rem;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-sage-500);
}
/* Prose-liftets h2 har en 56×3px sage-streg under sig. Den hører til en
   sektionsoverskrift, ikke til en label inde i et kort. */
.zency-article .zb-kilder h2::after { display: none; }

/* Sidste element i kortet skal ikke efterlade luft under sig. */
.zency-article .zb-kilder__liste > *:last-child { margin-bottom: 0; }

.zency-article .zb-kilder p,
.zency-article .zb-kilder li {
	font-size: 0.9375rem;
	line-height: 1.6;
}
.zency-article .zb-kilder p { margin: 0 0 0.5rem; }
.zency-article .zb-kilder p:last-child { margin-bottom: 0; }
.zency-article .zb-kilder ul { margin: 0; gap: 0.45rem; }
.zency-article .zb-kilder ul li::before { top: 0.55em; width: 5px; height: 5px; }
/* En rå kilde-URL er lang. Den må hellere brække end skubbe kortet ud over kanten. */
.zency-article .zb-kilder a { overflow-wrap: anywhere; }

/* ============================================================
   Lodret rytme — samme fire tokens som by.css §13, behandling.css §12,
   forside.css, behandler.css og bookside-critical.css §6 (rytme-audit
   2026-09-05, Mortens go på den samlede mockup). Ret tallet HER, aldrig i
   den enkelte regel.
     pair     overskrift → undertekst              12 · 14 · 16 · 16
     break    overskriftsgruppe → indhold/knap     32 · 32 · 36 · 40
     section  luft øverst/nederst i hver sektion   48 · 55 · 65 · 80
     (bredder 390 · 768 · 1024 · 1440)
   Målt 4/9: arkiv 64/42, artikel 64/64, relaterede 56/56, forfatter 64; chips 20, relaterede kort 33. Topbillede-båndet (.zbl-media) er bevidst uændret.
   ============================================================ */
.zbl{--zbl-pair:clamp(0.75rem,0.5rem + 0.8vw,1rem);--zbl-break:clamp(2rem,1.2rem + 1.6vw,2.5rem);--zbl-section:clamp(3rem,1.5rem + 4vw,5rem)}
.zbl .zbl-arkiv,.zbl .zb-article,.zbl .zb-related{padding-block:var(--zbl-section)}
.zbl .zb-author{padding-bottom:var(--zbl-section)}
.zbl .zbl-arkiv__chips{margin-top:var(--zbl-break)}
.zbl .zb-related .zb-cardgrid{margin-top:var(--zbl-break)}