/**
 * HM Ads Responsive Stylesheet
 * Controls layout, CLS prevention, and responsive visibility for .hm-ad containers.
 * Visibility per device is toggled by hm-ads.php inline JS; CSS provides fallback.
 */

/* ── Base container ──────────────────────────────────────────────────────── */
.hm-ad {
    display: block;
    overflow: hidden;
    text-align: center;
    /* Prevent layout shift while ad script loads */
    box-sizing: border-box;
}

.hm-ad:empty {
    display: none;
}

/* ── Explicit dimensions per ad size (CLS fix) ───────────────────────────── */
/* Billboard / Leaderboard */
.hm-ad[data-size="970x250"] { min-height: 250px; max-width: 970px; margin: 0 auto; }
.hm-ad[data-size="728x90"]  { min-height: 90px;  max-width: 728px; margin: 0 auto; }

/* Rectangles */
.hm-ad[data-size="300x250"] { min-height: 250px; max-width: 300px; }
.hm-ad[data-size="336x280"] { min-height: 280px; max-width: 336px; }
.hm-ad[data-size="320x100"] { min-height: 100px; max-width: 320px; }
.hm-ad[data-size="320x50"]  { min-height: 50px;  max-width: 320px; }

/* Half page */
.hm-ad[data-size="300x600"] { min-height: 600px; max-width: 300px; }

/* Wide skyscraper */
.hm-ad[data-size="160x600"] { min-height: 600px; max-width: 160px; }

/* ── Responsive: hide desktop ads on mobile, mobile ads on desktop ────────── */
@media (max-width: 767px) {
    .hm-ad[data-show-mobile="0"] {
        display: none !important;
    }
    /* Leaderboard → swap to mobile banner */
    .hm-ad[data-size="728x90"] {
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .hm-ad[data-show-desktop="0"] {
        display: none !important;
    }
}

/* ── Location wrappers ───────────────────────────────────────────────────── */
.hm-ad-location-header,
.hm-ad-location-footer {
    width: 100%;
    text-align: center;
    padding: 8px 0;
}

.hm-ad-location-sidebar {
    margin: 0 auto;
}

/* ── AdButler sizes ──────────────────────────────────────────────────────── */

/* Wallpaper skins (174×696) */
.hm-ad[data-size="174x696"] { min-height: 696px; max-width: 174px; }

/* Leaderboard / bottom bar dynamic (728×90 desktop, 320×50 mobile) */
.hm-ad[data-size="728x90,320x50"] { min-height: 90px; max-width: 728px; margin: 0 auto; }

@media (max-width: 767px) {
    .hm-ad[data-size="728x90,320x50"] { min-height: 50px; max-width: 320px; }
}

/* Popup dynamic (500×500 desktop, 300×300 mobile) */
.hm-ad[data-size="500x500,300x300"] { min-height: 300px; max-width: 500px; margin: 0 auto; }

@media (max-width: 767px) {
    .hm-ad[data-size="500x500,300x300"] { min-height: 300px; max-width: 300px; }
}

/* ── Programmatic ad placeholders ───────────────────────────────────────── */
.hm-ad-programmatic > div:empty {
    background: transparent;
}

/* ── AdButler container reset ────────────────────────────────────────────── */
.hm-ad-adbutler { line-height: 0; }