/*
 MATRIXALIGNER RADIO — ECOSYSTEM STACKED BANNER DECK V1

 Proven AudioMatrix pattern:
 one frame
 all slides absolute
 one active slide visible
 no horizontal carousel

 Current AIOS MatrixAligner Radio banner remains slide #1.
*/

.matrixaligner-radio-page-banner{
  position:relative !important;

  width:min(100% - 24px, 1280px) !important;

  height:clamp(
    180px,
    23vw,
    300px
  ) !important;

  max-height:none !important;

  margin:10px auto 16px !important;
  padding:0 !important;

  overflow:hidden !important;

  background:#050505 !important;

  border:
    1px solid
    rgba(212,175,55,.48);

  border-radius:18px;

  box-shadow:
    0 14px 34px rgba(0,0,0,.38),
    0 0 0 1px rgba(22,163,74,.08);

  isolation:isolate;
}


/*
 Existing radio banner.

 JS marks this image as slide #1.
*/
.matrixaligner-radio-page-banner
> img.matrix-radio-deck-original-banner{
  position:absolute !important;
  inset:0 !important;

  width:100% !important;
  height:100% !important;

  max-height:none !important;

  object-fit:contain !important;
  object-position:center center !important;

  display:block !important;

  background:#050505;

  opacity:0;

  transition:
    opacity .55s ease;

  z-index:1;
}


/*
 Every ecosystem card occupies exactly the same frame.
*/
.matrix-radio-ecosystem-slide{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;

  pointer-events:none;

  transition:
    opacity .55s ease;

  z-index:1;

  background:#050505;
}


.matrix-radio-ecosystem-slide img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center center;

  margin:0;
  padding:0;

  background:#050505;
}


/*
 One and only one slide visible.
*/
.matrixaligner-radio-page-banner
> .is-active{
  opacity:1 !important;
  pointer-events:auto;

  z-index:2;
}


/*
 Small premium progress indicator only.
*/
.matrix-radio-deck-progress{
  position:absolute;

  right:12px;
  bottom:10px;

  z-index:8;

  min-width:58px;

  padding:5px 9px;

  border:
    1px solid
    rgba(212,175,55,.52);

  border-radius:999px;

  background:
    rgba(5,5,5,.76);

  color:#f3d36a;

  font:
    700 12px/1
    Arial,
    Helvetica,
    sans-serif;

  text-align:center;

  backdrop-filter:blur(8px);

  pointer-events:none;
}


/*
 Green playing-style accent across bottom.
*/
.matrix-radio-deck-accent{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:3px;

  z-index:7;

  background:
    linear-gradient(
      90deg,
      #16a34a 0%,
      #d4af37 50%,
      #b91c1c 100%
    );

  pointer-events:none;
}


@media (max-width:900px){

  .matrixaligner-radio-page-banner{
    width:min(100% - 18px, 1280px) !important;

    height:clamp(
      165px,
      31vw,
      240px
    ) !important;

    margin:
      8px auto 13px !important;

    border-radius:15px;
  }

}


@media (max-width:520px){

  .matrixaligner-radio-page-banner{
    width:calc(100% - 12px) !important;

    height:clamp(
      145px,
      43vw,
      205px
    ) !important;

    margin:
      6px auto 10px !important;

    border-radius:12px;
  }

  .matrix-radio-deck-progress{
    right:8px;
    bottom:7px;

    font-size:11px;

    padding:4px 7px;
  }

}


/*
 Accessibility:
 keep one card visible but stop animated fading
 when reduced motion is requested.
*/
@media (prefers-reduced-motion:reduce){

  .matrix-radio-ecosystem-slide,
  .matrixaligner-radio-page-banner
  > img.matrix-radio-deck-original-banner{
    transition:none !important;
  }

}

/* ============================================================
   MATRIXALIGNER RADIO — WALL-TO-WALL DECK POLISH V2
   FULL BLEED / SAME FRAME / COVER
   ============================================================ */

.matrixaligner-radio-page-banner{
  /*
   Full viewport width even if another layout wrapper
   tries to constrain the banner.
  */
  width:100vw !important;
  max-width:none !important;

  margin-top:0 !important;
  margin-right:0 !important;
  margin-bottom:14px !important;

  margin-left:
    calc(50% - 50vw) !important;

  padding:0 !important;

  /*
   One consistent banner frame.
  */
  height:clamp(
    210px,
    28vw,
    360px
  ) !important;

  max-height:none !important;

  border-radius:0 !important;

  border-left:0 !important;
  border-right:0 !important;

  overflow:hidden !important;

  background:#050505 !important;
}


/*
 Every slide occupies the EXACT SAME frame.
*/
.matrixaligner-radio-page-banner
> img.matrix-radio-deck-original-banner,

.matrixaligner-radio-page-banner
> .matrix-radio-ecosystem-slide{
  position:absolute !important;

  inset:0 !important;

  width:100% !important;
  height:100% !important;

  margin:0 !important;
  padding:0 !important;
}


/*
 Original AIOS MatrixAligner Radio banner
 fills the exact same frame as every ecosystem card.
*/
.matrixaligner-radio-page-banner
> img.matrix-radio-deck-original-banner{
  object-fit:cover !important;
  object-position:center center !important;

  max-width:none !important;
  max-height:none !important;
}


