/**
 * Coming-soon page (Figma 2016:57). Everything here is scoped to the coming-soon shell:
 * `.lts-coming-soon-page` (the template's <main>), the coming-soon header (`.lts-header__pill`) and
 * footer (`.lts-footer--cs`). The sections reuse the existing partials (lts-hero-split, lts-newsletter-band,
 * lts-contact incl. its Gravity Forms skin); this file only adds what is new:
 *  - header: logo left, launch pill right (no nav, CTA or burger);
 *  - hero: the launch line under the lead;
 *  - signup band: the Gravity Forms signup form dressed as the static band's pill field + button;
 *  - podcast welcome;
 *  - contact: columns swapped (intro + card left, form right), submit in Tide Dark;
 *  - footer: "Stay in touch" stays in the third column with Explore gone.
 * Breakpoints are the theme's (<= 781.98 mobile, <= 959.98 contact stack, <= 1023.98 footer).
 */

/* -- Header -------------------------------------------------------------------------- */

.lts-header .lts-header__pill {
	flex: none;
	margin: 0 var(--wp--custom--layout--logo-offset, 0) 0 0;
	padding: 0.5rem 1.25rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--tint);
	color: var(--wp--custom--color--small-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--typography--weight-medium);
	letter-spacing: var(--wp--custom--typography--tracking-chip);
	line-height: 1.4;
	text-transform: uppercase;
	text-align: center;
}

@media (max-width: 781.98px) {
	.lts-header .lts-header__pill {
		flex: 0 1 11rem;
		min-width: 0;
		margin-inline-end: 0;
		padding: 0.375rem 0.75rem;
		font-size: 0.6875rem; /* 11 */
		letter-spacing: 0.08em;
		line-height: 1.3;
	}
}

/* -- Hero: launch line ------------------------------------------------------------------ */

.lts-coming-soon-page .lts-hero-split__launch {
	max-width: var(--lts-hero-lead-w, 32.8125rem);
	margin: 1.125rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
}

/* The band sits 72 under the hero (Figma 80): drop the parent's owl margin on it. */
.lts-coming-soon-page .entry-content > .lts-newsletter.alignfull,
.lts-coming-soon-page > .lts-newsletter {
	margin-block-start: 0;
}

/* -- Podcast welcome ------------------------------------------------------------------------ */

/* Bottom space = the space above the eyebrow (signup band's bottom + this top: 120 desktop, 96 below 782),
   so the line sits centred between the signup card and the contact band (Alain 10-13). */
.lts-coming-soon-page .lts-podcast.alignfull {
	margin-block: 0;
	padding-block: 2.5rem 7.5rem;
	padding-inline: var(--wp--custom--layout--gutter);
}
@media (max-width: 781.98px) {
	.lts-coming-soon-page .lts-podcast.alignfull {
		padding-block-end: 6rem;
	}
}

.lts-coming-soon-page .lts-podcast__eyebrow {
	margin: 0;
	color: var(
		--wp--custom--color--small-text
	); /* Tide Dark: small-text rule (brand Tide fails AA < 24px). */
}

.lts-coming-soon-page .lts-podcast__line {
	margin: 1.5rem 0 0;
	color: var(--wp--preset--color--contrast);
	line-height: 1.5;
	text-wrap: balance;
}

/* -- Contact: intro + card left, form right ------------------------------------------------------ */

.lts-contact--cs .lts-contact__inner {
	grid-template-columns: minmax(0, 515fr) minmax(0, 618fr);
}

.lts-contact--cs .lts-contact__title {
	margin: 0;
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.04;
}

.lts-contact--cs .lts-contact__lead {
	max-width: 27.5rem; /* 440 */
	margin: 1.5rem 0 0;
	line-height: 1.4;
}

.lts-contact--cs .lts-contact__intro .lts-contact__cards {
	margin-top: 2.25rem;
}

/* The only visible control colour change: Figma draws the submit in Tide, not Deep. Tide Dark = 5.5:1 with white. */
body
	.lts-contact--cs
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital.gform-theme--framework
	.gform_footer
	input[type="submit"].button {
	border-color: var(--wp--preset--color--accent-2);
	background: var(--wp--preset--color--accent-2);
}

body
	.lts-contact--cs
	.lts-contact__form
	.gform_wrapper.gform-theme--orbital.gform-theme--framework
	.gform_footer
	input[type="submit"].button:hover {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
}

@media (max-width: 959.98px) {
	.lts-contact--cs .lts-contact__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -- Footer: no Explore column ----------------------------------------------------------------- */

@media (min-width: 1024px) {
	.lts-footer--cs .lts-footer__touch {
		grid-column: 3;
	}
}