/**
 * BBQLovers — artikellayout och innehållstypografi.
 * Enqueue:as endast på single.php (se inc/assets.php — villkorlig laddning).
 *
 * VIKTIGT: post_content i äldre inlägg innehåller inline
 * style="font-family: arial, helvetica, sans-serif" på nästan varje textnod
 * (se docs/PHASE-0-BASELINE.md §5). Inline style-attribut vinner alltid över
 * vanliga CSS-regler i specificitet — den ENDA korrekta motmedicinen är
 * !important på typsnittsegenskaperna nedan. Detta ändrar ingenting i
 * databasen, bara hur det redan lagrade innehållet visas.
 */

.article-header {
	padding-block: var(--space-xl) var(--space-lg);
	background: var(--color-charcoal);
	color: var(--color-text-invert);
}
.article-header .breadcrumb,
.article-header .breadcrumb a { color: var(--color-ash-light); }
.article-header__category {
	display: inline-block;
	background: var(--color-ember);
	color: var(--color-text-invert);
	font-size: var(--step--1);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.25em 0.75em;
	border-radius: var(--radius);
	text-decoration: none;
	margin-bottom: var(--space-sm);
}
.article-header__title {
	font-size: var(--step-4);
	max-width: var(--content-width);
}
.article-header__excerpt {
	font-size: var(--step-1);
	color: var(--color-ash-light);
	max-width: var(--content-width);
	font-family: var(--font-body);
	font-weight: 400;
}
.article-header__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-lg);
	font-size: var(--step--1);
	color: var(--color-ash-light);
}
.article-header__meta > * { display: flex; align-items: center; gap: 0.35em; }

.article-hero {
	/* width:100% + margin-inline:auto krävs uttryckligen: när
	   aspect-ratio kombineras med max-height på en vanlig blocklåda utan
	   egen bredd, räknar webbläsaren ut en SMALARE bredd (härledd från
	   max-height/kvoten) så fort den naturliga aspect-ratio-höjden hade
	   överskridit max-height — det händer på i princip alla skärmar
	   bredare än ~910px vid 16:9 och 32rem. Utan explicit bredd hamnar den
	   smalare lådan vänsterjusterad (standardbeteendet för en blocklåda),
	   INTE centrerad — upptäckt 2026-09-13 (bilden "låg åt vänster").
	   width:100% tvingar bredden att alltid följa containern; kvoten
	   respekteras ändå upp till max-height eftersom object-fit:cover på
	   bilden (nedan) beskär resten. margin-inline:auto är ett skyddsnät om
	   bredden ändå någon gång blir smalare än containern. */
	width: 100%;
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	max-height: 32rem;
	overflow: hidden;
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }

.article-layout {
	display: grid;
	gap: var(--space-2xl);
	padding-block: var(--space-2xl);
	/* KRITISKT: utan en explicit minmax(0, ...) spårstorlek blåser CSS
	   Grids implicita "auto"-kolumn upp sig till innehållets min-content-
	   bredd (t.ex. en bred <table> eller ett långt ord i brödtexten)
	   istället för att respektera tillgänglig bredd — även med bara EN
	   kolumn. Upptäckt och verifierat under responsiv QA 2026-09-12 på en
	   lång artikel med tabeller (se PERFORMANCE-BEFORE-AFTER.md): hela
	   sidan blåstes ut till 407px på en 360px-viewport. minmax(0, 1fr)
	   tvingar spåret att respekera containerns bredd; eventuellt för
	   brett innehåll (som en tabell) får då själv hantera sin overflow
	   istället för att expandera hela layouten. */
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
	.article-layout {
		grid-template-columns: minmax(0, var(--content-width)) minmax(240px, 320px);
		justify-content: center;
	}
}

/* ---- Brödtext ---- */
.article-body {
	font-size: var(--step-1);
	line-height: var(--leading-body);
}

/* Neutralisera legacy inline-styling — se kommentar i filhuvudet. */
.article-body,
.article-body * {
	font-family: var(--font-body) !important;
	color: inherit !important;
}
.article-body [style*="font-size"] {
	font-size: inherit !important;
}

