/* =========================================================
   STORM — HOMEPAGE  (page-specific components)
   -----------------------------------------------------------
   Every component on this sheet is used ONLY by
   spi-homepage-clarity-update-1.html. Deliberately NOT in
   base-web-style.css: the base should only carry components a
   second page would reuse (Portal, PTLP, and the tech/education
   pages all load base directly and never touch these classes).
   Loads after base-web-style.css and reuses its tokens/grid —
   nothing here re-implements .spi-row, .spi-container, .btn, etc.

   CONTENTS
     1. ARCHETYPE CARDS — "Common Ball Profiles" row
     2. HERO — the top slideshow banner
     3. NAV CARD — Bags/Shoes/Accessories/Apparel picker
     4. BALL RACK — brand stripe + horizontally-scrolling ball row
     5. FILTER CHIP — "Style ✕" tag on Best For Your Style

   WHY THE WORDMARKS ARE SVG, NOT STYLED <span>s
     The store theme ships `span { font-size: unset !important }`.
     These wordmarks are built from per-letter font sizes and
     transforms, so as HTML they collapse to one inherited size
     on the live page. SVG <text> is unaffected by that rule.
     Keep them as inline SVG — inline, so they use the page's
     Oswald webfont (an <img> would not).
   ========================================================= */

/* ---------------------------------------------------------
   1. ARCHETYPE CARDS  (one-off component)
   A single-purpose card set for the homepage "Common Ball
   Profiles" row.

   HOW IT RELATES TO THE OTHER SHEETS
     - STRUCTURE comes from the base: the row/grid, container,
       and section padding are .spi-grid / .spi-container /
       .spi-section-padded. Nothing is re-implemented here.
     - STYLE follows the tech skin's dark-teal palette, but the
       values are declared LOCALLY rather than by loading
       tech-dark-teal-skin.css. That skin remaps the global
       --spi-* tokens to dark, which would repaint the entire
       (light) homepage. Everything below is scoped to
       .spi-card-archetype so it cannot leak.
--------------------------------------------------------- */

/* ---- local palette, mirroring the tech skin ---- */
.spi-card-archetype {
  --arc-surface-a: #1a2630;
  --arc-surface-b: #121821;
  --arc-border: rgba(0, 147, 144, 0.10);
  --arc-border-hover: rgba(0, 147, 144, 0.45);
  --arc-glow: rgba(0, 147, 144, 0.22);
  --arc-ink: #ffffff;
  --arc-ink-muted: rgba(255, 255, 255, 0.60);
  --arc-rule: rgba(255, 255, 255, 0.07);

  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--arc-border);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--arc-surface-a), var(--arc-surface-b));
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.spi-card-archetype:hover {
  transform: translateY(-6px);
  border-color: var(--arc-border-hover);
  box-shadow: 0 12px 32px var(--arc-glow);
}

/* ---- the wordmark stage ---- */
.spi-archetype-art {
  flex: 0 0 auto;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.spi-archetype-art svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Colour is driven from the CSS so the palette lives in one
   place; the SVGs only describe shape and position. */
.spi-archetype-art .arc-ink { fill: var(--arc-ink); }
.spi-archetype-art .arc-accent { fill: rgb(0, 147, 144); }
.spi-archetype-art .arc-cell { fill: rgba(0, 147, 144, 0.08); }
.spi-archetype-art .arc-cell-on { fill: rgba(0, 147, 144, 0.16); }

/* The short dashed lead-in on the Reaction Need wordmarks (Early /
   Midlane / Late) — reads as the lane the letters are breaking across. */
.spi-archetype-art .arc-path {
  fill: none;
  stroke: rgba(0, 147, 144, 0.55);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* ---- caption ---- */
/* The body sits directly under the art stage rather than being
   pushed to the bottom of the card (no `margin-top: auto`). The
   stage is a fixed height, so every rule lands on the same line
   across a row no matter how long the description runs; the slack
   from a short description collects at the foot of the card. */
.spi-archetype-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--arc-rule);
}

.spi-archetype-name {
  margin: 0;
  font-family: var(--spi-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--arc-ink);
}

/* Core type tag riding on the same line as the name. A <b>, not a
   <span>: the store theme ships `span { font-size: unset !important }`,
   which would flatten this back to the name's size. */
.spi-archetype-core {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgb(0, 147, 144);
}

.spi-archetype-desc {
  margin: 0;
  font-family: var(--spi-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--arc-ink-muted);
}

