/* News & Resources grid (page 165, wp_block 162 / 163). Markup round 2 pins
 * 12 and 14 (.claude/markup-review-2026-09-03.json). */

/* Pin 12 — "Read More" hugs the bottom-right corner of every card. The post
 * template is a CSS grid so the cards already stretch to the tallest row
 * member; making the card a column flexbox lets the link drop to the bottom.
 * !important beats core's constrained-layout block-gap margin on the link. */
.cmp-news-card {
	display: flex;
	flex-direction: column;
}

.cmp-news-card > * {
	width: 100%;
}

.cmp-news-card > .cmp-news-readmore {
	width: auto;
	margin-top: auto !important;
	margin-left: auto;
	align-self: flex-end;
	padding-top: var(--wp--preset--spacing--30);
}

/* Pin 14 — note under the two event cards. External round pin 76 (2026-09-10):
 * "can we add a box around this area or some treatment? It's getting lost" —
 * a bare centred paragraph under two cards read as a stray caption. It now
 * takes the cards' own surface (theme-04 on 12px radius) with a hairline in
 * the site accent, so it reads as a third, quieter event tile rather than
 * running copy. Width stays capped so it does not span the full 1280 row. */
.cmp-events-note {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 24px 32px;
	background: var(--wp--preset--color--theme-04);
	border: 1px solid rgb(24 151 255 / 55%);
	border-radius: 12px;
}

@media (max-width: 781px) {
	.cmp-events-note {
		padding: 20px;
	}
}

/* --- Single post (templates/single.html) ---
 * Round 2 pins 49 / 50 gave the post a featured-image cover hero. Round 3 pins
 * 38 / 39 / 40 took it back out: Allison did not want a full-bleed image on
 * every article ("it'll be difficult to source a new large image for each blog
 * post"), asked for the date to go, and read the meta row as a different
 * typeface. It was always DM Sans — 14px uppercase at 700 simply reads unlike
 * 18px body copy — so the category now takes the same bright blue as every
 * other eyebrow on the site instead. Title and category sit on the flat navy. */
.cmp-post-hero .wp-block-post-title {
	text-wrap: balance;
}

.cmp-post-hero .cmp-post-cats,
.cmp-post-hero .cmp-post-cats a {
	color: var(--cmp-accent-blue);
}

.cmp-post-hero .cmp-post-cats a {
	text-decoration: none;
}

.cmp-post-hero .cmp-post-cats a:hover,
.cmp-post-hero .cmp-post-cats a:focus-visible {
	color: var(--wp--preset--color--theme-01);
	text-decoration: underline;
}

.cmp-post-body .wp-block-post-content > * + * {
	margin-block-start: 1.4em;
}

.cmp-post-body .wp-block-post-content h2,
.cmp-post-body .wp-block-post-content h3 {
	color: var(--wp--preset--color--theme-01);
	margin-block-start: 2em;
}

.cmp-post-body .wp-block-post-content img {
	border-radius: 12px;
}

/* the back link is a .cmp-cta whose arrow points right */
.cmp-post-back::after {
	transform: none;
}

/* Mobile review 2026-09-11 (M8): the date | city | booth row wraps at 390 and
 * the booth's ::before divider (theme.json) then sits orphaned at the start of
 * the second line. Give the booth its own centred row without the divider. */
@media (max-width: 781px) {
	.cmp-event-meta > p:nth-child(3) {
		flex-basis: 100%;
		text-align: center;
	}

	.cmp-event-meta > p:nth-child(3)::before {
		display: none !important;
	}
}

/* Mobile audit 2026-09-15, H5 + H6: the imported (classic-block) articles
 * carry fixed-width YouTube iframes (width="1080") and bare <table> markup.
 * Iframes fit the column and keep 16:9; tables are wrapped in
 * .cmp-table-scroll by cmp_scrollable_freeform_tables() in functions.php. */
.cmp-post-body .wp-block-post-content iframe {
	max-width: 100%;
}

.cmp-post-body .wp-block-post-content iframe[src*="youtube"],
.cmp-post-body .wp-block-post-content iframe[src*="youtu.be"],
.cmp-post-body .wp-block-post-content iframe[src*="vimeo"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
}

.cmp-post-body .cmp-table-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-color: var(--cmp-accent-blue, #1897ff) transparent;
}

.cmp-post-body .cmp-table-scroll table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.cmp-post-body .cmp-table-scroll th,
.cmp-post-body .cmp-table-scroll td {
	padding: 10px 14px;
	border: 1px solid rgb(255 255 255 / 20%);
	vertical-align: top;
	text-align: left;
}

.cmp-post-body .cmp-table-scroll tr:first-child td,
.cmp-post-body .cmp-table-scroll th {
	background: var(--wp--preset--color--theme-04);
}

.cmp-post-body .cmp-table-scroll td > p,
.cmp-post-body .cmp-table-scroll th > p {
	margin: 0;
}

@media (max-width: 781px) {
	.cmp-post-body .cmp-table-scroll::before {
		content: "Scroll sideways to see every column";
		display: block;
		margin-bottom: 8px;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.01em;
		text-transform: uppercase;
		color: var(--cmp-accent-blue, #1897ff);
	}
}

/* Mobile audit 2026-09-15, M3: classic-editor inline images float beside the
 * copy on desktop with a real gutter, and stack full-width with a gap below
 * on mobile (they used to butt against the next paragraph). */
.cmp-post-body .wp-block-post-content img.alignleft,
.cmp-post-body .wp-block-post-content img.alignright {
	max-width: min(50%, 420px);
	height: auto;
	margin-bottom: var(--wp--preset--spacing--30);
}

.cmp-post-body .wp-block-post-content img.alignleft {
	float: left;
	margin-right: var(--wp--preset--spacing--40);
}

.cmp-post-body .wp-block-post-content img.alignright {
	float: right;
	margin-left: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.cmp-post-body .wp-block-post-content img.alignleft,
	.cmp-post-body .wp-block-post-content img.alignright {
		float: none;
		display: block;
		width: 100%;
		max-width: 100%;
		margin: 0 0 var(--wp--preset--spacing--30);
	}
}