/* spotlight.css — #spotlight.
   Values come from giga's own utilities on `<section id="spotlight">` in
   reference/raw/index.html, resolved through its theme scale in reference/raw/css/1.css
   (--text-5xl:2.75rem, --text-3xl:1.875rem, --text-3xs:.625rem, --radius-xs:4px,
   --radius-image:6px, --radius-2xl:1rem, --spacing:.25rem), and are tied out against the
   measured capture at 1440:

     card outer x=44 w=1352            → section pad 44 (min-[810px]:px-11)      ✔ frame y08800
     photo block x=68 w≈704            → card p-6 24 + 54% of the 1304 inner      ✔ frame 68..772
     right column x=828                → 772 + gap-10 40 + the column's own 16px  ✔ measured 828
     "Learn more"  128x40 r9999        → h-10, px-4, gap-1.5, fs14/lh20           ✔ measured
       border rgba(accent,.35) → .55 and bg → rgba(accent,.10) on hover
       ✔ frames/hover-1440/0107-a-Learn-more/diff.json
     H2 48/62.4/-0.96px, H3 30/45px, quote 14/24, attribution mono 14/24,
     footnote 12/20 @45%, stat 44px/-1.32px, stat label mono 12/24   ✔ styles-1440.json

   That "the column's own 16px" is giga's cascade quirk, not an invention: the right column
   carries `px-2 sm:px-4 min-[810px]:px-0` and Tailwind emits the `sm:` rule AFTER the
   arbitrary `min-[810px]:` one, so at ≥810 the 16px padding wins. Reproduced literally here
   because it is what the measurement shows.

   Same --text-headline deviation as languages.css: clamp(2.75rem,4vw,3rem) reproduces the
   measured 48/48/44/44/44 across the five widths; giga's literal 2.5rem minimum does not.

   The photo is a duotone; see .sp-photo for the one filter this file adds and why. */

#spotlight{margin-top:119px}                 /* mt-[119px] */
@media (max-width:767.98px){ #spotlight{margin-top:64px} }   /* max-md:mt-16 */

#spotlight .sp-wrap{width:100%;max-width:var(--container-nav);margin:0 auto;padding:0 20px}
@media (min-width:810px){ #spotlight .sp-wrap{padding:0 44px} }
@media (min-width:1680px){ #spotlight .sp-wrap{padding:0 20px} }

#spotlight .sp-stack{display:flex;flex-direction:column;gap:40px;padding:64px 0 40px}
@media (min-width:810px){ #spotlight .sp-stack{gap:48px;padding:100px 0 40px} }

/* Standalone section eyebrow: giga's `text-eyebrow` carries
   --text-eyebrow--line-height:1.5rem, so this variant is a 24px box, not the 16.5px of the
   stacked `.rail .eyebrow` that base.css encodes. TOKENS.md flags the split explicitly
   ("uses lh=24px instead of 16.5px — this is the 'ANY LANGUAGE, ANYWHERE' section eyebrow
   sitting alone above the H2"). Without this the whole section sits 7px high: the measured
   reference puts the H2 at 96 (pt-24) + 24 (eyebrow) + 16 (gap-4) = 136 below the section top.
   Scoped override, base.css untouched. */
#spotlight .eyebrow{line-height:24px}

/* ---- head ----------------------------------------------------------------------- */
#spotlight .sp-head{display:flex;flex-direction:column;gap:10px}   /* gap-2.5 */
#spotlight .sp-h2{
  max-width:735px;
  font-family:var(--font-pixel); font-weight:400;
  font-size:var(--text-headline);
  line-height:1.3;                                  /* --text-headline--line-height → 62.4px */
  letter-spacing:var(--tracking-headline);          /* -.02em → -0.96px @48 (measured) */
  color:#fff;
}

/* ---- card ----------------------------------------------------------------------- */
#spotlight .sp-card{
  display:flex; flex-direction:column; gap:24px; padding:10px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.02);
  border-radius:4px;   /* giga's --radius-xs; this project's tokens.css does not define it */
}
@media (min-width:640px){ #spotlight .sp-card{padding:20px} }      /* sm:p-5 */
@media (min-width:810px){
  #spotlight .sp-card{flex-direction:row;align-items:stretch;gap:40px;border-radius:1rem}  /* padding stays sm:p-5 = 20px — measured 20 on giga at 1024/1300/1440 */
}

#spotlight .sp-visual{
  position:relative; overflow:hidden; width:100%; height:336px;
  border-radius:var(--radius-image); background:var(--accent);
}
@media (min-width:810px){
  #spotlight .sp-visual{width:54%;flex:none;height:auto;min-height:727px}  /* giga's photo is stretched to its 448-char text column; measured 727 @1024 */
}
@media (min-width:1200px){ #spotlight .sp-visual{min-height:614px} }   /* measured @1300 */
@media (min-width:1400px){ #spotlight .sp-visual{min-height:590px} }   /* measured @1440. Gnar's real quote is 152 chars, so the column runs short; the photo keeps giga's card height instead of inventing quote text */
#spotlight .sp-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  /* The only value in this file that is not giga's. giga's spotlight photo is a full-colour
     photograph under an orange wash; the Qeepsake asset on disk is already a magenta duotone,
     which fights the Gnar accent in the untinted top half. Pulling the saturation back lets the
     gradient read the way giga's does. Nothing else about the image is altered. */
  /* council-2 designer: giga runs the photo at full saturation against the hot panel; the vivid-on-vivid contrast is the card. */
  filter:none;
}
#spotlight .sp-grad{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,
    color-mix(in srgb, var(--accent) 95%, transparent) 0%,
    color-mix(in srgb, var(--accent) 70%, transparent) 20%,
    color-mix(in srgb, var(--accent) 0%,  transparent) 50%);
}
#spotlight .sp-scan{position:absolute;inset:0;pointer-events:none}
@media (max-width:809.98px){ #spotlight .sp-scan{display:none} }   /* max-[810px]:hidden */
#spotlight .sp-scan svg{position:absolute;inset:0;overflow:visible}
#spotlight .sp-scan .sp-scan-label{
  position:absolute; display:flex; flex-direction:column; white-space:nowrap; color:#fff;
  align-items:flex-start; text-shadow:0 1px 10px rgba(0,0,0,.5);
}
/* giga flips the label to the other side of its dot when it would run past the box
   (items-end + translate(calc(-100% - 16px), -8px)); js/spotlight.js sets this class. */
