/*
 * Coming soon (ADR 0135): the Coming soon page's section. The logo at the top, the words, countdown and sign-up in the
 * middle, the contact details at the bottom. Centered; Text + picture (the picture fills the section's end half to the
 * screen's edge, under the words on phones); Over a picture (the words in white on a darkened picture filling the
 * section). Its labels use the Labels font and its numbers the Numbers font (ADR 0132).
 */
.sv-coming-soon {
	--sv-coming-soon-justify: center;
	display: grid;
	gap: var(--sv-space-lg);
	min-block-size: min(78svh, 56rem);
}

.sv-coming-soon__content {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: var(--sv-space-lg);
	justify-items: var(--sv-coming-soon-justify);
	min-inline-size: 0;
	text-align: center;
}

.sv-coming-soon--layout-centered .sv-coming-soon__content {
	inline-size: min(100%, 46rem);
	margin-inline: auto;
}

.sv-coming-soon--layout-picture,
.sv-coming-soon--layout-over {
	--sv-coming-soon-justify: start;
}

.sv-coming-soon--layout-picture .sv-coming-soon__content,
.sv-coming-soon--layout-over .sv-coming-soon__content {
	text-align: start;
}

.sv-coming-soon__brand {
	display: flex;
	align-items: center;
	min-block-size: 2.5rem;
}

.sv-coming-soon__logo {
	display: block;
	inline-size: auto;
	max-inline-size: 12rem;
	max-block-size: 3rem;
}

.sv-coming-soon__name {
	font-family: var(--sv-font-heading);
	font-size: var(--sv-size-h4);
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
}

.sv-coming-soon__main {
	display: grid;
	gap: var(--sv-space-sm);
	align-content: center;
	justify-items: var(--sv-coming-soon-justify);
	max-inline-size: 40rem;
}

.sv-coming-soon__eyebrow {
	margin: 0;
	color: var(--sv-accent, var(--sv-color-link));
	font-family: var(--sv-font-label, var(--sv-font-body));
	font-size: var(--sv-size-small);
	font-weight: 700;
	font-synthesis-weight: var(--sv-font-label-synthesis, auto);
	letter-spacing: calc(0.12em * var(--sv-tracking, 1));
	text-transform: var(--sv-uppercase, uppercase);
}

.sv-coming-soon__title {
	margin: 0;
	font-family: var(--sv-font-heading);
	font-size: var(--sv-size-display);
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1));
	line-height: calc(1.05 * var(--sv-leading, 1));
	text-wrap: balance;
}

.sv-coming-soon__message {
	margin: 0 0 var(--sv-space-xs);
	max-inline-size: 36rem;
	color: var(--sv-color-muted);
	font-size: calc(var(--sv-size-body) * 1.06);
}

/* The countdown: four boxes, numbers in the Numbers font, labels small under them. */
/* One row: the boxes share the width, up to a comfortable size each. */
.sv-coming-soon__count {
	display: flex;
	gap: 0.75rem;
	inline-size: min(100%, 26rem);
	justify-content: var(--sv-coming-soon-justify);
	margin-block: var(--sv-space-xs);
}

.sv-coming-soon__unit {
	display: grid;
	flex: 1 1 0;
	gap: 0.15rem;
	min-inline-size: 0;
	max-inline-size: 6rem;
	padding: 0.75rem 0.5rem 0.6rem;
	border: 1px solid var(--sv-color-border);
	border-radius: var(--sv-radius-md, 12px);
	background: var(--sv-color-background);
	text-align: center;
}

.sv-coming-soon__number {
	font-family: var(--sv-font-number, var(--sv-font-heading));
	font-size: var(--sv-size-h2);
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1.1;
}

.sv-coming-soon__label {
	color: var(--sv-color-muted);
	font-family: var(--sv-font-label, var(--sv-font-body));
	font-size: 0.72rem;
	font-synthesis-weight: var(--sv-font-label-synthesis, auto);
	letter-spacing: calc(0.06em * var(--sv-tracking, 1));
	text-transform: var(--sv-uppercase, uppercase);
}

.sv-coming-soon__signup {
	inline-size: min(100%, 30rem);
}

.sv-coming-soon__signup .sv-newsletter__note {
	margin-block-start: 0.5rem;
	color: var(--sv-color-muted);
	font-size: var(--sv-size-small);
}

.sv-coming-soon--layout-centered .sv-newsletter__note {
	text-align: center;
}

/* Centred: a button that wraps under the field (phones) stays on the centre line too. */
.sv-coming-soon--layout-centered .sv-newsletter__row {
	justify-content: center;
}

/* Contact details and social links, small, at the bottom. */
.sv-coming-soon__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: center;
	justify-content: var(--sv-coming-soon-justify);
	color: var(--sv-color-muted);
	font-size: var(--sv-size-small);
}

.sv-coming-soon__contact {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.sv-coming-soon__contact:is(:hover, :focus-visible) {
	color: var(--sv-color-text);
}

.sv-coming-soon__social {
	display: inline-flex;
	gap: 0.5rem;
}

.sv-coming-soon__social:empty {
	display: none;
}

.sv-coming-soon__social-link {
	display: inline-grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border: 1px solid var(--sv-color-border);
	border-radius: 50%;
	color: var(--sv-color-text);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sv-coming-soon__social-link:is(:hover, :focus-visible) {
	border-color: currentcolor;
}

.sv-coming-soon__icon {
	inline-size: 1.05rem;
	block-size: 1.05rem;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Text + picture: the picture fills the section's end half (the section is the box it is placed in). */
.sv-coming-soon__img,
.sv-coming-soon__backdrop-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Over a picture: the picture fills the section, darkened, and the words turn white. */
.sv-coming-soon--layout-over {
	--sv-color-text: #fff;
	--sv-color-muted: color-mix(in srgb, #fff 82%, transparent);
	--sv-color-border: color-mix(in srgb, #fff 26%, transparent);
	--sv-accent: #fff;
	--sv-button-main-bg: #fff;
	--sv-button-main-text: #10131c;
	--sv-button-edge: initial;
	color: var(--sv-color-text);
}

.sv-coming-soon__backdrop {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--sv-color-inverse);
}

.sv-coming-soon__backdrop::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(color-mix(in srgb, #0c0f0d 52%, transparent), color-mix(in srgb, #0c0f0d 64%, transparent));
	content: "";
}

.sv-coming-soon--layout-over .sv-coming-soon__unit {
	background: color-mix(in srgb, #fff 12%, transparent);
	backdrop-filter: blur(10px);
}

.sv-coming-soon--layout-over .sv-coming-soon__eyebrow {
	color: color-mix(in srgb, #fff 88%, transparent);
}

@media (min-width: 768px) {
	.sv-coming-soon--layout-picture {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sv-coming-soon--layout-picture .sv-coming-soon__content {
		padding-inline-end: var(--sv-space-md);
	}

	.sv-coming-soon__media {
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		inline-size: 50%;
		overflow: hidden;
	}
}

@media (max-width: 767px) {
	.sv-coming-soon {
		min-block-size: auto;
	}

	.sv-coming-soon__media {
		block-size: 16rem;
		overflow: hidden;
		border-radius: var(--sv-radius-lg);
	}

	.sv-coming-soon__count {
		gap: 0.5rem;
		inline-size: 100%;
	}
}