/* ---------------------------------------------------------------------------
   Ace Glove — Section 03: Value bar

   One dark rounded panel, four icon boxes spread evenly across its full
   width. The panel itself carries NO padding: every bit of spacing belongs to
   the boxes, so a hovered box fills its entire column edge to edge.
   Hover is a colour change only — deliberately restrained.
--------------------------------------------------------------------------- */

.ags-values {
	--ags-values-radius: 16px;
	--ags-values-pad-y: 38px;
	--ags-values-icon: 60px;
	--ags-values-glyph: 26px;
	--ags-values-gap: 14px;
	/* How far the whole section is pulled up over the hero above it. */
	--ags-values-overlap: 120px;
	/* Its own, shorter than the shared --ags-pad-y: the panel is a strip. */
	--ags-values-pad-bottom: 40px;

	/*
	 * The section itself moves up and sits ON TOP of the hero, so the panel
	 * covers the bottom of the hero rather than starting below it.
	 *
	 * The background has to go with it: at 40px either side of the panel the
	 * section is not covered by the panel, and a white ground there would
	 * paint two white strips down the sides of the hero's last 120px. The
	 * page behind is white anyway, so nothing is lost by dropping it.
	 */
	position: relative;
	z-index: 3;
	margin-top: calc(var(--ags-values-overlap) * -1);
	width: 100%;
	background-color: transparent;
}

/*
 * No top padding: the section's negative margin is what sets the distance,
 * and any padding here would just push the panel back down again.
 */
.ags-values__inner {
	width: 100%;
	max-width: var(--ags-max);
	margin: 0 auto;
	padding: 0 var(--ags-pad-x) var(--ags-values-pad-bottom);
}

/* The lift lives on the section now; the panel just needs to keep its own
   stacking above whatever the hero puts behind it. */
.ags-values__panel {
	position: relative;
	z-index: 1;
	background-color: var(--ags-secondary);
	border-radius: var(--ags-values-radius);
	/* No padding here on purpose — see the file header. */
	padding: 0;
	/* The panel clips the boxes, so a hovered fill is rounded only where it
	   meets the panel's own outside corner and stays square everywhere it
	   meets another box. */
	overflow: hidden;
}

/* Four equal tracks across the whole panel, rather than the boxes bunched
   in the middle. */
.ags-values__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ags-values__item {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- The box ------------------------------------------------------------- */

.ags-value {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ags-values-gap);
	width: 100%;
	padding: var(--ags-values-pad-y) 20px;
	text-align: center;
	text-decoration: none;
	background-color: transparent;
	transition: background-color var(--ags-speed) var(--ags-ease);
}

/*
 * Colour change only. The box does not grow, lift or cast a shadow — the
 * client wants this restrained, so the hover is a fill and nothing else.
 * .is-hover mirrors :hover so the state can be held open for review.
 */
.ags-value:hover,
.ags-value:focus-visible,
.ags-value.is-hover {
	z-index: 2;
	background-color: var(--ags-primary);
	text-decoration: none;
}

/* --- Icon ---------------------------------------------------------------- */

/*
 * A ring of the primary green with a faint green fill, rather than a grey
 * disc: on the dark panel it reads as part of the accent, and on the green
 * fill it simply restates itself in white. No colour outside the palette.
 */
.ags-value__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--ags-values-icon);
	height: var(--ags-values-icon);
	border-radius: 50%;
	background-color: rgba(0, 127, 62, 0.18);
	border: 1px solid rgba(0, 127, 62, 0.55);
	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-value__glyph {
	width: var(--ags-values-glyph);
	height: var(--ags-values-glyph);
}

.ags-value:hover .ags-value__icon,
.ags-value:focus-visible .ags-value__icon,
.ags-value.is-hover .ags-value__icon {
	background-color: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--ags-white);
}

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

.ags-values .ags-value__title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ags-white);
}

.ags-values .ags-value__text {
	margin: 0;
	max-width: 22ch;
	font-size: var(--ags-text-size);
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
	transition: color var(--ags-speed) var(--ags-ease);
}

.ags-value:hover .ags-value__text,
.ags-value:focus-visible .ags-value__text,
.ags-value.is-hover .ags-value__text {
	color: rgba(255, 255, 255, 0.9);
}

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

/* Tablet and phone use a more compact box: smaller padding, smaller circle,
   tighter gap. */
@media (max-width: 1024px) {
	.ags-values {
		--ags-values-pad-y: 20px;
		--ags-values-icon: 44px;
		--ags-values-glyph: 19px;
		--ags-values-gap: 10px;
		--ags-values-overlap: 80px;
		--ags-values-pad-bottom: 40px;
	}

	.ags-values__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ags-value {
		padding-inline: 16px;
	}

	.ags-values .ags-value__title {
		font-size: 13px;
	}

}

@media (max-width: 600px) {
	.ags-values {
		--ags-values-pad-y: 18px;
		--ags-values-icon: 42px;
		--ags-values-overlap: 56px;
		--ags-values-pad-bottom: 20px;
	}

	.ags-values__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ags-values .ags-value__text {
		max-width: 30ch;
	}
}

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

/* Armed by script only, and only when the panel is about to come into view,
   so nothing can be left invisible if the script never runs. */
.ags-values--animate.is-armed .ags-value {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ags-values--animate.is-armed .ags-value {
		opacity: 1;
	}

	.ags-value {
		transition: background-color 0.001s;
	}
}