/* ═══════════════════════════════════════════════════════════════
   news.css

   Ported VERBATIM from prototype 01-homepage.html:
   - #news section frame                          (line 1694)
   - .vertwo-news accordion + panels + responsive (lines 2555-3353)

   The cross-section title rules (.vn-title-group h2 / p sizing)
   already live in clients.css — they apply here via the cascade.
   The shared mobile spacing rules already live in intro-stats.css.
   ═══════════════════════════════════════════════════════════════ */

/* Section frame */
#news{background:var(--off);padding:0}  /* .vertwo-news handles inner padding */

/* Main vertwo-news accordion block */
/* ═══════════════════════════════════════════════════════════════════════
   NEWS ACCORDION (imported from vertwo-news-accordion-final.html)
   ═══════════════════════════════════════════════════════════════════════ */
/* ============================================================
   VERTWO · "What's Happening" — News Accordion Section
   ------------------------------------------------------------
   A responsive news section with three rendering modes:

     DESKTOP (> 1024px):  Horizontal flex-accordion. One panel is
                          active at a time and expands to fill
                          most of the width; the remaining panels
                          sit as narrow vertical "thumbs". Hover
                          fires a JS-driven flex-grow cascade
                          that re-proportions neighbors without
                          moving the active panel's overall size.

     TABLET (641-1024px): Same accordion, compact spacing.

     MOBILE (≤ 640px):    Vertical stack of fixed-size cards,
                          3 latest items only. Each card is a
                          complete unit (image + pills + title +
                          description + Read more). Images have
                          a scroll-linked parallax effect. The
                          accordion cascade is disabled here.

   ARCHITECTURE
   • Single source of truth: the NEWS_ITEMS array below. Swap
     it for a Wix CMS dataset bind to go live.
   • Hover cascade is JS-driven via class toggles (is-hover-*)
     so it composes cleanly with the is-active state and avoids
     CSS :has() browser-support gaps.
   • On active-panel hover, the cascade ranks non-active thumbs
     by distance and splits them into halves: nearer half grows
     (tier 4), farther half compresses (tier 3). Total flex-grow
     stays constant across positions, so active never bounces.
   • Mobile parallax runs on rAF-throttled scroll, gated by
     both the viewport media query and prefers-reduced-motion.
   • Images have a 3-step fallback chain: primary URL →
     picsum.photos → inline SVG data URI (category-tinted
     gradient). The SVG stage requires no network and always
     succeeds, guaranteeing every card renders something.

   ACCESSIBILITY
   • ARIA tablist/tab roles on the accordion panels.
   • Keyboard nav: ←/→ arrows move active, Enter opens story.
   • prefers-reduced-motion disables parallax + scroll animation.
   • aria-labelledby links section to heading.
   ============================================================ */
