/* ---------------------------------------------------------------------------
   Ace Glove — Section: What We Do

   Dark (secondary) band. Heading + a supporting description share one row;
   4 equal columns sit below. Each column is icon top-right, title +
   description bottom, spaced with justify-content: space-between so the
   content fills the column cleanly. Hover is a colour fill, matching the
   restrained hover treatment used everywhere else on the site (Value bar).
--------------------------------------------------------------------------- */

.ags-wwd {
	--ags-wwd-gap: 20px;
	--ags-wwd-body-gap: 44px;

	width: 100%;
	background-color: var(--ags-secondary);
}

.ags-wwd__inner {
	width: 100%;
	max-width: var(--ags-max);
	margin: 0 auto;
	padding: var(--ags-pad-y) var(--ags-pad-x);
}

/* --- Head row: heading left, description right, same row ------------------ */

.ags-wwd__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}

.ags-wwd__intro {
	flex: 1 1 0;
	min-width: 0;
}

.ags-wwd .ags-wwd__eyebrow {
	margin: 0 0 16px;
	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-wwd .ags-wwd__heading {
	margin: 0;
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ags-white);
}

.ags-wwd .ags-wwd__desc {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	max-width: 56ch;
	font-size: var(--ags-text-size);
	font-weight: 400;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.62);
}

/* --- 4 equal columns -------------------------------------------------------- */

.ags-wwd__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ags-wwd-gap);
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.ags-wwd__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Card ------------------------------------------------------------------ */

.ags-wwd__card {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Not space-between: the icon row is a fixed height (same icon size in
	   every column), and .ags-wwd__body below is pushed down by a FIXED gap
	   (--ags-wwd-body-gap) rather than being pinned to the card's bottom
	   edge. That is what keeps every column's H4 starting at the same Y
	   position regardless of how many lines its own description wraps to —
	   space-between would instead anchor the body to the bottom, so a
	   shorter description pushes its H4 UP relative to a longer one. */
	height: 100%;
	min-height: 280px;
	padding: 28px;
	border-radius: var(--ags-radius);
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: background-color var(--ags-speed) var(--ags-ease),
	            border-color var(--ags-speed) var(--ags-ease);
}

.ags-wwd__card:hover,
.ags-wwd__card.is-hover {
	background-color: var(--ags-primary);
	border-color: var(--ags-primary);
}

.ags-wwd__top-row {
	display: flex;
	justify-content: flex-start;
}

.ags-wwd__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--ags-primary);
	transition: background-color var(--ags-speed) var(--ags-ease),
	            color var(--ags-speed) var(--ags-ease);
}

.ags-wwd__glyph {
	width: 22px;
	height: 22px;
}

.ags-wwd__card:hover .ags-wwd__icon,
.ags-wwd__card.is-hover .ags-wwd__icon {
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--ags-white);
}

.ags-wwd__body {
	margin-top: var(--ags-wwd-body-gap, 44px);
}

.ags-wwd .ags-wwd__title {
	margin: 0 0 12px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ags-white);
}

.ags-wwd .ags-wwd__text {
	margin: 0;
	font-size: var(--ags-text-size);
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.6);
	transition: color var(--ags-speed) var(--ags-ease);
}

.ags-wwd__card:hover .ags-wwd__text,
.ags-wwd__card.is-hover .ags-wwd__text {
	color: rgba(255, 255, 255, 0.92);
}

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

@media (max-width: 1024px) {
	.ags-wwd {
		--ags-wwd-gap: 16px;
		--ags-wwd-body-gap: 32px;
	}

	.ags-wwd__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.ags-wwd .ags-wwd__desc {
		max-width: 100%;
	}


	.ags-wwd__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 32px;
	}
}

@media (max-width: 767px) {
	.ags-wwd {
		--ags-wwd-gap: 14px;
	}


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

	.ags-wwd__card {
		min-height: 240px;
		padding: 22px;
	}
}

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

.ags-wwd--animate.is-armed .ags-wwd__eyebrow,
.ags-wwd--animate.is-armed .ags-wwd__heading,
.ags-wwd--animate.is-armed .ags-wwd__desc,
.ags-wwd--animate.is-armed .ags-wwd__item {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ags-wwd--animate.is-armed .ags-wwd__eyebrow,
	.ags-wwd--animate.is-armed .ags-wwd__heading,
	.ags-wwd--animate.is-armed .ags-wwd__desc,
	.ags-wwd--animate.is-armed .ags-wwd__item {
		opacity: 1;
	}

	.ags-wwd__card {
		transition: none;
	}
}