/* =========================================================================
   Longevity — template-longevity.php (Figma "Page Longevity", 40000363:39434).

   Same conventions as main.css and pages.css: one banner-comment block per
   section, tokens and container measures from main.css's :root, BEM names.

   No section on this page is its own any more: the "Beyond the stay" accordion
   was removed when Figma dropped it, so this file is only the deltas the
   shared components need for their instances here.

   Enqueued after pages.css (inc/setup.php) so the .vprops--split overrides
   below win over the base .vprops rules.

   ponytail: a separate file only because main.css and pages.css are being
   written concurrently by other agents; fold it into pages.css once both land.
   ========================================================================= */

:root {
	/* Longevity-only additions, kept here rather than in main.css so the pages
	   being built in parallel do not contend over one file. */
	--c-vprops-body: 600px;   /* Figma holds the left column's copy to 597px */
}

/* ---- Shared-partial extras used only by Longevity ----------------------- */
/* The challenge component's optional second heading line, in the section's own
   orange (Figma 40000363:39438). The selector only exists when the $arg is
   passed, so the home and Journey pages are untouched. */
.challenge__title-accent {
	display: block;
	color: var(--c-orange);
}

/* ---- Beyond the stay (Figma 40000598:147308) ---------------------------- */
/* Kicker, heading and copy share the left half of the 1488 measure; the two
   cards stack down the right. The cards are the same component as the
   value-props strip under the hero (styled in pages.css); only the surrounding
   layout is new. */
.vprops--split { padding-top: clamp(48px, 5.787vw, 100px); }   /* 100px @1728 */

.vprops__measure {
	max-width: 1488px;
	margin-inline: auto;
}

.vprops__kicker {
	margin: 0;
	font-size: clamp(1rem, 1.042vw, 1.125rem);       /* 18px @1728 */
	line-height: 1.56;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--c-accent);
}

.vprops__heading {
	max-width: 684px;
	margin: 8px 0 0;
	font-size: clamp(1.75rem, 3.009vw, 3.25rem);     /* 52px @1728 */
	line-height: 1.2;                                 /* 62.4px @52px */
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--c-ink);
}

/* 724 + 40 + 724 = the 1488 measure. */
.vprops__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

/* Figma's 50px between the heading block and the copy below it. */
.vprops__col {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.vprops__body { max-width: var(--c-vprops-body); }

.vprops__body p {
	margin: 0;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);   /* 20px @1728 */
	line-height: 1.6;
	font-weight: 500;
	color: var(--c-body);
}

/* Figma separates the two paragraphs with one empty line. */
.vprops__body p + p { margin-top: var(--s-32); }

/* The cards stack full-width here instead of running 3-up. */
.vprops--split .vprops__grid {
	grid-template-columns: 1fr;
	max-width: none;
	margin-inline: 0;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
	.vprops__split { grid-template-columns: 1fr; gap: var(--s-32); }
	.vprops__col { gap: var(--s-32); }
	.vprops__body { max-width: none; }
}