/**
 * Footer Component
 *
 * Quiet editorial closing for StreetEvolution.
 */

.se-footer {
	color: var(--color-text-primary);
	background: var(--color-white);
	border-block-end: var(--space-4) solid var(--color-primary);
}

.se-footer__inner {
	display: grid;
	gap: var(--space-24);
	padding-block: var(--space-24);
	border-block-start: var(--border-width-accent) solid var(--color-divider-soft);
}

.se-footer__brand,
.se-footer__contact,
.se-footer__social,
.se-footer__legal {
	display: flex;
	gap: var(--space-16);
	align-items: center;
	justify-content: center;
}

.se-footer__name {
	margin: var(--space-0);
	color: var(--color-black);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-black);
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-default);
}

.se-footer__logo {
	width: auto;
	max-width: var(--space-120);
	height: auto;
}

.se-footer__link,
.se-footer__social-link,
.se-footer__legal {
	color: var(--color-text-secondary);
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	letter-spacing: var(--letter-spacing-default);
}

.se-footer__link,
.se-footer__social-link {
	text-decoration: none;
}

.se-footer__social {
	flex-direction: row;
}

.se-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-32);
	height: var(--space-32);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-wide);
}

.se-footer__social-icon {
	display: block;
	width: var(--space-24);
	height: var(--space-24);
}

.se-footer__legal {
	flex-wrap: wrap;
	text-transform: uppercase;
}

.se-footer__legal p {
	margin: var(--space-0);
}

.se-footer__copyright {
	flex-basis: 100%;
	color: color-mix(in srgb, var(--color-black) 55%, transparent);
	font-size: var(--font-size-caption);
	text-align: center;
	text-transform: none;
}

@media (min-width: 48rem) {
	.se-footer__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding-block: var(--space-24);
	}
}

@media (min-width: 64rem) {
	.se-footer__inner {
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.se-footer__brand {
		justify-content: flex-start;
	}

	.se-footer__legal {
		justify-content: flex-end;
		text-align: right;
	}
}

@media (prefers-reduced-motion: reduce) {
	.se-footer,
	.se-footer * {
		transition: none;
	}
}