/* ---------------------------------------------------------------------------
   Ace Glove — Section: Page hero (secondary pages)

   Duplicated from ags-hero.css as a separate, independent stylesheet — the
   Home hero's own file is untouched. ONE full-bleed background image (a
   second, back-layer image this section used to carry was removed) with an
   adjustable white overlay; content sits above it via z-index. Mobile swaps
   in its own image, anchored bottom centre.
--------------------------------------------------------------------------- */

.ags-page-hero {
	--ags-ph-h: 620px;
	--ags-ph-h-tablet: 440px;
	/* Matches the Home hero's own mobile height (class-ags-hero.php
	   defaults(): height_mobile) rather than a separately-guessed number —
	   see the field default in class-ags-page-hero.php. */
	--ags-ph-h-mobile: 800px;
	--ags-ph-title: 52px;
	--ags-ph-text-w: 600px;
	--ags-ph-title-weight: 700;
	--ags-ph-overlay: 0.65;

	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: var(--ags-ph-h);
	overflow: hidden;
	background-color: var(--ags-white);
}

/* --- Background: one full-bleed image ------------------------------------- */

.ags-page-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.ags-page-hero__img {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/* Mobile-only image — hidden by default so it never renders on
   desktop/tablet, where .ags-page-hero__img--left (above) is the one that
   shows; swapped in at the 767px breakpoint below. */
.ags-page-hero__img--left-mobile {
	display: none;
	background-position: bottom center;
}

/*
 * Flat white wash over the background image, full-bleed. Strength is the
 * "Background image white overlay (%)" field, 0 = photo shows fully, 100 =
 * solid white. Sits above the image but below the content (z-index 3 vs
 * the content's 5 further down).
 */
.ags-page-hero__wash {
	position: absolute;
	z-index: 3;
	inset: 0;
	background: rgba(255, 255, 255, var(--ags-ph-overlay));
	pointer-events: none;
}

/* --- Layout ------------------------------------------------------------- */

.ags-page-hero__inner {
	position: relative;
	/* Above both photo layers (2, 1) and the wash (3) — content must never be
	   hidden behind the background. */
	z-index: 5;
	display: grid;
	grid-template-columns: minmax(0, var(--ags-ph-text-w)) minmax(0, 1fr);
	align-items: center;
	align-content: center;
	gap: 40px;
	width: 100%;
	max-width: var(--ags-max);
	margin: 0 auto;
	padding: 130px var(--ags-pad-x);
}

.ags-page-hero__content {
	max-width: var(--ags-ph-text-w);
}

/* --- Copy — same tokens and spacing as the Home hero's copy, duplicated
   rather than shared so the two sections can never affect one another. ---- */

.ags-page-hero .ags-page-hero__eyebrow {
	margin: 0 0 20px;
	font-size: var(--ags-eyebrow-size);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ags-primary);
}

.ags-page-hero .ags-page-hero__title {
	margin: 0 0 24px;
	font-size: var(--ags-ph-title);
	font-weight: var(--ags-ph-title-weight);
	line-height: 1.06;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ags-black);
}

.ags-page-hero__title-line {
	display: block;
}

.ags-page-hero__title-line--accent {
	color: var(--ags-primary);
}

.ags-page-hero .ags-page-hero__text {
	margin: 0 0 34px;
	/* Matches the H1/content column's own width rather than a narrower
	   character cap, so the description runs the same width as the title. */
	max-width: 100%;
	font-size: var(--ags-text-size);
	font-weight: 400;
	line-height: 1.65;
	color: var(--ags-secondary);
}

.ags-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.ags-page-hero__actions--case-uppercase .ags-btn__label {
	text-transform: uppercase;
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.ags-page-hero {
		min-height: var(--ags-ph-h-tablet);
	}

	.ags-page-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		padding: 100px var(--ags-pad-x);
	}

	.ags-page-hero .ags-page-hero__title {
		font-size: min(var(--ags-ph-title), 38px);
	}

	.ags-page-hero__content {
		max-width: min(var(--ags-ph-text-w), 470px);
	}

	/*
	 * The background stays the same single full-bleed image as desktop here —
	 * only the copy grid collapses to one column. Nothing to override: the
	 * base rules above already do this without a tablet-specific block.
	 */
	.ags-page-hero__spacer {
		display: none;
	}
}

@media (max-width: 767px) {
	.ags-page-hero {
		min-height: var(--ags-ph-h-mobile);
	}

	/* Top/bottom padding matches the Home hero's own mobile padding
	   (class-ags-hero.php + ags-hero.css: 96px / pad-x / 120px) rather than a
	   separately-guessed number, since the section is also matching its
	   height. */
	.ags-page-hero__inner {
		align-items: start;
		align-content: start;
		padding: 96px var(--ags-pad-x) 120px;
	}

	.ags-page-hero__content {
		max-width: 100%;
	}

	.ags-page-hero .ags-page-hero__title {
		font-size: min(var(--ags-ph-title), 28px);
	}

	.ags-page-hero .ags-page-hero__eyebrow {
		margin-bottom: 14px;
	}

	.ags-page-hero .ags-page-hero__text {
		margin-bottom: 28px;
	}

	.ags-page-hero__actions .ags-btn {
		flex: 1 1 100%;
		justify-content: center;
	}

	/* Same full-bleed front/back structure as desktop — only the front photo
	   itself swaps to the mobile-specific crop. */
	.ags-page-hero__img--left {
		display: none;
	}

	.ags-page-hero__img--left-mobile {
		display: block;
	}
}

/* --- Load animation --------------------------------------------------------
   Same restrained entrance as the Home hero, own class names so the two
   sections' timelines can never cross-trigger each other. ---------------- */

.ags-page-hero--animate.is-armed .ags-page-hero__eyebrow,
.ags-page-hero--animate.is-armed .ags-page-hero__title-line,
.ags-page-hero--animate.is-armed .ags-page-hero__text,
.ags-page-hero--animate.is-armed .ags-page-hero__actions {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ags-page-hero--animate.is-armed .ags-page-hero__eyebrow,
	.ags-page-hero--animate.is-armed .ags-page-hero__title-line,
	.ags-page-hero--animate.is-armed .ags-page-hero__text,
	.ags-page-hero--animate.is-armed .ags-page-hero__actions {
		opacity: 1;
	}
}