/* Äldre inlägg (se filhuvudet) omsluter ofta hela meningar — ibland hela
   stycken — i <strong><em>, en vanlig skrivvana från tidiga bloggåren.
   Resultatet blir att nästan all text "skriker" på en gång, vilket gör att
   ingenting faktiskt sticker ut. Dämpar tyngden en aning (700 → 600)
   istället för att ta bort betoningen helt — rör aldrig det lagrade
   innehållet, bara hur mycket vikt <strong> får vid utmatning. */
.article-body strong,
.article-body b {
	font-weight: 600;
}

.article-body > * + * { margin-top: var(--space-md); }

/* Ingress — första brödtextstycket, oavsett vad som står före det (äldre
   inlägg börjar ofta med en upprepad rubrik som <h2>, se kommentar högre
   upp i filen). Ger även rena textväggar från gamla inlägg en tydlig,
   redaktionell startpunkt utan att röra det lagrade innehållet. */
.article-body > p:first-of-type {
	font-size: var(--step-2);
	line-height: var(--leading-heading);
	color: var(--color-text);
	font-weight: 500;
}
.article-body h2 {
	font-size: var(--step-3);
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-line);
}
.article-body > h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.article-body h3 {
	font-size: var(--step-2);
	margin-top: var(--space-xl);
}
.article-body p { max-width: var(--content-width); }
.article-body ul,
.article-body ol {
	max-width: var(--content-width);
	padding-left: 1.4em;
}
.article-body li + li { margin-top: var(--space-xs); }
.article-body a {
	color: var(--color-ember-dark);
	text-decoration-thickness: from-font;
}
.article-body img,
.article-body figure {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: var(--radius-lg);
	margin-block: var(--space-lg);
}
.article-body figcaption {
	font-size: var(--step--1);
	color: var(--color-ash);
	margin-top: var(--space-xs);
	font-style: italic;
}
.article-body blockquote {
	margin: var(--space-xl) 0;
	padding: var(--space-lg);
	background: var(--color-paper-warm);
	border-left: 4px solid var(--color-ember);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-family: var(--font-display) !important;
	font-size: var(--step-2);
	font-style: italic;
	font-weight: 500; /* matchar den självhostade Fraunces italic-filen (endast vikt 500 finns), undviker syntetisk kursivering */
}
/* Bred tabell scrollar inuti sin egen container istället för att tvinga
   ut hela sidans layout (se kommentaren vid .article-layout ovan). */
.article-body .table-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.article-body table {
	width: 100%;
	max-width: var(--content-width);
	border-collapse: collapse;
	font-size: var(--step--1);
}
.article-body th,
.article-body td {
	padding: var(--space-sm);
	border-bottom: 1px solid var(--color-line);
	text-align: left;
}
.article-body th { font-weight: 700; }

/* ---- Receptkort — auto-detekterat ingrediens-/instruktionsavsnitt ----
   Genereras av bbqlovers_core_render_recipe_card() i bbqlovers-core.
   Tillfälligt begränsat till ett testinlägg, se den filen. */
