/**
 * Single blog post (single.php)
 *
 * Cream title block → full-bleed hero → one 800px reading column → recipe
 * strip, category/share bar, related row.
 *
 * Type follows the same Figma scale as the rest of the journal: display face
 * (IM Fell Double Pica) for the title and section headings, Roboto Condensed
 * for body copy, meta and labels. The article body is authored in Gutenberg,
 * so the prose rules below have to cover core blocks — headings, lists,
 * images, columns, tables — rather than a fixed set of classes.
 */

.dm-post {
	--post-measure: 800px;               /* the reading column, per the design */
	--post-ink: var(--dm-fg-default-primary);                 /* Semantics/fg/default/primary */
	--post-ink-2: var(--dm-fg-default-secondary);               /* Semantics/fg/default/secondary */
	background-color: var(--color-cream);           /* flat cream, same as the learn hero */
}

/* ---- Head: breadcrumb, meta, title ----------------------------------- */
.dm-post__head {
	padding-top: clamp(1rem, 2vw, 1.5rem);
	padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* Breadcrumb type comes from style.css (.breadcrumbs.text-forest); only the
   spacing below it belongs to this page. */
.dm-post__breadcrumb {
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.dm-post__intro {
	padding-inline: 16px;
	text-align: center;
}

.dm-post__meta {
	margin: 0;
	color: var(--post-ink-2);            /* Semantics/fg/default/secondary */
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
	font-size: 16px;                     /* body/md/regular */
	font-weight: 400;
	line-height: 140%;                   /* 22.4px */
}

.dm-post__meta-sep {
	margin-inline: 0.08rem;
	font-size: 1.7em;
	line-height: 0;
	vertical-align: -0.08em;
}

.dm-post__author {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Capped measure so a long title wraps to a balanced centred block rather than
   running the full page width; a short one still sits on one line. */
.dm-post__title {
	max-width: 1100px;
	margin: clamp(0.75rem, 1.5vw, 1.15rem) auto 0;
	color: var(--post-ink);
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	/* Figma heading/h1 — 60px/110%, -1.2px tracking (= -0.02em at 60px). */
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* ---- Title entrance -------------------------------------------------- *
 * assets/js/post-title.js sets .dm-title-anim on <html> from the document
 * head, before first paint, and clears it once the animation is staged. The
 * class is only ever added when the animation will actually run, so with JS
 * off, GSAP blocked or reduced motion asked for, none of this applies and the
 * head renders as authored.
 *
 * Hiding is opacity, not display — the title keeps its box, so nothing below
 * it moves when the reveal starts. */
.dm-title-anim .dm-post__title,
.dm-title-anim .dm-post__meta,
.dm-title-anim .dm-post__breadcrumb {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dm-title-anim .dm-post__title,
	.dm-title-anim .dm-post__meta,
	.dm-title-anim .dm-post__breadcrumb {
		opacity: 1;
	}
}

/* Word wrapper: keeps line breaks on word boundaries, so the reveal can never
   split a word across two lines as it walks through the heading. */
.dm-post__title-w {
	display: inline-block;
}

.dm-post__title-c {
	display: inline-block;
}

/* Typing caret: a slab of the current text colour that blinks while it waits
   for the next character.

   The element itself is zero-width and the bar is drawn by an absolutely
   positioned pseudo — the title is centre-aligned, so a caret with real width
   would re-centre the line every time it is inserted, moved or removed. With
   no width it never takes part in layout and the text cannot shift. */
.dm-post__caret {
	display: inline-block;
	position: relative;
	width: 0;
	height: 0.78em;
	vertical-align: -0.04em;
	animation: dm-caret-blink 0.9s steps(1, end) infinite;
}

.dm-post__caret::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.03em;
	width: 0.05em;
	background: currentColor;
}

/* Typing is done: hand the caret's visibility to GSAP for its final beat. */
.dm-post__caret.is-done {
	animation: none;
}

@keyframes dm-caret-blink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* ---- Hero image ------------------------------------------------------ */
/* Full-bleed: the image runs edge to edge regardless of the page container. */
.dm-post__hero {
	margin: 0;
	width: 100%;
	overflow: hidden;
	background: var(--color-forest, var(--dm-bg-default-tertiary));
	aspect-ratio: 2.15 / 1;
}

.dm-post__hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Body column ----------------------------------------------------- */
.dm-post__body {
	max-width: var(--post-measure);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4rem) 16px clamp(3rem, 6vw, 5rem);
}

.dm-post__content {
	color: var(--post-ink);
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
	font-size: 16px;                     /* body/md/regular */
	font-weight: 400;
	line-height: 140%;                   /* 22.4px */
}

/* ---- Prose: core blocks inside the article --------------------------- *
 * Authors write in Gutenberg, so these rules target the block output rather
 * than theme classes. Margins are collapsed onto a single owner per element
 * (top margin only) so a stray core/spacer between blocks does not stack with
 * a margin and open a gap the design does not have. */
.dm-post__content > * {
	margin-block: 0;
}

.dm-post__content p,
.dm-post__content ul,
.dm-post__content ol,
.dm-post__content table {
	margin-top: 1.15rem;
}

.dm-post__content > :first-child {
	margin-top: 0;
}

/* These posts are authored with core/spacer blocks scattered through the body —
   before images, between paragraphs, at the very top. The redesign gives every
   block its own margin, so those spacers only add unwanted gaps. Drop them all;
   spacing is owned by the margin rules above. */
.dm-post__content .wp-block-spacer {
	display: none;
}

.dm-post__content h2,
.dm-post__content h3,
.dm-post__content h4 {
	margin-top: clamp(2rem, 4vw, 3rem);
	color: var(--post-ink);
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.dm-post__content h2 {
	font-size: clamp(1.5rem, 2.2vw, 1.875rem);   /* 24 → 30px */
}

.dm-post__content h3 {
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);    /* 20 → 24px */
}

.dm-post__content h4 {
	font-size: 1.25rem;
}

/* The heading that opens the article should not push against the hero. */
.dm-post__content > h2:first-child,
.dm-post__content > h3:first-child {
	margin-top: 0;
}

.dm-post__content a {
	color: var(--post-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: opacity 0.18s ease;
}

.dm-post__content a:hover {
	opacity: 0.7;
}

.dm-post__content strong {
	font-weight: 700;
}

/* Tailwind's preflight strips list markers site-wide (ol,ul,menu{list-style:
   none}), so there is nothing to indent around — the list sits on the same
   left edge as the paragraphs. Items in these articles lead with a bold term
   ("Joven (Unaged):"), which does the marker's job on its own. */
.dm-post__content ul,
.dm-post__content ol {
	padding-left: 0;
}

.dm-post__content li {
	margin-top: 0.4rem;
}

/* Images stay inside the reading column — the old template pulled them out to
   full width over a blurred backdrop; the redesign keeps one clean measure. */
.dm-post__content figure,
.dm-post__content .wp-block-image,
.dm-post__content .wp-block-gallery {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.dm-post__content img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

.dm-post__content figcaption {
	margin-top: 0.6rem;
	color: color-mix(in srgb, var(--color-forest) 70%, transparent);
	font-size: 14px;
	line-height: 140%;
	text-align: left;
}

/* Key-point rows (core/columns): small type, generous gutters, tight to the
   column edges — the four-up "Adjust sweetness / Always use…" strip. */
.dm-post__content .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 2.5vw, 2rem);
	margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

.dm-post__content .wp-block-column {
	flex: 1 1 0;
	min-width: 150px;
	font-size: 14px;
	line-height: 140%;
}

/* Thin divider between columns, per the design — a rule on the inner edge of
   every column but the first, with padding so the text clears the line. The
   first column keeps its text flush to the reading column's left edge. */
.dm-post__content .wp-block-column + .wp-block-column {
	padding-left: clamp(1rem, 2.5vw, 2rem);
	border-left: 1px solid color-mix(in srgb, var(--color-forest) 22%, transparent);
}

.dm-post__content .wp-block-column > * {
	margin-top: 0;
}

.dm-post__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.dm-post__content td,
.dm-post__content th {
	padding: 0.6rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--color-forest) 16%, transparent);
	text-align: left;
	vertical-align: top;
}

.dm-post__content blockquote {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	padding-left: 1.25rem;
	border-left: 2px solid var(--post-ink);
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: 1.25rem;
	line-height: 1.3;
}

/* ---- Recipe strip ---------------------------------------------------- */
/* Cocktail photo on the left, forest panel on the right, both flush to the
   reading column. Equal halves, and the panel sets the height. */
.dm-post-recipe {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 400px;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	overflow: hidden;
	border-radius: 3px;
	background: var(--color-forest, var(--dm-bg-default-tertiary));
}

.dm-post-recipe__media {
	overflow: hidden;
}

.dm-post-recipe__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-post-recipe__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--dm-fg-default-white);
}

