/* Leology theme · design system 1.2.0 · Arena's Coming Soon page (inc/ds.php: leology_ds_soon(), surface 'soon').
   Class selectors only, in layer `ds` (wins over style.css, which is in `legacy`).

   template-parts/ds-coming-soon.php: Arena's opening field, typographic only, everything centred (stakeholder
   feedback, 19/10/2026). The Ultramarine field with column rules (COMPONENT_LIBRARY.md 3.7); the product name in
   Sun condensed capitals, small; the state ("Coming soon", in both languages) as the dominant white display line; a Sun
   primary and a ghost button (2.1). It opens on the field and closes on the deep footer.
   Nothing moves: no entrance, no scroll motion, no typewriter (Arena is not open; only Arena moves). Hover, focus
   and press feedback stay. */

@layer ds {

	/* ---- The field ------------------------------------------------------------------------------------ */
	.leo-ds--soon .leo-dssoon {
		position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
		background: var(--b-field); color: #fff;
	}
	/* Nearly a screen: 78 % of a phone's height (enough that the footer never ends above the screen's bottom edge,
	   leaving a white strip), min(88vh, 860px) from tablets up. */
	.leo-ds--soon .leo-dssoon { min-height: 78vh; min-height: 78svh; }
	@media (min-width: 768px) { .leo-ds--soon .leo-dssoon { min-height: min(88vh, 860px); } }

	.leo-ds--soon .leo-dssoon__inner {
		position: relative; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center;
		padding-top: 88px; padding-bottom: 96px; text-align: center;
	}
	@media (min-width: 768px) { .leo-ds--soon .leo-dssoon__inner { padding-top: 96px; padding-bottom: 104px; } }

	/* On the field the focus ring is Sun (design system §2.4). */
	.leo-ds--soon .leo-dssoon :focus-visible { outline-color: var(--b-sun); }

	/* Column rules (3.7): a 1 px rule at the container's left edge and every quarter, behind the content. */
	.leo-ds--soon .leo-dssoon__rules {
		position: absolute; inset: 0; z-index: -1; pointer-events: none;
		border-left: 1px solid var(--ds-color-rule-on-ultramarine);
		background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--ds-color-rule-on-ultramarine) calc(25% - 1px) 25%);
	}

	/* ---- The heading: the name (small, Sun) over the state (the dominant line, white) ------------------- */
	.leo-ds--soon .leo-dssoon__title {
		display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; margin: 0;
		text-transform: uppercase; font-family: var(--ax-display); font-stretch: 75%; font-weight: 800;
	}
	.leo-ds--soon .leo-dssoon__name {
		color: var(--b-sun); font-size: clamp(30px, 4.2vw, 56px); line-height: 1; letter-spacing: .08em;
	}
	.leo-ds--soon .leo-dssoon__state {
		color: #fff; font-size: clamp(64px, 15vw, 216px); line-height: .9; letter-spacing: -.005em; text-wrap: balance;
	}

	/* ---- Actions: the two ways in, centred under the state --------------------------------------------- */
	.leo-ds--soon .leo-dssoon__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 40px; }
	@media (min-width: 768px) { .leo-ds--soon .leo-dssoon__actions { margin-top: 56px; } }
	@media (max-width: 599.98px) {
		.leo-ds--soon .leo-dssoon__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
	}
	.leo-ds--soon .leo-dssoon__btn { justify-content: center; white-space: nowrap; text-decoration: none; }
	/* In the hero the primary turns white on hover (2.1), as on Arena's own field. */
	.leo-ds--soon .leo-dssoon .leo-btn--yellow:hover, .leo-ds--soon .leo-dssoon .leo-btn--yellow:focus-visible { background: #fff; color: var(--b-ink); border-color: #fff; }
	.leo-ds--soon .leo-dssoon__icon { width: 20px; height: 20px; flex: none; transition: transform 220ms var(--mo-ease); }
	@media (hover: hover) {
		.leo-ds--soon .leo-dssoon__btn:hover .leo-dssoon__icon { transform: translate3d(2px, -2px, 0); }
	}
}