/* ============================================================
   Markets & Services Slider
   ─ Inactive slides: roughly square (~250 px)
   ─ Active slide:    portrait + scale(1.06) so it pops wider
     AND taller simultaneously — ratio changes from ~1:1 to
     ~1:1.6 portrait, appearing to have "grown in both axes"
   ─ Height is a pure CSS transition (no GSAP layout anim)
   ─ scale() is also a pure CSS transition — GPU composited,
     zero layout reflow, never fights Swiper's translateX
   ============================================================ */

/* ── Variables ───────────────────────────────────────────── */
.dma-ms-block {
  --dma-accent:      #e4002b;
  --dma-charcoal-64: #646569;
  --dma-eb:          #ebebeb;
  --dma-slide-h:     250px;   /* inactive — square-ish                    */
  --dma-slide-h-act: 390px;   /* active   — tall portrait                 */
  --dma-slide-scale: 1.06;    /* active scale — visual "pops wider/taller" */
  --dma-wrap-pt:     72px;    /* padding above slides (icon bleed space)  */
  --dma-wrap-pb:     52px;    /* padding below slides (box bleed space)   */
}

/* ── Block shell ─────────────────────────────────────────── */
.dma-ms-block {
  position: relative;
  /*
   * Left/right/top stay clipped flush to the block's own box (same
   * horizontal containment `overflow:hidden` used to give the triangle
   * watermark below) but the bottom is deliberately left open so that
   * same tall (1108px) watermark can bleed down past this block's own
   * height into whatever section follows on the page — it settles once
   * that next section's own (opaque) background paints over it, so it
   * only ever *looks* like it "ends" around the top of the next module.
   * The swiper's own side-peek/active-scale bleed is independently
   * contained by .dma-ms-panels-wrap's own overflow:hidden, so this
   * doesn't reintroduce the slide-clipping this rule used to also cover.
   */
  overflow: visible;
  clip-path: inset(0 0 -200% 0);
  /* Explicit low stacking level — see the matching z-index note on
     .dma-cs-block — guarantees the bleeding triangle never paints
     above whatever section follows, regardless of DOM order.
     isolation:isolate forces a new stacking context unconditionally. */
  isolation: isolate;
  z-index: 0;
}
.wp-block-pro-design-markets-services-slider.alignfull,
.dma-ms-block.alignfull {
  margin-left:  calc(-1 * var(--wp--style--root--padding-left,  0px));
  margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
  max-width: none;
  width: 100%;
}

/* ── Triangle watermark ──────────────────────────────────── */
.dma-ms-block__triangle {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
  /*
   * No opacity here — triangle-pattern.svg already bakes in its own
   * ~0.05 opacity (see the <g opacity="0.049999997"> wrapping every
   * path in the file). Stacking another opacity:0.05 on top of that
   * multiplied down to ~0.0025 effective opacity — invisible on any
   * screen, which is why this watermark wasn't showing up at all.
   */
}
.dma-ms-block__triangle img {
  display: block;
  max-width: none;
}

/* ── Optional section header ─────────────────────────────── */
.dma-ms-block__header {
  text-align: center;
  padding: 40px 24px 0;
  position: relative;
  z-index: 1;
}
.dma-ms-block__eyebrow {
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dma-accent);
  margin-bottom: 8px;
}
.dma-ms-block__title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  margin: 0 0 12px;
}
.dma-ms-block__subtitle {
  font-size: 17px;
  color: var(--dma-charcoal-64);
  margin: 0;
}

/* ── Tabs ────────────────────────────────────────────────── */
.dma-ms-tabs {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 20px;
  text-align: center;
  font-size: 28px;
  line-height: 34px;
}
.dma-ms-tab {
  display: inline-block;
  vertical-align: top;
  color: var(--dma-charcoal-64);
  margin: 0 14.5px;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 0 !important;
  font-size: 28px;
  line-height: 34px;
  font-weight: 400;
  font-family: inherit;
  padding: 0 0 4px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color 0.25s, border-color 0.25s;
}
.dma-ms-tab:focus-visible {
  outline: 2px solid var(--dma-accent);
  outline-offset: 3px;
}
/* Hover: grey underline only — explicit !important to beat theme overrides */
.dma-ms-tab:hover,
.dma-ms-tab:focus:not(:focus-visible) {
  background:       transparent !important;
  background-color: transparent !important;
  color:            var(--dma-charcoal-64);
  border-bottom-color: var(--dma-charcoal-64);
  box-shadow: none !important;
}
/* Active: red color + red underline, never a background */
.dma-ms-tab.is-active,
.dma-ms-tab.is-active:hover {
  font-weight:      bold;
  color:            var(--dma-accent) !important;
  border-bottom-color: var(--dma-accent) !important;
  background:       transparent !important;
  background-color: transparent !important;
  box-shadow:       none !important;
}

/* ── Panels wrapper ──────────────────────────────────────── */
.dma-ms-panels-wrap {
  position: relative;
  z-index: 1;
  overflow: hidden;   /* clips side-peek; active scale() may bleed slightly */
  padding-top:    var(--dma-wrap-pt);
  padding-bottom: var(--dma-wrap-pb);
  /*
   * min-height accounts for the scaled active slide's visual height.
   * layout height is --dma-slide-h-act; visual height = that × --dma-slide-scale.
   * We use the layout value; overflow handles the extra ~6 % from scale.
   */
  min-height: calc(var(--dma-wrap-pt) + var(--dma-slide-h-act) + var(--dma-wrap-pb));
}

