/* ───────────────────────────────────────────────────────────────
   single.css — Single post template (one article page)
   ───────────────────────────────────────────────────────────────
   Only loaded on single posts (see `inc/assets.php`). LAYOUT ONLY:
   article-column width, vertical rhythm, related-card grid, etc.

   Typography, colors, quote-block styling and figcaption styling
   live in `theme.json` under `styles.blocks.core/post-content` and
   `styles.blocks.core/quote`. Change them there to update both the
   front-end and the editor preview at once.
   ─────────────────────────────────────────────────────────────── */

:root {
	/* Single articles use a tighter side gutter than the rest of the site so
	   the content sits closer to the screen edges (smaller side margins), and
	   wider column caps so on desktop the text runs more words per line and
	   the images are larger. */
	--blik-single-gutter: clamp(16px, 3vw, 40px);
	--blik-article-width: min(100% - (2 * var(--blik-single-gutter)), 820px);
	--blik-article-wide: min(100% - (2 * var(--blik-single-gutter)), 1080px);
}

/* Article header */
.blik-single-header {
	max-width: var(--blik-article-width);
	margin-left: auto;
	margin-right: auto;
	padding-top: clamp(28px, 5vw, 56px);
	padding-bottom: 0;
	box-sizing: border-box;
}

.blik-single-header .blik-article-eyebrow {
	align-items: baseline;
	gap: 6px;
	margin-bottom: var(--blik-spacing-md);
}

.blik-single-header .blik-tag-term::before {
	content: ' ';
}

.blik-single-header .wp-block-post-title {
	max-width: 100%;
	margin-top: var(--blik-spacing-md);
}

/* Header-zone rhythm (intro + meta). The generic body rule gives every
   paragraph a 1.35em bottom margin; override it for the intro so the lead
   sits tight above the date·author line. */
.blik-single-content .wp-block-post-content > p.is-style-intro {
	margin-top: 0;
	margin-bottom: var(--blik-spacing-md);
}

/* Article meta — date · author. Lives at the top of the article CONTENT now
   (below an optional Intro paragraph, above the body), so the author sees it
   while writing exactly as it appears when published. Add it to a post with
   the "BLIK Artikel" pattern. Typography matches the homepage eyebrow meta.
   Tight above (the intro provides the gap), clear space below before the body
   — independent of what the next block is. */
.blik-single-content .blik-article-meta {
	flex-wrap: wrap;
	gap: 0;
	margin-top: 0;
	margin-bottom: var(--blik-spacing-xl);
}

/* When a Credits line (e.g. "Fotografie: naam") directly follows the
   date·author meta, tuck it right underneath instead of after the meta's
   bottom gap; the credits line then carries the space down to the body. */
.blik-single-content .blik-article-meta:has(+ p.is-style-credits) {
	margin-bottom: 4px;
}

.blik-single-content .blik-article-meta + p.is-style-credits {
	margin-top: 0;
	margin-bottom: var(--blik-spacing-xl);
}

/* Date·author typography — shared by the single article AND the archive list
   rows (all stories / author / category / tag) so they read identically:
   uppercase expanded-sans, xs, weight 400, in the contrast colour. */
