/* ==========================================================================
   VISTARA - ADSTERRA ADS RESPONSIVE & POLICY COMPLIANT STYLESHEET
   100% Mobile & Desktop Responsive Styles for All 10 Adsterra Ad Placements
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. UNIVERSAL AD WRAPPER & CONTAINER CONTAINMENT
   -------------------------------------------------------------------------- */
.ad-placement-wrap,
.ad-slot-container,
.responsive-ad-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 14px auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    clear: both;
}

/* Ensure Adsterra iframes, images, and script wrappers never overflow screen */
.ad-placement-wrap iframe,
.ad-placement-wrap img,
.ad-placement-wrap > div,
.ad-slot-container iframe,
.ad-slot-container img,
.ad-slot-container > div,
.responsive-ad-container iframe,
.responsive-ad-container img,
.responsive-ad-container > div {
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   2. DESKTOP VS MOBILE VISIBILITY UTILITIES (RESPONSIVE BANNER SYSTEM)
   -------------------------------------------------------------------------- */
.ad-desktop-only {
    display: flex !important;
    justify-content: center !important;
    width: 100%;
    max-width: 100%;
}

.ad-mobile-only {
    display: none !important;
}

/* --------------------------------------------------------------------------
   3. ADSTERRA STANDARD SIZING & LAYOUT STABILITY (ANTI-CLS)
   -------------------------------------------------------------------------- */
.ad-slot-banner_728x90 {
    max-width: 728px;
    min-height: 90px;
}

.ad-slot-banner_468x60 {
    max-width: 468px;
    min-height: 60px;
}

.ad-slot-banner_320x50 {
    max-width: 320px;
    min-height: 50px;
}

.ad-slot-banner_300x250 {
    max-width: 300px;
    min-height: 250px;
}

.ad-slot-banner_160x600 {
    max-width: 160px;
    min-height: 600px;
}

.ad-slot-banner_160x300 {
    max-width: 160px;
    min-height: 300px;
}

.ad-slot-native_banner {
    width: 100%;
    max-width: 100%;
    min-height: 100px;
}

/* --------------------------------------------------------------------------
   4. LOCATION-SPECIFIC PLACEMENT SPACING
   -------------------------------------------------------------------------- */

/* Header Top Banner (Index page above Story Highlights) */
.header-banner-wrap {
    margin: 10px auto 16px auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* Above Cinema Video Player (Watch Page) */
.ad-above-player {
    margin: 0 0 16px 0;
    max-width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* Mid-Content Banner (Below Description, Above Comments) */
.ad-mid-content {
    margin: 18px auto;
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
}

/* Native Comments Widget */
.ad-native-comments {
    margin: 22px auto 14px auto;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* Homepage In-Feed Native & Responsive Ads */
.ad-native-homepage {
    margin: 16px auto;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* Bottom Homepage Banner */
.ad-bottom-homepage {
    margin: 20px auto 32px auto;
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
}

/* Watch Page Sidebar Ads */
.sidebar-ad-card {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
}

.sidebar-vertical-ads {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.sidebar-v-ad {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Reels Vertical Shorts Sponsored Ad Frame */
.reel-ad-frame {
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    max-width: 100% !important;
}

/* Single Community Post Page Ads */
.post-top-ad {
    margin: 10px auto 20px auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.post-infeed-ad {
    margin: 22px auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.post-bottom-ad {
    margin: 26px auto 36px auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE BREAKPOINTS (MOBILE & TABLET SAFEGUARDS)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Responsive Switch: Hide Desktop Banners, Display Mobile 320x50 Banners */
    .ad-desktop-only {
        display: none !important;
    }

    .ad-mobile-only {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* Mobile Margins & Spacing */
    .header-banner-wrap {
        margin: 6px auto 12px auto;
    }

    .ad-placement-wrap,
    .ad-slot-container,
    .responsive-ad-container {
        margin: 10px auto;
    }

    .ad-above-player {
        margin: 0 0 10px 0;
    }

    .ad-mid-content {
        margin: 12px auto;
    }

    .ad-native-comments,
    .ad-native-homepage {
        margin: 14px auto;
    }

    /* On Mobile Phones: Hide vertical skyscraper 160x600/160x300 ads
       to prevent massive empty vertical columns and policy density penalties */
    .sidebar-vertical-ads {
        display: none !important;
    }

    /* Enforce strict mobile containment */
    .ad-slot-banner_728x90,
    .ad-slot-banner_468x60 {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .ad-placement-wrap iframe {
        max-width: 100% !important;
    }
}