/* ==========================================================================
   Temporary homepage (pages/coming-soon.php) — shown while
   Config::$coming_soon is true.
   ========================================================================== */

.soon {
	padding-block: 40px 72px;
}

/* shared copy styles */
.soon h2 {
	margin: 0 0 20px -0.04em;
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
.soon-lead {
	max-width: 44ch;
	margin: 0 0 14px;
	font-size: 19px;
	line-height: 1.4;
	font-weight: 500;
}
.soon-text {
	max-width: 58ch;
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--color-neutral-700);
}
.soon-text:last-child {
	margin-bottom: 0;
}

/* ---- Intro: headline + copy beside the photo ---- */
.soon-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px;
}
.soon-hero-copy {
	flex: 1 1 440px;
	min-width: 0;
}
/* "Coming soon" is the headline; the equipment line sits under it */
.soon-display {
	margin: 0 0 18px -0.04em;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(48px, 6.5vw, 88px);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}
.soon-hero-copy h1 {
	margin: 0 0 24px -0.02em;
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.soon-photo {
	flex: 1 1 320px;
	min-width: 0;
	max-width: 460px;
	aspect-ratio: 3 / 2;
}
.soon-photo-frame {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.soon-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Sections ---- */
.soon-section {
	margin-top: 72px;
}
.soon-cta {
	margin-top: 22px;
}
/* the equipment that is for sale now leads the page */
.soon-available {
	margin-top: 24px;
	padding-top: 28px;
	border-top: 4px solid var(--color-accent-700);
}
.soon-head-strong h2 {
	font-size: clamp(36px, 4.2vw, 56px);
}
.soon-head-strong .kicker {
	margin-bottom: 10px;
}
.soon-inquire {
	margin-top: 56px;
	padding: 36px 32px 40px;
	background: var(--color-surface);
	scroll-margin-top: var(--head-offset);
}
#equipment {
	scroll-margin-top: var(--head-offset);
}
.soon-head {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-divider);
	margin-bottom: 28px;
}
.soon-head h2 {
	margin-bottom: 0;
}
.soon-split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px 48px;
}
.soon-split > * {
	flex: 1 1 380px;
	min-width: 0;
}

/* ---- Equipment coming soon: one card per group ---- */
.soon-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px 28px;
}
@media (max-width: 1000px) {
	.soon-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.soon-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
.soon-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 22px 20px;
}
.soon-card h3 {
	margin: 0;
	font-size: 26px;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
/* items run on one after another, a bullet between them */
.soon-list {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 0;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-neutral-700);
}
.soon-list li:not(:last-child)::after {
	content: "\2022";
	margin: 0 9px;
	color: var(--color-accent-500);
}
.soon-makes {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}

/* ---- Each listing will include ---- */
.soon-sheet-head {
	padding: 10px 20px;
	border-bottom: 1px solid var(--color-divider);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
}
/* three across at most (two, then one, as the box narrows). Each cell draws
   its right + bottom rule; the outer ones are clipped */
.soon-sheet {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(170px, calc((100% - 2px) / 3)), 1fr));
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
}
.soon-sheet li {
	margin: 0 -1px -1px 0;
	padding: 16px 20px;
	border-right: 1px solid var(--color-divider);
	border-bottom: 1px solid var(--color-divider);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.01em;
}
.soon-note {
	margin: 16px 0 0;
	font-size: 15px;
	color: var(--color-neutral-700);
}

/* ---- Call now ---- */
.soon-call {
	padding: 28px 28px 30px;
	background: var(--color-surface);
}
.soon-phone {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(34px, 4vw, 48px);
	line-height: 1;
	letter-spacing: 0.01em;
	font-feature-settings: "tnum" 1;
	color: var(--color-text);
	text-decoration: none;
}
.soon-phone:hover {
	color: var(--color-accent-700);
}
.soon-email {
	display: block;
	margin-top: 12px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--color-text);
	text-decoration: none;
}
.soon-email:hover {
	color: var(--color-accent-700);
}

/* ---- A sample of the equipment for sale: one card per group, one item per line ---- */
.soon-head .soon-text {
	margin-top: 12px;
}
.soon-sample {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px 28px;
}
@media (max-width: 1200px) {
	.soon-sample {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.soon-sample {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* sample cards: green title band over a dark body */
.soon-sample-card {
	display: flex;
	flex-direction: column;
	background: var(--color-neutral-900);
	color: var(--color-bg);
	box-shadow: var(--shadow-md);
}
.soon-sample-card h3 {
	margin: 0;
	padding: 16px 22px;
	background: var(--color-accent-700);
	color: #fff;
	font-size: 24px;
	line-height: 1.08;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.soon-lines {
	list-style: none;
	margin: 0;
	padding: 8px 22px 14px;
	font-size: 15px;
	line-height: 1.45;
	color: color-mix(in srgb, var(--color-bg) 88%, transparent);
}
.soon-lines li {
	padding: 10px 0;
	border-top: 1px solid color-mix(in srgb, #fff 12%, transparent);
}
.soon-lines li:first-child {
	border-top: 0;
}

/* phone + email block under the form intro */
.soon-call-now {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--color-divider);
}
.soon-call-now h3 {
	margin: 0 0 12px;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