.recipe-card {
	display: grid;
	gap: var(--space-xl);
	max-width: var(--content-width);
	margin-block: var(--space-xl);
}
.recipe-card__ingredients,
.recipe-card__instructions {
	background: var(--color-paper-warm);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
}
.recipe-card__title {
	font-size: var(--step-1) !important;
	margin: 0 0 var(--space-md) !important;
	padding: 0 !important;
	border: none !important;
}
.recipe-card__ingredient-list,
.recipe-card__step-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	counter-reset: recipe-step;
}
.recipe-card__ingredient,
.recipe-card__step {
	background: var(--color-paper);
	border-radius: var(--radius);
	border: 1px solid var(--color-line);
}
.recipe-card__step { counter-increment: recipe-step; }
.recipe-card__ingredient label,
.recipe-card__step label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	cursor: pointer;
	font-size: var(--step-0);
	line-height: var(--leading-heading);
}
.recipe-card__step label {
	counter-increment: none;
}
.recipe-card__step label::before {
	content: counter(recipe-step);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--color-ember);
	color: var(--color-text-invert);
	font-size: var(--step--1);
	font-weight: 700;
	margin-top: 0.1em;
}
.recipe-card__checkbox {
	flex-shrink: 0;
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.2em;
	accent-color: var(--color-ember);
	cursor: pointer;
}
.recipe-card__step .recipe-card__checkbox {
	/* Numret ovan fungerar redan som visuell markör — kryssrutan flyttas
	   efter texten för steg, så numret förblir det första man ser. */
	order: 2;
	margin-left: auto;
	margin-top: 0.3em;
}
.recipe-card__ingredient:has(.recipe-card__checkbox:checked),
.recipe-card__step:has(.recipe-card__checkbox:checked) {
	background: var(--color-paper-warm);
	border-color: var(--color-line);
}
.recipe-card__ingredient:has(.recipe-card__checkbox:checked) span,
.recipe-card__step:has(.recipe-card__checkbox:checked) span {
	color: var(--color-ash) !important;
	text-decoration: line-through;
	text-decoration-color: var(--color-ash);
}

/* ---- Recensionsomdöme — auto-detekterat avslutande omdöme i recensioner
   ("Slutomdöme"/"Slutsats"/"Betyg"/"Sammanfattning") ----
   Genereras av bbqlovers_core_render_review_verdict() i bbqlovers-core.
   Medvetet en helt annan visuell behandling än receptkortet — detta är
   en enda markerad "sista ordet"-ruta, ingen avbockningsbar checklista.
   Tillfälligt begränsat till ett testinlägg, se den filen. */
.review-verdict {
	max-width: var(--content-width);
	margin-block: var(--space-2xl);
	padding: var(--space-xl);
	background: var(--color-charcoal);
	color: var(--color-text-invert);
	border-radius: var(--radius-lg);
	border-left: 4px solid var(--color-ember);
}
.review-verdict > * + * { margin-top: var(--space-md); }
.review-verdict h2 {
	font-size: var(--step-2) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	color: var(--color-ember-hot);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.review-verdict p {
	color: var(--color-text-invert) !important;
	max-width: none;
}
.review-verdict strong { color: var(--color-text-invert) !important; }

/* Faktaruta / tipsbox (block pattern-vänliga klasser för nytt innehåll) */
.article-body .bbq-callout {
	max-width: var(--content-width);
	padding: var(--space-lg);
	background: var(--color-paper-warm);
	border-radius: var(--radius-lg);
	border-left: 4px solid var(--color-ember);
}
.article-body .bbq-callout__title {
	font-weight: 700;
	margin-bottom: var(--space-xs);
	color: var(--color-ember-dark);
}

/* ---- Innehållsförteckning (endast om ≥3 H2 finns i innehållet) ---- */
.article-toc {
	background: var(--color-paper-warm);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	max-width: var(--content-width);
}
.article-toc__title { font-weight: 700; margin-bottom: var(--space-sm); }
.article-toc ol { margin: 0; padding-left: 1.2em; font-size: var(--step--1); }
.article-toc li + li { margin-top: var(--space-2xs); }

/* ---- Sidokolumn ---- */
.article-sidebar { display: flex; flex-direction: column; gap: var(--space-xl); }

/* ---- Delning, författare, relaterat ---- */
.article-share {
	display: flex;
	gap: var(--space-sm);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-line);
	max-width: var(--content-width);
}
.article-share a {
	width: 2.25rem; height: 2.25rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--color-paper-warm);
	color: var(--color-text);
}

.author-box {
	display: flex;
	gap: var(--space-md);
	align-items: flex-start;
	background: var(--color-paper-warm);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	max-width: var(--content-width);
}
.author-box img { width: 3rem; height: 3rem; border-radius: 50%; flex-shrink: 0; }
.author-box__name { font-weight: 700; }
.author-box__bio { font-size: var(--step--1); color: var(--color-ash); }

.related-grid {
	max-width: var(--content-width);
}