/* ---------------------------------------------------------------------------
   Ace Glove — Section: Awards & Certifications

   Left: heading/description/button. Right: an infinite, draggable
   certification-image carousel. The nav (arrows + progress bar + count)
   below the slider is a deliberate visual copy of the Home page Product
   Slider's own design/values (ags-products.css .ags-products__nav and
   friends) — duplicated under this section's own class names rather than
   sharing the rule, so the two sections stay independent, same convention
   as every other section in this plugin (e.g. Page Hero vs Home Hero).
--------------------------------------------------------------------------- */

.ags-awards {
	--ags-awards-gap: 16px;
	--ags-awards-per-view: 3;

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

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

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

/* --- Left: content ----------------------------------------------------- */

.ags-awards .ags-awards__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-awards .ags-awards__heading {
	margin: 0 0 20px;
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ags-secondary);
}

.ags-awards .ags-awards__lede {
	margin: 0 0 32px;
	font-size: var(--ags-text-size);
	font-weight: 400;
	line-height: 1.8;
	color: rgba(19, 31, 40, 0.68);
}

/* --- Right: slider ------------------------------------------------------- */

.ags-awards__viewport {
	overflow: hidden;
	touch-action: pan-y;
	cursor: grab;
}

.ags-awards__slider.is-dragging .ags-awards__viewport {
	cursor: grabbing;
}

.ags-awards__track {
	display: flex;
	gap: var(--ags-awards-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

.ags-awards__item {
	flex: 0 0 calc(
		(100% - (var(--ags-awards-per-view) - 1) * var(--ags-awards-gap))
		/ var(--ags-awards-per-view)
	);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Certificate "card" --------------------------------------------------- */

.ags-awards__slide {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid rgba(19, 31, 40, 0.1);
	border-radius: var(--ags-radius);
	background-color: rgba(19, 31, 40, 0.03);
	cursor: pointer;
	overflow: hidden;
}

.ags-awards__slide:focus-visible {
	outline: 2px solid var(--ags-primary);
	outline-offset: 2px;
}

/* Portrait document shape; the image is CONTAINED (not cropped) inside it so
   certificate text never gets cut off — the lightbox is what lets the user
   inspect it at full size anyway. */
.ags-awards__img {
	display: block;
	width: 100%;
	aspect-ratio: 0.75;
	object-fit: contain;
	padding: 14px;
	transition: transform 0.4s var(--ags-ease), filter 0.4s var(--ags-ease);
}

/* Scale up + darken slightly on hover, per the brief. Scoped to the slide
   button so a drag (which doesn't move the mouse off the element) never
   triggers it accidentally — only a genuine hover does. */
.ags-awards__slide:hover .ags-awards__img,
.ags-awards__slide.is-hover .ags-awards__img {
	transform: scale(1.06);
	filter: brightness(0.88);
}

/* --- Navigation: copy of the Home page Product Slider's own design ------- */

.ags-awards__nav {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 28px;
}

.ags-awards__arrows {
	display: flex;
	flex: none;
	gap: 10px;
}

.ags-awards__arrow-btn {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(19, 31, 40, 0.18);
	border-radius: 10px;
	background-color: transparent;
	color: var(--ags-secondary);
	cursor: pointer;
	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-awards__arrow-btn:hover,
.ags-awards__arrow-btn:focus-visible {
	background-color: var(--ags-primary);
	border-color: var(--ags-primary);
	color: var(--ags-white);
}

.ags-awards__arrow-btn .ags-icon {
	width: 19px;
	height: 13px;
}

.ags-awards__arrow-btn--prev .ags-icon {
	transform: scaleX(-1);
}

.ags-awards__bar {
	position: relative;
	flex: 1 1 auto;
	height: 3px;
	border-radius: 2px;
	background-color: rgba(19, 31, 40, 0.12);
	overflow: hidden;
}

.ags-awards__bar-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 2px;
	background-color: var(--ags-primary);
}

.ags-awards .ags-awards__count {
	flex: none;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	color: rgba(19, 31, 40, 0.42);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.ags-awards__count-now {
	font-size: 19px;
	color: var(--ags-primary);
}

.ags-awards__count-sep {
	margin: 0 3px;
}

/* --- Lightbox -------------------------------------------------------------- */

.ags-awards__lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background-color: rgba(19, 31, 40, 0.85);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s var(--ags-ease);
}

.ags-awards__lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.ags-awards__lightbox-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	border-radius: 6px;
	background-color: var(--ags-white);
	object-fit: contain;
}

.ags-awards__lightbox-close {
	position: absolute;
	top: 24px;
	right: 24px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--ags-white);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--ags-speed) var(--ags-ease);
}

.ags-awards__lightbox-close:hover,
.ags-awards__lightbox-close:focus-visible {
	background-color: var(--ags-primary);
}

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

@media (max-width: 1024px) {
	.ags-awards {
		--ags-awards-per-view: 2;
	}

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

}

@media (max-width: 600px) {
	.ags-awards {
		--ags-awards-per-view: 1;
	}


	.ags-awards__nav {
		gap: 16px;
	}

	.ags-awards__arrow-btn {
		width: 40px;
		height: 40px;
	}

	.ags-awards__lightbox {
		padding: 20px;
	}
}

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

.ags-awards--animate.is-armed .ags-awards__eyebrow,
.ags-awards--animate.is-armed .ags-awards__heading,
.ags-awards--animate.is-armed .ags-awards__lede,
.ags-awards--animate.is-armed .ags-awards__btn,
.ags-awards--animate.is-armed .ags-awards__item {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ags-awards--animate.is-armed .ags-awards__eyebrow,
	.ags-awards--animate.is-armed .ags-awards__heading,
	.ags-awards--animate.is-armed .ags-awards__lede,
	.ags-awards--animate.is-armed .ags-awards__btn,
	.ags-awards--animate.is-armed .ags-awards__item {
		opacity: 1;
	}
}