/* assets/css/ads.css
   Unified ad styling
*/

/* Legacy class safety */
img.top-addd{
  max-width:100% !important;
  height:auto !important;
  display:block;
}

/* =========================
   MHC Ads — Base Runtime
========================= */

/* KEY FIX:
   margin: 12px auto; centers max-width banners (970/728/etc)
*/
.mhc-ad{
  display:block;
  width:100%;
  margin:12px auto;          /* ✅ center */
  float:none !important;
}

/* Keep the inner layout centered */
.mhc-ad__slot{
  width:100%;
  position:relative;
  margin:0 auto;             /* ✅ center slot */
}

.mhc-ad__link{ display:inline-block; line-height:0; }

.mhc-ad__img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
}

/* -------------------------
   Type “slots”: set a max width
   (these MUST be centered, margin auto above will do it)
------------------------- */
.mhc-ad--leaderboard_728x90        { max-width:728px; }
.mhc-ad--super_leaderboard_970x90  { max-width:970px; }
.mhc-ad--medium_rectangle_300x250  { max-width:300px; }
.mhc-ad--half_page_300x600         { max-width:300px; }
.mhc-ad--wide_skyscraper_160x600   { max-width:160px; }

/* Modern aspect-ratio (keeps consistent height) */
.mhc-ad--leaderboard_728x90       .mhc-ad__slot{ aspect-ratio:728/90; }
.mhc-ad--super_leaderboard_970x90 .mhc-ad__slot{ aspect-ratio:970/90; }
.mhc-ad--medium_rectangle_300x250 .mhc-ad__slot{ aspect-ratio:300/250; }
.mhc-ad--half_page_300x600        .mhc-ad__slot{ aspect-ratio:300/600; }
.mhc-ad--wide_skyscraper_160x600  .mhc-ad__slot{ aspect-ratio:160/600; }

/* Fill the slot without cropping */
.mhc-ad__slot .mhc-ad__img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* =========================
   Alignment helpers used in pages
========================= */
.mhc-ad-center{
  width:100% !important;
  text-align:center !important;
}

/* Force anything inside to be centered */
.mhc-ad-center .mhc-ad{
  margin-left:auto !important;
  margin-right:auto !important;
}

.mhc-ad-center img,
.mhc-ad-center iframe,
.mhc-ad-center ins{
  display:block !important;
  margin:0 auto !important;
  max-width:100% !important;
  height:auto !important;
}

/* Right-rail spacing */
.mhc-right-ad{ margin-top:12px; }

/* Bottom superleaderboard wrapper */
.mhc-bottom-super{ padding:0; }
.mhc-bottom-super .container{ text-align:center; }



/* Mobile refinements */
@media (max-width:576px){
  .mhc-ad{ margin:10px auto; }
}
@media (min-width:577px) and (max-width:992px){
  .mhc-ad{ margin:12px auto; }
}

@media (max-width:576px){
  /* Make leaderboard less “compressed” on mobile */
  .mhc-ad--leaderboard_728x90 .mhc-ad__slot{
    aspect-ratio: auto;   /* stop forcing 728/90 height */
    height: auto;         /* let content decide height */
  }

  .mhc-ad--leaderboard_728x90 .mhc-ad__img{
    height: auto;         /* don't force height:100% */
  }
}