/* GLP-1 landing page: patterns/lovable-page-glp-1.php.
   Loaded only on /glp-1/, after assets/css/lovable.css. */

/* Text sizes come from the design-system layer (.nv-lp-lead / -text /
   -small / -fine / -kicker) and the theme h1/h2/h3; image frames are the
   shared .nv-lp-photo and the white surfaces the shared .nv-lp-card. Rules
   here are layout, the page's own card surfaces and the frame shapes the
   shared modifiers don't offer. */

.nv-glp1 :is(h3, ul, ol) { margin: 0; }

.nv-glp1 .nv-lp-actions { margin-top: var(--wp--preset--spacing--30); }

.nv-glp1 .nv-glp1__head--flush { margin-bottom: 0; }

.nv-glp1__after { margin-top: var(--wp--preset--spacing--30); }

/* In-page anchors (#system, #levels …) land clear of the site nav, which
   slides back in when a link scrolls the page up. */

.nv-glp1 section[id] { scroll-margin-top: var(--wp--preset--spacing--70); }

/* Image frames: the shared .nv-lp-photo; these are the shapes its
   modifiers don't cover. The photography is still a placeholder slot
   (novos_lp_media( '' )); a real <img> drops in without layout changes. */

.nv-glp1__media--wide { aspect-ratio: 16 / 9; }

.nv-glp1__media--banner { aspect-ratio: 16 / 7; border-radius: var(--nv-radius); }

.nv-glp1__media--product { height: 120px; border-radius: var(--nv-radius-sm); }

.nv-glp1 .nv-lp-band--ink .nv-lp-photo { background: color-mix(in srgb, var(--nv-white) 6%, transparent); }

/* Hero */

.nv-glp1__hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--60); align-items: center; }

@media (min-width: 768px) {
	.nv-glp1__hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stacked on phones, the portrait frame is capped so it doesn't fill a
   whole screen height. */

.nv-glp1__hero .nv-lp-photo { max-width: 32rem; margin-inline: auto; }

.nv-glp1__hero-title { margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30); }

.nv-glp1__keep { border-bottom: 2px solid var(--nv-orange); color: var(--nv-orange-deep); }

.nv-glp1__hero-copy .nv-lp-lead { max-width: 34rem; }

.nv-glp1__hero-copy .nv-lp-actions + .nv-lp-small { margin-top: var(--wp--preset--spacing--30); }

/* Grids: item counts are fixed (6 concerns, 3 tiers, 4 evidence cards), so
   each grid declares columns that divide its count at every width. They
   stay page-local because they step at 620 / 900 / 980px, not at the
   shared .nv-lp-grid--N's 600 / 1024px. */

.nv-glp1__grid { display: grid; gap: var(--wp--preset--spacing--20); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 620px) {
	.nv-glp1__grid--concerns,
	.nv-glp1__grid--evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.nv-glp1__grid--tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
	.nv-glp1__grid--concerns { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.nv-glp1__grid--evidence { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Concern cards: whole-card links on the white band (beige with a visible
   hairline, which neither .nv-lp-card nor its --beige modifier draws). */

.nv-glp1__concern { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); padding: var(--wp--preset--spacing--30); border: 1px solid var(--nv-ink-10); border-radius: var(--nv-radius); background: var(--nv-beige); color: var(--nv-ink); text-decoration: none; transition: border-color var(--nv-dur) var(--nv-ease), background var(--nv-dur) var(--nv-ease); }

.nv-glp1__concern:hover { border-color: var(--nv-ink-40); background: var(--nv-white); }

.nv-glp1__concern:focus-visible { outline: 2px solid var(--nv-orange); outline-offset: 3px; }

.nv-glp1__concern .nv-lp-small { margin: 0; }

.nv-glp1__concern .nv-glp1__more { margin-top: auto; padding-top: var(--wp--preset--spacing--10); }

/* "Explore …" text links: at least 24px tall so they stay tappable. */

.nv-glp1__more { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--10); min-height: 24px; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--nv-orange-deep); text-decoration: none; }

