/* ============================================================================
   SPAROW — Mobile-first responsive layer  (v2.1.8)
   ----------------------------------------------------------------------------
   Loaded LAST, after sparow-ssr.css. Changes NO markup, ACF wiring, or SEO
   fallback — only re-sizes / re-spaces / re-flows the existing HTML.

   ARCHITECTURE (fixed in 2.1.8)
   -----------------------------
   Base visual values live in each element's INLINE style (the full bento grid:
   repeat(6,1fr), grid-column:span 4, section padding:148px 24px 80px, etc).
   Inline styles have very high precedence, so the ONLY safe way to restyle for
   phones without breaking the desktop bento is to put every override INSIDE a
   max-width media query. Above the phone/tablet breakpoints these rules simply
   do not exist, so the original inline bento layout applies verbatim on laptop
   / desktop / ultra-wide. No revert-layer, no undo-the-!important games (that
   was the 2.1.7 bug that flattened the laptop grid).

   Breakpoints
   -----------
     <= 640px   phone     (bento -> single column)
     <= 980px   tablet    (bento -> 2 columns, spacing eased)
     >= 981px   UNTOUCHED -> original inline bento design
   Plus min-width-only ultra-wide framing that widens the container without ever
   altering the grid template.
   ========================================================================== */


/* ---- A. BACKGROUND: off below laptop for speed, kept on desktop --------- */
@media (max-width:980px){
  #sp-bg{ background:linear-gradient(180deg,#eaf2fe 0%,#e3edfd 55%,#eaf2fe 100%); }
  #sp-bg > *{ animation:none !important; filter:none !important; opacity:0 !important; }
}

/* touch: drop hover-only light sweeps (composite cost, no benefit) */
@media (hover:none){
  .sp-glass::after,.sp-card::after,.sp-btn::before{ display:none; }
  .sp-card{ transition:box-shadow .3s ease; }
}

/* reduced motion everywhere */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  #sp-bg > *{ opacity:0 !important; }
}


/* =====================  TABLET AND BELOW  (<= 980px)  ==================== */
@media (max-width:980px){

  html{ -webkit-text-size-adjust:100%; }

  /* section wrappers: ease desktop 148/24/80 + big gaps */
  [style*="148px 24px 80px"]{ padding:112px 28px 56px !important; gap:52px !important; }

  /* BENTO -> 2 columns (still a bento grid) */
  [data-bento]{ grid-template-columns:repeat(2,1fr) !important; gap:16px !important; }
  [data-bento] > .sp-reveal:first-child,
  [data-bento] > [style*="span 4"],
  [data-bento] > [style*="span 6"]{ grid-column:1 / -1 !important; }
  [data-bento] > [style*="span 3"],
  [data-bento] > [style*="span 2"]{ grid-column:span 1 !important; }

  /* other grids */
  [data-2col="1"]{ grid-template-columns:1fr 1fr !important; gap:26px !important; }
  [data-footgrid="1"]{ grid-template-columns:1fr 1fr 1fr !important; gap:30px 24px !important; }
  [data-footgrid="1"] > div:first-child{ grid-column:1 / -1 !important; }
  [data-statgrid="1"]{ grid-template-columns:repeat(4,1fr) !important; gap:12px !important; }
  [data-tcols="1"]{ grid-template-columns:1fr 1fr !important; }
  [data-faqcols="1"]{ grid-template-columns:1fr !important; }

  /* 4-across step rail -> 2-up, connectors off */
  [data-stepwrap="1"]{ flex-wrap:wrap !important; gap:24px 0 !important; }
  [data-stepwrap="1"] > div:not([data-stepcon]){ flex:0 0 50% !important; }
  [data-stepcon]{ display:none !important; }

  /* header logo sized for desktop two-row bar -> right-size it */
  #sp-nav img{ height:84px !important; margin:-16px 0 !important; }
  #sp-nav > div:first-child{ padding:8px 24px !important; }
}