:root {
  --v-orange:    #F27A0F;
  --v-dark:      #1A1A1A;
  --v-white:     #FFFFFF;

  --v-gray-50:   #F7F7F7;
  --v-gray-100:  #EFEFEF;
  --v-gray-200:  #E3E3E3;
  --v-gray-500:  #8A8A8A;
  --v-gray-600:  #666666;

  --cat-announcement: #F27A0F;
  --cat-news:         #2D7EF7;
  --cat-events:       #8A3FFC;
  --cat-careers:      #11B981;

  /* Motion — spring-inertia system.
     `spring`  = snappy attack with overshoot  → used for hover-in
     `coast`   = smooth decelerate to rest     → used for hover-out / state changes
     `soft`    = generic ease for shadow/filter/opacity */
  --ease-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
  --ease-coast:  cubic-bezier(0.25, 1, 0.32, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  /* Legacy aliases kept so older selectors still resolve */
  --ease-smooth:  var(--ease-coast);
  --ease-elastic: var(--ease-spring);

  --r-lg: 24px;


  /* Matching 4-layer shadow set so CSS can interpolate cleanly
     between resting and glow states without jumpy rendering. */
  --shadow-active:
    0 0 0 0px rgba(242,122,15,0),
    0 0 0px -4px rgba(242,122,15,0),
    0 24px 60px -16px rgba(0,0,0,.18),
    0 12px 28px -14px rgba(0,0,0,.06);
  --shadow-glow:
    0 0 0 2px var(--v-orange),
    0 0 28px -4px rgba(242,122,15,.35),
    0 28px 64px -18px rgba(242,122,15,.28),
    0 12px 28px -14px rgba(0,0,0,.14);

  /* Mobile-card shadow pair. --shadow-flat is the resting state used
     by every mobile card (subtle outline + lift so the cards read as
     floating on the white page background). --shadow-hover fires on
     touch-active for tap feedback. Hover state is intentionally a bit
     brighter so the glow is clearly visible against the white bg —
     thicker orange ring, warmer bloom, slightly larger spread. */
  --shadow-flat:
    0 0 0 1px rgba(26,26,26,.06),
    0 2px 4px rgba(26,26,26,.04),
    0 10px 24px -8px rgba(26,26,26,.08);
  --shadow-hover:
    0 0 0 1.5px rgba(242,122,15,.55),
    0 4px 10px rgba(26,26,26,.05),
    0 20px 44px -8px rgba(242,122,15,.38);
}


/* removed news CSS globals (body/html/img/a/button) — they were
   clobbering the host page. The .vertwo-news / .vn-* class rules are
   kept intact. */

.vertwo-news {
  width: 100%;
  padding: clamp(56px, 6vw, 80px) clamp(20px, 4vw, 64px);  /* cap lowered from 104 */
  background: var(--off); /* matches site's gray section bg */
  font-family: var(--font-body);
}
.vertwo-news__inner {
  max-width: 1440px;
  margin: 0 auto;
}

/* =============== HEADER =============== */
.vn-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.vn-title-group h2 {
  font-family: 'Neue Haas Grotesk Display', 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--v-dark);
  margin-bottom: 6px;
}
.vn-title-group p {
  font-size: clamp(16px, 1.6vw, 21px);
  color: var(--v-gray-500);
  font-weight: 400;
  letter-spacing: -0.01em;
}
/* All Articles button — lives in the footer (right side). Orange
   outlined at rest, orange filled on hover, with an arrow
   slide-right micro-interaction. Links unconditionally to /news;
   clicking the active panel itself opens that specific story. */

.vn-nav { display: flex; gap: 10px; flex-shrink: 0; }
.vn-nav-btn {
  width: 52px; height: 52px;
  background: var(--v-gray-50);
  border: 1px solid var(--v-gray-200);
  border-radius: 14px;
  color: var(--v-orange);
  display: flex; align-items: center; justify-content: center;
  transition:
    background .4s var(--ease-soft),
    color .4s var(--ease-soft),
    transform .5s var(--ease-elastic),
    box-shadow .4s var(--ease-soft),
    border-color .4s var(--ease-soft);
}
.vn-nav-btn:hover:not(:disabled) {
  background: var(--v-orange);
  border-color: var(--v-orange);
  color: var(--v-white);
  transform: scale(1.06);
  box-shadow: 0 10px 28px -6px rgba(242,122,15,.4);
}
.vn-nav-btn:active:not(:disabled) { transform: scale(.95); }
.vn-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.vn-nav-btn svg { width: 20px; height: 20px; }

/* =============== ACCORDION =============== */
.vn-accordion {
  display: flex;
  gap: 12px;
  height: clamp(420px, 52vw, 580px);
  padding: 2px;
  margin: 0 -2px;
}

