/**
 * Footer Framework
 *
 * VISUAL THEME FRAMEWORK.
 *
 * Styles the markup added to footer.php in this phase: a multi-
 * column layout (brand blurb, link columns, a bottom bar with
 * copyright). This is the THEME'S STRUCTURAL <footer> element from
 * the Structural Framework phase, not the composable content
 * section at sections/footer/footer.php (Composable Sections phase)
 * — the two remain entirely separate, as documented in that
 * section's own file.
 *
 * TOKEN-ONLY.
 */

.atb-footer {
	background-color: var(--atb-color-neutral-900, #171717);
	color: var(--atb-color-neutral-300, #d4d4d4);
}

.atb-footer__inner {
	padding-top: var(--atb-space-16, 4rem);
	padding-bottom: var(--atb-space-8, 2rem);
}

.atb-footer__columns {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--atb-space-8, 2rem);
	margin-bottom: var(--atb-space-12, 3rem);
}

.atb-footer__brand {
	font-family: var(--atb-font-family-heading, sans-serif);
	font-weight: var(--atb-font-weight-bold, 700);
	font-size: var(--atb-font-size-lg, 1.125rem);
	color: var(--atb-color-background, #ffffff);
	margin: 0 0 var(--atb-space-3, 0.75rem) 0;
}

.atb-footer__blurb {
	font-size: var(--atb-font-size-sm, 0.875rem);
	line-height: var(--atb-line-height-relaxed, 1.75);
	margin: 0;
	max-width: 320px;
}

.atb-footer__column-title {
	font-family: var(--atb-font-family-heading, sans-serif);
	font-weight: var(--atb-font-weight-semibold, 600);
	font-size: var(--atb-font-size-sm, 0.875rem);
	color: var(--atb-color-background, #ffffff);
	margin: 0 0 var(--atb-space-4, 1rem) 0;
}

.atb-footer__link-list {
	display: flex;
	flex-direction: column;
	gap: var(--atb-space-2, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.atb-footer__link {
	font-size: var(--atb-font-size-sm, 0.875rem);
	color: var(--atb-color-neutral-300, #d4d4d4);
	text-decoration: none;
}

.atb-footer__link:hover {
	color: var(--atb-color-background, #ffffff);
}

.atb-footer__bottom-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--atb-space-4, 1rem);
	padding-top: var(--atb-space-6, 1.5rem);
	border-top: 1px solid var(--atb-color-neutral-700, #404040);
	font-size: var(--atb-font-size-xs, 0.75rem);
	color: var(--atb-color-neutral-400, #a3a3a3);
}

/* Responsive: collapse the column grid to a single column below the
   medium breakpoint. KNOWN CSS LIMITATION: hardcoded — see
   container.css for the full explanation. */
@media (max-width: 768px) {
	.atb-footer__columns {
		grid-template-columns: 1fr;
		gap: var(--atb-space-6, 1.5rem);
	}

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