/*
 * The news post's templates (inc/news-templates.php) - loaded on a news post
 * only, after the design system, whose tokens it uses and never redefines.
 *
 *   .cd-main--article       templates/single.html            the everyday story
 *   .cd-main--photo         templates/news-photo-story.html  the story in pictures
 *   .cd-main--announcement  templates/news-announcement.html a poster and its lines
 *   .cd-main--feature       templates/news-feature.html      the long read
 *
 * Every one spans the page's own width - the header's and the footer's - and
 * sets the picture beside the words rather than above them: the title and its
 * facts across the top, then the photograph on the left and the text on the
 * right; the Feature puts its photograph beside the title in the ink hero.
 * The same markup serves both sites; only the words differ.
 */

/* ── The meta line: kind · date · reading time · photographs ─────────── */

.cd-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--cd-text-2);
}

/* Each fact behind its icon, so a wrapped line never starts on a separator. */
.cd-post__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

.cd-post__icon {
	flex: none;
	opacity: 0.75;
}

/* The kind as the cards carry it: its own colour, white capitals. */
.cd-post__kind {
	padding: 5px 9px;
	border-radius: 3px;
	background: var(--cd-kind, var(--cd-ink));
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* The date used to be a block of its own under the title (core post-date);
   in the line it keeps the line's type and baseline. */
.cd-post .cd-post__meta .cd-post__date {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
}

/* ── The photograph's frame ───────────────────────────────────────────
   Whole, never cropped, never drawn larger than its file, on ink filled
   with a blurred copy of itself: a portrait poster and a landscape photo
   both look placed rather than letterboxed. */

.cd-post__frame {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 32px 0 0;
	padding: clamp(10px, 1.6vw, 20px);
	border-radius: 16px;
	background: var(--cd-ink);
}

.cd-post__backdrop {
	position: absolute;
	inset: -12%;
	z-index: -1;
	width: 124%;
	height: 124%;
	max-width: none;
	object-fit: cover;
	filter: blur(32px) saturate(1.15);
	opacity: 0.6;
	pointer-events: none;
}

/* Dark mode dims a decorative image inside a section (comdata.css); the
   blurred copy keeps its blur, dimmed the same way. */
html[data-cd-theme="dark"] .cd-post__frame .cd-post__backdrop {
	filter: blur(32px) saturate(0.8) brightness(0.8);
}

/* A kind's ink can be as dark as the dark page (Milestone's is): a hairline
   keeps the chip's edge. */
html[data-cd-theme="dark"] .cd-post__kind {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.cd-post__frame .cd-post__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
}

/* The largest a post's pictures are ever drawn (owner, 2026-10-01: "a max
   size of image, so it won't be that big"): the post's own photograph 420px
   tall at most, in a column 480px wide at most (560 in a photo story). */
.cd-post__frame--side .cd-post__img,
.cd-post__frame--poster .cd-post__img,
.cd-post__frame--hero .cd-post__img {
	max-height: min(52vh, 420px);
}

.cd-post__frame--column .cd-post__img {
	max-height: min(70vh, 560px);
}

.cd-post__frame--wide .cd-post__img {
	max-height: min(78vh, 720px);
}

@media (max-width: 600px) {
	.cd-post__frame {
		padding: 8px;
		border-radius: 12px;
	}
}

/* ── The page: the title across it, then the picture with the story
   around it ───────────────────────────────────────────────────────────
   The picture on the left, the story beside it and then on under it across
   the page - as the live site's news posts set theirs (a figure 42% wide,
   floated). It stays where it is when the page scrolls. */

/* The flow layout's gaps off (weightless, so each part keeps its own). */
:where(.cd-post__top, .cd-post__layout, .cd-post__side) > * {
	margin-block-start: 0;
}

.cd-post__top .cd-post__title {
	max-width: calc(30 * var(--cd-ch-display, 0.6em));
	font-size: clamp(32px, 3.4vw, 50px);
	text-wrap: balance;
}

.cd-post__layout {
	display: flow-root;
	margin-top: clamp(28px, 3.2vw, 44px);
}

.cd-post__side {
	float: left;
	width: min(42%, 480px);
	margin: 6px clamp(28px, 4vw, 56px) 24px 0;
}

.cd-main--photo .cd-post__side {
	width: min(48%, 560px);
}

.cd-main--announcement .cd-post__side {
	width: min(40%, 460px);
}

/* A story with no picture: the text alone. */
.cd-post__layout:not(:has(.cd-post__frame)) > .cd-post__side {
	display: none;
}

.cd-post__side .cd-post__frame {
	margin: 0;
}

/* Core gives the post-content block its own formatting context (display:
   flow-root), which would keep the whole story in a column beside the
   picture; as a plain block, its lines wrap around the picture and run on
   under it. */
.cd-post .cd-post__layout > .cd-post__body {
	display: block;
	margin: 0;
}

/* The lines run to the page's edge, beside the picture and under it; the
   prose measure would stop them short of both. */
.cd-post__layout .cd-post__body :is(p, ul, ol, h2, h3, h4, blockquote) {
	max-width: none;
}

/* Each list item, a quote, a video or a lone image keeps a box of its own
   beside the picture, so a bullet or a rule never slips under it - item by
   item, so a list that starts beside the picture runs on under it at the
   page's width. */
.cd-post__layout .cd-post__body :is(li, blockquote, .wp-block-embed, .wp-block-image:not(.wp-block-gallery .wp-block-image)) {
	display: flow-root;
}

/* The gallery, and its label, start under the picture, across the page. */
.cd-post__layout .cd-post__body :is(.cd-post__gallery, h2:has(+ .cd-post__gallery)) {
	clear: both;
}

/* The opening paragraph, a size up, as the lead. */
.cd-post__layout > .cd-post__body > p:first-child {
	font-size: 19px;
	line-height: 1.65;
}

/* A story that is only its picture (a poster, a greeting - the body class
   cd-post--picture-only, inc/news-templates.php): the picture, whole and
   larger, under the title. */
.cd-post--picture-only .cd-post__layout > .cd-post__side {
	float: none;
	width: auto;
	margin: 0;
}

.cd-post--picture-only .cd-post__layout .cd-post__frame {
	width: fit-content;
	max-width: 100%;
}

.cd-post--picture-only .cd-post__layout .cd-post__frame .cd-post__img {
	max-height: min(75vh, 720px);
}

/* ── Announcement: a few lines, set larger ──────────────────────────── */

.cd-main--announcement .cd-post__body > p {
	font-size: 18px;
}

/* ── A phone: the title, the picture, then the story ─────────────── */

@media (max-width: 899px) {
	.cd-post__layout > .cd-post__side,
	.cd-main--photo .cd-post__layout > .cd-post__side,
	.cd-main--announcement .cd-post__layout > .cd-post__side {
		float: none;
		width: auto;
		margin: 0 0 26px;
	}
}

/* ── The gallery, in every template ───────────────────────────────────
   Thumbnails of one size, however wide the page - five to a row across a
   desktop, two on a phone - each opening full size (the core lightbox,
   scripts/lib-news.php). A row that does not fill simply ends: no tile is
   stretched to close it. A gallery of one picture shows it whole, at most
   640 x 420, never larger than its file. */

.cd-post .cd-post__gallery.wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
	margin: 14px 0 28px;
}

