/* ==========================================================================
   Photo Gallery Hero (neilkelly/photo-gallery-hero)
   Figma: Photo Gallery / Hero (1984:41)
   Token-driven. Wrapper: .wp-block-neilkelly-photo-gallery-hub-hero.nk-photo-gallery-hero
   Dark band: uppercase headline + supporting line, centered.
   ========================================================================== */
.wp-block-neilkelly-photo-gallery-hub-hero.nk-photo-gallery-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--wp--custom--components--photo-gallery-hero--min-height);
	/* A LISTING HEADER, not a full hero band. It was ~469px: 212 of top padding
	   (announcement 50 + header 66 + the header's own top pad 32 + a 64 nav→heading
	   gap), ~137 of copy, and 120 underneath. The two discretionary numbers are the
	   gap and the bottom pad, so those are what came down — 64→16 here and 120→32 on
	   the pad-bottom token — landing the band at ~333px. The other 148 is structural:
	   the header is transparent and overlays this band, so cutting into it slides the
	   H1 under the nav.
	   The 30vh above is a floor, not the height: it only binds on a viewport taller
	   than ~1110px, where it holds the band open instead of letting it collapse.
	   NO LONGER MATCHES faq-hero's padding — that hero keeps its own gap and bottom
	   value. Only the dark ground, the 0.3-opacity photo and the 45% scrim are shared
	   with it now.
	   THE CLEARANCE IS events-hero's, deliberately: the same three terms in the same
	   order, reading the same location-hero--content-top-gap token rather than a local
	   copy of 64px, so the two hub bands cannot drift apart when that value is
	   re-measured. That token belongs to another component, which is a coupling — but
	   it is the coupling events-hero already has (it takes content-top-gap,
	   content-bottom-pad and body-max-width from location-hero), and sharing the token
	   is the only way "same as events-hero" stays true. pad-bottom is 32px, which is
	   what location-hero--content-bottom-pad already resolves to, so the bottom matches
	   too without pointing at it. */
	padding: calc(
			var(--wp--custom--components--site-header--announcement-height) +
			var(--wp--custom--layout--header--height) +
			var(--wp--custom--components--location-hero--content-top-gap)
		) var(--wp--preset--spacing--gutter) var(--wp--custom--components--photo-gallery-hero--pad-bottom);
	background: var(--wp--preset--color--surface-dark);
	font-family: var(--wp--preset--font-family--inter);
	box-sizing: border-box;
}

/* No block-gap seam between full-bleed sections. */
.wp-block-neilkelly-photo-gallery-hub-hero { margin-block: 0; }

/* Optional background photo behind the dark band (still matches faq-hero: 0.3
   opacity under a 45% scrim). */
.wp-block-neilkelly-photo-gallery-hub-hero .nk-photo-gallery-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.wp-block-neilkelly-photo-gallery-hub-hero .nk-photo-gallery-hero__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.3;
	display: block;
}

/* Scrim keeps the white heading + subtext legible over any photo. */
.wp-block-neilkelly-photo-gallery-hub-hero .nk-photo-gallery-hero__scrim {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--wp--preset--color--brand-black) 45%, transparent);
}

/* Left-aligned copy on a centred content column.
   The BOX stays centred via margin-inline:auto — the section sets no align-items, so a
   capped inner would otherwise stick to the left gutter and miss the content column on
   wide screens — while everything inside it ranges left.
   THE CAP IS WHAT ALIGNS IT. content-width (1296) here, with the gutter padding on the
   section outside it, resolves to the same content box the sections below use: 72 from
   the edge at 1440, 312 at 1920. photo-gallery-hub's inner bands reach that by capping
   at max-width (1440) and padding in by the gutter as border-box; the breadcrumb trail
   by capping at content-width and padding outside it as content-box. Keep the cap here
   and the padding on the section — both on one box is the double-inset those bands'
   own comments warn about.
   The heading and subtext keep their own narrower measures (900 / 760) inside this
   column, so only their alignment changed, not their line length. */
.wp-block-neilkelly-photo-gallery-hub-hero .nk-photo-gallery-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--6);
	width: 100%;
	max-width: var(--wp--custom--layout--content-width);
	margin-inline: auto;
	text-align: left;
}

.wp-block-neilkelly-photo-gallery-hub-hero .nk-photo-gallery-hero__heading {
	margin: 0;
	max-width: var(--wp--custom--components--photo-gallery-hero--heading-max-width);
	color: var(--wp--preset--color--brand-white);
	/* Matches the FAQ hero heading size (.nk-headline--content → xxl). */
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--components--photo-gallery-hero--heading-line-height);
	letter-spacing: var(--wp--custom--components--photo-gallery-hero--heading-tracking);
	text-transform: uppercase;
}

.wp-block-neilkelly-photo-gallery-hub-hero .nk-photo-gallery-hero__subtext {
	margin: 0;
	max-width: var(--wp--custom--components--photo-gallery-hero--subtext-max-width);
	color: var(--wp--preset--color--brand-white);
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--base);
}

/* Responsive ------------------------------------------------------------ */
@media (max-width: 767px) {
	.wp-block-neilkelly-photo-gallery-hub-hero.nk-photo-gallery-hero {
		padding: calc(
				var(--wp--custom--components--site-header--announcement-height) +
				var(--wp--custom--layout--header--height) +
				var(--wp--preset--spacing--8)
			) var(--wp--preset--spacing--6) var(--wp--custom--components--photo-gallery-hero--pad-bottom);
	}

	.wp-block-neilkelly-photo-gallery-hub-hero .nk-photo-gallery-hero__heading {
		/* Matches the FAQ hero heading size at this breakpoint. */
		font-size: var(--wp--preset--font-size--xl-md);
	}
}