/* =========================================================
   STORM — TECH DARK-TEAL SKIN
   -----------------------------------------------------------
   Loads ON TOP of base-web-style.css on the technical pages.
   It does two things:
     1. Re-paints the whole global (.spi-*) system dark-teal by
        overriding the neutral --spi-* tokens in :root. Because
        every global component references those tokens, the page,
        cards, text, and borders all re-color automatically.
     2. Adds the tech-page component shell: .ui-card (the
        content card used across the tech pages) + a few color
        overrides for hard-coded pieces (buttons).
   ========================================================= */

:root {
  /* ---- re-map the global neutral tokens to dark teal ---- */
  --spi-white: #0b0f14;                       /* page + card surface */
  --spi-black: #ffffff;                       /* primary text */
  --spi-text-muted: rgba(255, 255, 255, 0.60);/* body copy */
  --spi-border: rgba(0, 147, 144, 0.22);      /* card / hairline borders */
  --spi-gray-100: #121821;
  --spi-gray-200: #0f141b;
  --spi-gray-300: #1a2630;                    /* image placeholders */

  /* ---- tech accent palette ---- */
  --brand: rgb(0, 147, 144);          /* card shells / borders / glow / atmosphere */
  --brand-accent: rgb(0, 230, 195);   /* bright accent: chips, ticks, tags, play, quote */
  --brand-accent-soft: rgba(0, 230, 195, 0.08);
  --brand-accent-fill: rgba(0, 230, 195, 0.12);
  --brand-accent-line: rgba(0, 230, 195, 0.20);
  --brand-accent-line-strong: rgba(0, 230, 195, 0.35);
  --brand-dark: rgb(0, 95, 93);
  --brand-border: rgba(0, 147, 144, 0.25);
  --brand-glow: rgba(0, 147, 144, 0.22);
  --bg-deep: #0b0f14;
  --bg-soft: #121821;
  --bg-card: #1a2630;
}

/* ---------------------------------------------------------
   PAGE — dark background + teal atmosphere glow
--------------------------------------------------------- */
body {
  background:
    radial-gradient(circle at 15% 0%, rgba(0, 147, 144, 0.09), transparent 60%),
    radial-gradient(circle at 85% 40%, rgba(0, 95, 93, 0.07), transparent 60%),
    var(--bg-deep);
  background-attachment: fixed;
}

/* ---------------------------------------------------------
   CMS WRAPPER — let the dark page background through.
   The body background above is correct, but the Magento
   template wraps page content in .main-container, which the
   theme paints solid WHITE. That wrapper sits between body
   and our sections and hides the dark ground entirely —
   which is why the CMS code-editor preview (no wrapper)
   looked right while the published page did not.
   Only these tech pages load this skin, so clearing it here
   cannot affect the rest of the store.
--------------------------------------------------------- */
.main-container,
.main-container.col1-layout {
  background: transparent !important;
}

/* Eyebrow labels read teal on the dark theme */
.spi-eyebrow {
  color: var(--brand);
}

.free-shipping-stripe {
    padding: 16px;
    background-color: #008675;
    display: none;
}

/* ---------------------------------------------------------
   CARD SHELL — .ui-card (the tech content card)
   Surface, border, radius, blur, hover-lift.
--------------------------------------------------------- */
.ui-card {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-soft));
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 28px;
  backdrop-filter: blur(6px);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.ui-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 147, 144, 0.45);
  box-shadow: 0 12px 32px var(--brand-glow);
}

/* Centered card variant (layout balls, ball diagram) */
.ui-card-center {
  text-align: center;
}

.ui-card-center img {
  max-width: 160px;
  height: auto;
  margin: 0 auto 16px;
  display: block;
}

/* Big panel variant (Why Your PAP Matters) */
.ui-panel {
  padding: 52px;
}

.ui-panel .spi-row {
  margin-top: 8px;
}

/* Card list spacing */
.ui-card ul.spi-body li {
  margin-bottom: 8px;
}

/* ---------------------------------------------------------
   IMAGE CARDS (.spi-card-article) — re-theme via tokens.
   Background/border already follow --spi-white / --spi-border,
   so they go dark automatically; add the teal hover lift.
--------------------------------------------------------- */
.spi-card-article {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

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

.spi-card-article-body h4 {
  color: #ffffff;
}

/* ---------------------------------------------------------
   PRODUCT CARDS (.spi-card-product) — same teal lift as every
   other clickable card. The base sheet ships this component
   without a hover, so it sat dead next to the article and
   video cards until this was added.
--------------------------------------------------------- */
.spi-card-product {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-soft));
  border-color: var(--brand-border);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.spi-card-product:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 147, 144, 0.45);
  box-shadow: 0 12px 32px var(--brand-glow);
}

.spi-card-product:hover .spi-card-product-body h4 {
  color: var(--brand-accent);
}

