/**
 * AdSense Manual Placement Styles
 *
 * Provides responsive ad containers that:
 * - Prevent layout shift with min-height
 * - Show/hide based on device size
 * - Center ads within containers
 */

/* ==========================================================================
   Base Ad Container
   ========================================================================== */

.ad-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem auto;
    overflow: hidden;
}

/* ==========================================================================
   Leaderboard (728x90) - Desktop Only
   ========================================================================== */

.ad-leaderboard {
    display: none;
    min-height: 90px;
    max-width: 728px;
}

@media (min-width: 768px) {
    .ad-leaderboard {
        display: flex;
    }
}

/* ==========================================================================
   Mobile Banner (320x100) - Mobile Only
   ========================================================================== */

.ad-mobile-banner {
    display: flex;
    min-height: 100px;
    max-width: 320px;
}

@media (min-width: 768px) {
    .ad-mobile-banner {
        display: none;
    }
}

/* ==========================================================================
   Rectangle (300x250) - All Devices
   ========================================================================== */

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

/* ==========================================================================
   In-Article (Fluid) - All Devices
   ========================================================================== */

.ad-in-article {
    min-height: 100px;
    width: 100%;
    max-width: 100%;
}

/* ==========================================================================
   Multiplex (Grid) - All Devices
   ========================================================================== */

.ad-multiplex {
    min-height: 250px;
    width: 100%;
    max-width: 100%;
}

/* ==========================================================================
   Ad Section Wrapper (for spacing around ads)
   ========================================================================== */

.ad-section {
    margin: 1.5rem 0;
}

.ad-section-sm {
    margin: 1rem 0;
}

.ad-section-lg {
    margin: 2rem 0;
}

/* ==========================================================================
   Loading State (prevents layout shift)
   ========================================================================== */

.ad-container ins.adsbygoogle {
    background-color: transparent;
}

/* Collapse containers when ad is unfilled (no empty space) */
.ad-container:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}

/* ==========================================================================
   Infeed Ads (inline within card/list grids)
   ========================================================================== */

.infeed-ad-cell {
    width: 100%;
    min-width: 250px;
    overflow: visible;
}

.infeed-ad-cell:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}

.infeed-ad-list-item {
    list-style: none;
}