/* ────────────────────────────────────────────────────────────
   03-gallery.css — 3-column 16:9 tile gallery section
   Section uses: .gallery-section / .gallery-section__inner
   Grid uses: core/gallery (columns-3, is-cropped)

   WP's gallery block handles column flex-layout via its own
   stylesheet; we override only the gap and aspect-ratio here.
   ──────────────────────────────────────────────────────────── */

/* ── Section wrapper ──────────────────────────────────────── */
.gallery-section {
	padding: var(--spacing-4xl) var(--spacing-md);
}

/* ── Inner: max-width container ───────────────────────────── */
.gallery-section__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
}

/* ── Heading ──────────────────────────────────────────────── */
/* Global 01-base.css covers font-family, weight, color, line-height.
   Only layout/alignment is scoped here. */
.gallery-section h2 {
	text-align: center;
	margin-bottom: var(--spacing-sm);
}

/* ── Intro paragraph ──────────────────────────────────────── */
.gallery-section__intro {
	max-width: var(--container-narrow);
	font-size: var(--text-body-xl);
	margin-inline: auto;
	text-align: center;
	margin-bottom: var(--spacing-xl);
}

/* ── Gallery wrapper ──────────────────────────────────────── */
.gallery-section .wp-block-gallery {
	gap: var(--spacing-xs);
	margin: 0;
}

/* ── 16:9 tile crop ───────────────────────────────────────── */
/* Force each gallery cell to 16:9 regardless of source image
   dimensions. WP's is-cropped class sets object-fit: cover
   but does not constrain the aspect ratio. */
.gallery-section .wp-block-gallery .wp-block-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin: 0;
}

.gallery-section .wp-block-gallery .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Dark-bg overrides ────────────────────────────────────── */
/* is-style-bg-dark lives on core/group outer; .gallery-section
   is on the inner GB element — descendant selector required.
   GB text h2 does not carry .wp-block-heading so global inversion
   in 02-style-variations.css does not reach it; explicitly re-pin. */
.is-style-bg-dark .gallery-section h2 {
	color: var(--color-text-body-inverse);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
	.gallery-section {
		padding: var(--spacing-2xl) var(--spacing-sm);
	}

	/* WP computes image width from --wp--style--gallery-columns,
	   which is set as an inline style. !important is intentional
	   here to override the inline computed value. */
	.gallery-section .wp-block-gallery.has-nested-images .wp-block-image {
		width: calc(50% - var(--spacing-xs) / 2) !important;
	}
}

@media (max-width: 480px) {
	.gallery-section .wp-block-gallery.has-nested-images .wp-block-image {
		width: 100% !important;
	}
}