/* ── Individual panel ────────────────────────────────────── */
.dma-ms-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.5s;
}
.dma-ms-panel.is-active {
  position: relative;
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

/* ── Swiper ──────────────────────────────────────────────── */
.dma-ms-swiper {
  overflow: visible !important;  /* side slides peek; panels-wrap clips */
  width: 100%;
}
/*
 * Fixed wrapper height = layout height of the active slide (390 px).
 * align-items:center keeps every slide vertically centered so the
 * active slide grows equally upward AND downward — no bottom-pinning.
 */
.dma-ms-swiper .swiper-wrapper {
  height: var(--dma-slide-h-act) !important;   /* 390 px fixed */
  align-items: center;
}

/* ── Slide ───────────────────────────────────────────────── */
/*
 * Inactive: 250 px ≈ square at typical desktop slide width.
 * Active:   390 px tall + scale(1.06) → visually ~265 × 413 px
 *           (portrait, pops above and to the sides of neighbours).
 *
 * CSS transitions — NOT GSAP — so they never interact with
 * Swiper's transform: translateX() on the wrapper.
 */
/*
 * transform-origin: center center — active slide grows from its own center,
 * visually expanding outward in all directions equally (up/down/left/right).
 */
.dma-ms-slide {
  height: var(--dma-slide-h);   /* 250 px */
  position: relative;
  cursor: pointer;
  transform: scale(1);
  transform-origin: center center;
  transition: height 0.5s ease, transform 0.5s ease;
  z-index: 1;
}
.dma-ms-slide.is-active {
  height: var(--dma-slide-h-act);             /* 390 px */
  transform: scale( var(--dma-slide-scale) ); /* 1.06 — pops wider/taller from center */
  z-index: 2;
}

/* ── Full-card link ──────────────────────────────────────── */
/*
 * One <a> wraps the entire card — image + grey box — so every
 * pixel is clickable. JS intercepts clicks on non-active slides
 * to navigate the carousel instead of following the href.
 */
.dma-ms-slide__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none !important;
  color: inherit !important;
  outline: none;
}
.dma-ms-slide__link:focus-visible {
  outline: 2px solid var(--dma-accent);
  outline-offset: -3px;
}

/* ── Slide inner wrap ────────────────────────────────────── */
.dma-ms-slide__wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── Background image ────────────────────────────────────── */
.dma-ms-slide__img {
  height: 100%;
  width: 100%;
  position: relative;
}

/* ── Overlay ─────────────────────────────────────────────── */
.dma-ms-slide__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  background: rgba(100, 101, 105, 0.6);
}

/* ── Hover layer ─────────────────────────────────────────── */
.dma-ms-slide__hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.dma-ms-slide.is-active .dma-ms-slide__hover {
  pointer-events: auto;
}

/* ── SVG icon ────────────────────────────────────────────── */
.dma-ms-slide__icon {
  position: absolute;
  width: 100px;
  height: 105px;
  top:  -16px;
  left: -32px;
}
.dma-ms-slide__icon img {
  width: 100px;
  height: 105px;
  display: block;
  /* Tint any monochrome SVG to $red (#e4002b) */
  filter: brightness(0) saturate(100%)
          invert(14%) sepia(99%) saturate(5200%)
          hue-rotate(347deg) brightness(92%) contrast(108%);
}

/* ── Learn More box ──────────────────────────────────────── */
.dma-ms-slide__box {
  display: block;
  width: 100%;
  position: absolute;
  bottom: -16px;
  right:  -24px;
  background: var(--dma-charcoal-64);
  color: #fff !important;
  text-decoration: none !important;
  padding: 8px 16px 6px;
}
.dma-ms-slide__box-title {
  font-size:   32px;
  line-height: 32px;
  font-weight: bold;
  color: #fff;
}
.dma-ms-slide__box-learn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dma-eb) !important;
  font-size:   18px;
  line-height: 24px;
  font-family: 'space-mono', 'Space Mono', monospace;
}
.dma-ms-slide__box-learn svg {
  flex-shrink: 0;
  display: inline-block;
  color: var(--dma-eb);
}

/* ── Nav arrows ──────────────────────────────────────────── */
/* top: 50% + translateY(-50%) keeps arrows centered no matter the wrapper height */
.dma-ms-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width:  49px;
  height: 49px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none !important;
  cursor: pointer;
  padding: 0;
}
.dma-ms-nav:focus-visible {
  outline: 2px solid var(--dma-accent) !important;
}
.dma-ms-nav--prev { left:  0; }
.dma-ms-nav--next { right: 0; }
.dma-ms-nav svg   { display: block; }

/* ── Empty state ─────────────────────────────────────────── */
.dma-ms-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--dma-charcoal-64);
  font-size: 16px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
  .dma-ms-block__triangle { display: none; }
}
@media (max-width: 767px) {
  .dma-ms-tabs             { font-size: 22px; }
  .dma-ms-tab              { font-size: 22px; margin: 0 10px; }
  .dma-ms-slide__box-title { font-size: 22px; line-height: 26px; }
  .dma-ms-slide__box-learn { font-size: 14px; }
  .dma-ms-slide__icon      { width: 70px; height: 74px; top: -10px; left: -20px; }
  .dma-ms-slide__icon img  { width: 70px; height: 74px; }

  /*
   * Mobile is slidesPerView:1 in script.js (a single full-width slide) —
   * this margin is what actually creates the "peek" of the prev/next slide
   * and gives the icon/box room to bleed onto instead of clipping off the
   * viewport edge, keeping slidesPerView a clean integer (see script.js's
   * breakpoints comment for why a fractional slidesPerView broke arrow
   * navigation under loop:true). ~8.3% margin on each side matches what
   * the previous slidesPerView:1.2 approach produced, so the visual result
   * is unchanged — only the mechanism is safer.
   */
  .dma-ms-swiper {
    max-width: 83%;
    margin: 0 auto;
  }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .dma-ms-tab,
  .dma-ms-panel,
  .dma-ms-slide { transition: none; }
}