/*
 * Article layouts.
 *
 * Shared by post_text, post_image, post_accordion and post_callout — they are
 * small and always appear together in the same reading column.
 *
 * The column width, type scale and list styling come from .prose in base.css;
 * nothing is restated here. What this file does is space the sections against
 * each other and style the image and the info box. The accordion's own look
 * lives in accordion.css, shared with the page builder's layout.
 */

/*
 * Rhythm between sections. Text against text keeps the prose spacing, because
 * two consecutive rich-text rows are one continuous article as far as the
 * reader is concerned.
 */
.post-section + .post-section {
	margin-top: var(--space-m);
}

.post-section--text + .post-section--text {
	margin-top: 0;
}

.post-section--image + .post-section,
.post-section--accordion + .post-section,
.post-section--callout + .post-section {
	margin-top: var(--space-l);
}

.post-section > .prose {
	margin-inline: 0;
}

/* ------------------------------------------------------------------ Image */

.post-figure {
	margin: var(--space-l) 0;
}

.post-figure__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-m);
}

/*
 * "Wider than the text" reaches past the reading column on both sides, but
 * never past the container it sits in — hence min(), not a fixed negative
 * margin that would overflow on a narrow viewport.
 */
@media (min-width: 60rem) {
	.post-figure--wide {
		width: min(64rem, 100vw - 2 * var(--space-l));
		margin-inline: calc(50% - min(32rem, 50vw - var(--space-l)));
	}
}

.post-figure__caption {
	margin-top: var(--space-2xs);
	color: var(--color-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}

/* -------------------------------------------------------------- Accordion */

.post-accordion {
	margin: var(--space-l) 0;
}

/* ---------------------------------------------------------------- Callout */

/*
 * The frame: the brand's contour graphic on its tint, covering the box — the
 * same pairing as .section--bg-pattern.section--pattern-topo in base.css, just
 * inside the reading column. The URL arrives as a custom property from the
 * template, so size and position stay here.
 */
.post-callout {
	margin: var(--space-l) 0;
	padding: clamp(var(--space-s), 0.5rem + 2.5vw, 2.5rem);
	border-radius: var(--radius-m);
	background-color: var(--color-pattern-tint, #bdbdbd);
	background-image: var(--post-callout-pattern, none);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* The card. Text never sits on the pattern itself. */
.post-callout__card {
	padding: clamp(var(--space-m), 1rem + 2.5vw, 3rem);
	border-radius: var(--radius-m);
	background: var(--color-bg);
}

.post-callout__title {
	margin: 0 0 var(--space-s);
	font-size: var(--text-xl);
}

.post-callout__text > :first-child {
	margin-top: 0;
}

.post-callout__text > :last-child {
	margin-bottom: 0;
}

.post-callout__text ul,
.post-callout__text ol {
	margin: 0 0 var(--space-s);
	padding-left: 1.25em;
}

.post-callout__action {
	margin: var(--space-l) 0 0;
	text-align: center;
}