/* ============================================
   AD RESPONSIVE STYLES
   Handles mobile responsive for advertisements
   ============================================ */

/* Mobile: Stack ads vertically and scale down */
@media (max-width: 767px) {
    /* Ad container adjustments */
    .ad-preview-container {
        flex-direction: column !important;
        align-items: center !important;
        padding: 5px 15px !important;
    }
    
    /* 300x250 ads - Scale to fit mobile */
    .ad-preview-container a[style*="300px"] {
        max-width: 100% !important;
        width: 280px !important; /* Fit within mobile screen with padding */
        height: 233px !important; /* Maintain aspect ratio */
    }
    
    .ad-preview-container a[style*="300px"] iframe {
        width: 100% !important;
        height: 100% !important;
    }
    
    /* 770x76 video banner - Scale proportionally */
    .ad-preview-container a[style*="770px"] {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 770 / 76;
    }
    
    .ad-preview-container a[style*="770px"] iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 770 / 76;
    }
    
    /* 950x250 footer banner - Scale proportionally for mobile */
    .ad-preview-container a[style*="950px"] {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        aspect-ratio: 950 / 250;
    }
    
    .ad-preview-container a[style*="950px"] iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 950 / 250;
    }
}

/* Small mobile: Further optimization */
@media (max-width: 375px) {
    /* 300x250 ads - Smaller on tiny screens */
    .ad-preview-container a[style*="300px"] {
        width: 250px !important;
        height: 208px !important;
    }
    
    /* Footer banner - Keep consistent padding on tiny screens */
    .ad-preview-container a[style*="950px"] {
        padding: 5px 15px !important;
    }
}

/* Large tablets: Keep side by side but with gap */
@media (min-width: 768px) and (max-width: 991px) {
    .ad-preview-container {
        gap: 15px !important;
    }
}