/*
 * Single Post — Editorial Reading Page.
 *
 * Layout: full-width cover hero (title overlay) → centered reading column
 *   (max-width 680px) → author byline → related posts grid.
 * Hero gradient scrim: bottom-heavy dark overlay (same technique as shop-archive).
 * Reading column uses constrained layout (WP built-in max-width centering).
 * Related posts reuse .wpdl-blog-post-card from blog-archive.css.
 *
 * Tokens read:
 *   color.terracotta.500 / 300  — related card placeholders
 *   color.green.300 / 500 / 700 — related card placeholders, inline image bg
 *   semantic.color.text.primary — headings, body, byline name
 *   semantic.color.text.muted   — hero meta, byline role, related meta
 *   semantic.color.text.inverse — hero text (light on dark)
 *   semantic.color.bg.base      — page background
 *   semantic.color.border.base  — byline divider, related divider
 *   semantic.typography.display — hero title, lead, subheadings, related heading (Cormorant)
 *   semantic.typography.body    — hero meta/category, body, byline, related meta (Jost)
 *   space.1 – 11
 *   duration.base / easing.default
 */

/* ── Hero cover ───────────────────────────────────────────────────── */

.wpdl-single-post__hero.wp-block-cover {
	min-block-size: 26.25rem;
	margin-block: 0;
	align-items: flex-end;
}

/* Bottom-heavy gradient scrim — overrides WP's flat dim */
.wpdl-single-post__hero.wp-block-cover .wp-block-cover__background {
	background-image: linear-gradient(0deg, rgb(20 22 16 / 75%) 0%, rgb(20 22 16 / 20%) 60%);
	background-color: transparent;
	opacity: 1;
}

/* Placeholder bg for hero image */
.wpdl-single-post__hero.wp-block-cover .wp-block-cover__image-background {
	background-color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-single-post__hero-content.wp-block-group {
	padding-block: var(--wp--custom--space--9);
	margin-block: 0;
}

.wpdl-single-post__hero-category {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--inverse);
	margin-block: 0 var(--wp--custom--space--4);
}

.wpdl-single-post__hero-title.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.25rem, 0.6rem + 2.86vw, 2.75rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--inverse);
	margin-block: 0 var(--wp--custom--space--5);
	max-inline-size: 36rem;
	line-height: 1.15;
}

.wpdl-single-post__hero-meta {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 300;
	color: var(--wp--custom--semantic--color--text--inverse);
	opacity: 0.8;
	margin-block: 0;
}

/* ── Reading column ───────────────────────────────────────────────── */

.wpdl-single-post__reading-col.wp-block-group {
	max-inline-size: 42.5rem;
	margin-inline: auto;
	padding-block: var(--wp--custom--space--10);
	margin-block: 0;
}

.wpdl-single-post__lead {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(0.9375rem, 0.7rem + 1.07vw, 1.375rem);
	font-weight: 500;
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--8);
}

.wpdl-single-post__body {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.85;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0 var(--wp--custom--space--7);
}

.wpdl-single-post__subheading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.0625rem, 0.8rem + 1.19vw, 1.5rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: var(--wp--custom--space--8) var(--wp--custom--space--5);
}

.wpdl-single-post__inline-img.wp-block-image {
	margin-block: var(--wp--custom--space--8);
	min-block-size: 17.5rem;
	overflow: hidden;
	background-color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-single-post__inline-img.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Author byline ────────────────────────────────────────────────── */

.wpdl-single-post__byline-wrap.wp-block-group {
	max-inline-size: 42.5rem;
	margin-inline: auto;
	margin-block: 0 var(--wp--custom--space--10);
}

.wpdl-single-post__byline-divider.wp-block-separator {
	border: none;
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	margin-block: 0 var(--wp--custom--space--7);
	opacity: 1;
}

.wpdl-single-post__byline.wp-block-group {
	gap: var(--wp--custom--space--5);
	align-items: center;
	margin-block: 0;
}

.wpdl-single-post__author-avatar.wp-block-group {
	min-inline-size: 3rem;
	min-block-size: 3rem;
	flex: 0 0 3rem;
	border: 1px solid var(--wp--custom--semantic--color--text--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block: 0;
}

.wpdl-single-post__author-initials {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
	line-height: 1;
}

.wpdl-single-post__author-info.wp-block-group {
	gap: var(--wp--custom--space--1);
	margin-block: 0;
}

.wpdl-single-post__author-name {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

.wpdl-single-post__author-role {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
}

/* ── Related posts ────────────────────────────────────────────────── */

.wpdl-single-post__related.wp-block-group {
	margin-block: 0 var(--wp--custom--space--10);
}

.wpdl-single-post__related-divider.wp-block-separator {
	border: none;
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	margin-block: 0 var(--wp--custom--space--8);
	opacity: 1;
}

.wpdl-single-post__related-heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.25rem, 0.9rem + 1.49vw, 1.5rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--7);
}

.wpdl-single-post__related-grid.wp-block-group {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--custom--space--7);
	margin-block: 0;
}