/* =========================  PHONE  (<= 640px)  ========================== */
@media (max-width:640px){

  [style*="148px 24px 80px"]{ padding:92px 18px 44px !important; gap:38px !important; }

  /* BENTO -> single column (1-col bento; tiles keep card treatment) */
  [data-bento]{ grid-template-columns:1fr !important; gap:14px !important; }
  [data-bento] > *{ grid-column:1 / -1 !important; }

  /* hero: tighter box + fluid headline */
  [data-bento] > .sp-reveal:first-child{ padding:28px 20px !important; border-radius:22px !important; }
  [data-bento] h1{ font-size:clamp(29px,7.6vw,44px) !important; line-height:1.07 !important; }
  [data-bento] h1 + p,
  [data-bento] p[style*="max-width:580px"]{ font-size:clamp(15px,3.7vw,17px) !important; line-height:1.6 !important; }
  [data-bento] [style*="border-top:1px solid rgba(255,255,255,0.12)"]{
    gap:18px 26px !important; margin-top:24px !important; padding-top:20px !important;
  }
  [data-bento] .sp-btn{ width:100%; justify-content:center !important; font-size:16px !important; padding:15px 24px !important; }

  /* other grids collapse */
  [data-2col="1"]{ grid-template-columns:1fr !important; gap:22px !important; }
  [data-footgrid="1"]{ grid-template-columns:1fr 1fr !important; gap:26px 22px !important; }
  [data-statgrid="1"]{ grid-template-columns:1fr 1fr !important; gap:16px 12px !important; }
  [data-tcols="1"]{ grid-template-columns:1fr !important; }
  [data-stepwrap="1"] > div:not([data-stepcon]){ flex:0 0 100% !important; }

  /* auto-fill card grids -> single comfy column */
  [style*="minmax(200px,1fr)"],
  [style*="minmax(280px,1fr)"]{ grid-template-columns:1fr !important; }

  /* softer card shadows on phone GPUs */
  .sp-card{ box-shadow:0 16px 34px -24px rgba(18,46,92,0.24),inset 0 1px 0 rgba(255,255,255,0.9) !important; }

  /* compact header */
  #sp-nav img{ height:62px !important; margin:-8px 0 !important; }
  #sp-nav > div:first-child{ padding:8px 16px !important; }

  /* article + images */
  .sp-article{ font-size:16px; line-height:1.7; }
  .sp-article h2{ margin-top:26px !important; }
  .sp-hwrap img, .sp-hzoom{ width:100% !important; height:auto !important; }
}


/* =====================  MOBILE NAV MENU  (<= 980px)  ===================
   Only touches #sp-mobile / #sp-burger — never the bento grid — so the laptop
   layout is unaffected. Smooth slide/fade instead of the instant display snap. */
@media (max-width:980px){
  #sp-mobile{
    display:flex !important;
    opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
    transition:opacity .28s cubic-bezier(.16,1,.3,1),
               transform .32s cubic-bezier(.16,1,.3,1),
               visibility .28s;
    will-change:opacity,transform;
  }
  #sp-mobile.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  #sp-mobile.open > a,
  #sp-mobile.open > div{ animation:spMobIn .4s cubic-bezier(.16,1,.3,1) both; }
  #sp-mobile.open > *:nth-child(2){ animation-delay:.03s; }
  #sp-mobile.open > *:nth-child(3){ animation-delay:.06s; }
  #sp-mobile.open > *:nth-child(4){ animation-delay:.09s; }
  #sp-mobile.open > *:nth-child(5){ animation-delay:.12s; }
  #sp-mobile.open > *:nth-child(6){ animation-delay:.15s; }
  #sp-mobile.open > *:nth-child(n+7){ animation-delay:.18s; }
  body:has(#sp-mobile.open){ overflow:hidden; }
  .sp-burger{ min-width:44px; min-height:44px; }
}
@keyframes spMobIn{ from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} }


/* =====================  ULTRA-WIDE  (>= 1760px)  =======================
   MIN-width nicety: widens the container so the bento fills big monitors.
   Never alters the grid template. */
@media (min-width:1440px){
  [style*="max-width:1280px"]{ max-width:1340px !important; }
}
@media (min-width:1760px){
  [style*="max-width:1280px"],
  [style*="max-width:1340px"]{ max-width:1480px !important; }
}


/* ============================================================================
   UNIFIED MOTION SYSTEM  (v2.3.0)
   ----------------------------------------------------------------------------
   Goal: every page — React (Home/About/Areas/Partners/Contact/Products/Blog)
   AND server-rendered (Industries/blog-single/product-single) — shares ONE
   consistent set of motion values: intro, scroll-reveal, hover/tilt, easing,
   background. This block loads on all three enqueue branches, so it overrides
   the per-page divergences with a single source of truth.

   Shared tokens
   -------------
     --sp-ease        : cubic-bezier(.16,1,.3,1)   (both engines already use it)
     reveal distance  : 20px  (was 26px SSR / 22px React)
     reveal duration  : 0.70s
     stagger step     : 0.05s (cap 6)
     tilt             : 3deg / perspective(1000px) / lift 3px  (desktop, fine ptr)
   ========================================================================== */

:root{ --sp-ease:cubic-bezier(.16,1,.3,1); }