.cd-post .cd-post__gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	width: auto;
	height: auto;
	aspect-ratio: 4 / 3;
	margin: 0;
}

.cd-post .cd-post__gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

/* One picture: whole, not a thumbnail. */
.cd-post .cd-post__gallery.wp-block-gallery.has-nested-images:has(> figure:only-child) {
	display: block;
}

/* Its width is capped on the figure: core sets the gallery's images to
   max-width: 100% !important, so the cap has to be what that 100% is of. */
.cd-post .cd-post__gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):only-child {
	aspect-ratio: auto;
	width: fit-content;
	max-width: min(100%, 640px);
}

.cd-post .cd-post__gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):only-child img {
	width: auto;
	height: auto;
	max-height: 420px;
	object-fit: contain;
}

/* The Photo story's first picture, twice a thumbnail. */
.cd-main--photo .cd-post .cd-post__gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):first-child:not(:only-child) {
	grid-column: span 2;
	grid-row: span 2;
}

/* A picture in the text itself: at most 640 x 420, never larger than its file. */
.cd-post__body .wp-block-image:not(.wp-block-gallery .wp-block-image) img {
	width: auto;
	height: auto;
	max-width: min(100%, 640px);
	max-height: 420px;
}

@media (max-width: 600px) {
	.cd-post .cd-post__gallery.wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	/* The Photo story's first picture across the phone, a thumbnail's height
	   twice over. */
	.cd-main--photo .cd-post .cd-post__gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):first-child:not(:only-child) {
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}
}

/* ── Feature ──────────────────────────────────────────────────────────
   The project page's ink hero, with the title and its facts on the left
   and the photograph beside them; then the reading column, starting where
   the title does, and the gallery across the page. */

.cd-hero--post.cd-hero--project .cd-hero__inner,
.cd-hero--post.cd-hero--project:not(:has(.cd-hero__media)) .cd-hero__inner {
	min-height: 0;
	padding-top: calc(var(--cd-header-h) + 56px);
	padding-bottom: 64px;
}

.cd-hero--post .cd-pill {
	align-self: flex-start;
}

.cd-post__hero-split.cd-hero__split {
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 4.5vw, 64px);
	margin-top: 8px;
}

.cd-post__hero-split.cd-hero__split.has-media {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.cd-post__hero-text > * {
	margin-block-start: 0;
}

.cd-hero--post .cd-post__kicker {
	margin: 18px 0 16px;
}

.cd-hero--post .cd-post__kicker a {
	color: inherit;
	text-decoration: none;
}

.cd-hero--post .cd-post__kicker a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cd-hero--post .cd-hero__title--project {
	font-size: clamp(32px, 3.2vw, 50px);
	max-width: calc(24 * var(--cd-ch-display));
	text-wrap: balance;
}

.cd-post__meta--hero {
	margin: 24px 0 0;
	gap: 8px;
}

.cd-post__meta--hero .cd-post__kind {
	margin: 0;
	border: 0;
	border-radius: 999px;
	padding: 7px 12px;
	color: #fff;
}

.cd-post__frame--hero {
	margin: 0;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.cd-post--feature > .cd-post__article {
	display: block;
	margin-top: 0;
}

:where(.cd-post__article) > * {
	margin-block-start: 0;
}

.cd-post--feature .cd-post__body {
	margin-top: 0;
}

.cd-post--feature .cd-post__body > p:first-child {
	font-size: 20px;
	line-height: 1.6;
}

@media (max-width: 979px) {
	.cd-post__hero-split.cd-hero__split.has-media {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}

/* ── After the story: all news, and three more, across the page ─────── */

.cd-post__after-inner {
	max-width: var(--wp--style--global--content-size, 1240px);
}

.cd-news__grid.cd-post__related {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
	.cd-news__grid.cd-post__related {
		grid-template-columns: minmax(0, 1fr);
	}
}