/* ---------------------------------------------------------------------------
   Ace Glove — Vision & Mission (About Us page)

   Designed to sit inside .ags-section-bg alongside .ags-story, sharing that
   section's photo background. This section's own panel is a solid, opaque
   light-green card (--ags-primary-tint) — deliberately NOT translucent, so
   the shared background photo behind it does not show through.
--------------------------------------------------------------------------- */

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

.ags-vision__panel {
	background-color: var(--ags-primary-tint);
	border-radius: var(--ags-about-radius);
	padding: 56px;
}

/* --- Top: heading + description, same row -------------------------------- */

.ags-vision__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 60px;
	margin-bottom: 48px;
}

.ags-vision .ags-vision__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-vision__heading {
	/* margin-top: 0 matches the Home page's default H2->H3 gap — see the
	   identical fix/comment on .ags-story__heading in ags-story.css. */
	margin-top: 0;
	margin-bottom: 0;
}

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

/* --- Bottom: the two cards ------------------------------------------------- */

.ags-vision__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.ags-vision__card {
	position: relative;
	overflow: hidden;
	border-radius: var(--ags-about-radius);
	min-height: 420px;
}

.ags-vision__bg {
	position: absolute;
	inset: 0;
	transition: opacity 0.5s var(--ags-ease);
}

.ags-vision__bg--color {
	background-color: var(--ags-primary);
}

.ags-vision__bg--image {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/*
 * Keeps the white text readable over the PHOTO specifically — the solid
 * colour layer needs no darkening at all, so the scrim now only appears
 * once the photo does, fading in/out in lockstep with it (same 0.5s
 * transition and trigger as .ags-vision__bg--image below).
 */
.ags-vision__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(19, 31, 40, 0.18) 0%, rgba(19, 31, 40, 0.55) 100%);
	opacity: 0;
	transition: opacity 0.5s var(--ags-ease);
	pointer-events: none;
}

.ags-vision__card:hover .ags-vision__scrim,
.ags-vision__card.is-hover .ags-vision__scrim {
	opacity: 1;
}

/* Vision card: colour showing, photo hidden — until hover. */
.ags-vision__card--vision .ags-vision__bg--color {
	opacity: 1;
}

.ags-vision__card--vision .ags-vision__bg--image {
	opacity: 0;
}

.ags-vision__card--vision:hover .ags-vision__bg--color,
.ags-vision__card--vision.is-hover .ags-vision__bg--color {
	opacity: 0;
}

.ags-vision__card--vision:hover .ags-vision__bg--image,
.ags-vision__card--vision.is-hover .ags-vision__bg--image {
	opacity: 1;
}

/* Mission card: solid light-grey by default (its OWN colour, not the shared
   primary-green layer), revealing its photo on hover — same direction as
   Vision, just a different resting colour. */
.ags-vision__card--mission .ags-vision__bg--color {
	background-color: #f0f1f3;
	opacity: 1;
}

.ags-vision__card--mission .ags-vision__bg--image {
	opacity: 0;
}

.ags-vision__card--mission:hover .ags-vision__bg--color,
.ags-vision__card--mission.is-hover .ags-vision__bg--color {
	opacity: 0;
}

.ags-vision__card--mission:hover .ags-vision__bg--image,
.ags-vision__card--mission.is-hover .ags-vision__bg--image {
	opacity: 1;
}

/*
 * The light-grey resting state needs dark text/badge for contrast — white
 * text (the card's normal colour, meant for a dark fill or a photo+scrim)
 * would barely read against #f0f1f3. Flips back to white the moment the
 * photo takes over on hover, matching every other card's copy colour.
 */
.ags-vision__card--mission .ags-vision__badge,
.ags-vision .ags-vision__card--mission .ags-vision__title,
.ags-vision .ags-vision__card--mission .ags-vision__subtitle {
	color: var(--ags-secondary);
	transition: color var(--ags-speed) var(--ags-ease);
}

.ags-vision__card--mission .ags-vision__badge {
	background-color: rgba(19, 31, 40, 0.08);
	transition: background-color var(--ags-speed) var(--ags-ease), color var(--ags-speed) var(--ags-ease);
}

