/*
 * Content Sections template — the repeatable section rhythm and the image grid.
 *
 * Loaded ONLY on page-template/content-sections.php (see the is_page_template() guard in
 * functions.php), so no other page downloads it and none can be affected by it.
 *
 * ⚠ THIS FILE DECLARES NO TYPOGRAPHY — no font-size, font-family, font-weight,
 * line-height or letter-spacing, anywhere. That is deliberate and was the instruction:
 * the type must not change. Section headings are plain <h2> and body copy is plain <p>,
 * so both inherit inner-page.css's existing ladder (h2 is 36px at desktop and steps down
 * through that file's own breakpoints). If a heading ever needs to look different, change
 * it in inner-page.css where the rest of the scale lives — not here.
 *
 * Everything below is layout, spacing and the grid, and every value resolves through a
 * global token. The only literals are the hairline focus outline and ratio values
 * (aspect-ratio, 1fr, %), which are proportions rather than fixed sizes.
 *
 * Nothing here targets .inner-banner, .page-right, .pra or .widget — the banner and the
 * sidebar render exactly as they do on every other inner page.
 */

/* ------------------------------------------------------------------ section rhythm */

.page-detail .page-left .content-section {
	margin-top: var(--sp-48);
}

/*
 * When the WordPress editor is left empty, the first section IS the first child of the
 * content column, so that top margin would open a gap above it for no reason. The margin
 * exists to separate a section from whatever precedes it — with nothing preceding it,
 * there is nothing to separate.
 *
 * :first-child rather than a body/template class because it is self-correcting: add copy
 * to the editor and the section stops being the first child, so the margin comes back on
 * its own with nothing to remember. The extra pseudo-class also out-specifies the
 * breakpoint overrides below (0,4,0 vs 0,3,0), so this holds at every width.
 */
.page-detail .page-left .content-section:first-child {
	margin-top: 0;
}

/*
 * inner-page.css already gives every h2 inside .page-detail a 40px top margin. The first
 * section follows the editor content, so its own margin would stack with that heading
 * margin; collapsing it here keeps the gap between editor copy and the first section the
 * same as the gap between two sections.
 */
.page-detail .page-left .content-section > h2 {
	margin-top: 0;
}

/* ------------------------------------------------------------------ image grid */

/*
 * Two per row, and each image keeps its own proportions.
 *
 * `align-items: start` is what allows that: the default `stretch` would make every item
 * in a row the same height, which is exactly the uniform look this must avoid. With
 * `start`, a landscape and a portrait photo sit side by side at their own heights.
 * Nothing is cropped — there is no aspect-ratio and no object-fit anywhere below.
 */
.page-detail .page-left .content-section__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
	gap: var(--sp-24);
	margin-top: var(--sp-24);
}

.page-detail .page-left .content-section__item {
	margin: 0;
}

/* Per-image opt-in from the field — spans both columns. */
.page-detail .page-left .content-section__item--full {
	grid-column: 1 / -1;
}

/* The button is the image's hit area — it must not look like a control. */
.page-detail .page-left .content-section__btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	border-radius: var(--radius);
	overflow: hidden;
	cursor: pointer;
}

/*
 * height: auto is the whole point — the image's height follows its own aspect ratio, so
 * a tall photo renders tall. Do not reintroduce a fixed height, aspect-ratio or
 * object-fit here: that is what made every image the same size.
 */
.page-detail .page-left .content-section__btn img {
	display: block;
	width: 100%;
	height: auto;
	transition: var(--transition);
}

.page-detail .page-left .content-section__btn:hover img,
.page-detail .page-left .content-section__btn:focus-visible img {
	transform: scale(1.04);
}

.page-detail .page-left .content-section__btn:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.page-detail .page-left .content-section__btn img {
		transition: none;
	}

	.page-detail .page-left .content-section__btn:hover img,
	.page-detail .page-left .content-section__btn:focus-visible img {
		transform: none;
	}
}

/* ------------------------------------------------------------------ responsive */

/*
 * 767 is where inner-page.css turns .page-detail from a flex row into a block. The two
 * columns are kept — only the gutter tightens — because two-up is the intended look.
 */
@media (max-width: 767px) {
	.page-detail .page-left .content-section {
		margin-top: var(--sp-40);
	}

	.page-detail .page-left .content-section__grid {
		gap: var(--sp-16);
	}
}

/* Below 479 two columns leave each image too narrow to read, so they stack. */
@media (max-width: 479px) {
	.page-detail .page-left .content-section {
		margin-top: var(--sp-32);
	}

	.page-detail .page-left .content-section__grid {
		grid-template-columns: 1fr;
	}
}