/* Placeholder colours for related post cards */
.wpdl-single-post__related-grid > .wpdl-blog-post-card:nth-child(1) .wpdl-blog-post-card__img.wp-block-image { background-color: var(--wp--custom--semantic--color--accent--primary); }
.wpdl-single-post__related-grid > .wpdl-blog-post-card:nth-child(2) .wpdl-blog-post-card__img.wp-block-image { background-color: var(--wp--custom--semantic--color--brand--soft); }
.wpdl-single-post__related-grid > .wpdl-blog-post-card:nth-child(3) .wpdl-blog-post-card__img.wp-block-image { background-color: var(--wp--custom--semantic--color--text--muted); }

/* ── Tablet (< 64em / 1024px) ────────────────────────────────────── */

@media (width < 64em) {
	.wpdl-single-post__hero.wp-block-cover {
		min-block-size: 18.75rem;
	}

	.wpdl-single-post__related-grid.wp-block-group {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Mobile (< 40em / 640px) ─────────────────────────────────────── */

@media (width < 40em) {
	.wpdl-single-post__hero.wp-block-cover {
		min-block-size: 13.75rem;
	}

	.wpdl-single-post__reading-col.wp-block-group {
		padding-block: var(--wp--custom--space--8);
	}

	.wpdl-single-post__related-grid.wp-block-group {
		grid-template-columns: 1fr;
		gap: var(--wp--custom--space--5);
	}
}

/* =============================================================================
   Live template — single.html block overrides
   Block-class mismatches vs static P4 pattern:
     wp:post-title        → .wp-block-post-title  (NOT .wp-block-heading)
     wp:post-terms        → .wp-block-post-terms  (NOT plain paragraph)
     wp:post-author       → .wp-block-post-author (replaces custom avatar group)
     wp:post-featured-image → .wp-block-post-featured-image (in related cards)
     wp:post-content      → children styled generically within reading-col
   ============================================================================= */

/* ── Hero ─────────────────────────────────────────────────────────── */

/* Category (wp:post-terms) */
.wpdl-single-post__hero-category.wp-block-post-terms {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--inverse);
	margin-block: 0 var(--wp--custom--space--4);
}

.wpdl-single-post__hero-category.wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

/* Title (wp:post-title → .wp-block-post-title, not .wp-block-heading) */
.wpdl-single-post__hero-title.wp-block-post-title {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.25rem, 0.6rem + 2.86vw, 2.75rem);
	font-weight: 500;
	line-height: 1.15;
	color: var(--wp--custom--semantic--color--text--inverse);
	margin-block: 0 var(--wp--custom--space--5);
	max-inline-size: 36rem;
}

/* Meta flex group: author name + date */
.wpdl-single-post__hero-meta.wp-block-group {
	gap: var(--wp--custom--space--3);
	margin-block: 0;
}

.wpdl-single-post__hero-author.wp-block-post-author-name,
.wpdl-single-post__hero-date.wp-block-post-date {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 300;
	color: var(--wp--custom--semantic--color--text--inverse);
	opacity: 0.8;
	margin-block: 0;
}

/* Separator dot between author and date */
.wpdl-single-post__hero-date.wp-block-post-date::before {
	content: "·";
	margin-inline-end: var(--wp--custom--space--3);
	opacity: 0.6;
}

/* ── Reading column: style wp:post-content children generically ─────── */

