/* ============================================================
   Hero category cards — auto-cycling highlight
   ------------------------------------------------------------
   Reimplements the Framer "category cards" interaction that died
   with the runtime: an accent progress bar fills along the bottom
   of the active card; when it completes the next card activates;
   loops endlessly. A dots row mirrors the active card. The active
   card also reveals its "N projects" subtext (fades up); inactive
   cards hide it (fades down, title drops). Hover/keyboard-focus a
   card to pause + focus it; click scrolls to its section.

   category-cards.js owns the state and injects .cc-progress; the
   active/inactive colours are applied inline by the JS (cards are
   inline-styled). This file styles the injected bar + focus ring.
   ============================================================ */

:root { --cc-accent: rgb(232, 80, 58); }

.cc-progress {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;            /* flush with the card's bottom edge */
  height: 3px;
  background: var(--cc-accent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  z-index: 2;
  /* the transform transition is toggled inline by the JS: eased on a
     hover/focus snap, none during the per-frame auto-fill */
}

/* keyboard affordance — !important so it beats the cards' inline outline:none */
[role="listitem"]:focus-visible {
  outline: 2px solid var(--cc-accent) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cc-progress,
  .cc-subtitle { transition: none !important; }
}

/* ============================================================
   Mobile (<1440px, where Framer shows the mobile SSR variant):
   the desktop horizontal auto-cycling row has no room and Framer
   never made it responsive (same fixed 1200px row → overflows &
   clips). A video marquee right below already auto-scrolls forever,
   so a second moving carousel here would be too much. Instead:
   present all 4 cards as a STATIC 2×2 grid, no motion, no dots —
   each card still taps to its section.
   category-cards.js disables the cycle here and paints a static
   all-visible state (subtitle visibility is JS-inline, so the JS
   must reveal it — CSS alone can't).
   `!important` is needed to beat the cards' inline flex/size and
   Framer's (0,2,0) `.framer-fLWmP …` rules.
   ============================================================ */
@media (max-width: 1249.98px) {
  /* fluidize the fixed-1200px ancestor chain so the section fits the canvas */
  .framer-q2r610,
  .framer-nv2yag,
  .framer-1qf3o4a-container { width: 100% !important; max-width: 100% !important; }
  .framer-1qf3o4a-container { height: auto !important; }
  section[aria-label="Category carousel"] { height: auto !important; overflow: visible !important; }

  /* flex row → 2-up grid, inset from the page edges (was edge-to-edge). */
  section[aria-label="Category carousel"] [role="list"][aria-label="Categories"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    padding-inline: 16px !important;
    overflow: visible !important;
  }
  /* four cards → a clean 2×2 grid (no full-width last card). */

  /* cards: kill inline flex:1 + fixed 84px; allow growth for wrapped titles */
  section[aria-label="Category carousel"] [role="listitem"] {
    flex: initial !important;
    width: auto !important;
    height: auto !important;
    min-height: 96px;
  }
  section[aria-label="Category carousel"] [role="listitem"] > div { height: 100% !important; }

  /* remove all carousel motion/affordances on mobile */
  section[aria-label="Category carousel"] > div:first-child { display: none !important; } /* dots row */
  section[aria-label="Category carousel"] .cc-progress { display: none !important; }       /* fill bar */
}