.spi-card-product-body h4 {
  color: #ffffff;
  transition: color 0.3s ease;
}

/* ---------------------------------------------------------
   BUTTONS — global .btn.default is a hard-coded light pill
   (with !important), so re-color it to the dark teal pill.
--------------------------------------------------------- */
.btn.default {
  border: 1px solid var(--brand) !important;
  background-color: var(--bg-soft) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.btn.default:hover {
  transform: translateY(-2px);
  border: 1px solid var(--brand) !important;
  background-color: rgba(0, 147, 144, 0.15) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px var(--brand-glow) !important;
}

/* Centering inside .spi-text-center.
   The base sets .btn to inline-block, but the live Magento theme
   overrides it to display:flex — a BLOCK-level box, which
   text-align:center on the parent cannot move. Force it back to an
   inline-level box so text-align works, and keep auto side margins
   so it still centers if anything makes it block-level again. */
.spi-text-center > .btn,
.spi-text-center > .btn.default {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------
   TECH-COMPONENT THEME
   The reusable components (tick list, tags, step list) live in
   the base and read --spi-accent — map it to teal here so they
   all pick up the brand color.
--------------------------------------------------------- */
:root {
  --spi-accent: var(--brand-accent);
}

/* Glow panel (the "how a ball is laid out" diagram card) */
.ui-card-glow {
  border-color: var(--brand-border);
  box-shadow: 0 0 44px rgba(0, 147, 144, 0.14);
}

/* Tag pills — match the live layout chip: white text on a faint teal fill */
.spi-tag {
  color: #ffffff;
  background: var(--brand-accent-soft);
  border-color: var(--brand-accent-line);
}
/* Accent tag (article "Layouts" chip) — teal text on a stronger teal fill */
.spi-tag.accent {
  color: var(--brand-accent);
  background: var(--brand-accent-fill);
  border-color: var(--brand-accent-line-strong);
}

/* Article body meta reads dim teal-gray */
.spi-meta { color: rgba(255, 255, 255, 0.45); }
.spi-card-article-body { background: rgba(0, 0, 0, 0.18); }

/* Video card — dark gradient thumb, teal play triangle */
.spi-video-thumb {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-soft));
  border: 1px solid var(--spi-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.spi-card-video:hover .spi-video-thumb {
  transform: translateY(-6px);
  border-color: var(--brand-border);
  box-shadow: 0 12px 32px var(--brand-glow);
}
/* Play badge — dark circle behind a teal triangle. Identical on every
   tech page; the odd grey ring that showed up on some ball-care cards
   was a second play button baked into those thumbnail images, not CSS,
   and was fixed by re-exporting the thumbnails. */
.spi-play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.78);
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: background 0.2s ease, transform 0.2s ease;
}
.spi-play::after {
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--brand-accent);
  margin-left: 3px;
}
.spi-card-video:hover .spi-play {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.06);
}
.spi-video-title { color: #ffffff; }

/* ---------------------------------------------------------
   MOBILE PADDING STEP-DOWN
   The desktop shells (52px panel / 28px card) are generous on
   purpose, but they are horizontal budget: on a 292px phone a
   panel with a card inside it spent ~160px on padding alone,
   leaving content — the PAP diagram especially — squeezed into
   what was left. Step both down as the screen narrows.
   Lives in the skin because the skin sets these paddings and
   loads after the base sheet.
--------------------------------------------------------- */
@media (max-width: 768px) {
  .ui-panel { padding: 32px 24px; }
  .ui-card { padding: 22px 20px; }
}

@media (max-width: 600px) {
  .ui-panel { padding: 24px 16px; }
  .ui-card { padding: 20px 16px; }

  /* a card nested inside a panel doubles the inset — trim it further */
  .ui-panel .ui-card { padding: 18px 14px; }
}

/* ---------------------------------------------------------
   VIDEO MODAL — tech skin
   The base sheet gives the lightbox its structure (backdrop,
   16:9 frame, close button); this dresses it in the dark-teal
   theme so it matches the page it opens over.
--------------------------------------------------------- */
.spi-modal {
  background: rgba(6, 9, 12, 0.88);
  backdrop-filter: blur(4px);
}

.spi-modal-frame {
  border: 1px solid var(--brand-border);
  box-shadow:
    0 0 0 1px rgba(0, 230, 195, 0.06),
    0 28px 70px rgba(0, 0, 0, 0.65),
    0 0 60px var(--brand-glow);
}

.spi-modal-close {
  border-color: var(--brand-border);
  background: var(--bg-soft);
}

.spi-modal-close:hover {
  border-color: var(--brand-accent);
  background: rgba(0, 147, 144, 0.18);
  color: var(--brand-accent);
}

/* Title under the player picks up the eyebrow treatment */
.spi-modal-title {
  font-family: var(--spi-font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-accent);
}