.ags-vision .ags-vision__card--mission .ags-vision__text {
	color: rgba(19, 31, 40, 0.72);
	transition: color var(--ags-speed) var(--ags-ease);
}

.ags-vision__card--mission .ags-vision__btn {
	border-color: rgba(19, 31, 40, 0.35);
	color: var(--ags-secondary);
}

.ags-vision__card--mission:hover .ags-vision__badge,
.ags-vision__card--mission.is-hover .ags-vision__badge {
	background-color: rgba(255, 255, 255, 0.16);
}

.ags-vision__card--mission:hover .ags-vision__badge,
.ags-vision__card--mission.is-hover .ags-vision__badge,
.ags-vision .ags-vision__card--mission:hover .ags-vision__title,
.ags-vision .ags-vision__card--mission.is-hover .ags-vision__title,
.ags-vision .ags-vision__card--mission:hover .ags-vision__subtitle,
.ags-vision .ags-vision__card--mission.is-hover .ags-vision__subtitle {
	color: var(--ags-white);
}

.ags-vision .ags-vision__card--mission:hover .ags-vision__text,
.ags-vision .ags-vision__card--mission.is-hover .ags-vision__text {
	color: rgba(255, 255, 255, 0.82);
}

.ags-vision__card--mission:hover .ags-vision__btn,
.ags-vision__card--mission.is-hover .ags-vision__btn {
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--ags-white);
}

/*
 * Buttons: Mission's hover goes to the site's primary colour (client
 * request); Vision's button is left unscoped, so it falls back to
 * .ags-btn--outline-light's own global hover (white fill, dark text) —
 * also the client's explicit request, so the two buttons hover differently
 * on purpose. Placed after the Mission card-state rules above so it wins
 * whichever resting look (green fill or light grey) the button borrows.
 */
.ags-vision__card--mission .ags-btn--outline-light:hover,
.ags-vision__card--mission .ags-btn--outline-light:focus-visible {
	background-color: var(--ags-primary);
	border-color: var(--ags-primary);
	color: var(--ags-white);
}

/* --- Card content, centred ------------------------------------------------- */

.ags-vision__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 40px;
	text-align: center;
}

.ags-vision__badge {
	position: absolute;
	top: 24px;
	left: 24px;
	padding: 8px 16px;
	border-radius: var(--ags-radius);
	background-color: rgba(255, 255, 255, 0.16);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ags-white);
}

.ags-vision .ags-vision__title {
	margin: 0 0 14px;
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ags-white);
}

.ags-vision .ags-vision__subtitle {
	margin: 0 0 16px;
	max-width: 32ch;
	font-size: calc(var(--ags-text-size) + 4px);
	font-weight: 600;
	line-height: 1.4;
	color: var(--ags-white);
}

.ags-vision .ags-vision__text {
	margin: 0 0 28px;
	max-width: 38ch;
	font-size: var(--ags-text-size);
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
}

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

@media (max-width: 1024px) {
	.ags-vision__panel {
		padding: 40px 28px;
	}

	.ags-vision__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

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

	.ags-vision__card {
		min-height: 380px;
	}
}

@media (max-width: 600px) {
	.ags-vision__panel {
		padding: 32px 20px;
	}

	/*
	 * The badge ("VISION"/"MISSION") is absolutely positioned at top:24/
	 * left:24, outside this element's own flow, while .ags-vision__content
	 * centres its own (much shorter, on this narrow a column) content
	 * vertically. With plain 32px padding the centred title could land
	 * close enough to the top to overlap the badge. A bigger padding-top
	 * (badge's own 24+40px plus a clear gap) puts a floor under where the
	 * centred content can start, so it can never ride up into the badge
	 * regardless of how little text there is to centre.
	 */
	.ags-vision__content {
		padding: 80px 24px 32px;
	}
}

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

.ags-vision--animate.is-armed .ags-vision__top-left,
.ags-vision--animate.is-armed .ags-vision__top-right,
.ags-vision--animate.is-armed .ags-vision__card {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ags-vision--animate.is-armed .ags-vision__top-left,
	.ags-vision--animate.is-armed .ags-vision__top-right,
	.ags-vision--animate.is-armed .ags-vision__card {
		opacity: 1;
	}
}