/* ============================================================
V7-HEADER
Title:    Buktika - MamaDEX Portrait Slider Styles
File:     mamadex-slider.css
Path:     assets/css/mamadex/partials/mamadex-slider.css
Version:  v1.4.0
Issued:   2026-03-28
Author:   Buktika Command Team
Owner:    Buktika - Binka
Purpose:  Pillar-specific sizing and colour token overrides for the
          MamaDEX portrait strip. Geometry lives in global.css
          .mamas-strip component block. This file overrides only
          what differs from global defaults.
Depends:  global.css v3.7.1 (.mamas-strip component block)
          assets/js/partials/slider.js v1.2.0
          assets/js/mamadex/partials/mamadex-slider-builder.js
ChangeLog:
  v1.4.0 (2026-03-28): Added .mamas-block and .mamas-block-cta rules.
                        CTA now sits below the strip in natural block flow,
                        centred, with canonical MamaDEX violet → depth gradient.
  v1.2.0 (2026-03-02): margin: 2rem auto — centres the JS-snapped panel
                        in its container (slider.js v1.2.0 sets strip.style.width).
                        overflow removed — global.css sets overflow:hidden on
                        .mamas-strip; overriding to visible here so the
                        box-shadow is not clipped by the element's own boundary
                        after JS narrows the width. Rail clipping is correctly
                        handled by .strip-clip overflow:hidden in global.css.
  v1.1.0 (2026-03-02): Added --strip-line and --strip-arrow-mask tokens.
                        Added panel visual: background, border, border-radius,
                        box-shadow.
  v1.0.0 (2026-03-01): Initial build.
============================================================ */

/* ============================================================
   MamaDEX pillar tokens applied to strip
   --page-primary is set by mamadex.css — no override needed here.
   Only token overrides permitted (Colour Map v3.9.0 §8.9.3).
   --strip-gap MUST NOT be overridden — slider.js reads it from :root.
   ============================================================ */

.page-mamadex {
  --strip-thumb:      9.6875rem;               /* 155px — MamaDEX canonical portrait size */
  --strip-item-w:    12.5rem;                  /* 200px */
  --strip-label-sz:   0.9375rem;              /* 15px  */

  /* Colour token overrides — §8.9.4 HARD RULE: pillar MUST define these */
  --strip-line:       rgba(139, 92, 246, 0.18); /* --sdx-color-mama-violet 18% tint */
  --strip-arrow-mask: rgba(255, 255, 255, 0.92); /* near-white frosted surface    */
}

/* ============================================================
   Strip wrapper — panel visual and centring context.
   slider.js v1.2.0 sets strip.style.width to the exact snapped
   panel width. margin: auto centres that width in the container.
   overflow: visible so box-shadow is not self-clipped after the
   inline width is narrowed by JS (rail clipping is in .strip-clip).
   ============================================================ */

.page-mamadex .mamas-strip {
  margin:        2rem auto;
  overflow:      visible;
  background:    var(--card);
  border:        0.125rem solid var(--strip-line);
  border-radius: 0.875rem;
  box-shadow:
    0 0.625rem 1.875rem rgba(0, 0, 0, 0.10),
    0 0.125rem 0.5rem   rgba(0, 0, 0, 0.06);
}

.page-mamadex .mamas-block {
  text-align: center;
}

.page-mamadex .mamas-block-cta {
  display: inline-block;
  margin-top: 1rem;
}

.page-mamadex .mamas-block .sdx-btn-primary {
  background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-secondary) 100%);
  color: #ffffff;
}

/* ============================================================
   Mobile overrides
   ============================================================ */

@media (max-width: 30rem) {
  .page-mamadex {
    --strip-thumb:  7.75rem;
    --strip-item-w: 10rem;
  }
}