/* ------------------------------------------------------------------
   Custom Hero  (sp/custom-hero)  -  Shawn Preston
   Full-bleed spotlight background, content capped + centered at 1440px.
   Tokens are scoped to .sp-hero so the block stays self-contained.
   NOTE: enqueue the Anton + Archivo web fonts separately (theme/functions).
------------------------------------------------------------------ */

.sp-hero{
    --sp-ink:#0A0B0D;
    --sp-crimson:#E03131;            /* accents: ticks, seams, stars, glow-dot */
    --sp-crimson-btn:#D42A2A;         /* button fill — white text passes AA (~5:1) */
    --sp-crimson-btn-hover:#EC4444;
    --sp-bone:#F4F1EC;
    --sp-muted:#9AA0AB;
    --sp-label:#8A909B;               /* lifted so small caps clear AA on ink */
    --sp-tungsten:#E9C9A0;
    --sp-edge:rgba(244,241,236,.10);
    --sp-maxw:1440px;

    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:var(--sp-ink);
    color:var(--sp-bone);
    font-family:var(--sp-font-body);
}

/* spotlight */
.sp-hero::before{
    content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
    background:
        radial-gradient(120% 90% at 68% 42%,rgba(233,201,160,.14),rgba(233,201,160,.05) 26%,rgba(10,11,13,0) 55%),
        radial-gradient(100% 120% at 64% 50%,#1a2130,#0d1017 42%,var(--sp-ink) 72%);
}
/* vignette to pull focus into the pool of light */
.sp-hero::after{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(130% 120% at 50% 45%,rgba(10,11,13,0) 40%,rgba(10,11,13,.55));
}

/* content cap (works even though the section is align=full) */
.sp-hero .sp-container{max-width:var(--sp-maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,64px);}
.sp-hero__grid{
    position:relative;z-index:1;            /* content sits above the ::before/::after decoration (editor-clickable) */
    display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
    gap:clamp(24px,4vw,72px);
    min-height:86vh;padding-block:112px 72px;
}
.sp-hero--compact .sp-hero__grid{min-height:62vh;padding-block:104px 56px;}
.sp-hero--no-media .sp-hero__grid{grid-template-columns:1fr;}

.sp-hero__body{max-width:660px;}
.sp-hero--no-media .sp-hero__body{max-width:100%;}

/* labels / eyebrow */
.sp-label{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;}
.sp-hero__eyebrow{display:flex;align-items:center;gap:14px;color:var(--sp-muted);margin:0 0 22px;}
.sp-hero__tick{width:26px;height:2px;background:var(--sp-crimson);flex:none;}

/* heading */
.sp-hero__heading{
    font-family:var(--sp-font-display);font-weight:400;text-transform:uppercase;
    letter-spacing:.01em;line-height:.92;color:var(--sp-bone);margin:0;overflow-wrap:break-word;
}
.sp-hero__heading--identity{font-size:clamp(42px,6.6vw,98px);max-width:12ch;}
.sp-hero__heading--promise{font-size:clamp(32px,4.4vw,62px);line-height:.98;max-width:20ch;}
.sp-hero--no-media .sp-hero__heading{max-width:min(1100px,100%);}

/* accent + glow words (glow has a visible fallback FIRST) */
.sp-title__accent{color:var(--sp-crimson);}
.sp-title__glow{color:var(--sp-tungsten);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
    .sp-title__glow{
        color:transparent;
        background:linear-gradient(180deg,#fff,var(--sp-tungsten));
        -webkit-background-clip:text;background-clip:text;
    }
}

/* lede */
.sp-lede{font-size:clamp(15px,1.2vw,18px);line-height:1.65;color:#C9CDD4;max-width:500px;margin:26px 0 34px;}
.sp-hero--no-media .sp-lede{max-width:50%;}

/* buttons */
.sp-hero__cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:40px;}
.sp-btn{
    font-family:var(--sp-font-body);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
    padding:16px 30px;border-radius:2px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;
    border:1px solid transparent;background:var(--sp-crimson-btn);color:#fff;
    transition:transform .18s,background .25s,border-color .25s;
}
.sp-btn:hover{background:var(--sp-crimson-btn-hover);transform:translateY(-2px);}
.sp-btn--ghost{background:transparent;color:var(--sp-bone);border-color:var(--sp-edge);}
.sp-btn--ghost:hover{border-color:var(--sp-bone);background:transparent;}
.sp-btn__dot{width:8px;height:8px;border-radius:50%;background:var(--sp-crimson);box-shadow:0 0 0 4px rgba(224,49,49,.2);flex:none;}

/* trust strip */
.sp-hero__trust{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--sp-edge);}
.sp-hero__trust-label{color:var(--sp-label);letter-spacing:.22em;font-size:11px;}
.sp-hero__trust-names{display:flex;gap:18px;flex-wrap:wrap;}
.sp-hero__trust-name{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sp-muted);font-weight:600;}

