/* ============================================================
   Get Help cluster — shared V3 layout stylesheet.
   Loaded via sal_v3_shell_open() (sitewide-v3/templates/partials/shell.php),
   AFTER tokens.css and chrome.css, in the standalone document head — see
   sitewide-v3/templates/partials/gethelp-layout.php — on every Get Help page
   (for-addiction, for-betrayal, for-support-persons, qualified-therapy).
   Section styles are derived from the homepage-v3 template's inline styles
   (hero grid, numbered steps, navy CTA band, card grid) adapted to the five
   Get Help sections — same design system, own file because these pages have
   no other inline <style> block.
   Design tokens (the :root block) now live in tokens.css, loaded before this
   file by the shell — this file is no longer complete on its own.
   ============================================================ */

/* ============ Base (scoped to this document's body, like .sal-v3 on the homepage) ============ */
body.sal-gh{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;margin:0;-webkit-font-smoothing:antialiased;font-size:17px;}
body.sal-gh *{box-sizing:border-box;}
body.sal-gh img{max-width:100%;display:block;}
/* text-decoration only, no color: chrome.css's `.sal-btn-*` classes (and
   this file's `.sal-gh-card`) set their own explicit `color` for both
   normal and :hover state. A broad `body.sal-gh a{color:...}` /
   `body.sal-gh a:hover{color:...}` would out-specify those component rules
   by type-selector count (body+a = 2 type selectors vs. a single class on
   the component) regardless of load order or hover state, silently
   repainting button/card text — including making primary-button hover text
   the same color as its hover background. Link color is instead scoped
   below to `main p a`, a shape only real prose links (inside a paragraph
   of copy) can match — never a `.sal-btn` (not inside a <p>) or the
   whole-card `.sal-gh-card` link (an <a>, not something nested inside a
   <p>) — so there's no specificity race to reason about at all. */
body.sal-gh a{text-decoration:none;}
body.sal-gh main p a{color:var(--accent);}
body.sal-gh main p a:hover{color:var(--accent-dk);}
body.sal-gh h1,body.sal-gh h2,body.sal-gh h3{font-family:var(--serif);font-weight:500;color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-.01em;}
body.sal-gh .sal-eyebrow{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem;}
body.sal-gh .sal-lead{color:var(--muted);font-size:1.075rem;}

/* Scroll reveals — same gated-on-.js pattern as the homepage template, so
   content is never hidden for no-JS visitors. Applied sparingly (steps,
   the CTA band) via the .sal-rv class + optional --rv stagger index. */
html.js .sal-rv{opacity:0;transform:translateY(18px);}
html.js .sal-rv.rv-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--rv,0)*.12s);}

/* ============ HERO ============ */
.sal-gh-hero{background:var(--bg);padding:clamp(56px,7vh,96px) 0;}
.sal-gh-hero-grid{display:grid;grid-template-columns:minmax(380px,5fr) 7fr;gap:clamp(40px,4.5vw,84px);align-items:center;}
.sal-gh-hero-copy h1{font-size:clamp(2.2rem,3.4vw,3.4rem);line-height:1.08;margin:0 0 1.2rem;}
.sal-gh-hero-copy .sal-lead{max-width:32rem;margin:0 0 1.8rem;}
.sal-gh-hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.sal-gh-hero-img{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -34px rgba(16,42,58,.55);aspect-ratio:16/11;}
.sal-gh-hero-img img{width:100%;height:100%;object-fit:cover;}

/* ============ IS THIS YOU — warm tinted band, roomy recognition statements ============ */
.sal-gh-isthis{background:var(--bg-warm);padding:clamp(48px,6vh,80px) 0;}
.sal-gh-isthis-heading{max-width:44rem;font-size:clamp(1.7rem,2.4vw,2.3rem);margin:0 0 2.4rem;}
.sal-gh-isthis-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:30px 44px;}
.sal-gh-isthis-item{display:flex;align-items:flex-start;gap:16px;}
.sal-gh-check{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--bg);display:grid;place-items:center;font-size:.92rem;margin-top:.1rem;}
.sal-gh-isthis-item p{margin:0;color:var(--ink);font-size:1.06rem;line-height:1.55;}

/* ============ WHAT TO EXPECT — numbered steps (homepage .sal-num treatment) ============ */
.sal-gh-expect{padding:clamp(56px,7vh,88px) 0;}
.sal-gh-expect-heading{max-width:44rem;font-size:clamp(1.7rem,2.4vw,2.3rem);margin:0 0 2.6rem;}
.sal-gh-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,44px);}
.sal-gh-num{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-family:var(--serif);font-size:1.05rem;background:var(--bg);margin-bottom:18px;}
.sal-gh-step h3{font-size:1.3rem;margin:0 0 .6rem;}
.sal-gh-step p{color:var(--muted);margin:0;font-size:.98rem;}