.wpdl-single-post__reading-col .wp-block-post-content {
	margin-block: 0;
}

.wpdl-single-post__reading-col .wp-block-post-content > p,
.wpdl-single-post__reading-col .wp-block-post-content > .wp-block-paragraph {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.85;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0 var(--wp--custom--space--7);
}

/* First paragraph styled as lead (large italic) */
.wpdl-single-post__reading-col .wp-block-post-content > p:first-child,
.wpdl-single-post__reading-col .wp-block-post-content > .wp-block-paragraph:first-child {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(0.9375rem, 0.7rem + 1.07vw, 1.375rem);
	font-weight: 500;
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--8);
}

.wpdl-single-post__reading-col .wp-block-post-content h2.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.0625rem, 0.8rem + 1.19vw, 1.5rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: var(--wp--custom--space--8) var(--wp--custom--space--5);
}

.wpdl-single-post__reading-col .wp-block-post-content figure.wp-block-image {
	margin-block: var(--wp--custom--space--8);
	overflow: hidden;
	background-color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-single-post__reading-col .wp-block-post-content figure.wp-block-image img {
	width: 100%;
	display: block;
	object-fit: cover;
}

/* ── Author byline (wp:post-author) ──────────────────────────────── */

.wpdl-single-post__author.wp-block-post-author {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--5);
	margin-block: 0;
}

/* stylelint-disable-next-line no-descending-specificity -- author avatar img is different context from reading-col figure img */
.wpdl-single-post__author.wp-block-post-author .wp-block-post-author__avatar img {
	width: 3rem;
	height: 3rem;
	border-radius: 0;
	border: 0.0625rem solid var(--wp--custom--semantic--color--text--primary);
	display: block;
}

.wpdl-single-post__author.wp-block-post-author .wp-block-post-author__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--1);
}

.wpdl-single-post__author.wp-block-post-author .wp-block-post-author__name {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

/* ── Related posts: wp:query + post-template grid ───────────────── */

/* WP handles 3-col grid via columnCount:3 (--wp--style--columns:3) */
.wpdl-single-post__related-query .wp-block-post-template.is-layout-grid {
	gap: var(--wp--custom--space--7);
	list-style: none;
	padding: 0;
	margin: 0;
}

.wpdl-single-post__related-query .wp-block-post-template.is-layout-grid > li {
	margin: 0;
}

/* Featured image in related cards (wp:post-featured-image) */
/* stylelint-disable-next-line no-descending-specificity -- reading-col img rules are a different context */
.wpdl-blog-post-card .wp-block-post-featured-image.wpdl-blog-post-card__img {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-block: 0 var(--wp--custom--space--4);
	background-color: var(--wp--custom--semantic--color--border--subtle);
}

/* stylelint-disable-next-line no-descending-specificity -- reading-col img rules are a different context */
.wpdl-blog-post-card .wp-block-post-featured-image.wpdl-blog-post-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Category terms in related cards */
.wpdl-blog-post-card .wpdl-blog-post-card__meta.wp-block-post-terms {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--accent--primary);
	margin-block: 0 var(--wp--custom--space--2);
}

.wpdl-blog-post-card .wpdl-blog-post-card__meta.wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

/* Post title in related cards (wp:post-title → .wp-block-post-title) */
.wpdl-blog-post-card .wpdl-blog-post-card__title.wp-block-post-title {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(0.875rem, 0.75rem + 0.52vw, 1rem);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

.wpdl-blog-post-card .wpdl-blog-post-card__title.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-blog-post-card .wpdl-blog-post-card__title.wp-block-post-title a:hover {
	color: var(--wp--custom--semantic--color--accent--primary);
}

/* ── Responsive — live template ───────────────────────────────────── */

@media (width < 64em) {
	.wpdl-single-post__related-query .wp-block-post-template.is-layout-grid {
		--wp--style--columns: 2;
	}
}

@media (width < 40em) {
	.wpdl-single-post__related-query .wp-block-post-template.is-layout-grid {
		--wp--style--columns: 1;

		gap: var(--wp--custom--space--5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpdl-blog-post-card .wpdl-blog-post-card__title.wp-block-post-title a {
		transition: none;
	}
}