/* media slot */
.sp-hero__media{position:relative;justify-self:center;width:100%;max-width:470px;margin:0;}
.sp-hero__rim{position:absolute;top:-6%;right:-6%;width:60%;height:70%;z-index:-1;
    background:radial-gradient(circle at 70% 30%,rgba(233,201,160,.24),rgba(233,201,160,0) 60%);filter:blur(6px);}
.sp-hero__panel{position:relative;border-radius:3px;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.8);}
.sp-hero__img{display:block;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(.95);}
.sp-hero__panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,0) 58%,rgba(10,11,13,.5));}
.sp-hero__media--portrait .sp-hero__panel{aspect-ratio:4/5;}
.sp-hero__media--image .sp-hero__panel{aspect-ratio:5/4;}
.sp-hero__media--reel .sp-hero__panel{aspect-ratio:16/10;}

/* caption */
.sp-caption{position:absolute;left:18px;bottom:18px;z-index:2;display:flex;align-items:center;gap:12px;margin:0;}
.sp-caption__tick{width:28px;height:2px;background:var(--sp-crimson);}
.sp-caption__txt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--sp-bone);}
.sp-caption__txt small{display:block;color:var(--sp-muted);letter-spacing:.16em;font-weight:400;margin-top:3px;}

/* reel play control */
.sp-hero__play{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;text-decoration:none;}
.sp-hero__play-ring{width:74px;height:74px;border-radius:50%;border:2px solid var(--sp-crimson);
    display:flex;align-items:center;justify-content:center;background:rgba(224,49,49,.16);transition:transform .2s;}
.sp-hero__play:hover .sp-hero__play-ring{transform:scale(1.08);}
.sp-hero__play-tri{width:0;height:0;border-left:20px solid var(--sp-bone);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:6px;}

/* scroll hint */
.sp-hero__scroll{position:absolute;bottom:26px;left:clamp(20px,5vw,64px);z-index:2;display:flex;align-items:center;gap:12px;
    color:var(--sp-label);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;}
.sp-hero__scroll-line{width:1px;height:32px;background:linear-gradient(var(--sp-crimson),transparent);animation:sp-drop 2.4s ease-in-out infinite;}
@keyframes sp-drop{0%,100%{opacity:.3;transform:scaleY(.7);transform-origin:top;}50%{opacity:1;transform:scaleY(1);}}

/* focus */
.sp-hero a:focus-visible,.sp-hero button:focus-visible{outline:2px solid var(--sp-crimson);outline-offset:3px;border-radius:2px;}

/* responsive */
@media (max-width:900px){
    .sp-hero__grid{grid-template-columns:1fr !important;min-height:auto;padding-top:96px;}
    .sp-hero__media{max-width:360px;order:2;margin-top:24px;}
    .sp-hero__heading--identity{font-size:clamp(38px,12vw,72px);}
    .sp-hero--no-media .sp-lede{max-width:100%;}
    .sp-hero__scroll{display:none;}
}
@media (prefers-reduced-motion:reduce){.sp-hero__scroll-line{animation:none;}}

/* ==================================================================
   FULL-BLEED BACKGROUND  (layout = "full")
   Split layout is untouched — every rule below is gated on
   .sp-hero--layout-full or .sp-hero--has-bg, so existing pages that
   never set `layout` render exactly as they did before.
================================================================== */

/* Background layer. z-index 0 with the grid at 1 keeps it above the
   section background but below content; the section already sets
   isolation:isolate so nothing escapes into the page stacking context. */
.sp-hero__bg{
    position:absolute;inset:0;z-index:0;pointer-events:none;
    overflow:hidden;                 /* clips the parallax overscale */
    background:var(--sp-ink);        /* holds the dark while media decodes */
}

/* Overscaled by 24% and pulled up 12% so a parallax drift of ±12% never
   exposes an edge. With no JS the layer just sits centred and still. */
.sp-hero__bg-media{
    position:absolute;left:0;top:-12%;
    width:100%;height:124%;
    object-fit:cover;
    display:block;
    filter:contrast(1.05) saturate(.92);
    will-change:transform;
}
.sp-hero__bg-video{z-index:1;}       /* video sits over its own poster still */

/* The spotlight ::before is opaque (#1a2130 -> ink) and would bury a photo,
   so in full-bleed mode it becomes the scrim instead: a left-to-right wash
   for the copy column plus a top/bottom wash for the header and scroll cue.
   --sp-scrim scales all of it from one number. */