/* Reaction Need cards only: a short "Early / Smooth / Controlled" line
   under the name, styled like .spi-archetype-core. */
.spi-archetype-tagline {
  margin: -4px 0 0;
  font-family: var(--spi-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(0, 147, 144);
}

/* ---------------------------------------------------------
   CARD ACTIONS  (.spi-archetype-actions)
   Two pathways out of every profile card: LEARN MORE goes to
   that profile's education page, SEE BALLS goes to the product
   listing filtered to it.

   The card used to BE a single link. It can't stay one: an <a>
   cannot contain another <a> — browsers silently un-nest them —
   so the card is now a plain <div> and the two <a>s inside are
   the only click targets.

   The buttons are drawn here rather than reusing .btn.default
   for two reasons. On this light page .btn.default resolves to
   a near-black pill (--spi-accent), which disappears against
   the card's dark ground; and .is-invert is a white glass slab
   built to sit on photography — far too heavy at two per card,
   six cards to a row. These use the same teal as the wordmarks,
   and dodge the !important war .btn is locked into with
   COMMERCE-WEB-STYLE.css.
--------------------------------------------------------- */
.spi-archetype-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* The card is a flex column, so auto drops the pair onto its
     bottom edge — the buttons line up across a row however long
     each description runs. */
  margin-top: auto;
  padding-top: 18px;
}

.arc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--spi-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Primary — the commerce path. */
.arc-btn.is-shop {
  border: 1px solid rgb(0, 147, 144);
  background: rgb(0, 147, 144);
  color: #ffffff;
}

.arc-btn.is-shop:hover {
  border-color: rgb(0, 173, 169);
  background: rgb(0, 173, 169);
  color: #ffffff;
}

/* Secondary — the education path. Outline, so the two read as a
   pair of options rather than as one button and its shadow. */
.arc-btn.is-learn {
  border: 1px solid rgba(0, 147, 144, 0.55);
  background: transparent;
  color: var(--arc-ink);
}

.arc-btn.is-learn:hover {
  border-color: rgb(0, 147, 144);
  background: rgba(0, 147, 144, 0.14);
  color: var(--arc-ink);
}