.vn-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 40px;                        /* floor for far thumbs. With the 3-tier active-hover cascade (smallest tier = 0.45 flex-grow ≈ 50px at desktop widths) this never clamps on desktop, but it protects against sub-40px thumbs on narrower viewports. */
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--v-gray-100);
  cursor: pointer;
  z-index: 1;
  isolation: isolate;

  /* Default / exit timing — smooth coast back to rest.
     flex-grow is the only animated size property; horizontal
     movement comes from the container widening, not from any
     transform on child elements. */
  transition:
    flex-grow .9s var(--ease-coast),
    box-shadow .4s var(--ease-soft);
  will-change: flex-grow;
}

.vn-panel.is-active {
  flex-grow: 9;
  z-index: 2;
  box-shadow: var(--shadow-active);
}

/* ----- Flex-grow cascade WAVE (JS-driven classes) -----
   Cascade driven by JS-toggled classes (see applyHoverCascade()).
   Spreads outward from hovered thumb through DOM order, stopping
   at the active panel wall.

   Values tuned for NET-ZERO flex-grow on a symmetric middle hover,
   so the active panel keeps its exact proportional width even
   while the cascade is running:
       self  +0.5  +  near×2  +0.2  +  far×2  −0.7  =  0.0

   The :not(.is-active) guards are belt-and-suspenders — even if
   JS somehow tagged the active panel with a hover class, the rule
   won't apply and active stays at flex-grow: 9. */

.vn-panel.is-hover-self:not(.is-active) {
  flex-grow: 1.5;
  transition:
    flex-grow .75s var(--ease-spring),
    box-shadow .3s var(--ease-soft);
}

/* Direct neighbor — subtle grow (1 → 1.1). Combined with far's
   deeper compression below, this gives a clear bell-curve wave
   while keeping the math balanced. */
.vn-panel.is-hover-near:not(.is-active) {
  flex-grow: 1.1;
  transition: flex-grow .75s var(--ease-spring);
}

/* 2nd-level neighbor — compresses to 0.65 (35% narrower).
   Visibly squeezed on both sides of the hover. */
.vn-panel.is-hover-far:not(.is-active) {
  flex-grow: 0.65;
  transition: flex-grow .75s var(--ease-spring);
}

.vn-panel:not(.is-active):focus-visible {
  flex-grow: 1.5;
  outline: 2px solid var(--v-orange);
  outline-offset: 3px;
  transition:
    flex-grow .75s var(--ease-spring),
    outline-color .3s var(--ease-soft);
}

/* Active hover wave — 2-tier RANK-based cascade. Instead of
   assigning tiers by raw distance (which over-compressed the
   far thumbs at edge-active positions and caused imbalance),
   we now sort non-active thumbs by distance from active and
   split them into a "near half" and "far half":

     nearest half  →  "size 4"   flex-grow 1.1   ← grows
     farther half  →  "size 3"   flex-grow 0.65  ← compresses

   With 5 items total (4 non-actives), this is a clean 2+2
   split in every case. That means the total flex-grow stays
   CONSTANT across all active positions:

     9.5 + 2×1.1 + 2×0.65  =  13.0

   — exactly matching the rest state's 9 + 4×1 = 13. So active
   hover is perfectly net-zero for every layout:

     pos 0 active:  [big] [4]  [4]  [3]  [3]
     pos 1 active:  [4]  [big] [4]  [3]  [3]
     pos 2 active:  [3]  [4]  [big] [4]  [3]   ← center
     pos 3 active:  [3]  [3]  [4]  [big] [4]
     pos 4 active:  [3]  [3]  [4]  [4]  [big]

   Glow ring stays on the active panel throughout. */
.vn-panel.is-active.is-hover-active,
.vn-panel.is-active:focus-visible {
  flex-grow: 9.5;
  box-shadow: var(--shadow-glow);
  transition:
    flex-grow .75s var(--ease-spring),
    box-shadow .3s var(--ease-soft);
  outline: none;
}

/* One of the NEARER half of non-active thumbs — "size 4", grows. */
.vn-panel.is-hover-active-near:not(.is-active) {
  flex-grow: 1.1;
  transition: flex-grow .75s var(--ease-spring);
}

