/**
 * OSHIDA — global footer.
 *
 * Every number below is measured off tools/figma/section-metadata.xml. The
 * footer card 1558:844 sits at (103, 8082.115) on the 1440px home frame, and
 * its children are quoted in that frame, so a child's design position is
 * `child - (103, 8082.115)`.
 *
 *   card          1234 x 368, r=50            @figma 1558:844
 *   inner group   1128.88 wide at x=53.58     @figma 1562:875
 *   statement     518 x 85 at (54, 60)        @figma 1559:919
 *   contact block 537.91 wide at (644.55, 61) @figma 1558:811
 *   chips         60 tall at y=181.52, 25px apart
 *                                             @figma 1559:890 / 891 / 893
 *   social        60.89 square at y=181.08, 19.78px apart
 *                                             @figma 1562:860 / 863 / 866
 *   follow pill   334 x 60 at (848.46, 181.52)
 *                                             @figma 1560:926
 *   legal row     30 tall at y=290            @figma 1559:925
 *
 * Owner: work package B1.
 */

.o-footer {
	padding-block: var(--o-section-gap-lg) calc(var(--o-space-3xl) + var(--o-space-xl));
}

/*
 * CROSS-REQUEST TO A1 — base/layout.css `.o-container`.
 *
 * `.o-container` is `max-inline-size: 1235px` WITH `padding-inline: 102.5px`
 * inside it, and box-sizing is border-box globally, so its content column comes
 * out 1030px wide at the 1440px design width. The design's content column IS
 * 1235px: the footer wordmark 1486:564 is 1235 wide inside a 1440 frame, which
 * is where --o-gutter's 102.5px came from in the first place. The gutter has to
 * sit outside the 1235, not inside it.
 *
 * Until A1 changes `.o-container`, the footer computes its own width the way
 * the design does. Every page section will hit the same 205px shortfall, so
 * this needs fixing once, in layout.css, not copied around.
 */
.o-footer__inner {
	inline-size: min(100% - 2 * var(--o-gutter), var(--o-container));
	max-inline-size: none;
	padding-inline: 0;
}

/* --------------------------------------------------------------------------
 * Wordmark and tagline
 * -------------------------------------------------------------------------- */

.o-footer__wordmark-media,
.o-footer__wordmark-media .o-media__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/*
 * @figma 1558:830. The design sets this in TF Ponetone Expanded, a third,
 * non-OFL display face that is not licensed for this theme — docs/ai/design-
 * tokens.md §9.2. Rendered in Estedad with the tracking the render shows
 * (letters spread evenly across the full 1196px run). It is an approximation of
 * the letterform, not of the layout. Note the typo is the design's own.
 */
.o-footer__tagline {
	margin-block-start: var(--o-space-2xl);
	color: var(--o-text-muted);
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-regular);
	letter-spacing: 0.55em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	/* The tracking adds a trailing gap after the last letter; pull it back so the
	 * run stays optically centred. */
	text-indent: 0.55em;
}

/* --------------------------------------------------------------------------
 * The card
 * -------------------------------------------------------------------------- */

.o-footer__card {
	margin-block-start: 68px; /* 8082.115 - 8013.71 @figma 1558:830 -> 1558:844 */
	padding: 60px 54px 48px;
	border-radius: var(--o-radius-xl);
	background-color: var(--o-veil-footer);
	box-shadow: var(--o-shadow-panel);
}

.o-footer__grid {
	display: grid;
	/* 578 : 518 with a 32px gutter is the measured 1128.88 run. */
	grid-template-columns: minmax(0, 578fr) minmax(0, 518fr);
	column-gap: 32px;
	/* 1558:811 ends at y=149, 1559:890 starts at y=181.52. */
	row-gap: 33px;
	align-items: center;
}

.o-footer__cell {
	min-inline-size: 0;
}

/* --------------------------------------------------------------------------
 * Contact rows — label, rule, then the values at the inline end
 * -------------------------------------------------------------------------- */

.o-footer__row {
	display: flex;
	align-items: center;
	gap: var(--o-space-xs);
	min-block-size: 30px;
}

/* Row pitch 58px: 1558:812 at y=61 -> 1559:860 at y=119, on 30.45px rows. */
.o-footer__row + .o-footer__row {
	margin-block-start: 28px;
}

.o-footer__row-label {
	flex: none;
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-regular);
	line-height: 1.2;
	letter-spacing: var(--o-track-tight);
}

.o-footer__rule {
	flex: 1 1 auto;
	min-inline-size: var(--o-space-xs);
	block-size: 1px;
	background-color: var(--o-line-soft);
}

