/* =========================================================
   OSBEATS GLOBAL PUBLIC HERO STANDARD 20260903

   Dimensional reference:
   Beats banner = 1536 x 390

   Home
   Beats
   Charts
   Search
   Producers
   Artists

   all use the exact same visual hero footprint.
   ========================================================= */


/* =========================================================
   UNIFORM HERO FRAME
   ========================================================= */

.os-uniform-public-hero{
  position:relative !important;

  width:100% !important;
  max-width:none !important;

  /*
     Exact Beats banner ratio.
  */
  aspect-ratio:1536 / 390 !important;

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

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

  overflow:hidden !important;

  background:#090a0d !important;

  border-radius:0 !important;

  box-sizing:border-box !important;

  line-height:0 !important;
}


/* =========================================================
   NORMAL IMAGE BANNERS
   ========================================================= */

.os-uniform-public-hero > img{
  display:block !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;

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


/* =========================================================
   HOME MANAGED SLIDER
   ========================================================= */

#homeHeroSlider.os-uniform-public-hero{
  position:relative !important;

  width:100% !important;

  aspect-ratio:1536 / 390 !important;

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

  overflow:hidden !important;
}


#homeHeroSlider.os-uniform-public-hero
.managed-slide{
  position:absolute !important;

  inset:0 !important;

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

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

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

  overflow:hidden !important;
}


#homeHeroSlider.os-uniform-public-hero
.managed-slide > img{
  display:block !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;

  /*
     Home's source artwork is much taller than the
     Beats banner, so crop it instead of stretching it.
  */
  object-fit:cover !important;
  object-position:center center !important;
}


/*
   Slider navigation stays above artwork.
*/
#homeHeroSlider.os-uniform-public-hero
.managed-slider-btn,

#homeHeroSlider.os-uniform-public-hero
.managed-slider-dots{
  z-index:10 !important;
}


/* =========================================================
   PRODUCERS
   Preserve existing producer artwork while fitting
   the standardized frame.
   ========================================================= */

.os-uniform-public-hero
.producer-hero-image{
  display:block !important;

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

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

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

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


/* =========================================================
   TABLET + MOBILE
   Keep the SAME ratio so page-to-page hero height
   remains consistent at every viewport width.
   ========================================================= */

@media(max-width:900px){

  .os-uniform-public-hero,
  #homeHeroSlider.os-uniform-public-hero{
    aspect-ratio:1536 / 390 !important;

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

}


@media(max-width:620px){

  .os-uniform-public-hero,
  #homeHeroSlider.os-uniform-public-hero{
    aspect-ratio:1536 / 390 !important;

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

}


/* =========================================================
   OSBEATS HOME SLIDER FIT + NAV FIX 20260903

   - Honor navigation visibility for the current Admin slide.
   - Hide arrows + dots when navigation is Hidden.
   - Prevent initial top-left control flash.
   - Fit full Admin artwork inside the Beats-sized hero.
   ========================================================= */


/* -----------------------------------------
   HIDDEN NAVIGATION
   ----------------------------------------- */

#homeHeroSlider.hide-navigation-arrows
> .managed-slider-btn,

#homeHeroSlider.hide-navigation-arrows
> .managed-slider-dots{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}


/* -----------------------------------------
   VISIBLE ARROWS — correct location
   ----------------------------------------- */

#homeHeroSlider:not(.hide-navigation-arrows)
> .managed-slider-btn{
  position:absolute !important;

  top:50% !important;

  width:42px !important;
  height:52px !important;

  transform:translateY(-50%) !important;

  display:grid !important;
  place-items:center !important;

  z-index:20 !important;

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

  background:rgba(6,7,10,.78) !important;

  border:1px solid rgba(255,255,255,.28) !important;

  color:#fff !important;

  font-size:30px !important;
  line-height:1 !important;

  cursor:pointer !important;
}


#homeHeroSlider:not(.hide-navigation-arrows)
> .managed-slider-btn.prev{
  left:16px !important;
  right:auto !important;
}


#homeHeroSlider:not(.hide-navigation-arrows)
> .managed-slider-btn.next{
  right:16px !important;
  left:auto !important;
}


/* -----------------------------------------
   VISIBLE DOTS — bottom center
   ----------------------------------------- */

#homeHeroSlider:not(.hide-navigation-arrows)
> .managed-slider-dots{
  position:absolute !important;

  left:50% !important;
  right:auto !important;

  bottom:12px !important;
  top:auto !important;

  transform:translateX(-50%) !important;

  z-index:20 !important;

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

  gap:7px !important;
}


#homeHeroSlider
.managed-slider-dot{
  display:block !important;

  width:8px !important;
  height:8px !important;

  min-width:8px !important;
  min-height:8px !important;

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

  border:1px solid rgba(255,255,255,.68) !important;

  background:rgba(0,0,0,.65) !important;
}


#homeHeroSlider
.managed-slider-dot.active{
  background:#b00814 !important;
  border-color:#b00814 !important;
}


/* -----------------------------------------
   ADMIN MANAGED <picture> SLIDES

   This is the important image-fit fix.
   Managed images are wrapped in a <picture>.
   ----------------------------------------- */

#homeHeroSlider.os-uniform-public-hero
.managed-slide-picture{
  display:block !important;

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

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

  background:#090a0d !important;

  overflow:hidden !important;
}


#homeHeroSlider.os-uniform-public-hero
.managed-slide-picture > img,

#homeHeroSlider.os-uniform-public-hero
.managed-fallback-slide > img{
  display:block !important;

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

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

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

  /*
     CONTAIN keeps the complete uploaded banner visible.
     The surrounding black blends with OSBeats artwork.
  */
  object-fit:contain !important;

  object-position:center center !important;

  background:#090a0d !important;
}


/* OSBEATS HOMEPAGE FIXED HERO 20260905 — HOME ONLY */
@media (min-width:901px){

  #homeHeroSlider{
    position:relative !important;
    width:100% !important;
    height:760px !important;
    min-height:760px !important;
    max-height:760px !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
    background:#090a0d !important;
  }

  #homeHeroSlider > .managed-slide{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    display:none !important;
    overflow:hidden !important;
  }

  #homeHeroSlider > .managed-slide.active{
    display:block !important;
  }

  #homeHeroSlider .managed-slide-picture{
    display:block !important;
    width:100% !important;
    height:100% !important;
  }

  #homeHeroSlider .managed-slide-picture > img,
  #homeHeroSlider .managed-fallback-slide > img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
  }
}