/* One of the FARTHER half of non-active thumbs — "size 3", compresses. */
.vn-panel.is-hover-active-far:not(.is-active) {
  flex-grow: 0.65;
  transition: flex-grow .75s var(--ease-spring);
}

.vn-panel__image-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #1A1A1A;                     /* dark fallback so broken/loading images don't expose white card bg or alt text on white */
}
.vn-panel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Hide the browser's broken-image placeholder text when src fails.
     The alt attribute stays (for screen readers) but the visible
     fallback text is painted transparent so the dark image-wrap bg
     shows through cleanly instead of showing raw alt text. */
  color: transparent;
  font-size: 0;
  /* Zero transform, zero transition on desktop. The image is still
     at all times — horizontal "movement" comes from the container
     widening via flex-grow while object-fit: cover reveals more of
     the photo. Mobile overrides this with parallax translate (see
     the ≤ 640px block). */
}

/* Mobile-only content block inside each panel. Hidden on desktop by
   default — the desktop layout uses the absolute-positioned
   .vn-panel__title overlay + the global .vn-preview footer instead.
   On mobile (see @media ≤ 640px below) this block takes over and
   each panel becomes a self-contained news card. */
.vn-panel__mobile-content { display: none; }

.vn-panel__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26,26,26,0) 0%,
    rgba(26,26,26,0) 30%,
    rgba(26,26,26,.55) 72%,
    rgba(26,26,26,.9) 100%
  );
  opacity: 0;
  transition: opacity .65s var(--ease-soft);
  pointer-events: none;
}
.vn-panel.is-active .vn-panel__gradient { opacity: 1; }

.vn-panel:not(.is-active) .vn-panel__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26,26,26,.15) 0%,
    rgba(26,26,26,0) 30%,
    rgba(26,26,26,.4) 100%
  );
  pointer-events: none;
}

/* =============== PILLS (unified) =============== */
.vn-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.vn-chip--category {
  background: var(--chip-accent, var(--v-orange));
  color: var(--v-white);
}
.vn-chip--neutral {
  background: rgba(255,255,255,.96);
  color: var(--v-dark);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.vn-chip[data-cat="Announcement"],
.vn-panel[data-cat="Announcement"] { --chip-accent: var(--cat-announcement); }
.vn-chip[data-cat="News"],
.vn-panel[data-cat="News"]         { --chip-accent: var(--cat-news); }
.vn-chip[data-cat="Events"],
.vn-panel[data-cat="Events"]       { --chip-accent: var(--cat-events); }
.vn-chip[data-cat="Careers"],
.vn-panel[data-cat="Careers"]      { --chip-accent: var(--cat-careers); }

/* =============== ACTIVE META (pills row, spans full width) — slide-only, no fade =============== */
.vn-panel__meta {
  position: absolute;
  top: 20px; left: 20px; right: 20px;
  display: flex;
  justify-content: space-between;   /* category pill left, date pill right */
  align-items: flex-start;
  gap: 8px;
  z-index: 3;
  pointer-events: none;

  /* Pills stay fully opaque — only translate.
     Slowed to match the overall stacking text pace. */
  opacity: 1;
  transform: translate3d(0, -120px, 0);
  transition: transform .85s var(--ease-coast);
  will-change: transform;
}
.vn-panel.is-active .vn-panel__meta {
  transform: translate3d(0, 0, 0);
  transition: transform 1.1s .3s var(--ease-spring);
}

/* =============== ACTIVE TITLE — slower stacking animation =============== */
/* Durations bumped: entry 0.9s → 1.3s, exit 1s → 1.4s, delays
   nudged so the image settles first, then the title stacks in
   with a deliberate, measured pace. */
.vn-panel__title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 34px 32px;
  color: var(--v-white);
  z-index: 3;
  pointer-events: none;

  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.94);
  filter: blur(3px);
  transition:
    opacity .8s var(--ease-soft),
    transform 1.4s var(--ease-coast),
    filter .65s var(--ease-soft);
}
.vn-panel.is-active .vn-panel__title {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition:
    opacity .85s .45s var(--ease-soft),
    transform 1.3s .4s var(--ease-spring),
    filter .7s .45s var(--ease-soft);
}

