/* "We like people with stories" credentials band (patterns/credentials-list.php) — the Figma
   content-containers texture (assets/images/patterns/content-containers-bg.webp) at 20% opacity
   over the navy band. Drawn on a ::before layer rather than the element's own background-image
   so the opacity applies to the texture alone — the section's text and lists stay at full
   opacity. Only loaded on the Who we are page (functions.php, is_page('who-we-are')), the only
   page that renders the pattern. */

.bpd-credentials-band {
	position: relative;
	/* Clips the ::before texture layer so its Ken-Burns scale/pan (below) never grows past the
	   band's own box — without this the animated pseudo-element would push past the edge and
	   introduce horizontal overflow. */
	overflow: hidden;
}

.bpd-credentials-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url( "../images/patterns/content-containers-bg.webp" );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.2;
	pointer-events: none;
	z-index: 0;
}

/* Issue #15 — "images are current static in background... need some type of movement". No source
   video exists for this texture (unlike the who-we-are-bg.mp4 hero, this band never had a video
   asset), so per CLAUDE.md's motion rules a genuine <video> can't be fabricated here. Instead the
   existing static texture gets a slow, subtle Ken-Burns pan/zoom loop — CSS-only, no new asset.
   Final/visible state (the plain static texture above) is the default; the animation only layers
   on for users who haven't asked for reduced motion, per the progressive-enhancement rule. Scroll-
   driven `animation-timeline: view()` doesn't fit a section this tall (it would finish panning
   before the visitor finishes reading), so this uses a plain, continuously looping @keyframes
   instead — the CLAUDE.md-sanctioned fallback for when view() isn't the right tool. */
@media (prefers-reduced-motion: no-preference) {
	.bpd-credentials-band::before {
		animation: bpd-credentials-band-pan var(--wp--custom--motion--duration-bg-pan) var(--wp--custom--motion--ease-bg-pan) infinite alternate;
	}
}

@keyframes bpd-credentials-band-pan {
	from {
		transform: scale(1) translate(0, 0);
	}
	to {
		transform: scale(1.12) translate(-1.5%, -1.5%);
	}
}

/* Lift the band's content above the texture layer. */
.bpd-credentials-band > * {
	position: relative;
	z-index: 1;
}

/* Credential list items — vertical breathing room between entries (spacing-400 = 16px; sibling
   margins collapse so the gap between items is a single 400, and the first/last sit snugly
   inside the list's own padding). */
.bpd-credentials-list > li {
	margin-block: var(--wp--preset--spacing--400);
}

/*
 * The three columns are equal-width while their lists are not: the middle one's longest credential
 * measures 203px against 322px and 312px either side, and with the lists left-aligned in equal
 * boxes all of that slack collects on one side. Measured at 1440px the gap between the first two
 * lists was 105px and between the last two 223px (issue #321). Sizing each column to its own list
 * and centring the row makes both gaps 72px and puts the row's midpoint on the container's, so it
 * lines up under the heading. Desktop only — below 782px the columns stack and neither applies.
 */
@media (min-width: 782px) {
	.bpd-credentials-band .wp-block-columns {
		justify-content: center;
	}

	.bpd-credentials-band .wp-block-columns > .wp-block-column {
		flex: 0 1 auto;
	}
}

/*
 * Core stacks the three desktop columns below 782px. Each list contributes a 16px edge margin and
 * the Columns block contributes another 12px row gap, turning the two column breaks into 44px gaps
 * between otherwise evenly spaced credentials. Remove only those list-edge margins and make the
 * column gap the same 16px token used between adjacent list items.
 */
@media (max-width: 781px) {
	.bpd-credentials-band .wp-block-columns {
		row-gap: var(--wp--preset--spacing--400);
	}

	.bpd-credentials-list > li:first-child {
		margin-block-start: 0;
	}

	.bpd-credentials-list > li:last-child {
		margin-block-end: 0;
	}
}