.arc-btn:focus-visible {
  outline: 2px solid rgb(0, 230, 195);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   TABS  (.spi-archetype-tabs)
   Switches the row below between "Common Ball Profiles" (6
   cards) and "Reaction Need" (3 cards) — see the inline script
   near the bottom of the page for the toggle logic.
--------------------------------------------------------- */
.spi-archetype-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spi-archetype-tab {
  appearance: none;
  border: 1px solid rgba(0, 147, 144, 0.35);
  background: transparent;
  color: var(--spi-text-muted);
  font-family: var(--spi-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.spi-archetype-tab:hover {
  border-color: rgb(0, 147, 144);
  color: var(--spi-black);
}

.spi-archetype-tab.is-active {
  background: rgb(0, 147, 144);
  border-color: rgb(0, 147, 144);
  color: #ffffff;
}

.spi-archetype-tab:focus-visible {
  outline: 2px solid rgb(0, 147, 144);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   THE PROFILE / REACTION ROWS
   Both panels reuse .spi-row.spi-scroll (the same drag-to-scroll
   carousel the ball rack and video row use — see base-web-style.css)
   instead of a wrapping grid, so a tab swap between six cards (Common
   Ball Profiles) and three (Reaction Need) never causes a reflow/
   collapse jump. The wordmarks are viewBox-driven, so they scale with
   the art stage regardless of card width.

   Card width itself is fluid, not fixed: .spi-scroll normally locks
   children to a flat pixel width (flex:0 0 var(--spi-scroll-w)) so a
   carousel with many items (the ball rack, the video row) always
   peeks/overflows regardless of screen size. This row wants the
   opposite on a real desktop — six cards should just fill the
   available width and sit still — and only fall back to the carousel
   behavior once the screen is too narrow to fit them comfortably. The
   override below replaces the fixed flex-basis with flex:1 1 0 plus a
   min/max width: cards grow to fill the row up to --spi-card-max, and
   never shrink past --spi-card-min — once six cards at that floor
   would no longer fit, they overflow instead of shrinking further,
   and .spi-scroll's own overflow-x:auto turns that into the scroll. */
/* No .is-aligned here: that class's gutter tracks a centered .spi-container
   edge, which is exactly the growing, screen-width-dependent inset this
   section was just pulled out of (see the HTML comment above the section's
   wrapper div). Pinning --spi-scroll-gutter straight to the section's own
   fixed padding tokens keeps the first card under the headline at every
   width instead of drifting inward on wide monitors. */
.spi-archetype-grid {
  --spi-scroll-gutter: var(--spi-pad-desktop);
  --spi-card-min: 230px;
  --spi-card-max: 400px;
}

.spi-archetype-grid.spi-scroll > * {
  flex: 1 1 0;
  width: auto;
  min-width: var(--spi-card-min);
  max-width: var(--spi-card-max);
}

/* MUST stay: .spi-row/.spi-scroll set display:flex, and an author class
   beats the browser's built-in [hidden]{display:none} (same issue as
   .spi-modal[hidden] in base-web-style.css). Without this the inactive
   tab panel keeps rendering as a flex row under the active one. */
.spi-archetype-grid[hidden] {
  display: none;
}

@media (max-width: 1024px) {
  .spi-archetype-grid {
    --spi-scroll-gutter: var(--spi-pad-tablet);
    --spi-card-min: 220px;
  }
}

@media (max-width: 600px) {
  .spi-archetype-grid {
    --spi-scroll-gutter: var(--spi-pad-mobile);
  }

  /* Back to a flat, fixed card width at phone sizes — there's never
     room to fit six across, so fill-to-container doesn't apply, and a
     steady 78% keeps the next card peeking in as a scroll affordance
     (matching every other .spi-scroll row on this page). */
  .spi-archetype-grid.spi-scroll > * {
    flex: 0 0 78%;
    min-width: 0;
    max-width: none;
  }
}

/* The section this grid sits in trades some vertical rhythm so the
   whole set clears a standard laptop viewport in one screen, and
   sizes the art stage to however many cards are in play. */
.spi-archetype-section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.spi-archetype-section .spi-archetype-art { height: 216px; }

/* Between two-up and one-up the card is at its narrowest, and two
   pills on one line overflow it. Let them share the row when they
   fit and stack when they don't. */
@media (max-width: 1100px) {
  .arc-btn { flex: 1 1 auto; padding: 10px 14px; font-size: 11px; }
}

@media (max-width: 600px) {
  .spi-card-archetype { padding: 22px; }
  .arc-btn { flex: 1 1 100%; }
  .spi-archetype-art { height: 168px; }
  .spi-archetype-section .spi-archetype-art { height: 180px; }
}

/* ---------------------------------------------------------
   2. HERO
   300px tall, full-bleed image, slide controls bottom-left.
   No headline/title — CTA + slide dots only.

   The CTA's color/glass treatment is NOT here: .spi-hero-controls
   .btn.default is styled by base-web-style.css's shared "buttons
   on imagery" rule (section 10, FEATURE CARD), which also covers
   .spi-card-nav-content and .spi-card-feature-content so tech
   pages get the same treatment on their own imagery buttons.
   Only this component's structure/layout lives here.
--------------------------------------------------------- */
.spi-hero {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.spi-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.spi-hero-slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.spi-hero-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.spi-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spi-hero-controls {
  position: absolute;
  left: 32px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  z-index: 2;
}

.spi-hero-dots {
  display: flex;
  gap: 8px;
}

/* The dot stays a visual 8px via ::before; the <button> itself is a
   24px hit area so the tap target isn't the dot's own tiny footprint —
   an 8x8 target is effectively untappable with a finger. */
.spi-hero-dots button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spi-hero-dots button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.spi-hero-dots button.is-active::before {
  background: #ffffff;
}

/* On a touch device the 24px button above is still under the ~44px
   comfortable target. Rather than grow the button — which would space the
   visible dots further apart and change the look — an invisible ::after
   extends only the hit area, centred on the dot, so layout is untouched.
   Keyed on the input device: a narrow desktop window is still a mouse.

   At 24px wide plus an 8px gap the dots sit 32px apart, so neighbouring
   44px areas do overlap slightly. That is unavoidable without respacing
   the row, and the cost of a mis-tap here is landing on an adjacent
   slide — the press still lands nearest the dot actually aimed at. */
@media (pointer: coarse) {
  .spi-hero-dots button {
    position: relative;
  }

  .spi-hero-dots button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 600px) {
  .spi-hero {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .spi-hero-controls {
    left: 16px;
    bottom: 16px;
  }
}

/* The hero CTA is the page's single primary conversion button, not a
   card-density chip — base's blanket .btn shrink at this width takes
   it down to a ~34px-tall target on every phone and tablet, under the
   ~40-44px comfortable touch-target range. Restored here, scoped to
   just this button so every other .btn on the page keeps its compact
   sizing from base. */
@media (max-width: 1024px) {
  .spi-hero-controls .btn.default {
    padding: 12px 24px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
}

/* ---------------------------------------------------------
   3. NAV CARD
   "Bags / Shoes / Accessories / Apparel" and
   "Apparel for Every Occasion" — image, title + CTA
   bottom-left, links out to a category/product list.
--------------------------------------------------------- */
.spi-card-nav {
  position: relative;
  border-radius: var(--spi-radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
}

.spi-card-nav img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spi-card-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--spi-overlay);
}

.spi-card-nav-content {
  position: relative;
  z-index: 2;
  padding: 20px;
  color: #fff;
}

.spi-card-nav-content h3 {
  color: #fff;
  margin-bottom: 12px;
}

/* Mobile-only variant of .spi-row for the top-level category picker
   (Bowling Balls / Bags / Shoes / Accessories / Apparel). At desktop
   widths this stays a plain .spi-row — five cards sharing the width
   evenly. Below 600px a plain .spi-row stacks to one column instead
   (see .spi-row:not(.spi-scroll)>* in base-web-style.css's grid/row
   system), which for five aspect-ratio 3/4 cards means ~2400px of
   stacked scrolling just to reach "Apparel". This swaps that stack
   for a full-bleed horizontal scroll strip instead — same breakout/
   snap/hidden-scrollbar mechanics as .spi-scroll, just scoped to
   mobile so desktop is untouched. */
@media (max-width: 600px) {
  /* .spi-row.spi-cat-nav (two classes), not just .spi-cat-nav: the
     stacking rule this overrides is .spi-row:not(.spi-scroll), and
     :not() counts toward specificity same as a class — (0,2,0) — so a
     single-class override here loses that fight regardless of source
     order. Matching it at two classes wins on source order instead. */
  .spi-row.spi-cat-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 4px var(--spi-pad-mobile) 12px;
    scroll-padding-left: var(--spi-pad-mobile);
  }

  .spi-row.spi-cat-nav::-webkit-scrollbar {
    display: none;
  }

  .spi-row.spi-cat-nav > * {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
}

/* ---------------------------------------------------------
   4. BALL RACK  (brand stripe + ball card)
   A brand-banded, horizontally scrolling row of products.
   The SCROLLER ITSELF IS NOT NEW — it reuses .spi-row.spi-scroll
   from base-web-style.css, which already gives full-bleed
   breakout, snap and a hidden scrollbar. Only the two
   brand-specific pieces live here.
--------------------------------------------------------- */

/* Full-width dark band carrying the brand logo */
.spi-brand-stripe {
  padding: 16px;
  text-align: center;
  background: #191c1b;
}

.spi-brand-stripe img {
  height: 37px;
  width: auto;
  margin: 0 auto;
}

/* The rack sits tight under its stripe — .spi-scroll supplies its
   own vertical padding, so the wrapper adds none. */
.spi-brand-rack {
  padding-top: 0;
  padding-bottom: 0;
}

/* Product thumbnail + name. No card shell: the ball sits on the
   page ground the way it does on the production rack. */
.spi-card-ball {
  display: block;
  text-align: center;
  text-decoration: none;
}

.spi-card-ball img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  transition: transform 0.25s ease;
  /* Reserve the image box before it loads. The rack is built from
     Ball-Data.json by the feed script, whose <img> carries no width or
     height, so every ball slot is 0px tall until its image arrives and
     then snaps open, dragging each product name down with it. Every
     active ball image in the feed is square (checked all 55 — a mix of
     900, 600 and 400px squares), so 1/1 is the real ratio; object-fit
     keeps any future non-square image letterboxed rather than stretched. */
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.spi-card-ball:hover img {
  transform: translateY(-4px) scale(1.03);
}

.spi-card-ball-name {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--spi-black);
}

/* Ball track width — narrower than the generic card track, and it
   must hold on phones too (the generic 78% is far too wide for a
   thumbnail), so it is set explicitly at both sizes. */
.spi-scroll > .spi-card-ball { flex-basis: 200px; }

@media (max-width: 600px) {
  .spi-scroll > .spi-card-ball { flex-basis: 150px; }
}

/* ---------------------------------------------------------
   5. FILTER CHIP
   "Style ✕" tag on Best For Your Style.
--------------------------------------------------------- */
.spi-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--spi-radius-pill);
  background: var(--spi-gray-100);
  border: 1px solid var(--spi-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--spi-black);
}

.spi-chip button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--spi-text-muted);
}