/* ─── News — post detail (/news/<slug>) ────────────────── */

/* Shared template for a single post at /news/<slug>. Editorial article layout
   in the house language: constrained prose body, full-bleed cover hero, mixed
   body blocks (paragraph / heading / image / quote / list). The post accent
   (--post-accent) is always the brand red. Every real photo
   sits in a clipping object-fit:cover frame for the .cfu-depth parallax.
   Markup: includes/post-content.php + includes/post-not-found.php */


/* ─── Page shell + per-post accent ───────────────────────── */

.news-post										{	margin: 0 calc(-1 * var(--shell-pad)) 0;
													--post-accent: var(--color-brand);
}


/* ─── Breadcrumb bar ─────────────────────────────────────── */

.news-post-crumbs								{	padding: 1.25rem var(--shell-pad) 0;
													background: transparent;
}


/* ─── Hero (copy + full-bleed cover) ─────────────────────── */

.news-post-hero									{	position: relative;
													padding-top: clamp(0.5rem, 2vw, 1.25rem);

	.cfu-triple-plus--hero-tl					{	top: clamp(0.5rem, 2vw, 1.25rem); }

	.news-post-hero-copy						{	max-width: var(--content-max); margin-inline: auto;
													padding: clamp(1.5rem, 4vw, 3rem) var(--shell-pad) clamp(2rem, 5vw, 3.5rem);
	}

	.news-post-hero-media						{	position: relative; margin: 0 auto; overflow: hidden;
													aspect-ratio: 16 / 9; max-height: 72vh;

		img										{	position: absolute; inset: 0;
													width: 100%; height: 100%;
													object-fit: cover; display: block;
		}
	}

	@media screen and (max-width: 700px)		{

		.news-post-hero-media					{	aspect-ratio: 16 / 9; }
	}
}

.news-post-meta									{	display: flex; flex-wrap: wrap; gap: 1.25em;
													margin: 0 0 1.5em;
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: var(--track-mono); text-transform: uppercase;

	.news-post-meta-cat							{	color: var(--post-accent); }
	.news-post-meta-date						{	color: var(--color-paper-low); }
}

.news-post-title								{	max-width: 22ch; }

.news-post-lede									{	margin: 1.25em 0 0; max-width: 60ch; }

.news-post-actions								{	display: flex; flex-wrap: wrap; gap: 0.65em; margin: 2em 0 0; }


/* ─── Body prose (constrained measure) ───────────────────── */

.news-post-body									{	max-width: 100ch; margin-inline: auto;
													padding: clamp(2.5rem, 6vw, 4.5rem) var(--shell-pad) clamp(3rem, 7vw, 5rem);

	> :first-child								{	margin-top: 0; }

	p											{	margin: 0 0 1.4em;
													font-size: var(--fs-4); line-height: 1.7; color: var(--color-paper-mute);
	}

	h2											{	margin: 2em 0 0.65em;
													font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem);
													font-weight: 600; line-height: 1.15; letter-spacing: -0.01em;
													color: var(--color-paper);
	}
}


/* ─── Body figure (clipping frame + caption) ─────────────── */

.news-post-figure								{	margin: clamp(2rem, 5vw, 3.5em) 0 clamp(1rem, 2vw, 1.5em);

	span										{	display: block; position: relative; overflow: hidden;
													aspect-ratio: 16 / 9;
	}

	img											{	position: absolute; inset: 0;
													width: 100%; height: 100%;
													object-fit: cover; display: block;
	}

	figcaption									{	margin-top: 0.9em;
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--color-paper-low);
	}
}


/* ─── Body carousel (wide scroll-snap strip) ─────────────── */

.news-post-carousel								{	width: min(var(--content-max), 94vw);
													margin: clamp(2.5rem, 6vw, 4rem) 0; margin-left: 50%;
													transform: translateX(-50%);

	.news-post-carousel-track					{	display: flex; align-items: flex-start; gap: clamp(0.75rem, 1.5vw, 1.25rem);
													overflow-x: auto; scroll-snap-type: x mandatory;
													scroll-padding-inline: var(--shell-pad);
													padding: 0 0 1rem; margin: 0; list-style: none;
													-webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
													scrollbar-width: thin; scrollbar-color: var(--post-accent) var(--color-ink-2);

		&::-webkit-scrollbar					{	height: 6px; }
		&::-webkit-scrollbar-track				{	background: var(--color-ink-2); border-radius: var(--radius-pill); }
		&::-webkit-scrollbar-thumb				{	background: var(--post-accent); border-radius: var(--radius-pill); }

		&:focus-visible							{	outline: 2px solid var(--post-accent); outline-offset: 4px; }
	}

	.news-post-carousel-slide					{	flex: 0 0 auto; scroll-snap-align: start;
													height: clamp(360px, 46vh, 520px); overflow: hidden;
													border-radius: var(--radius-sm); background: var(--color-ink-2);

		img										{	display: block; width: auto; height: 100%;
													object-fit: contain;
		}
	}

	figcaption									{	margin-top: 0.9em;
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--color-paper-low);
	}

	@media screen and (max-width: 900px)		{

		.news-post-carousel-slide				{	height: clamp(320px, 52vw, 460px); }
	}

	@media screen and (max-width: 600px)		{

		.news-post-carousel-slide				{	height: clamp(300px, 84vw, 420px); }
	}
}


/* ─── Body quote (accent left rule) ──────────────────────── */

.news-post-quote								{	margin: clamp(2rem, 5vw, 3.5em) 0;
													padding: 0.15em 0 0.15em 1.5em;
													border-left: 3px solid var(--post-accent);

	p											{	margin: 0;
													font-family: var(--font-display); font-size: clamp(1.35rem, 2.5vw, 1.85rem);
													font-weight: 500; line-height: 1.3; letter-spacing: var(--track-display);
													color: var(--color-paper);
	}

	cite										{	display: block; margin-top: 1em;
													font-family: var(--font-mono); font-size: 11px; font-style: normal;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--color-paper-low);
	}
}


/* ─── Body list (mono em-dash bullets) ───────────────────── */

.news-post-list									{	margin: 0 0 1.4em; padding: 0;
													list-style: none;

	li											{	position: relative; margin: 0 0 0.7em; padding-left: 1.6em;
													font-size: var(--fs-4); line-height: 1.6; color: var(--color-paper-mute);

		&::before								{	content: "\2014"; position: absolute; left: 0;
													font-family: var(--font-mono); color: var(--post-accent);
		}
	}
}


/* ─── Instagram backlink ─────────────────────────────────── */

.news-post-ig									{	margin: clamp(2rem, 5vw, 3.5em) 0 0;

	a											{	font-family: var(--font-mono); font-size: 12px; font-weight: 500;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--post-accent); text-decoration: none;

		span									{	display: inline-block;
													transition: transform var(--dur-base) var(--ease-out);
		}

		&:hover span							{	transform: translateX(0.3em); }
	}
}


/* ─── Mobile ─────────────────────────────────────────────── */

@media screen and (max-width: 650px)			{

	.news-post-actions							{	flex-direction: column; align-items: stretch;

		.btn									{	width: 100%; justify-content: center; }
	}
}