:is(.blik-single-content, .blik-archive-row) .blik-article-meta .wp-block-post-date,
:is(.blik-single-content, .blik-archive-row) .blik-article-meta .wp-block-post-date a,
:is(.blik-single-content, .blik-archive-row) .blik-article-meta .wp-block-post-author-name,
:is(.blik-single-content, .blik-archive-row) .blik-article-meta .wp-block-post-author-name a {
	font-family: var(--wp--preset--font-family--tt-commons-pro-expanded);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

/* Separator between date and author (the author block always follows the
   date). A CSS dot keeps the date·author pairing consistent whether the
   meta comes from the default post template or the BLIK Artikel pattern. */
:is(.blik-single-content, .blik-archive-row) .blik-article-meta .wp-block-post-author-name::before {
	content: "·";
	margin: 0 0.45em;
}

:is(.blik-single-content, .blik-archive-row) .blik-article-meta .wp-block-post-author-name a {
	color: var(--wp--preset--color--contrast);
	transition: color 0.2s ease;
	text-decoration: none;
}

:is(.blik-single-content, .blik-archive-row) .blik-article-meta .wp-block-post-author-name a:hover {
	color: var(--blik-color-red);
}

/* Featured image */
.blik-single-featured {
	max-width: var(--blik-article-width);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.blik-single-featured .wp-block-post-featured-image {
	margin: 0;
}

.blik-single-featured img {
	display: block;
	width: 100%;
	height: auto;
}

/* WordPress auto-adds `has-global-padding` on every constrained group
   when `useRootPaddingAwareAlignments` is on. That adds inner horizontal
   padding, which would make these article-column blocks visibly narrower
   than the WORD LID panel (which has no global padding). Zero the
   horizontal padding so every article-width block uses the full 640px
   column edge-to-edge. */
.blik-single-header,
.blik-single-featured,
.blik-single-content,
.blik-single-content .wp-block-post-content {
	padding-left: 0;
	padding-right: 0;
}

.blik-single-content {
	max-width: var(--blik-article-width);
	margin-left: auto;
	margin-right: auto;
	/* Kill the main flow block-gap above the content; the title->intro gap is
	   then just this padding, equal to the eyebrow->title gap (spacing-md). */
	margin-top: 0;
	padding-top: var(--blik-spacing-md);
	padding-bottom: clamp(32px, 6vw, 64px);
	box-sizing: border-box;
}

.blik-single-content .wp-block-post-content > * {
	max-width: 100%;
}

/* First content block (the intro) sits flush under the title gap — no extra
   block-gap margin above it. */
.blik-single-content .wp-block-post-content > :first-child {
	margin-block-start: 0;
}

/* `core/post-content` typography (paragraph/heading spacing, body color,
   figcaption) and `core/quote` styling (the red opening quote mark)
   live in theme.json. */


/* Membership block. This is an insertable `blik/word-lid` block, so
   editors can place it anywhere inside the article flow. */
.blik-word-lid-block,
.blik-single-content .wp-block-post-content > .blik-word-lid-block {
	max-width: var(--blik-article-width);
	width: 100%;
	/* Symmetric vertical margin so the block always has space above AND below,
	   regardless of the preceding block (e.g. a galerij). Adjacent margins
	   collapse in the flow layout, keeping the rhythm even. */
	margin: clamp(36px, 6vw, 64px) auto;
	background: var(--blik-color-red);
	box-sizing: border-box;
}

.blik-single-content .wp-block-post-content > .blik-word-lid-block {
	max-width: 100%;
}

.blik-word-lid-inner {
	padding: clamp(22px, 4vw, 32px);
	box-sizing: border-box;
}

.blik-word-lid-inner p {
	color: var(--wp--preset--color--base);
	margin: 0 0 var(--blik-spacing-lg);
	max-width: 100%;
}

/* WORD LID button inside the red panel uses the `is-style-blik-inverted`
   block style — white background, red text. Styling lives in theme.json
   (so it applies in the editor too). See inc/block-styles.php. */

/* Related story — `blik/lees-ook-card` block. If an editor does not
   pick an article, the block falls back to the latest other story. */
.blik-lees-ook {
	max-width: var(--blik-article-wide);
	width: 100%;
	margin: clamp(40px, 6vw, 72px) auto;
}

.blik-lees-ook-inner {
	box-sizing: border-box;
}

.blik-lees-ook-label {
	display: block;
	color: var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--tt-commons-pro-expanded);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1;
	text-transform: uppercase;
	margin: 0 0 var(--blik-spacing-lg) 0;
}

.blik-lees-ook-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
	color: inherit;
	text-decoration: none;
}

.blik-lees-ook-img {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.blik-lees-ook-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--blik-transition-slow);
}

.blik-lees-ook-card:hover .blik-lees-ook-img img {
	transform: scale(1.04);
}

.blik-lees-ook-body {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	display: grid;
	grid-auto-rows: max-content;
	row-gap: var(--blik-spacing-sm);
	align-content: start;
	min-width: 0;
	margin: 0;
	padding-top: 0;
}

.blik-lees-ook-body > * {
	margin: 0;
}

.blik-lees-ook-cat {
	display: block;
	color: var(--wp--preset--color--accent-1);
	margin-bottom: var(--blik-spacing-xs);
}

.blik-lees-ook-title {
	line-height: 1.1;
	max-width: 13em;
}

/* Short intro under the title — same body serif as the homepage featured
   summary, normal case, a touch smaller. The explicit font-family /
   text-transform / letter-spacing override any inherited meta styling that
   was rendering it as uppercase expanded-sans. */
.blik-lees-ook-summary {
	margin: 0;
	max-width: 32em;
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blik-lees-ook-meta {
	display: block;
}

/* `.blik-lees-ook-meta` typography lives in article-list.css alongside
   the homepage article-row meta — same rule styles both, so they stay
   in sync. */

@media (max-width: 700px) {
	:root {
		--blik-article-width: min(100% - 32px, 820px);
		--blik-article-wide: min(100% - 32px, 1080px);
	}

	.blik-single-header {
		padding-top: 24px;
	}

	.blik-lees-ook-inner,
	.blik-lees-ook-card {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--blik-spacing-lg);
	}

	.blik-lees-ook-img {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
	}

	.blik-lees-ook-body {
		grid-column: 1;
		grid-row: 2;
	}

	.blik-word-lid-inner {
		padding: 22px;
	}
}