.vn-panel__title h3 {
  font-family: 'Neue Haas Grotesk Display', 'Inter Tight', 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 640px;
  text-shadow: 0 2px 16px rgba(0,0,0,.4);
  /* v0.4.7: design-system.css applies `h1-h6 { color: var(--black) }` as a
     baseline reset. That direct rule beats inheritance, so without an
     explicit color here the title renders dark on the dark image overlay.
     `inherit` picks up var(--v-white) set on the parent .vn-panel__title. */
  color: inherit;
}

/* =============== FOLDED LABELS — date (top) + category (bottom) =============== */
/* Both labels are VERTICAL pills using the same .vn-vchip base.
   Date variant = neutral white · Category variant = full category color.
   Two separate slide anchors so each can animate independently
   from its own edge. Both slide-only (no fade). */

/* FOLDED DATE PILL (top, vertical) */
.vn-panel__folded-date {
  position: absolute;
  top: 18px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  z-index: 2;
  pointer-events: none;

  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform .75s .15s var(--ease-spring);
  will-change: transform;
}
.vn-panel.is-active .vn-panel__folded-date {
  /* Slower exit — pill moves out gracefully when thumb becomes active.
     0.55s felt too quick; now 1.0s to match the overall slower pacing. */
  transform: translate3d(0, -220px, 0);
  transition: transform 1s var(--ease-coast);
}

/* FOLDED CATEGORY PILL (bottom, vertical) */
.vn-panel__folded-cat {
  position: absolute;
  bottom: 18px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  z-index: 2;
  pointer-events: none;

  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform .75s .15s var(--ease-spring);
  will-change: transform;
}
.vn-panel.is-active .vn-panel__folded-cat {
  transform: translate3d(0, 220px, 0);
  transition: transform 1s var(--ease-coast);
}

