/* News strip lives in components/news.css. */

.id30-footer {
	padding: 24px 24px 28px;
	background-color: var(--color-ink);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.id30-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Brand --------------------------------------------------------------- */
.id30-footer__brand { display: flex; align-items: center; gap: 12px; }
.id30-footer__badge {
	width: 36px;
	height: 36px;
	display: block;
}
.id30-footer__name {
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
}

/* Columns ------------------------------------------------------------- */
.id30-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

/* Desktop spread — four columns with the brand as the leftmost spine.
   The inner becomes a 4-track grid; .id30-footer__cols rides the right
   three tracks via subgrid so all four columns share one rhythm. */
@media (min-width: 720px) {
	.id30-footer__inner {
		display: grid;
		/* Brand column sized to its own content (auto) — just the
		   badge + wordmark with a hair of breathing room. The three
		   nav columns split the rest evenly. */
		grid-template-columns: auto repeat(3, minmax(0, 1fr));
		column-gap: 56px;
		row-gap: 40px;
	}
	.id30-footer__brand {
		grid-column: 1 / 2;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		align-self: start;
	}
	.id30-footer__brand .id30-footer__badge {
		width: 44px;
		height: 44px;
	}
	.id30-footer__brand .id30-footer__name {
		font-family: var(--font-title);
		font-weight: 300;
		font-size: 22px;
		letter-spacing: 0.04em;
		color: rgba(255, 255, 255, 0.92);
	}
	.id30-footer__cols {
		grid-column: 2 / -1;
		display: grid;
		grid-template-columns: subgrid;
		column-gap: 48px;
		row-gap: 0;
	}
	.id30-footer__bottom {
		grid-column: 1 / -1;
	}
}

.id30-footer__col-title {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 16px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 12px;
}
.id30-footer__col-title-tick {
	display: inline-block;
	width: 18px;
	height: 1px;
	background-color: var(--color-ember);
	flex: 0 0 auto;
}

.id30-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.id30-footer__link {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	transition: color 160ms;
}
.id30-footer__link:hover { color: #fff; }

/* Social icons -------------------------------------------------------- */
.id30-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.id30-footer__icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 9999px;
	color: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.14);
	transition: color 160ms, border-color 160ms, background-color 160ms;
}
.id30-footer__icon-link:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
	background-color: rgba(255, 255, 255, 0.04);
}
.id30-footer__icon-link svg { display: block; }

/* Bottom bar ---------------------------------------------------------- */
.id30-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@media (min-width: 720px) {
	.id30-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}
}
.id30-footer__legal,
.id30-footer__made-by {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}
.id30-footer__made-by a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	transition: color 160ms, border-color 160ms;
}
.id30-footer__made-by a:hover {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* Language toggle ----------------------------------------------------
   Bilingual site — anchor whose label is the OTHER language's slug
   (one click switches). Pill chrome mirrors the navbar toggle. */
.id30-footer__lang {
	display: inline-flex;
	align-items: center;
	color: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 9999px;
	padding: 6px 14px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 160ms, color 160ms;
}
.id30-footer__lang:hover,
.id30-footer__lang:focus-visible {
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
	outline: none;
}

/* Mobile composition — editorial colophon ----------------------------
   On <720px, the footer reads as the closing colophon of an editorial
   spread: a centered ember signature rule caps the top, the brand
   stacks vertically as a wordmark, each section sits between hairline
   rules with the same ember tick + mono stamp the manifest heroes use,
   and the bottom imprint inlines © · language · attribution with
   ember-dot bullets. Same vocabulary as the rest of the site, just
   condensed into a single column. */
@media (max-width: 719px) {
	.id30-footer {
		position: relative;
		padding: 48px 24px 36px;
	}
	/* Centered ember signature — the editorial mark that opens every
	   manifest hero, here repositioned as the closing flourish. */
	.id30-footer::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 1px;
		height: 28px;
		background-color: var(--color-ember);
		opacity: 0.85;
	}

	.id30-footer__inner {
		gap: 0;
		align-items: center;
		text-align: center;
	}

	/* Brand becomes a vertical wordmark cap — badge stacked above the
	   name so it reads as a signed mark rather than a logo lockup. */
	.id30-footer__brand {
		flex-direction: column;
		gap: 10px;
		padding-bottom: 32px;
	}
	.id30-footer__name {
		font-family: var(--font-title);
		font-weight: 300;
		font-size: 19px;
		letter-spacing: 0.04em;
		color: rgba(255, 255, 255, 0.92);
	}

	/* Sections become sequenced spreads — hairline above each, including
	   the first (which separates it from the brand cap above). */
	.id30-footer__cols {
		gap: 0;
		width: 100%;
	}
	.id30-footer__col {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 28px 0;
		border-top: 1px solid rgba(255, 255, 255, 0.07);
	}
	.id30-footer__col-title {
		justify-content: center;
		margin-bottom: 16px;
		color: rgba(255, 255, 255, 0.7);
	}
	.id30-footer__list { align-items: center; }
	.id30-footer__social { justify-content: center; gap: 14px; }

	/* Bottom imprint — single flowing line, ember-dot bullets between
	   © · language · attribution. Wraps gracefully on narrow widths. */
	.id30-footer__bottom {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0;
		row-gap: 10px;
		width: 100%;
		padding-top: 24px;
	}
	.id30-footer__bottom > *:not(:first-child)::before {
		content: "·";
		color: var(--color-ember);
		font-weight: 700;
		padding: 0 12px;
		opacity: 0.85;
	}
	.id30-footer__lang { padding: 4px 12px; }
	.id30-footer__legal,
	.id30-footer__made-by { display: inline-flex; align-items: center; }
}