.dm-post-recipe__title {
	display: block; /* a <span>: module title, not a heading (SEO) */
	margin: 0;
	color: var(--color-sun, var(--dm-fg-accent-yellow));
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.5rem, 2.2vw, 1.875rem);
	line-height: 1.15;
}

.dm-post-recipe__text {
	margin: 0;
	color: var(--dm-fg-default-white);                         /* Semantics/fg/default/white */
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
	font-size: 16px;                     /* body/md/regular */
	font-weight: 400;
	line-height: 140%;
}

.dm-post-recipe__cta {
	margin-top: 0.35rem;
}

/* ---- Category + share bar -------------------------------------------- */
.dm-post-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding: 0.85rem 1.15rem;
	border-radius: 3px;
	background: var(--color-cream);                 /* warm band, a shade under the page */
}

.dm-post-bar__group {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.dm-post-bar__label {
	color: var(--post-ink);
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
	font-size: 14px;
	line-height: 140%;
}

/* Colours come from the shared map in category-badges.css. */
.dm-post-bar__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.7rem;
	border-radius: 4px;
	background: var(--cat-bg, var(--dm-fg-accent-yellow));
	color: var(--cat-fg, var(--dm-fg-default-primary));
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
	font-size: 12px;                     /* body/xs/strong */
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.18s ease;
}

