/* ---------------------------------------------------------------------------
   Ace Glove — Section 09: Footer

   Brand block and link columns across the top, a hairline and the copyright
   across the bottom.
--------------------------------------------------------------------------- */

.ags-footer {
	--ags-footer-bg: var(--ags-secondary);
	--ags-footer-logo-h: 46px;
	/* One tone for every piece of secondary text down here. */
	--ags-footer-ink: rgba(255, 255, 255, 0.66);

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

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

/* --- Top ----------------------------------------------------------------- */

.ags-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
	gap: 56px;
	padding-bottom: 54px;
}

.ags-footer__logo-link {
	display: inline-block;
	text-decoration: none;
}

.ags-footer__logo {
	display: block;
	height: var(--ags-footer-logo-h);
	width: auto;
	max-width: 100%;
}

.ags-footer .ags-footer__text {
	margin: 22px 0 0;
	max-width: 46ch;
	font-size: var(--ags-text-size);
	font-weight: 400;
	line-height: 1.7;
	color: var(--ags-footer-ink);
}

/* --- Link columns --------------------------------------------------------- */

/* Pushed to the right of the brand block, as in the design. */
.ags-footer__nav {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 180px));
	justify-content: end;
	gap: 36px;
}

.ags-footer .ags-footer__col-title {
	margin: 0 0 18px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ags-white);
}

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

.ags-footer__links li {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.ags-footer__links li:last-child {
	margin-bottom: 0;
}

/* Set from the shared nav tokens, so a page listed here reads the same way as
   the same page in the header menu. */
.ags-footer__links a {
	font-size: var(--ags-nav-size);
	font-weight: var(--ags-nav-weight);
	letter-spacing: var(--ags-nav-tracking);
	text-transform: uppercase;
	line-height: 1.5;
	text-decoration: none;
	color: var(--ags-footer-ink);
	transition: color var(--ags-speed) var(--ags-ease);
}

/* An e-mail address reads wrongly in capitals, so it keeps its own case. */
.ags-footer__links a[href^="mailto:"] {
	text-transform: none;
	letter-spacing: 0.01em;
	overflow-wrap: anywhere;
}

.ags-footer__links a:hover,
.ags-footer__links a:focus-visible {
	color: var(--ags-primary);
	text-decoration: none;
}

/* --- Bottom --------------------------------------------------------------- */

.ags-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 0 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.ags-footer .ags-footer__copyright {
	margin: 0;
	font-size: var(--ags-text-size);
	font-weight: 400;
	line-height: 1.5;
	color: var(--ags-footer-ink);
}

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

@media (max-width: 1024px) {
	.ags-footer__inner {
		padding-top: 52px;
	}

	.ags-footer__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		padding-bottom: 40px;
	}

	/* Once stacked there is nothing to sit beside, so the columns start at
	   the left edge like everything else. */
	.ags-footer__nav {
		justify-content: start;
	}

	/*
	 * The 46ch measure exists to keep the description clear of the link
	 * columns beside it on desktop. Stacked, those columns are below it and
	 * the cap only leaves a dead strip down the right, so it comes off.
	 */
	.ags-footer .ags-footer__text {
		max-width: none;
	}
}

@media (max-width: 600px) {
	/* Three columns will not hold their links on one line at this width. */
	.ags-footer__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px;
	}

	.ags-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}