/**
 * Pattern: Gallery Grid  (patterns/gallery-grid.php)
 *
 * Gallery page body — no Figma frame (build-tracker P12, **apply-system**
 * fidelity). Reuses the site's established tokens/rhythm: the 1216px
 * composition (--kd-composition), the card-grid gap (--kd-space-md), the
 * shared card radius (--kd-radius-md), and the one-spec section heading
 * (--dfd-size-h2-section). All internal vertical rhythm below is an
 * apply-system judgment call — flagged for the Q4 client batch review.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 * No shared-file edits.
 */

/* padding-bottom only (PG-POLISH-1, 2026-09-12): this is the last section
   on the Gallery page — .kd-section zeroes padding-block for inter-section
   rhythm (the owl supplies the gap BETWEEN stacked sections), but nothing
   supplies trailing space before the footer, so this reuses the sitewide
   --kd-section-gap token for it (same technique as sponsor-tiers.css/
   faq-collapsible.css). Gallery-only by construction — a page reusing
   this pattern as a non-final section stacks this on top of the owl's
   own --kd-section-gap margin and must re-check the total. padding-top
   stays 0 (governed by .kd-section, untouched). */
.gallery-grid {
	padding-bottom: var(--kd-section-gap);
}

/* ── Intro — "Duck Fest Gallery" — LEFT-aligned. `.gallery-grid__intro`
     sets no width/max-width (PG-POLISH-1, 2026-09-12; since 10-14 it does
     carry the yellow band below, paint and padding only): core's own
     constrained-layout child rule already caps a direct child of
     `.gallery-grid` at contentSize (== --kd-composition) and centers it —
     a prior `max-width:100%` override here was fighting that default
     instead of relying on it, which is what misaligned the heading. See
     adopt-grid.css's P8-fix block ("one source of truth") for the full
     rationale. ───────────────────────────────────────────────────────── */
/* Yellow band behind the intro (2026-10-14, D35): KD proposal 2101:2 for
   Janel's 10-12 ask "Could the header of the gallery page be yellow?"
   (Userback 8521739), applied ahead of her pick. Yellow TEXT on the
   lavender page would be 1.14:1, so the band carries the yellow and the
   heading stays navy (12.3:1). Figma-exact desktop: r32, 56px/64px
   padding, 12px heading-to-intro gap. Mobile/tablet derived (no frame):
   r24 (--kd-radius-lg) and a tighter inset. The intro group is already in
   the page content, so this is CSS-only.

   Round 2 (2026-10-19, Janel, Userback 8536151): "make the rectangle dark
   purple or blue and the text white" → Dark Blue band (the logo blue the
   naming-rights tiles already use), white heading + intro: 6.35:1. The
   dark-purple option is a one-token swap to --dfd-color-purple-ink
   (#5F58A3, white 6.16:1). */
.gallery-grid__intro {
	background-color: var(--kd-color-blue);
	border-radius: var(--kd-radius-lg); /* 24px below desktop */
	padding: 2rem 1.5rem; /* 32px/24px, derived */
}

.gallery-grid__heading {
	text-align: left;
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: var(
		--dfd-size-display
	); /* 40px -> 70px, Figma 2101:4 = 70 at 1440 (was the 50px section h2) */
	letter-spacing: var(--dfd-track-heading);
	color: var(--kd-color-base); /* white on the Dark Blue band (round 2) */
	margin: 0 0 0.75rem; /* 12px, Figma 2101:3 gap */
}

.gallery-grid__intro-body {
	font-family: var(--kd-font-body);
	font-size: 1.125rem; /* 18px */
	line-height: 1.444; /* 26/18 */
	color: var(--kd-color-base); /* white on the Dark Blue band (round 2) */
	max-width: 37.5rem; /* readable measure — no comp to match */
	margin: 0;
}

/* ── Gallery — override WP core's flex/calc-based column sizing with a
     simple CSS Grid (same technique as adopt-grid.css/cta-cards-3up.css)
     so 3/2/1 column counts are a one-line change per breakpoint instead of
     fighting core's `columns-3` flex-basis math. Verified against the
     shipped core stylesheet (wp-includes/blocks/gallery/style.css) AND the
     per-block inline style core prints for layout supports (`body
     .is-layout-flex{display:flex}`, `:root :where(.is-layout-flex){gap:
     24px}`, `.wp-block-gallery.wp-block-gallery-N{gap:...}`): none of
     those need beating with !important — a 2-class selector already
     outranks core's 0-1-class ones, and the per-instance gap rule ties on
     specificity but loses on source order (this stylesheet loads after
     core's). Confirmed live on p12-test (12 photos) at 1440/768/375:
     display/gap/margin below render correctly without !important. ────── */
.gallery-grid__gallery.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kd-space-md); /* 20px — shared card-grid gap */
	max-width: var(--kd-composition);
	margin: var(--kd-space-xl) auto 0;
}

.gallery-grid__gallery.wp-block-gallery figure.wp-block-image {
	/* !important IS load-bearing here — core's own (min-width:600px)
	   `.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image
	   :not(#individual-image) { width: calc(33.3333% - gap*0.6666) }`
	   carries ID-level specificity via :not(#individual-image) and beats
	   this rule outright without !important (confirmed live: figures
	   collapsed to ~113px instead of the 388px grid-cell width at 1440
	   when tested without it). */
	width: 100% !important;
	aspect-ratio: 3 / 2;
	border-radius: var(--kd-radius-md);
	overflow: hidden;
	margin: 0;
}

.gallery-grid__gallery.wp-block-gallery figure.wp-block-image > a,
.gallery-grid__gallery.wp-block-gallery figure.wp-block-image > div {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

/* width/height here don't need !important either: core's own is-cropped
   rule (`.wp-block-gallery.has-nested-images.is-cropped figure
   .wp-block-image:not(#individual-image) img { width:100%; height:100%;
   object-fit:cover }`) out-specs this selector via the same :not(#id)
   trick, but sets the identical values — so whichever rule the browser
   picks, the rendered pixels match (confirmed live at 1440/768/375). */
.gallery-grid__gallery.wp-block-gallery figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

/* Calm hover — a small lift, not a jump. */
.gallery-grid__gallery.wp-block-gallery figure.wp-block-image:hover img {
	transform: scale(1.02);
}

.gallery-grid__cta {
	margin-top: var(--kd-space-xl);
	justify-content: center;
}

/* Desktop band, Figma-exact (2101:3). */
@media (min-width: 64rem) {
	.gallery-grid__intro {
		border-radius: 2rem; /* 32px, no token at this size */
		padding: 3.5rem 4rem; /* 56px/64px */
	}
}

/* ── Tablet (≤1023.98px) — 2-up. No mobile/tablet frame exists for this
     page — derived per the project's convention (same breakpoint as every
     other pattern's tablet cut, e.g. sponsor-tiers.css). ──────────────── */
@media (max-width: 1023.98px) {
	.gallery-grid__gallery.wp-block-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── Mobile (≤767.98px) — 1-up, button goes full width. ───────────────── */
@media (max-width: 767.98px) {
	.gallery-grid__gallery.wp-block-gallery {
		grid-template-columns: minmax(0, 1fr);
		max-width: var(--kd-card-w);
	}

	.gallery-grid__cta .wp-block-button,
	.gallery-grid__cta .wp-block-button__link {
		width: 100%;
	}

	.gallery-grid__cta .wp-block-button__link {
		justify-content: center;
		text-align: center;
	}
}