.dm-post-bar__badge:hover {
	opacity: 0.85;
}

.dm-post-bar__socials {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* White disc, forest glyph — the footer's social treatment at bar scale. The
   exported icons carry fill="currentColor", so `color` drives the glyph. */
.dm-post-bar__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--dm-bg-default-white);
	color: var(--post-ink);
	line-height: 1;
	text-decoration: none;
}

.dm-post-bar__social svg {
	display: block;
	width: 15px;
	height: auto;
}

/* ---- Related articles ------------------------------------------------ */
/* Cards are .dm-jgrid__card from journal-grid.css — only the row around them
   is owned here, so the listing and this row can never drift apart. */
.dm-post-related {
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.dm-post-related__inner {
	padding-inline: 16px;
}

.dm-post-related__heading {
	display: block; /* a <span>: module title, not a heading (SEO) */
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
	color: var(--post-ink);
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	line-height: 1.15;
	text-align: center;
}

.dm-post-related__heading em {
	font-style: italic;
}

.dm-post-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.dm-post-related__cta {
	display: flex;
	justify-content: center;
	margin-top: clamp(2rem, 4vw, 3rem);
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 1023px) {
	.dm-post-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Third card would sit alone on a 2-up row; drop it rather than leave a
	   hole, since the row is decorative rather than a full listing. */
	.dm-post-related__grid > :nth-child(3) {
		display: none;
	}
}

@media (max-width: 767px) {
	.dm-post__hero {
		aspect-ratio: 4 / 3;
	}

	.dm-post__body {
		padding-top: clamp(2rem, 8vw, 2.5rem);
	}

	/* Figma heading-mobile/h1-M: 40px/110%, -0.8px (= -0.02em at 40px). */
	.dm-post__title {
		font-size: 40px;
	}

	/* Stack the recipe strip: photo on top, panel beneath. */
	.dm-post-recipe {
		grid-template-columns: 1fr;
	}

	.dm-post-recipe__media {
		aspect-ratio: 16 / 10;
	}

	.dm-post-bar {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Columns stack on phones — drop the vertical dividers and the padding
	   that cleared them, so no stray line hangs off a wrapped column. */
	.dm-post__content .wp-block-column + .wp-block-column {
		padding-left: 0;
		border-left: 0;
	}

	.dm-post-related__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.dm-post-related__grid > :nth-child(3) {
		display: block;
	}
}

/* ---- Small desktop (1024-1280) -------------------------------------- *
 * No board for the single post at this size; this follows the patterns the
 * boarded pages share:
 *   - head: breadcrumb py-16, then py-64 around a 60px title (All Villages
 *     2023:28734, Village 2024:29103); meta 16 above the title
 *   - hero: full bleed, 500 tall (Village 2024:29107)
 *   - body: the 800 column of the collection FAQ (2021:19479), py-80;
 *     editorial copy is body/lg 18px with 16 between paragraphs (Village
 *     story 2024:29109, PDP "What defines" 2021:28125); h2/h3/h4 step down
 *     h4 32 / h5 24 / h6 20; 4px corners on media
 *   - recipe strip: the featured-cocktail panel (1987:16234) at 800 - image
 *     half at 500/400, panel px-48 py-24, 40px italic yellow title, 18px
 *     copy, 32 apart
 *   - related: 52px heading 40 above three ui-article-cards (859:13125)
 *     32 apart, 40 to the button, py-80
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	/* ---- Head ---- */
	.dm-post__head {
		padding-top: 16px;
		padding-bottom: 64px;
	}

	/* Two classes so this outranks the inline px-4 utility; 16 under the
	   crumb row + the header's 64 top padding. */
	.dm-post__breadcrumb.breadcrumbs {
		padding-inline: 0;
		margin-bottom: 80px;
	}

	/* Breadcrumb as on every board: 8 between items, pipes full strength,
	   current page at 70% (style.css defaults to 0.4 / 0.5). */
	.dm-post__breadcrumb.breadcrumbs.text-forest li + *::before {
		opacity: 1;
		margin: 0 8px;
	}

	.dm-post__breadcrumb.breadcrumbs.text-forest li:last-child {
		opacity: 0.7;
	}

	.dm-post__intro {
		padding-inline: 0;
	}

	.dm-post__title {
		max-width: none;
		margin-top: 16px;
		font-size: 60px;                /* heading/h1 */
	}

	/* ---- Hero ---- */
	.dm-post__hero {
		aspect-ratio: auto;
		height: 500px;
	}

	/* ---- Body column ---- */
	.dm-post__body {
		padding: 80px 0;
	}

	.dm-post__content {
		font-size: 18px;                /* body/lg/regular */
		line-height: 1.4;
	}

	.dm-post__content p,
	.dm-post__content ul,
	.dm-post__content ol,
	.dm-post__content table {
		margin-top: 16px;
	}

	.dm-post__content h2,
	.dm-post__content h3,
	.dm-post__content h4 {
		margin-top: 48px;
		line-height: 1.2;
		letter-spacing: 0;
	}

	.dm-post__content h2 {
		font-size: 32px;                /* heading/h4 */
	}

	.dm-post__content h3 {
		font-size: 24px;                /* heading/h5 */
	}

	.dm-post__content h4 {
		font-size: 20px;                /* heading/h6 */
	}

	.dm-post__content > h2:first-child,
	.dm-post__content > h3:first-child {
		margin-top: 0;
	}

	.dm-post__content li {
		margin-top: 8px;
	}

	.dm-post__content figure,
	.dm-post__content .wp-block-image,
	.dm-post__content .wp-block-gallery {
		margin-top: 40px;
	}

	.dm-post__content img {
		border-radius: 4px;
	}

	.dm-post__content figcaption {
		margin-top: 8px;
	}

	.dm-post__content .wp-block-columns {
		gap: 32px;
		margin-top: 40px;
	}

	.dm-post__content .wp-block-column {
		font-size: 16px;                /* body/md/regular */
	}

	.dm-post__content .wp-block-column + .wp-block-column {
		padding-left: 32px;
		border-left-color: color-mix(in srgb, var(--dm-ext-black) 15%, transparent);
	}

	.dm-post__content td,
	.dm-post__content th {
		padding: 12px 16px;
		border-color: color-mix(in srgb, var(--dm-ext-black) 15%, transparent);
		font-size: 16px;
	}

	.dm-post__content blockquote {
		margin-top: 40px;
		padding-left: 24px;
		font-size: 24px;                /* heading/h5 */
		line-height: 1.2;
	}

	/* ---- Recipe strip ---- */
	.dm-post-recipe {
		align-items: stretch;
		min-height: 0;
		margin-top: 64px;
		border-radius: 4px;
	}

	.dm-post-recipe__media {
		aspect-ratio: 500 / 400;
	}

	.dm-post-recipe__panel {
		gap: 32px;
		padding: 24px 48px;
	}

	.dm-post-recipe__title {
		font-size: 40px;                /* heading/h3 */
		line-height: 1.1;
		letter-spacing: -0.01em;        /* -0.4px at 40px */
	}

	.dm-post-recipe__text {
		font-size: 18px;                /* body/lg/regular */
	}

	.dm-post-recipe__cta {
		margin-top: 0;
	}

	/* ---- Category + share bar ---- */
	.dm-post-bar {
		gap: 16px 24px;
		margin-top: 40px;
		padding: 16px 24px;
		border-radius: 4px;
	}

	.dm-post-bar__group {
		gap: 12px;
	}

	.dm-post-bar__badge {
		height: 24px;
		padding: 0 8px;
	}

	.dm-post-bar__socials {
		gap: 8px;
	}

	/* ---- Related articles ---- */
	.dm-post-related {
		padding-bottom: 80px;
	}

	.dm-post-related__inner {
		padding-inline: 0;
	}

	.dm-post-related__heading {
		margin-bottom: 40px;
		font-size: 52px;                /* heading/h2 */
		line-height: 1.1;
		letter-spacing: -0.02em;        /* -1.04px at 52px */
	}

	.dm-post-related__grid {
		gap: 32px;
	}

	.dm-post-related__cta {
		margin-top: 40px;
	}
}