/*
 * 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, the info box and the tables that share its
 * look. 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,
.post-section--table + .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);
	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;
}

/* ------------------------------------------------------------------ Table */

/*
 * An article table in its box (pmt_table_box()), past the reading
 * column on both sides. On a phone the article container is the window, so
 * cancelling its gutter takes the box edge to edge, square like a section.
 */
.post-callout--table {
	margin-inline: calc(-1 * var(--gutter));
	border-radius: var(--radius-section);
}

/*
 * From the article container's width on, the column no longer touches the
 * window: the box spans the header's content width (container--wide, logo to
 * menu) and keeps the page gutter to the window. 100vw counts a classic
 * scrollbar; the gutter is wider than half of one, so it never tips over.
 */
@media (min-width: 50rem) {
	.post-callout--table {
		--post-table-width: calc(min(var(--container-wide), 100vw) - 2 * var(--gutter));

		width: var(--post-table-width);
		margin-inline: calc(50% - var(--post-table-width) / 2);
		border-radius: var(--radius-m);
	}
}

/*
 * The card is the scroll box for a table that needs more room than it has.
 * Less padding than the info box: the cells bring their own.
 */
.post-callout--table .post-callout__card {
	padding: clamp(var(--space-xs), 0.25rem + 2vw, var(--space-l));
	overflow-x: auto;
}

/*
 * A table again, filling the card; .prose table in base.css makes it a block.
 * The width holds against the editor's table dialog, which writes it inline.
 */
.post-callout--table table {
	display: table;
	width: 100% !important;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
	line-height: var(--leading-snug);
}

.post-callout--table :is(th, td) {
	padding: var(--space-xs) var(--space-s);
	text-align: start;
	vertical-align: top;
}

.post-callout--table tbody tr + tr > * {
	border-top: 1px solid var(--color-border);
}

/* The header row: a light band with rounded ends, like the cards around it. */
.post-callout--table thead :is(th, td) {
	background: var(--color-surface);
	font-weight: 700;
	vertical-align: middle;
}

.post-callout--table thead :is(th, td):first-child {
	border-radius: var(--radius-m) 0 0 var(--radius-m);
}

.post-callout--table thead :is(th, td):last-child {
	border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

/* The post_table layout's title and footnote, set like the info box's. */
.post-callout--table caption {
	margin-bottom: var(--space-s);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: var(--leading-tight);
	text-align: start;
}

.post-callout__footnote {
	margin: var(--space-s) 0 0;
	color: var(--color-muted);
	font-size: var(--text-xs);
}

/*
 * Five columns and more no longer fit a phone at their natural width, and the
 * table would squeeze them to one word per line. A floor per column keeps the
 * lines readable; the card scrolls the rest.
 */
.post-callout--table :where(table:has(tr > :nth-child(5))) :is(th, td) {
	min-width: 9rem;
}

/*
 * Phone: a table pmt_table_stack() prepared (three columns and more,
 * with a header row) becomes one block per row. The first cell is the row's
 * title, on the band the header row has on larger screens; the others follow
 * one under the other (two side by side from 35rem), each under its column
 * name from data-label. The header row
 * stays for screen readers only, and the roles keep it a table for them; the
 * printed name is hidden from them ("/ ''"), they get the header instead.
 */
@media (max-width: 49.99rem) {
	.post-callout--stack :is(table, caption, thead, tbody, tr, th, td) {
		display: block;
	}

	.post-callout--stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.post-callout--stack tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-s);
	}

	.post-callout--stack tbody tr + tr {
		margin-top: var(--space-l);
	}

	.post-callout--stack :is(th, td) {
		min-width: 0;
		padding: 0 0 0 var(--space-s);
		hyphens: auto;
	}

	.post-callout--stack tbody tr + tr > * {
		border-top: 0;
	}

	/* An empty cell would print its name over nothing (pmt_table_stack()). */
	.post-callout--stack [data-empty] {
		display: none;
	}

	.post-callout--stack tbody tr > :first-child {
		grid-column: 1 / -1;
		padding: var(--space-xs) var(--space-s);
		border-radius: var(--radius-m);
		background: var(--color-surface);
		font-weight: 700;
	}

	.post-callout--stack [data-label]::before {
		display: block;
		margin-bottom: var(--space-3xs);
		color: var(--color-muted);
		font-size: var(--text-xs);
		font-weight: 600;
		content: attr(data-label);
		content: attr(data-label) / "";
	}

	/* A bare number as the title reads as «Tag 1»: name inline, in the title's type. */
	.post-callout--stack tbody tr > [data-label]:first-child::before {
		display: inline;
		margin: 0;
		color: inherit;
		font-size: inherit;
		font-weight: inherit;
		content: attr(data-label) " ";
		content: attr(data-label) " " / "";
	}
}

@media (min-width: 35rem) and (max-width: 49.99rem) {
	.post-callout--stack tbody tr {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}