.o-footer__row-values {
	display: flex;
	flex: none;
	align-items: center;
	gap: 33px; /* 776.4 - 743.5 between the two number+icon pairs */
}

.o-footer__contact {
	display: inline-flex;
	align-items: center;
	gap: 12px; /* icon sits 12px from its value */
	color: var(--o-text);
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-regular);
	/* The body leading (1.944) would make a 30px icon row 35px tall. */
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--o-radius-xs);
}

.o-footer__contact:hover .o-footer__contact-value {
	text-decoration: underline;
}

.o-footer__contact-icon,
.o-footer__contact-icon .o-media__img {
	display: block;
	inline-size: 30px;
	block-size: 30px;
	border-radius: var(--o-radius-xs);
}

/* --------------------------------------------------------------------------
 * Statement plaque
 * -------------------------------------------------------------------------- */

.o-footer__plaque {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 21px;
	min-block-size: 85px;
	padding-block: 19px;
	padding-inline: var(--o-space-sm);
	border-radius: var(--o-radius-sm);
	background-color: var(--o-veil-well);
}

.o-footer__plaque-mark {
	display: block;
	flex: none;
	inline-size: 41px;
	block-size: 38px;
}

.o-footer__plaque-icon {
	inline-size: 100%;
	block-size: 100%;
}

.o-footer__plaque-text {
	margin: 0;
	font-size: var(--o-fs-h3);
	font-weight: var(--o-fw-semibold);
	letter-spacing: var(--o-track-tight);
	line-height: 1.2;
}

/* --------------------------------------------------------------------------
 * Follow row — the pill at the inline start, then the three social buttons
 * -------------------------------------------------------------------------- */

.o-footer__cell--follow {
	display: flex;
	align-items: center;
	gap: 21px;
}

.o-footer__follow {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.o-footer__social {
	display: flex;
	flex: none;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-footer__social-link {
	display: block;
	border-radius: var(--o-radius-md);
}

.o-footer__social-icon,
.o-footer__social-icon .o-media__img {
	display: block;
	inline-size: 61px;
	block-size: 61px;
	border-radius: var(--o-radius-md);
}

/* --------------------------------------------------------------------------
 * Page-link chips
 * -------------------------------------------------------------------------- */

.o-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
 * Legal row
 * -------------------------------------------------------------------------- */

.o-footer__legal {
	display: flex;
	align-items: center;
	gap: var(--o-space-xs);
	margin-block-start: 49px; /* 290 - 241.5 @figma 1559:891 -> 1559:925 */
	min-block-size: 30px; /* @figma 1559:925 */
	color: var(--o-text-muted);
	font-size: var(--o-fs-sm);
	line-height: 1.4;
}

.o-footer__rights,
.o-footer__years {
	flex: none;
}

.o-footer__years {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

/* --------------------------------------------------------------------------
 * Hover and motion
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.o-footer__social-icon .o-media__img,
	.o-footer__contact-icon .o-media__img {
		transition: filter var(--o-dur-fast) var(--o-ease-standard);
	}
}

.o-footer__social-link:hover .o-media__img,
.o-footer__contact:hover .o-footer__contact-icon .o-media__img {
	filter: brightness(1.25);
}

/* --------------------------------------------------------------------------
 * Collapse
 * -------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.o-footer__card {
		padding: var(--o-space-lg) var(--o-space-md);
	}

	.o-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--o-space-md);
	}

	.o-footer__tagline {
		letter-spacing: 0.3em;
		font-size: var(--o-fs-xs);
	}

	.o-footer__cell--follow {
		flex-wrap: wrap;
	}
}

@media (max-width: 599px) {
	.o-footer__row {
		flex-wrap: wrap;
		gap: var(--o-space-2xs);
	}

	.o-footer__rule {
		display: none;
	}

	/* `flex: none` keeps the two number+icon pairs on one line at design width;
	 * below `sm` they have to be allowed to shrink, or the whatsapp pair runs out
	 * past the card's rounded edge. */
	.o-footer__row-values {
		flex: 1 1 auto;
		flex-wrap: wrap;
		min-inline-size: 0;
		gap: var(--o-space-2xs) var(--o-space-md);
	}

	.o-footer__plaque {
		gap: var(--o-space-2xs);
		padding-inline: var(--o-space-2xs);
	}

	.o-footer__plaque-text {
		font-size: var(--o-fs-lg);
	}

	.o-footer__legal {
		flex-wrap: wrap;
		gap: var(--o-space-2xs);
	}

	.o-footer__social {
		gap: var(--o-space-2xs);
	}
}