/* ---- 1. SCROLL REVEAL — unify SSR .sp-reveal to the shared 20px / 0.70s ---- */
html.sp-reveal-ready .sp-reveal{
  transform:translateY(20px) !important;
  transition:opacity .70s var(--sp-ease),transform .70s var(--sp-ease) !important;
}
html.sp-reveal-ready .sp-reveal.in{ transform:none !important; }

/* ---- 2. REACT reveal (data-reveal) — same distance / duration -------------- */
[data-reveal]{
  transition:opacity .70s var(--sp-ease),transform .70s var(--sp-ease) !important;
}
/* React marks revealed items by clearing the transform; normalise the hidden
   offset so it matches the SSR 20px rather than its native 22px. */
[data-reveal]:not(.in):not([data-shown]){ }

/* ---- 3. PAGE-LOAD INTRO — one choreographed hero intro on every page ------
   Both engines now play the SAME staggered hero fade-up on load:
   spIntro .8s cubic-bezier(.16,1,.3,1), delay 0.12 + idx*0.10s per hero child.
   React runs it from app.php's runtime; SSR runs it from sparow-ui.js
   (heroIntro()). This keyframe is the shared definition SSR pages need (React
   already declares an identical one inline). */
@keyframes spIntro{ 0%{opacity:0;transform:translateY(20px);} 100%{opacity:1;transform:translateY(0);} }

/* ---- 4. HOVER / TILT — matched transition on both engines ----------------- */
/* The JS tilt (sparow-ui.js on SSR) now uses 3deg/1000px/lift-3px. Give every
   card the same settle transition so React + SSR cards feel identical. */
.sp-card,[data-tilt]{
  transition:box-shadow .40s var(--sp-ease),transform .30s var(--sp-ease) !important;
}
/* touch / coarse pointer / reduced-motion: no tilt anywhere (both engines) */
@media (hover:none),(pointer:coarse){
  .sp-card:hover,[data-tilt]:hover{ transform:none !important; }
}

/* ---- 5. NAV ON SCROLL — identical easing on both headers ------------------ */
#sp-nav{ transition:background .40s var(--sp-ease),box-shadow .40s var(--sp-ease) !important; }

/* ---- 6. BACKGROUND — one consistent style on every page ------------------
   The two engines diverged: React froze ALL #sp-bg children (app.php:
   #sp-bg *{animation:none !important}), but SSR pages animated caustics + waves
   on desktop. Navigating SSR -> React therefore made the background stop moving.
   Because React's freeze uses !important (which removes the animation, so it
   can't simply be un-paused), the reliable way to make every page match is to
   freeze the SSR background too. Result: one calm, identical, cheap gradient +
   static glow on all pages, all breakpoints. (Mobile was already off above.) */
#sp-bg > *{ animation:none !important; }
#sp-bg .blob{ opacity:.6 !important; }

/* ---- 7. REDUCED MOTION — kill reveal offset everywhere -------------------- */
@media (prefers-reduced-motion:reduce){
  html.sp-reveal-ready .sp-reveal,
  [data-reveal]{ transform:none !important; transition:none !important; }
}


/* ============================================================================
   MARQUEE — shared keyframe for SSR pages (v2.4.0)
   The React design declares spMarquee inline in app.php; SSR-rendered pages
   (Industries pillar, blog, products) need it here so their badge marquee
   animates too. Pauses on hover; disabled for reduced-motion.
   ========================================================================== */
@keyframes spMarquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.sp-marq-strip:hover [style*="spMarquee"]{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){
  .sp-marq-strip [style*="spMarquee"]{ animation:none !important; }
}


/* ============================================================================
   BLOG CARD IMAGERY  (v2.4.1)
   ----------------------------------------------------------------------------
   Blog featured images are purpose-designed 1200x630 banners with the SPAROW
   logo + headline near the TOP. The image area is given that exact 1200/630
   shape, so a correctly-sized banner fills it edge to edge with no crop and no
   letterboxing. background-position is anchored to the TOP so that if a banner
   is ever a different shape, the logo/headline is never what gets clipped.
   The inner .sp-hzoom paints the image; we set its size/position here.
   ========================================================================= */
.sp-blog-img{
  height:auto !important;
  aspect-ratio:1200 / 630;
  overflow:hidden;
  background:#eef4fb;
}
.sp-blog-img .sp-hzoom{
  background-size:cover !important;
  background-position:top center !important;
  background-repeat:no-repeat !important;
}
/* The FEATURED card now stacks (image on top, content below), so its image
   uses the same 1200x630 banner shape as the grid cards. */
.sp-blog-featured-img{
  aspect-ratio:1200 / 630;
  min-height:0;
  width:100%;
  background:#eef4fb;
}
.sp-blog-featured-img .sp-hzoom{
  background-size:cover !important;
  background-position:top center !important;
  background-repeat:no-repeat !important;
}