/* Shared vertical pill base — used by BOTH folded date and folded cat */
.vn-vchip {
  padding: 12px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.vn-vchip--category {
  background: var(--chip-accent, var(--v-orange));
  color: var(--v-white);
  text-transform: uppercase;
}
.vn-vchip--date {
  background: rgba(255,255,255,.96);
  color: var(--v-dark);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

/* =============== FOOTER =============== */
.vn-footer {
  margin-top: clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.vn-preview {
  max-width: 760px;
  min-height: 56px;
}
.vn-preview__desc {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.55;
  color: var(--v-gray-600);
  letter-spacing: -0.005em;
  transition:
    opacity .45s var(--ease-soft),
    transform .55s var(--ease-smooth);
}
.vn-preview__desc strong { color: var(--v-dark); font-weight: 700; }
.vn-preview.is-swapping .vn-preview__desc {
  opacity: 0;
  transform: translateY(8px);
}

/* =============== RESPONSIVE =============== */
@media (max-width: 1024px) {
  .vn-accordion { height: 460px; gap: 10px; }
  .vn-panel__title { padding: 24px 26px 26px; }
  .vn-panel__meta  { top: 16px; left: 16px; right: 16px; }
}
@media (max-width: 820px) {
  .vn-accordion { height: 420px; }
  /* Right-align "all articles" — flex layout instead of 1-col grid keeps
     the button's natural pill shape AND positions it on the right edge,
     matching the desktop visual intent. */
  .vn-footer {
    grid-template-columns: 1fr;
    display: flex;
    justify-content: flex-end;
  }
  /* No min-width / flex-grow overrides on panels — the desktop
     hover cascade works fine down to the mobile breakpoint. */
}
/* ------------------------------------------------------------------
   MOBILE (≤ 640px) — vertical stack, not a carousel.
   Each panel becomes a self-contained card: image on top, pills
   overlaid, then a white content block with title + description
   + read-more button.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .vertwo-news { padding: 40px 16px; }  /* tighter mobile */

  /* Header is just title + subtitle on mobile — nav arrows hidden
     (no carousel to navigate) and All Articles sits in the footer.
     v0.8.6 (Vic feedback): centered alignment to match jobs-cta's
     "WE'RE HIRING / join the studio" pattern — Vic wants every section
     header centered on mobile for cross-section consistency. */
  .vn-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-bottom: 28px;
  }
  .vn-title-group {
    text-align: center;
  }
  /* Override the cross-section rule from clients.css that forces all
     section h2's to 1.55rem on mobile — Vic specifically called out
     the news title looking smaller than jobs-cta's `.s-title` (which
     uses clamp(2rem, 4.2vw, 3rem) and stays at the floor on mobile,
     ~32px). Match that exactly so "what's happening" reads the same
     weight as "join the studio." Higher specificity than
     clients.css's `.vn-title-group h2` selector via the section ID. */
  #news .vn-title-group h2 { font-size: clamp(2rem, 4.2vw, 3rem) !important; line-height: 1.05; }
  .vn-title-group p  { font-size: 16px; }
  .vn-nav { display: none; }

  /* Only show the 3 latest news items on mobile. The array is
     ordered newest → oldest, so nth-child(n+4) hides item 4 and
     beyond. If the CMS feeds more items later, still only the
     first 3 render. */
  .vn-panel:nth-child(n+4) { display: none; }

  /* Accordion container becomes a vertical stack, not a flex row. */
  .vn-accordion {
    flex-direction: column;
    height: auto;
    gap: 18px;
    overflow: visible;
    border-radius: 0;
    scroll-snap-type: none;
    padding: 0;
    margin: 0;
  }

  /* Every panel renders as a full-width card — the desktop
     flex-grow cascade doesn't apply here and JS early-returns
     on mobile before adding any .is-hover-* classes. */
  .vn-panel,
  .vn-panel.is-active {
    flex: none;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--shadow-flat);
    display: flex;
    flex-direction: column;
    cursor: pointer;                    /* signal the whole card is tappable */
    transform: none;
    transition:
      box-shadow .3s var(--ease-soft),
      transform .25s var(--ease-soft);
  }
  /* Hover: orange-tinted shadow upgrade. Visible on trackpad/mouse
     (tablet + DevTools emulator users) so the card reads as an
     interactive element rather than a static tile. */
  .vn-panel:hover {
    box-shadow: var(--shadow-hover);
  }
  /* Press: the same orange shadow plus a tiny scale-down. Fires on
     touch-press as well as mouse-down. transform: scale is cheap and
     GPU-accelerated; compositor-only change so no layout thrash. */
  .vn-panel:active {
    box-shadow: var(--shadow-hover);
    transform: scale(.994);
  }
  /* Interactive children inside the card inherit their own cursors;
     reset so Read more still shows pointer (it already does as an <a>,
     but this guards against future non-anchor buttons inside). */
  .vn-panel__mobile-content,
  .vn-panel__mobile-title,
  .vn-panel__mobile-desc { cursor: pointer; }

  /* Image block: fixed-height banner at the top of each card,
     with overflow hidden so the slightly-oversized inner image
     can parallax without showing card bg. */
  .vn-panel__image-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    height: 220px;
    border-radius: 0;          /* parent card clips it */
    flex: 0 0 auto;
    background: #1A1A1A;
    overflow: hidden;
  }
  /* Image is ~28% taller than its container so the parallax JS has
     ±14% of travel room. A JS scroll listener writes inline
     transform on this element based on the panel's viewport
     position; the CSS below is the resting state. */
  .vn-panel__image {
    width: 100%;
    height: 128%;
    object-fit: cover;
    object-position: center;
    transform: translate3d(0, -14%, 0);
    will-change: transform;
    transition: none;
  }

  /* Always show gradient overlay on the image for pill legibility. */
  .vn-panel__gradient { opacity: 1; }
  .vn-panel:not(.is-active) .vn-panel__image-wrap::after { display: none; }

  /* Pills row — category pill left, date pill right (matches the
     desktop active-panel layout). Stretches across the image. */
  .vn-panel__meta {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    gap: 6px;
    z-index: 5;
  }
  .vn-chip { font-size: 11px; padding: 6px 12px; }

  /* Hide the desktop-only title overlay + folded thumb labels. */
  .vn-panel__title,
  .vn-panel__folded-date,
  .vn-panel__folded-cat {
    display: none;
  }

  /* Show the mobile content block — the card body with
     title, description, and per-card read-more link. */
  .vn-panel__mobile-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px 22px;
    background: #fff;
  }
  .vn-panel__mobile-title {
    margin: 0;
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.22;
    letter-spacing: -.01em;
    color: var(--v-dark);
  }
  .vn-panel__mobile-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--v-muted);
  }
  /* Read more button — aligned RIGHT to mirror the desktop
     preview CTA. Orange outlined at rest, orange filled on hover
     (and :active for touch, which is the "hover" analog there). */
  .vn-panel__mobile-readmore {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 10px 18px;
    border: 1.5px solid var(--v-orange);
    border-radius: 999px;
    background: transparent;
    color: var(--v-orange);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition:
      background .3s var(--ease-soft),
      color .3s var(--ease-soft),
      transform .4s var(--ease-elastic);
  }
  .vn-panel__mobile-readmore:hover,
  .vn-panel__mobile-readmore:active {
    background: var(--v-orange);
    color: #fff;
  }
  .vn-panel__mobile-readmore:hover { transform: translateY(-1px); }
  .vn-panel__mobile-readmore svg {
    width: 14px; height: 14px;
    transition: transform .4s var(--ease-elastic);
  }
  .vn-panel__mobile-readmore:hover svg { transform: translateX(4px); }

  /* The per-card Read more already covers "read this story"; the
     footer preview text would just repeat the active card's
     description below it, so we hide it on mobile. BUT we keep the
     All Articles button visible as a full-width CTA below all 3
     cards — it's the "see more news" escape hatch. */
  .vn-preview { display: none; }
  .vn-footer {
    /* v0.8.6 (Vic feedback): margin-top bumped 24 → 40 to match the
       section's 40px padding-bottom. The previous 24 made the gap above
       the button visibly smaller than the gap below it (button to next
       section). Now both gaps are 40px so the button sits centered in
       its breathing room. */
    margin-top: 40px;
    /* v0.8.3 (Vic feedback): center the "all articles" button on mobile
       so it matches the visual treatment of "see all works" / "read full
       story" CTAs elsewhere on the homepage. */
    display: flex;
    justify-content: center;
  }
  /* v0.8.4 round 3 (Vic feedback): the previous override didn't fully win.
     Vic's screenshot showed the button rendered tiny with the text wrapping
     inside the pill and the arrow circle overlapping the text. Belt-and-
     braces fix: !important on the token overrides + explicit min-width on
     the button so it can't be squeezed below its content width by the
     flex container. min-width:auto + flex-shrink:0 means "render at the
     intrinsic size or larger; never below". Matches the desktop size of
     other "see all" / "full story" CTAs at the mobile breakpoint. */
  .vn-footer .v-btn--sm{
    --btn-h:             60px !important;
    --text-size:         17px !important;
    --arrow-size:        18px !important;
    --gap-after-circle:  12px !important;
    --pad-right:         20px !important;
    flex-shrink:         0;
    min-width:           auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .2s !important;
    scroll-behavior: auto !important;
  }
}