/* ---------------------------------------------------------------------------
   Ace Glove — Our Story (About Us page)

   Designed to sit inside .ags-section-bg (own background), so this section
   itself carries none. Three stacked parts: heading + reveal description,
   photo + copy, four icon boxes.
--------------------------------------------------------------------------- */

.ags-story {
	--ags-story-icon-bg: #edeaea;
	/* --ags-about-radius now lives in ags-tokens.css (:root) so the Vision
	   & Mission section can share it too — this file just reads it. */

	position: relative;
	width: 100%;
	max-width: var(--ags-max);
	margin: 0 auto;
	padding: var(--ags-pad-y) var(--ags-pad-x);
}

/* --- Top: heading + reveal description ------------------------------------ */

.ags-story__top {
	margin: 0 0 56px;
}

.ags-story .ags-story__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-story__heading {
	/* margin-top: 0 matches the Home page's default H2->H3 gap (Products,
	   Industries: heading margin is explicit 0 on every side, so the ONLY
	   space between eyebrow and heading is the eyebrow's own 16px
	   margin-bottom). Without this the heading fell back to the browser/
	   theme's default H3 top margin, which collapsed with the eyebrow's
	   margin into a much larger, inconsistent gap. */
	margin-top: 0;
	margin-bottom: 26px;
}

/* Larger and bolder than the site's default body copy, and full width of
   the top block rather than a narrow measure. */
.ags-story .ags-story__lede {
	margin: 0;
	max-width: none;
	width: 100%;
	font-size: calc(var(--ags-text-size) + 12px);
	font-weight: 600;
	line-height: 1.65;
	color: var(--ags-secondary);
}

/*
 * Text-fill reveal: each word is dimmed to a low opacity and script brings
 * it up to full strength as the paragraph scrolls past, so the sentence
 * reads as though it is being written in rather than sliding or fading in
 * as a block. The dim starting opacity is set by the SCRIPT, never here —
 * see ags-story.js — so the paragraph reads at full strength, complete,
 * whenever GSAP/ScrollTrigger or JS is unavailable.
 */
.ags-story__word {
	display: inline-block;
}

/* --- Middle: photo + copy --------------------------------------------------- */

.ags-story__middle {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* Stretch (the grid default) rather than center: the photo has no
	   aspect-ratio of its own at this breakpoint any more, so it takes its
	   height naturally from the row — i.e. from the copy column beside it —
	   instead of a guessed constant. */
	align-items: stretch;
	gap: 60px;
	margin: 0 0 64px;
}

.ags-story__photo {
	height: 100%;
	border-radius: var(--ags-about-radius);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.ags-story__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.ags-story .ags-story__text {
	margin: 0;
	font-size: var(--ags-text-size);
	font-weight: 400;
	line-height: 1.75;
	color: var(--ags-secondary);
}

/* --- Bottom: icon boxes ----------------------------------------------------- */

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

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

.ags-story__box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	height: 100%;
	padding: 24px;
	border: 1px solid rgba(19, 31, 40, 0.1);
	border-radius: var(--ags-about-radius);
	background-color: var(--ags-white);
	transition: background-color var(--ags-speed) var(--ags-ease),
	            border-color var(--ags-speed) var(--ags-ease);
}

/* The whole card changes colour on hover, not just the icon.
   .is-hover mirrors :hover so the state can be held open for review. */
.ags-story__box:hover,
.ags-story__box.is-hover {
	background-color: var(--ags-primary);
	border-color: var(--ags-primary);
}

.ags-story__box-top {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ags-story__box-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ags-story__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: var(--ags-radius);
	background-color: var(--ags-story-icon-bg);
	color: var(--ags-primary);
	transition: background-color var(--ags-speed) var(--ags-ease),
	            color var(--ags-speed) var(--ags-ease);
}

.ags-story__glyph {
	width: 24px;
	height: 24px;
}

/* Large, mostly-invisible number sitting toward the right of the row. */
.ags-story__num {
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: rgba(19, 31, 40, 0.08);
	transition: color var(--ags-speed) var(--ags-ease);
}

.ags-story .ags-story__box-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ags-secondary);
	transition: color var(--ags-speed) var(--ags-ease);
}

.ags-story .ags-story__box-text {
	margin: 8px 0 0;
	font-size: var(--ags-text-size);
	font-weight: 400;
	line-height: 1.6;
	color: rgba(19, 31, 40, 0.6);
	transition: color var(--ags-speed) var(--ags-ease);
}

.ags-story__box-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid rgba(19, 31, 40, 0.1);
	transition: border-color var(--ags-speed) var(--ags-ease);
}

.ags-story .ags-story__box-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ags-secondary);
	transition: color var(--ags-speed) var(--ags-ease);
}

.ags-story__box-arrow {
	width: 18px;
	height: 12px;
	color: var(--ags-primary);
	transition: color var(--ags-speed) var(--ags-ease);
}

/* Hover: icon badge and number invert to sit on the green fill, all text
   turns white, the hairline turns to a translucent white. */
.ags-story__box:hover .ags-story__icon,
.ags-story__box.is-hover .ags-story__icon {
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--ags-white);
}

.ags-story__box:hover .ags-story__num,
.ags-story__box.is-hover .ags-story__num {
	color: rgba(255, 255, 255, 0.25);
}

.ags-story__box:hover .ags-story__box-title,
.ags-story__box.is-hover .ags-story__box-title,
.ags-story__box:hover .ags-story__box-text,
.ags-story__box.is-hover .ags-story__box-text,
.ags-story__box:hover .ags-story__box-label,
.ags-story__box.is-hover .ags-story__box-label {
	color: var(--ags-white);
}

.ags-story__box:hover .ags-story__box-bottom,
.ags-story__box.is-hover .ags-story__box-bottom {
	border-top-color: rgba(255, 255, 255, 0.25);
}

.ags-story__box:hover .ags-story__box-arrow,
.ags-story__box.is-hover .ags-story__box-arrow {
	color: var(--ags-white);
}

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

@media (max-width: 1024px) {
	.ags-story__middle {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.ags-story__photo {
		aspect-ratio: 1.6;
	}

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

@media (max-width: 600px) {
	.ags-story__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ags-story .ags-story__lede {
		font-size: 18px;
	}
}

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

.ags-story--animate.is-armed .ags-story__eyebrow,
.ags-story--animate.is-armed .ags-story__heading,
.ags-story--animate.is-armed .ags-story__photo,
.ags-story--animate.is-armed .ags-story__text,
.ags-story--animate.is-armed .ags-story__btn,
.ags-story--animate.is-armed .ags-story__item {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ags-story--animate.is-armed .ags-story__eyebrow,
	.ags-story--animate.is-armed .ags-story__heading,
	.ags-story--animate.is-armed .ags-story__photo,
	.ags-story--animate.is-armed .ags-story__text,
	.ags-story--animate.is-armed .ags-story__btn,
	.ags-story--animate.is-armed .ags-story__item {
		opacity: 1;
	}
}