/**
 * Strategic Ad Placement Styles
 * Designed for maximum visibility without disrupting user experience
 */

/* Strategic Ad Slot Container */
.strategic-ad-slot {
    margin: 2rem auto;
    padding: 1rem 0;
    max-width: 100%;
    text-align: center;
    min-height: 90px;
    /* Reserve space to prevent layout shift */
}

/* Ad container styling */
.ad-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90px;
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
    border-radius: 8px;
    overflow: hidden;
}

/* When ad is loaded, remove background */
.ad-container ins.adsbygoogle {
    background: transparent;
}

/* Premium ad placement after hero - higher visibility */
.ad-slot-hero {
    margin-top: 2rem;
    margin-bottom: 0;
    padding: 1.5rem 1rem;
}

.ad-slot-hero .ad-container {
    min-height: 100px;
    max-width: 728px;
    margin: 0 auto;
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* In-content ad - blends naturally between sections */
.ad-slot-content {
    margin: 3rem auto;
    padding: 1rem;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}

.ad-slot-content .ad-container {
    max-width: 970px;
    margin: 0 auto;
}

/* Native ads - blends with article content */
.ad-slot-native {
    margin: 2rem auto;
    padding: 1.5rem 1rem;
}

.ad-slot-native .ad-container {
    max-width: 800px;
    margin: 0 auto;
    background: transparent;
    min-height: 250px;
}

/* Pre-footer ad - last chance engagement */
.ad-slot-footer {
    margin: 2rem auto 0;
    padding: 2rem 1rem 1rem;
    background: #f8f9fa;
}

.ad-slot-footer .ad-container {
    max-width: 728px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .strategic-ad-slot {
        margin: 1.5rem auto;
        padding: 0.75rem 0;
    }

    .ad-slot-hero .ad-container,
    .ad-slot-content .ad-container,
    .ad-slot-footer .ad-container {
        max-width: 100%;
        border-radius: 4px;
    }

    .ad-container {
        min-height: 100px;
        /* Mobile banner height */
    }
}

/* Hide ads during printing */
@media print {
    .strategic-ad-slot {
        display: none !important;
    }
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {

    .strategic-ad-slot,
    .ad-container {
        transition: none;
    }
}