/* ---------------------------------------------------------------------------
   Ace Glove — Section 02: Home hero

   Full-bleed photograph, boxed content. The left column holds all the copy;
   the right column is empty on purpose, reserving the space the glove in the
   photograph needs. Scroll cue sits bottom right.
--------------------------------------------------------------------------- */

.ags-hero {
	--ags-hero-h: 80vh;
	--ags-hero-h-tablet: 450px;
	--ags-hero-h-mobile: 600px;
	--ags-hero-title: 60px;
	--ags-hero-text-w: 700px;
	--ags-hero-focus: center;
	--ags-hero-title-weight: 700;

	position: relative;
	display: flex;
	/* The inner wrapper always stretches to the section's full height, so the
	   absolutely positioned scroll cue anchors to the bottom of the SECTION.
	   Vertical placement of the copy is handled by align-content on the grid
	   inside, never by shrinking this box. */
	align-items: stretch;
	width: 100%;
	min-height: var(--ags-hero-h);
	overflow: hidden;
	background-color: var(--ags-white);
}

/* --- Background ---------------------------------------------------------- */

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

.ags-hero__picture {
	display: block;
	width: 100%;
	height: 100%;
}

.ags-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--ags-hero-focus);
}

/* A gradient on the text side only, so the photograph stays untouched where
   it matters and the headline keeps its contrast if the image is swapped. */
.ags-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ags-hero--overlay-light .ags-hero__media::after {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.86) 0%,
		rgba(255, 255, 255, 0.62) 30%,
		rgba(255, 255, 255, 0) 58%
	);
}

.ags-hero--overlay-dark .ags-hero__media::after {
	background: linear-gradient(
		90deg,
		rgba(19, 31, 40, 0.74) 0%,
		rgba(19, 31, 40, 0.45) 30%,
		rgba(19, 31, 40, 0) 58%
	);
}

.ags-hero--overlay-none .ags-hero__media::after {
	background: none;
}

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

.ags-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, var(--ags-hero-text-w)) minmax(0, 1fr);
	align-items: center;
	align-content: center;
	gap: 40px;
	width: 100%;
	max-width: var(--ags-max);
	margin: 0 auto;
	/* Top padding clears the fixed header, which overlays this section. */
	/*
	 * The value bar is pulled up over this section by --ags-values-overlap
	 * (120/80/56px), so the bottom padding has to stay comfortably larger
	 * than that or the copy would end up behind the panel.
	 */
	padding: 130px var(--ags-pad-x) 210px;
}

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

/* --- Copy ---------------------------------------------------------------- */

.ags-hero .ags-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);
}

/* Two classes so the theme's global H1 rule cannot outrank the hero's own
   optical settings. */
.ags-hero .ags-hero__title {
	margin: 0 0 24px;
	font-size: var(--ags-hero-title);
	font-weight: var(--ags-hero-title-weight);
	line-height: 1.06;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ags-black);
}

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

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

.ags-hero .ags-hero__text {
	margin: 0 0 34px;
	max-width: 46ch;
	font-size: var(--ags-text-size);
	font-weight: 400;
	line-height: 1.65;
	color: var(--ags-secondary);
}

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

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

/* --- Scroll cue ---------------------------------------------------------- */

/* The floating chat button is fixed to the same bottom-right corner, so the
   cue is inset past it. Drop --ags-cue-clear to 0 if the chat button is ever
   moved to the left in Click to Chat's settings. */
.ags-hero {
	--ags-cue-clear: 72px;
}

.ags-hero__cue {
	position: absolute;
	bottom: 38px;
	right: calc(var(--ags-pad-x) + var(--ags-cue-clear));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.ags-hero--cue-left .ags-hero__cue {
	right: auto;
	left: var(--ags-pad-x);
}

.ags-hero__cue-text {
	max-width: 64px;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ags-secondary);
}

.ags-hero__cue-icon {
	display: block;
	width: 24px;
	height: auto;
	opacity: 0.85;
}

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

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

	/* Tighter than desktop so the stacked copy still fits the 450px tablet
	   height from the build spec rather than pushing past it. */
	.ags-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		padding: 100px var(--ags-pad-x) 150px;
	}

	/* The configured size arrives inline, so cap rather than replace it.
	   40px keeps "EVERY ENVIRONMENT." at roughly 430px, which ends before
	   the glove starts at x476. */
	.ags-hero .ags-hero__title {
		font-size: min(var(--ags-hero-title), 40px);
	}

	/* The layout is one column here, but the copy still has to stop short of
	   the glove on the right of the photo. */
	.ags-hero__content {
		max-width: min(var(--ags-hero-text-w), 470px);
	}

	/* The description is the widest run of copy here; hold it back so it
	   clears the glove rather than ending a few pixels short of it. */
	.ags-hero .ags-hero__text {
		max-width: 430px;
	}

	/* The empty right column has nothing to reserve once the grid is one
	   column wide. */
	.ags-hero__spacer {
		display: none;
	}

	.ags-hero__image {
		object-position: var(--ags-hero-focus-tablet, right center);
	}

	/* Flush with the container edge on tablet, no clearance inset. */
	.ags-hero {
		--ags-cue-clear: 0px;
	}
}

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

	/* Copy sits at the top of the section on phone, so the taller portrait
	   crop shows the glove below it rather than behind it. */
	.ags-hero__inner {
		align-items: start;
		align-content: start;
		padding: 96px var(--ags-pad-x) 120px;
	}

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

	.ags-hero__image {
		object-position: var(--ags-hero-focus-mobile, center top);
	}

	/* The copy stacks at the top on phone rather than sitting to one side,
	   so the wash has to run top to bottom instead of left to right. */
	.ags-hero--overlay-light .ags-hero__media::after {
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.92) 0%,
			rgba(255, 255, 255, 0.72) 34%,
			rgba(255, 255, 255, 0) 62%
		);
	}

	.ags-hero--overlay-dark .ags-hero__media::after {
		background: linear-gradient(
			180deg,
			rgba(19, 31, 40, 0.80) 0%,
			rgba(19, 31, 40, 0.45) 34%,
			rgba(19, 31, 40, 0) 62%
		);
	}

	/* Centred along the bottom, which also keeps it clear of the floating
	   chat button in the corner. Centred with auto margins rather than a
	   translate, because GSAP owns the transform during the entrance. */
	.ags-hero__cue,
	.ags-hero--cue-left .ags-hero__cue {
		left: 0;
		right: 0;
		width: max-content;
		margin-inline: auto;
	}

	/* 30px keeps "EVERY ENVIRONMENT." on a single line at 375px wide, which
	   is what lets the whole copy block finish inside the photo's white
	   band before the glove starts. */
	.ags-hero .ags-hero__title {
		font-size: min(var(--ags-hero-title), 30px);
	}

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

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

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

	.ags-hero__cue {
		bottom: 24px;
	}

	.ags-hero__cue-text {
		font-size: 9px;
	}

	.ags-hero__cue-icon {
		width: 18px;
	}
}

/* --- Load animation ------------------------------------------------------- */

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

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