/* ============ PROSE — long-form content (source-document paragraphs +
   quotes) that doesn't fit the structured is_this/expect sections. Narrower
   reading measure than the other full-width sections (this is running prose,
   not a grid), blockquote treatment matches learn.css's `.sal-lp-qa
   blockquote` pattern (accent left border, Newsreader italic quote text,
   muted sans-serif attribution line) — same design system, own scoped rule
   here since gethelp.css and learn.css are separate stylesheets loaded on
   different pages. ============ */
.sal-gh-prose{padding:clamp(48px,6vh,72px) 0;}
.sal-gh-prose .sal-wrap{max-width:46rem;margin:0 auto;}
body.sal-gh .sal-gh-prose h2{font-size:clamp(1.5rem,2.1vw,2rem);margin:0 0 1.3rem;}
body.sal-gh .sal-gh-prose p{color:var(--ink);margin:0 0 1.2rem;font-size:1.02rem;line-height:1.7;}
body.sal-gh .sal-gh-prose p:last-child{margin-bottom:0;}
body.sal-gh .sal-gh-prose blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.3rem;border-left:2.5px solid var(--accent);}
body.sal-gh .sal-gh-prose blockquote p{font-family:var(--serif);font-style:italic;color:var(--ink);margin:0 0 .5rem;}
body.sal-gh .sal-gh-prose blockquote p:last-of-type{margin-bottom:.3rem;}
/* Two-column prose variant: wide wrap, balanced columns, stacks <=900px */
.sal-gh-prose .sal-wrap.sal-gh-prose-cols-wrap{max-width:74rem;}
/* Spanish resources widens its two columns to the site's standard content
   width (2026-09-09, user-directed); bottom-lines keeps the 74rem wrap. */
body.sal-gh-spanish-resources .sal-gh-prose .sal-wrap.sal-gh-prose-cols-wrap{max-width:var(--wrap);}
.sal-gh-prose-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:start;}
.sal-gh-prose-col > h2:not(:first-child){margin-top:2.2rem;}
@media(max-width:900px){.sal-gh-prose-cols{grid-template-columns:1fr;gap:44px;}}
body.sal-gh .sal-gh-prose blockquote cite{display:block;font-style:normal;font-family:var(--sans);font-size:.85rem;color:var(--muted);}

/* ============ MEETING CTA — navy band, mirrors the homepage "Take one step today" band ============ */
.sal-gh-cta{background:var(--navy);border-radius:18px;color:#fff;padding:clamp(44px,5vw,72px) clamp(28px,4vw,72px);margin:clamp(56px,7vh,88px) 0;position:relative;overflow:hidden;}
/* body.sal-gh h2 is (0,1,2) — band text must outrank it or it renders ink-on-navy */
body.sal-gh .sal-gh-cta h2{color:#fff;font-size:clamp(1.8rem,2.6vw,2.6rem);margin:0 0 1rem;}
body.sal-gh .sal-gh-cta p{color:rgba(255,255,255,.82);max-width:36rem;margin:0 0 1.8rem;}
.sal-gh-cta-btns{display:flex;gap:16px;flex-wrap:wrap;}
/* Light-on-navy button variants: chrome.css already defines .sal-btn-light /
   .sal-btn-outline-light (and their hover-color re-assertions) for the header
   CTA + the homepage's own navy band, so no rules are duplicated here — this
   CTA band just reuses those existing chrome.css classes. */

/* ============ RESOURCES — card grid ============ */
.sal-gh-resources{padding:clamp(56px,7vh,88px) 0;}
.sal-gh-resources-heading{max-width:44rem;font-size:clamp(1.7rem,2.4vw,2.3rem);margin:0 0 2.2rem;}
.sal-gh-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
.sal-gh-card,.sal-gh-card *{text-decoration:none;}
.sal-gh-card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:26px 28px;transition:transform .2s ease,box-shadow .2s ease;}
.sal-gh-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(16,42,58,.35);}
.sal-gh-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.sal-gh-card h3{font-size:1.2rem;margin:0 0 .5rem;color:var(--ink);}
.sal-gh-card p{color:var(--muted);font-size:.95rem;margin:0 0 1rem;flex:1;}
.sal-gh-card .sal-gh-card-arrow{font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--accent);}
.sal-gh-card .sal-gh-card-arrow:after{content:"\2192";display:inline-block;margin-left:.35em;transition:transform .18s ease;}
.sal-gh-card:hover .sal-gh-card-arrow:after{transform:translateX(4px);}
.sal-gh-card.sal-ext .sal-gh-card-arrow:after{content:"\2197";}
.sal-gh-card:hover .sal-gh-card-arrow{color:var(--accent-dk);}