.sp-hero--has-bg{--sp-scrim:.82;}
.sp-hero--scrim-light{--sp-scrim:.68;}
.sp-hero--scrim-medium{--sp-scrim:.82;}
.sp-hero--scrim-heavy{--sp-scrim:.94;}

.sp-hero--has-bg::before{
    z-index:1;
    background:
        linear-gradient(90deg,
            rgba(10,11,13,var(--sp-scrim)) 0%,
            rgba(10,11,13,calc(var(--sp-scrim) * .88)) 34%,
            rgba(10,11,13,calc(var(--sp-scrim) * .42)) 62%,
            rgba(10,11,13,calc(var(--sp-scrim) * .22)) 100%),
        linear-gradient(180deg,
            rgba(10,11,13,.62) 0%,
            rgba(10,11,13,0) 26%,
            rgba(10,11,13,0) 62%,
            rgba(10,11,13,.72) 100%);
}
/* Vignette stays, lifted above the media. */
.sp-hero--has-bg::after{
    z-index:2;
    background:radial-gradient(130% 120% at 42% 45%,rgba(10,11,13,0) 42%,rgba(10,11,13,.5));
}

/* Full-bleed is a single column — the copy sits left over the photo. */
.sp-hero--layout-full .sp-hero__grid{grid-template-columns:1fr;}
.sp-hero--layout-full .sp-hero__body{max-width:min(720px,64%);}
.sp-hero--layout-full .sp-lede{max-width:520px;}
.sp-hero--layout-full .sp-hero__heading--identity{max-width:14ch;}
.sp-hero--layout-full .sp-hero__heading--promise{max-width:18ch;}

/* Autoplaying motion is opt-in. The poster still underneath shows through. */
@media (prefers-reduced-motion:reduce){
    .sp-hero__bg-video{display:none;}
    .sp-hero__bg-media{transform:none !important;}
}

/* ==================================================================
   PROOF STRIP
   Sits between the CTAs and the trust strip in both layouts.
================================================================== */

.sp-hero__proof{
    display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;
    margin:-16px 0 34px;              /* pulls up under the CTA row */
    text-decoration:none;color:inherit;
}
.sp-hero__cta + .sp-hero__proof{margin-top:-20px;}
.sp-hero__proof--link{transition:opacity .2s;}
.sp-hero__proof--link:hover{opacity:.78;}
.sp-hero__proof--link:hover .sp-hero__proof-item--rating{color:#fff;}

.sp-hero__stars{display:inline-flex;gap:3px;flex:none;line-height:0;}
.sp-hero__star{width:14px;height:14px;fill:var(--sp-crimson);flex:none;}

.sp-hero__proof-txt{
    display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
    font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
    color:var(--sp-muted);
}
.sp-hero__proof-item--rating{color:var(--sp-bone);}
.sp-hero__proof-sep{color:var(--sp-crimson);opacity:.7;font-weight:400;}

/* The trust strip's top rule is the divider between the two; without a trust
   strip the proof line needs its own bottom breathing room. */
.sp-hero__proof + .sp-hero__trust{padding-top:22px;}

/* ==================================================================
   EDITOR CANVAS  (apiVersion 3 iframes the canvas)
   Full-bleed decoration must not paint over the RichText fields, or the
   block looks blank and is unclickable. Same fix already applied to the
   spotlight pseudos — extended here to the new background layer.
================================================================== */
.editor-styles-wrapper .sp-hero__bg{opacity:.34;}
.editor-styles-wrapper .sp-hero--has-bg::before,
.editor-styles-wrapper .sp-hero--has-bg::after{content:none;}
.editor-styles-wrapper .sp-hero--has-bg{background:#0d1017;overflow:visible;isolation:auto;}
.editor-styles-wrapper .sp-hero__bg-media{transform:none !important;}

/* ==================================================================
   RESPONSIVE
================================================================== */
@media (max-width:900px){
    .sp-hero--layout-full .sp-hero__body{max-width:100%;}
    /* Copy column now spans the full width, so the horizontal wash can't
       carry legibility on its own — go vertical and heavier. */
    .sp-hero--has-bg::before{
        background:linear-gradient(180deg,
            rgba(10,11,13,.72) 0%,
            rgba(10,11,13,calc(var(--sp-scrim) * .78)) 42%,
            rgba(10,11,13,var(--sp-scrim)) 100%);
    }
    .sp-hero__proof{margin-bottom:28px;}
    .sp-hero__proof-txt{font-size:12px;letter-spacing:.08em;}
}