/* ---------------------------------------------------------------------------
   Ace Glove — Section 06: Quality

   A full-width dark band split in two. Everything — heading, four figure
   cards, button — sits in the left half; the right half is deliberately
   empty so the photograph reads there. The photo covers the band and is
   masked back by an opaque gradient from the left, so it fades into the dark
   rather than meeting it at a hard edge.
--------------------------------------------------------------------------- */

.ags-quality {
	--ags-quality-pad-y: 78px;
	/* How much of the band the content occupies; the rest is photograph. */
	--ags-quality-panel: 56%;
	--ags-quality-card-gap: 16px;

	position: relative;
	width: 100%;
	background-color: var(--ags-secondary);
	background-image:
		/*
		 * Solid behind the content, then released across the middle so the
		 * machinery is genuinely visible on the right rather than sitting
		 * under a permanent wash. It never reaches 0: a little dark over the
		 * photo keeps the band reading as one surface.
		 */
		linear-gradient(
			to right,
			var(--ags-secondary) 0%,
			var(--ags-secondary) 46%,
			rgba(19, 31, 40, 0.92) 58%,
			rgba(19, 31, 40, 0.58) 74%,
			rgba(19, 31, 40, 0.34) 100%
		),
		var(--ags-quality-bg);
	background-repeat: no-repeat, no-repeat;
	background-position: center, right center;
	background-size: cover, cover;
}

/*
 * Two columns. The second has no markup in it at all — it is the clear half
 * of the band, and giving it a grid track is what reserves that space.
 */
.ags-quality__inner {
	display: grid;
	grid-template-columns: var(--ags-quality-panel) minmax(0, 1fr);
	width: 100%;
	max-width: var(--ags-max);
	margin: 0 auto;
	padding: var(--ags-quality-pad-y) var(--ags-pad-x);
}

/* --- Container one: everything ------------------------------------------- */

.ags-quality__panel {
	min-width: 0;
}

.ags-quality .ags-quality__eyebrow {
	margin: 0 0 14px;
	font-size: var(--ags-eyebrow-size);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ags-primary);
}

.ags-quality .ags-quality__heading {
	margin: 0 0 34px;
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ags-white);
}

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

.ags-quality__btn {
	margin-top: 32px;
}

/* --- The figure cards ---------------------------------------------------- */

/* Two by two inside the panel, replacing the old single row of four divided
   by hairlines. */
.ags-quality__figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ags-quality-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * A glass card: a barely-there white fill and a 1px rule. On the dark band
 * that is enough to separate the four without introducing a second colour,
 * and it lets the photograph show faintly through the two on the right.
 */
.ags-quality__figure {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	padding: 20px 20px 22px;
	list-style: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.15);
	transition: background-color var(--ags-speed) var(--ags-ease),
	            border-color var(--ags-speed) var(--ags-ease);
}

.ags-quality__figure:hover {
	border-color: rgba(0, 127, 62, 0.55);
	background-color: rgba(0, 127, 62, 0.12);
}

.ags-quality__badge {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid rgba(0, 127, 62, 0.45);
	background-color: rgba(0, 127, 62, 0.16);
	color: var(--ags-primary);
	transition: background-color var(--ags-speed) var(--ags-ease),
	            border-color var(--ags-speed) var(--ags-ease),
	            color var(--ags-speed) var(--ags-ease);
}

.ags-quality__figure:hover .ags-quality__badge {
	border-color: rgba(255, 255, 255, 0.6);
	background-color: rgba(255, 255, 255, 0.16);
	color: var(--ags-white);
}

.ags-quality__icon {
	width: 21px;
	height: 21px;
}

.ags-quality__copy {
	min-width: 0;
}

/* One line, not two: the figure and its label read as a single phrase, in
   two colours. */
.ags-quality .ags-quality__title {
	display: block;
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ags-quality__main {
	color: var(--ags-white);
}

.ags-quality__sub {
	margin-left: 5px;
	color: var(--ags-primary);
}

.ags-quality .ags-quality__text {
	margin: 0;
	font-size: var(--ags-text-size);
	font-weight: 400;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.66);
}

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

@media (max-width: 1024px) {
	.ags-quality {
		--ags-quality-pad-y: 56px;
	}

	/*
	 * Stacked layouts get their own photograph and their own fade. The
	 * desktop file carries its fade in the picture, left to right; here the
	 * fade is drawn in CSS and runs top to bottom, holding solid behind the
	 * content and clearing by the foot so the picture is actually visible.
	 * --ags-quality-photo-band is the empty strip at the bottom it shows in.
	 */
	.ags-quality {
		--ags-quality-photo-band: 150px;

		background-image:
			linear-gradient(
				to bottom,
				var(--ags-secondary) 0%,
				var(--ags-secondary) 58%,
				rgba(19, 31, 40, 0.74) 72%,
				rgba(19, 31, 40, 0.32) 86%,
				rgba(19, 31, 40, 0.12) 100%
			),
			var(--ags-quality-bg-stacked, var(--ags-quality-bg));
		background-position: center, center bottom;
	}

	/* One column, and the clear band moves from the right to the foot. */
	.ags-quality__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-bottom: calc(var(--ags-quality-pad-y) + var(--ags-quality-photo-band));
	}

	.ags-quality .ags-quality__heading {
		margin-bottom: 28px;
	}
}

@media (max-width: 600px) {
	.ags-quality {
		--ags-quality-pad-y: 44px;
		--ags-quality-photo-band: 120px;
		--ags-quality-card-gap: 10px;
	}


	/* Two across at 375px leaves each card about 160px, which is not enough
	   for "100% QUALITY CONTROL" plus a sentence. */
	.ags-quality__figures {
		grid-template-columns: minmax(0, 1fr);
	}

	.ags-quality__figure {
		padding: 16px 16px 18px;
	}

	.ags-quality__btn {
		width: 100%;
		justify-content: center;
	}
}

/* --- Scroll-in animation -------------------------------------------------- */

.ags-quality--animate.is-armed .ags-quality__eyebrow,
.ags-quality--animate.is-armed .ags-quality__heading,
.ags-quality--animate.is-armed .ags-quality__btn,
.ags-quality--animate.is-armed .ags-quality__figure {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ags-quality--animate.is-armed .ags-quality__eyebrow,
	.ags-quality--animate.is-armed .ags-quality__heading,
	.ags-quality--animate.is-armed .ags-quality__btn,
	.ags-quality--animate.is-armed .ags-quality__figure {
		opacity: 1;
	}
}