/*
 Ecosystem image itself fills the whole slide.
 No inner card sizing.
 No side gutters.
*/
.matrix-radio-ecosystem-slide img{
  position:absolute !important;

  inset:0 !important;

  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  object-fit:cover !important;
  object-position:center center !important;

  border-radius:0 !important;

  display:block !important;
}


/*
 Remove any visual inset around individual slides.
*/
.matrix-radio-ecosystem-slide{
  display:block !important;

  border:0 !important;
  border-radius:0 !important;

  background:#050505 !important;

  overflow:hidden !important;
}


@media (max-width:900px){

  .matrixaligner-radio-page-banner{
    width:100vw !important;

    height:clamp(
      190px,
      34vw,
      300px
    ) !important;

    margin-left:
      calc(50% - 50vw) !important;

    margin-right:0 !important;

    border-radius:0 !important;
  }

}


@media (max-width:520px){

  .matrixaligner-radio-page-banner{
    width:100vw !important;

    height:clamp(
      160px,
      45vw,
      235px
    ) !important;

    margin-left:
      calc(50% - 50vw) !important;

    margin-right:0 !important;

    border-radius:0 !important;
  }

}


/* MATRIXALIGNER RADIO — HIDE ECOSYSTEM DECK COUNTER */
.matrix-radio-deck-progress{
  display:none !important;
}


/* ============================================================
   MATRIXALIGNER RADIO — BANNER SIZE POLISH V3
   WALL TO WALL / SHORTER PREMIUM HEADER
   ============================================================ */

.matrixaligner-radio-page-banner{
  width:100vw !important;
  max-width:none !important;

  /*
   Reduce vertical footprint.
   Desktop target stays wide and cinematic.
  */
  height:clamp(
    180px,
    21vw,
    275px
  ) !important;

  min-height:0 !important;
  max-height:275px !important;

  margin-top:0 !important;
  margin-bottom:10px !important;

  margin-left:
    calc(50% - 50vw) !important;

  margin-right:0 !important;

  padding:0 !important;

  border-radius:0 !important;

  overflow:hidden !important;
}


/*
 Force every rotating banner into the exact
 same dimensions.
*/
.matrixaligner-radio-page-banner
> img.matrix-radio-deck-original-banner,

.matrixaligner-radio-page-banner
> .matrix-radio-ecosystem-slide{
  position:absolute !important;

  inset:0 !important;

  width:100% !important;
  height:100% !important;

  min-width:100% !important;
  min-height:100% !important;

  max-width:none !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;
}


/*
 All artwork fills the same header dimensions.
*/
.matrixaligner-radio-page-banner
> img.matrix-radio-deck-original-banner,

.matrix-radio-ecosystem-slide img{
  width:100% !important;
  height:100% !important;

  object-fit:cover !important;
  object-position:center center !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;
}


@media (max-width:900px){

  .matrixaligner-radio-page-banner{
    height:clamp(
      160px,
      25vw,
      225px
    ) !important;

    max-height:225px !important;
  }

}


@media (max-width:520px){

  .matrixaligner-radio-page-banner{
    height:clamp(
      135px,
      38vw,
      185px
    ) !important;

    max-height:185px !important;
  }

}


/* ============================================================
   MATRIXALIGNER RADIO — NUMERIC 8:3 FULL-BANNER GEOMETRY
   FULL IMAGE FIRST
   ============================================================ */

.matrixaligner-radio-page-banner{
  width:100vw !important;
  max-width:none !important;

  /*
   Most MatrixAligner ecosystem artwork is a wide
   banner format around 2048 x 768.

   2048 / 768 = 2.666...
   Equivalent ratio = 8 / 3.
  */
  aspect-ratio:8 / 3 !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  margin-top:0 !important;
  margin-right:0 !important;
  margin-bottom:10px !important;

  margin-left:
    calc(50% - 50vw) !important;

  padding:0 !important;

  overflow:hidden !important;

  border-radius:0 !important;
}


/*
 Full original image.
 No top/bottom crop.
*/
.matrixaligner-radio-page-banner
> img.matrix-radio-deck-original-banner{
  position:absolute !important;
  inset:0 !important;

  width:100% !important;
  height:100% !important;

  object-fit:contain !important;
  object-position:center center !important;

  max-width:none !important;
  max-height:none !important;
}


/*
 Every ecosystem slide uses the same 8:3 frame.
*/
.matrixaligner-radio-page-banner
> .matrix-radio-ecosystem-slide{
  position:absolute !important;
  inset:0 !important;

  width:100% !important;
  height:100% !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;
}


/*
 Show the FULL ecosystem artwork.
*/
.matrix-radio-ecosystem-slide img{
  position:absolute !important;
  inset:0 !important;

  width:100% !important;
  height:100% !important;

  object-fit:contain !important;
  object-position:center center !important;

  max-width:none !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;
}


/*
 Remove the old fixed-height overrides.
 The ratio now controls desktop/tablet/mobile.
*/
@media (max-width:900px){

  .matrixaligner-radio-page-banner{
    aspect-ratio:8 / 3 !important;

    height:auto !important;
    max-height:none !important;
  }

}


@media (max-width:520px){

  .matrixaligner-radio-page-banner{
    aspect-ratio:8 / 3 !important;

    height:auto !important;
    max-height:none !important;
  }

}