a.nv-glp1__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Years ahead */

.nv-glp1__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: var(--wp--preset--spacing--60); align-items: center; }

.nv-glp1__split .nv-lp-lead { max-width: 34rem; }

.nv-glp1__pull { padding-left: var(--wp--preset--spacing--20); border-left: 2px solid var(--nv-orange); }

/* System timeline: each step is a shared card (large padding) at this
   page's medium radius, laid out as a grid. */

.nv-glp1__timeline { display: grid; gap: var(--wp--preset--spacing--20); padding: 0; list-style: none; }

.nv-glp1__step { display: grid; gap: var(--wp--preset--spacing--30); border-radius: var(--nv-radius); }

.nv-glp1__step-meta { display: flex; flex-direction: column; gap: 4px; }

.nv-glp1__step-meta h3 { margin-top: var(--wp--preset--spacing--10); }

.nv-glp1__entries { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--wp--preset--spacing--30); }

.nv-glp1__entry { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }

.nv-glp1__entry > * { margin: 0; }

.nv-glp1__entry .nv-glp1__more { margin-top: auto; }

@media (min-width: 980px) {
	.nv-glp1__step { grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr); }
}

.nv-glp1__tags { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); padding: 0; list-style: none; }

.nv-glp1__tags li { padding: 4px var(--wp--preset--spacing--10); border-radius: var(--nv-radius-pill); background: var(--nv-beige); font-size: var(--nv-fs-mono); font-weight: 500; line-height: 1.2; color: var(--nv-ink-80); }

/* Levels (beige with a visible hairline, so not .nv-lp-card--beige). */

.nv-glp1__tier { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); padding: var(--wp--preset--spacing--40); border: 1px solid var(--nv-ink-10); border-radius: var(--nv-radius); background: var(--nv-beige); }

.nv-glp1__tier > * { margin: 0; }

.nv-glp1__tier .nv-btn { margin-top: auto; }

.nv-glp1__tier .nv-lp-small:last-of-type { margin-bottom: var(--wp--preset--spacing--20); }

.nv-glp1__tier--featured { border: 2px solid var(--nv-orange); background: var(--nv-white); box-shadow: var(--nv-shadow); }

/* Age kit: a shared card on the beige page, borderless, centred and wider
   than the section head. */

.nv-glp1 .nv-glp1__kit { max-width: 68rem; margin-inline: auto; border: 0; }

@media (min-width: 780px) {
	.nv-glp1 .nv-glp1__kit { padding: var(--wp--preset--spacing--50); }
}

.nv-glp1 .nv-glp1__kit-head { margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30); }

.nv-glp1__outputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--10); padding: 0; list-style: none; }

.nv-glp1__outputs li { padding: var(--wp--preset--spacing--20); border: 1px solid var(--nv-ink-10); border-radius: var(--nv-radius-sm); background: var(--nv-beige); font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--nv-ink); }

@media (min-width: 980px) {
	.nv-glp1__outputs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Evidence: shared column cards at this page's medium radius. */

.nv-glp1__evidence { gap: var(--wp--preset--spacing--10); border-radius: var(--nv-radius); }

.nv-glp1__evidence > * { margin: 0; }

.nv-glp1__trust { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); margin-top: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--30) 0; border-block: 1px solid var(--nv-ink-10); list-style: none; }

.nv-glp1__trust .nv-chip { font-size: var(--nv-fs-mono); white-space: normal; }

.nv-glp1__survey { max-width: 44rem; margin-top: var(--wp--preset--spacing--30); color: var(--nv-ink); }

.nv-glp1__footnote { font-style: italic; }

/* Final CTA */

.nv-glp1__final-actions { align-items: center; }

.nv-glp1__text-link { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--10); min-height: 24px; font-size: var(--wp--preset--font-size--small); color: var(--nv-on-dark-muted); text-decoration: underline; text-underline-offset: 3px; }

.nv-glp1__text-link:hover { color: var(--nv-white); }

@media (max-width: 619px) {
	.nv-glp1__final-actions { flex-direction: column; }
}