/**
 * footer.css — site footer styles.
 *
 * Four-column footer grid + brand wordmark + column links + active-link
 * treatment (#133) + responsive collapse to 2-col then 1-col + #88
 * decorative Mapbox studio-location map positioning. NOT wrapped in
 * @layer because the original inline <style> block in footer.njk was
 * not wrapped in @layer.
 *
 * Loaded on every page from base.njk AFTER nav.css.
 *
 * Migrated from src/_includes/partials/footer.njk inline <style> block
 * as part of #147 PR 1 — CSS file split foundation. Same migration
 * rationale as nav.css. Content byte-for-byte preserved.
 */

.innov8-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: 72px 0 36px;
	position: relative;
	margin-top: 96px;
}

.innov8-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px;
}

.innov8-footer-brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.innov8-footer-wordmark {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--fg-primary);
}

.innov8-footer-statement {
	margin: 0;
	font-size: var(--text-body-sm);
	line-height: var(--leading-base);
	color: var(--color-ink-200);
	max-width: 320px;
	text-wrap: pretty;
}

.innov8-footer-col-title {
	color: var(--fg-tertiary);
	margin-bottom: 16px;
}

.innov8-footer-col-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.innov8-footer-link {
	font-size: var(--text-body-sm);
	color: var(--fg-secondary);
}

/* Active-page state (#133) — applied to the rendered <span> when the
	footer link's href matches the current page URL. Adopts the cyan
	accent so the active item visually parallels the desktop nav's
	--active treatment ("permanently hovered"). `cursor: default` (the
	standard arrow, not the pointing-hand) reinforces the non-interactive
	nature of the span — the cyan accent says "you are here," the cursor
	says "no action available." The span carries no href and is naturally
	absent from the keyboard tab order; screen readers announce it as
	the current page via aria-current="page". */
.innov8-footer-link--active {
	font-size: var(--text-body-sm);
	color: var(--color-cyan-300);
	cursor: default;
}

.innov8-footer-link-static {
	font-size: var(--text-body-sm);
	color: var(--fg-tertiary);
}

.innov8-footer-baseline {
	margin-top: 64px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.innov8-footer-copyright {
	font-family: var(--font-mono);
	font-size: var(--text-overline);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

.innov8-footer-social {
	display: flex;
	gap: 16px;
	align-items: center;
}

.innov8-footer-social-link {
	color: var(--fg-tertiary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 160ms var(--ease-out);
}

.innov8-footer-social-link:hover,
.innov8-footer-social-link:focus-visible {
	color: var(--color-cyan-300);
}

.innov8-footer-social-link:focus-visible {
	outline: 2px solid var(--color-cyan-300);
	outline-offset: 4px;
	border-radius: 4px;
}

@media (max-width: 860px) {
	.innov8-footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 520px) {
	.innov8-footer-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ─── #88 — Decorative Mapbox studio-location map ──────────────
	Absolute-positioned on the right of the footer, behind the
	column content (z-index 0 vs. column content's default 1).
	Hidden below 860px where the columns collapse to 2/1-col
	stacks and the map would compete with the layout.

	Opacity + grayscale fall-back styling so the placeholder-token
	404 state (until Mike swaps in the real token) doesn't visually
	shout — the broken-image icon stays hidden because the <img>
	carries empty alt + aria-hidden + a 0-height when the src
	doesn't load. */
.innov8-footer-map {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(360px, 38vw, 600px);
	height: auto;
	max-height: 100%;
	object-fit: cover;
	opacity: 0.55;
	filter: saturate(0.85);
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.4) 35%, #000 100%);
	mask-image: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.4) 35%, #000 100%);
}

/* Lift column content above the map. Default footer-grid has no
	explicit z-index; setting position: relative + z-index: 1 keeps
	the columns above the absolute map. */
.innov8-footer .container {
	position: relative;
	z-index: 1;
}

/* When the map's src 404s (broken state until the real Mapbox
	token lands), browsers may show a broken-image icon. Hiding the
	img if the src has the placeholder string keeps the visual
	silent during the swap-in period. */
.innov8-footer-map[src*='pk.eyJ1IjoibWxpbGxpIiwiYSI6Im5lbERONlkifQ.pe7gNQ1hEGjjAB8Nz3qpwg'] {
	display: none;
}

@media (max-width: 860px) {
	.innov8-footer-map {
		display: none;
	}
}