#spotlight .sp-scan .sp-scan-label.is-right{align-items:flex-end}
#spotlight .sp-scan .sp-scan-label span{
  font-family:var(--font-mono); font-size:10px; line-height:16px;   /* text-3xs, leading-4 */
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
}
#spotlight .sp-scan .sp-scan-label span+span{color:rgba(255,255,255,.72)}

#spotlight .sp-stat{
  position:absolute; inset:auto 0 0 auto;
  display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; gap:4px;
  padding:24px 24px 32px; text-align:right; color:#fff;
}
@media (min-width:640px){ #spotlight .sp-stat{padding-bottom:40px} }   /* sm:pb-10 */
#spotlight .sp-stat-lbl{
  font-family:var(--font-mono); font-size:12px; line-height:24px;
  letter-spacing:normal; text-transform:uppercase; color:#fff;
}
#spotlight .sp-stat-val{
  font-family:var(--font-sans); font-weight:400;
  font-size:44px; line-height:1; letter-spacing:var(--tracking-display);   /* → -1.32px */
  color:#fff; font-variant-numeric:tabular-nums;   /* so the count-up does not reflow the block */
}

/* ---- body column ---------------------------------------------------------------- */
#spotlight .sp-body{
  display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:44px;
  padding:8px;                                                    /* px-2 py-2 */
}
@media (min-width:640px){ #spotlight .sp-body{padding:16px} }      /* sm:px-4 sm:py-4 */
@media (min-width:810px){ #spotlight .sp-body{justify-content:center;gap:50px} }  /* gap-12.5 */

#spotlight .sp-top{display:flex;flex-direction:column;align-items:flex-start}
@media (min-width:810px){ #spotlight .sp-top{gap:20px} }           /* min-[810px]:gap-5 */

/* giga ships a 210x24 brand SVG here. There is no Qeepsake wordmark on disk, so the slot is
   set as type at the same 24px box height and optical weight. */
#spotlight .sp-logo{display:block;height:24px;width:auto}  /* giga: customer logo img `h-6 w-auto` (24px); council-2 designer: a wordmark typed in Geist was the clearest rebuild tell */
#spotlight .sp-h3{
  max-width:500px; margin:28px 0 44px;                            /* mt-7 mb-11 */
  font-family:var(--font-sans); font-weight:400;
  font-size:24px; line-height:1.4;                                /* text-2xl */
  color:#fff;
}
@media (min-width:810px){
  #spotlight .sp-h3{margin:0;font-size:30px;line-height:1.5}      /* my-0, text-3xl → 45px */
}
#spotlight .sp-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:40px; padding:0 16px; white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius:var(--radius-full); background:transparent;
  font-family:var(--font-sans); font-weight:400; font-size:14px; line-height:20px;
  color:var(--accent);
  transition:background-color .3s cubic-bezier(0,0,.2,1),border-color .3s cubic-bezier(0,0,.2,1),color .3s cubic-bezier(0,0,.2,1);
}
#spotlight .sp-cta:hover{
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}
#spotlight .sp-cta svg{width:14px;height:14px;flex:none}          /* size-3.5 */

#spotlight .sp-quote{display:flex;flex-direction:column;gap:40px;margin:0}
#spotlight .sp-quote blockquote{
  margin:0; font-family:var(--font-sans); font-weight:400;
  font-size:14px; line-height:24px; color:rgba(255,255,255,.85);
}
#spotlight .sp-quote figcaption{display:flex;align-items:center;gap:12px}
#spotlight .sp-avatar{
  flex:none; width:50px; height:50px; border-radius:4px;   /* giga's --radius-xs, see above */
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:rgba(255,255,255,.7);
  font-family:var(--font-mono); font-size:15px; line-height:1;
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
}
#spotlight .sp-attr{
  display:flex; flex-direction:column;
  font-family:var(--font-mono); font-size:14px; line-height:24px;
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
#spotlight .sp-foot{
  font-family:var(--font-sans); font-weight:400;
  font-size:12px; line-height:20px; color:rgba(255,255,255,.45);
}

/* ---- reduced motion -------------------------------------------------------------- */
/* giga's own component short-circuits its IntersectionObserver and jumps straight to the
   revealed state; js/spotlight.js does the same and skips the count-up. Nothing here needs a
   transition removed, but the reticle is pinned on so it cannot animate late. */
@media (prefers-reduced-motion:reduce){
  #spotlight .sp-scan svg *,#spotlight .sp-scan .sp-scan-label{transition:none!important}
}