/* ============ Responsive (1120 / 900 / 680 — same breakpoints as the homepage) ============ */
@media(max-width:1120px){
	.sal-gh-steps{grid-template-columns:1fr 1fr;}
}
@media(max-width:900px){
	.sal-gh-hero-grid{grid-template-columns:1fr;gap:32px;}
	.sal-gh-hero-img{order:-1;aspect-ratio:4/3;}
	.sal-gh-isthis-list{grid-template-columns:1fr;}
}
@media(max-width:680px){
	.sal-gh-steps{grid-template-columns:1fr;}
	.sal-gh-card-grid{grid-template-columns:1fr;}
	.sal-gh-cta{border-radius:14px;}
}

/* ============ Reduced motion ============ */
@media(prefers-reduced-motion:reduce){
	body.sal-gh *{transition:none!important;animation:none!important;}
	html.js .sal-rv{opacity:1!important;transform:none!important;}
}

/* Video cards + on-page player modal */
.sal-gh-card-video{position:relative;}
.sal-gh-card-video::before{content:"\25B6";position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;padding-left:3px;}
.sal-gh-vmodal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;}
.sal-gh-vmodal[hidden]{display:none;}
.sal-gh-vmodal-scrim{position:absolute;inset:0;background:rgba(12,34,48,.82);}
.sal-gh-vmodal-panel{position:relative;width:min(960px,100%);}
.sal-gh-vmodal-frame{aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);}
.sal-gh-vmodal-frame iframe{width:100%;height:100%;border:0;display:block;}
.sal-gh-vmodal-x{position:absolute;top:-42px;right:0;background:none;border:0;color:#fff;font-size:1.3rem;cursor:pointer;padding:8px;}
.sal-gh-vmodal-x:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* Card media area — only present when a card passes 'img' (2026-09-04,
   Spanish resources tiles). object-fit:contain on the warm ground gives the
   three mixed-ratio images (portrait book cover, square podcast art, wide
   photo) one consistent framed treatment; a span, not a figure, because the
   whole card is already an <a> and flow content inside it is fine but the
   card's flex column wants a simple block. */
.sal-gh-card-media{display:block;margin:-26px -28px 20px;border-radius:13px 13px 0 0;overflow:hidden;background:var(--bg-warm);aspect-ratio:4/3;}
/* (0,2,1): must outrank the generic img{height:auto} rules (WP core /
   attachment classes) that otherwise make the portrait cover overflow the
   fixed-ratio frame and crop — the same collision class as the category-
   archive card-thumb fix in learn.css. */
.sal-gh-card .sal-gh-card-media img{display:block;width:100%;height:100%;object-fit:contain;}
/* ImgCrisp (active on staging/prod, NOT DDEV) wraps content images in a
   <picture> carrying AVIF/WebP sources. Every sizing rule here must
   therefore survive an optional <picture> between the media span and the
   img: give the wrapper full-bleed dimensions and let the img rules work
   inside it. Without this the img percentages resolve against the auto-
   sized <picture> and the tiles render oversized, clipped, and
   left-anchored — exactly what happened on staging 2026-09-08. */
.sal-gh-card .sal-gh-card-media picture{display:block;width:100%;height:100%;}
/* Object/scene treatments (2026-09-04): mixed-ratio tile images get one of
   two deliberate framings on the same 4:3 warm stage. --object stages
   artwork that must not crop (book cover, album art) as a shadowed object
   centered on the ground; --cover full-bleeds a photograph, which crops
   harmlessly. Same specificity discipline as the base rule above. */
.sal-gh-card .sal-gh-card-media--object{display:flex;align-items:center;justify-content:center;}
.sal-gh-card .sal-gh-card-media--object picture{display:flex;align-items:center;justify-content:center;}
.sal-gh-card .sal-gh-card-media--object img{width:auto;height:100%;max-width:100%;object-fit:contain;border-radius:4px;box-shadow:0 10px 28px -10px rgba(16,42,58,.45);}
.sal-gh-card .sal-gh-card-media--cover img{width:100%;height:100%;object-fit:cover;}

/* Spanish resources — book feature inside the prose section (2026-09-09).
   The cover is a single staged image in its own band, so the mixed-ratio
   problem the cards had doesn't exist here. Width on the img outranks the
   generic height:auto rules by being explicit about both axes' intent. */
body.sal-gh-spanish-resources .sal-sp-book{display:flex;gap:clamp(20px,3vw,32px);align-items:flex-start;background:var(--bg-warm);border:1px solid var(--line);border-radius:14px;padding:clamp(22px,3vw,34px);}
body.sal-gh-spanish-resources .sal-sp-book img{width:150px;height:auto;flex-shrink:0;border-radius:4px;box-shadow:0 10px 28px -10px rgba(16,42,58,.45);}
body.sal-gh-spanish-resources .sal-sp-book-body p{margin:0 0 1rem;}
body.sal-gh-spanish-resources .sal-sp-book .sal-btn{display:inline-block;}
body.sal-gh-spanish-resources .sal-sp-book a.sal-btn-primary{color:#fff;text-decoration:none;}
@media (max-width:640px){body.sal-gh-spanish-resources .sal-sp-book{flex-direction:column;align-items:center;text-align:center;}}