/**
 * Docentes 2.0 - AdSense CLS Prevention Styles
 * Version: 1.0.0
 *
 * Prevents Cumulative Layout Shift (CLS) by reserving space for ad containers.
 * Target: CLS < 0.1
 */

/* ==========================================================================
   Base Ad Container - CLS Protection
   ========================================================================== */

.d20-ad-container {
    /* Reserve minimum height to prevent layout shift */
    min-height: 280px;
    width: 100%;

    /* Visual container styling */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    overflow: hidden;

    /* Flex for centering loading state */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Spacing */
    margin: 24px 0;
    padding: 8px;
    box-sizing: border-box;

    /* Prevent content reflow */
    contain: layout style;
}

/* Loading placeholder before ad loads */
.d20-ad-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #dee2e6;
    border-top-color: var(--c-primary, #8E1600);
    border-radius: 50%;
    animation: d20-ad-spin 1s linear infinite;
    opacity: 0.5;
}

/* Hide placeholder once ad is rendered */
.d20-ad-container[data-d20-ad-rendered="true"]::before {
    display: none;
}

/* Remove background once ad loads */
.d20-ad-container[data-d20-ad-rendered="true"] {
    background: transparent;
    min-height: auto;
    /* Allow ad to define height after load */
}

@keyframes d20-ad-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


/* ==========================================================================
   Placement-Specific Styles
   ========================================================================== */

/* In-Article Ads */
.d20-ad-in-article {
    min-height: 280px;
    max-width: 728px;
    margin-left: auto;
    margin-right: auto;
}

/* Pre-Footer Ads (Display Responsive - Corporate-safe placement) */
.ad-prefooter {
    min-height: 250px;
    width: 100%;
    max-width: 970px;
    margin: 40px auto;
    text-align: center;

    /* CLS protection */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Prevent content reflow */
    contain: layout style;
}

/* Remove background once ad loads */
.ad-prefooter[data-ad-loaded="true"] {
    background: transparent;
    min-height: auto;
}

/* After Content (Full width) */
.d20-ad-after-content {
    min-height: 280px;
    max-width: 100%;
    margin: 32px 0;
}

/* Sidebar Ads */
.d20-ad-sidebar {
    min-height: 250px;
    width: 100%;
    max-width: 336px;
    margin: 16px 0;
}


/* ==========================================================================
   Mobile Sticky Ad (Blog only)
   ========================================================================== */

.d20-ad-mobile-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    min-height: 50px;
    max-height: 100px;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 4px;
    display: none;
    /* Hidden by default, shown via JS on mobile */
}

/* Only show on mobile */
@media (max-width: 768px) {
    .d20-ad-mobile-sticky.active {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Add bottom padding to body when sticky ad is active */
    body.has-sticky-ad {
        padding-bottom: 100px;
    }
}

/* Hide on desktop */
@media (min-width: 769px) {
    .d20-ad-mobile-sticky {
        display: none !important;
    }
}


/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .d20-ad-container {
        min-height: 250px;
        margin: 16px 0;
    }

    .d20-ad-in-article {
        min-height: 250px;
    }

    .d20-ad-pre-footer {
        min-height: 200px;
        margin: 24px auto;
    }
}

@media (max-width: 480px) {
    .d20-ad-container {
        min-height: 200px;
    }
}


/* ==========================================================================
   AdSense Element Styling
   ========================================================================== */

/* Ensure AdSense ins element fills container */
.d20-ad-container .adsbygoogle {
    width: 100%;
    min-height: inherit;
}

/* Handle unfilled ads gracefully */
.d20-ad-container ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

.d20-ad-container:has(ins[data-ad-status="unfilled"]) {
    min-height: 0;
    padding: 0;
    margin: 0;
    background: transparent;
}


/* ==========================================================================
   Label (Optional - for transparency)
   ========================================================================== */

.d20-ad-label {
    font-size: 10px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    padding-bottom: 4px;
}