/* AdhubMedia Ads Performance Optimizations */

/* Core containment for performance */
.adhub-ad-container {
    contain: layout style paint;
    will-change: auto;
}

.adhub-ad-lazy {
    contain: layout style;
}

/* Placeholder styles */
.adhub-ad-placeholder {
    transition: opacity 0.3s ease;
    cursor: pointer;
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    border-radius: 4px;
}

.adhub-ad-placeholder:hover {
    background: #e9ecef;
}

.adhub-ad-content {
    will-change: transform;
}

/* Ad sizing with aspect ratio for layout stability */
.adhub-ad-300x250 { 
    max-width: 300px; 
    margin: 15px auto; 
    aspect-ratio: 300/250;
}

.adhub-ad-300x600 { 
    max-width: 300px; 
    margin: 15px auto; 
    aspect-ratio: 300/600;
}

.adhub-ad-728x90 { 
    max-width: 728px; 
    margin: 15px auto; 
    aspect-ratio: 728/90;
}

.adhub-ad-320x50 { 
    max-width: 320px; 
    margin: 15px auto; 
    aspect-ratio: 320/50;
}

.adhub-ad-160x600 { 
    max-width: 160px; 
    margin: 15px auto; 
    aspect-ratio: 160/600;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .adhub-ad-728x90 { 
        max-width: 320px; 
        aspect-ratio: 320/50;
    }
    
    .adhub-ad-300x600 { 
        max-width: 300px; 
        aspect-ratio: 300/250;
    }
    
    .adhub-ad-160x600 { 
        max-width: 300px; 
        aspect-ratio: 300/250;
    }
}

/* Device targeting */
@media (max-width: 768px) {
    .adhub-ad-desktop { 
        display: none !important; 
    }
}

@media (min-width: 769px) {
    .adhub-ad-mobile { 
        display: none !important; 
    }
}

/* Performance improvements */
.adhub-ad-lazy .adhub-ad-content {
    transform: translateZ(0); /* Hardware acceleration */
}

/* Loading states */
.adhub-ad-loading {
    animation: adhub-pulse 1.5s ease-in-out infinite;
}

@keyframes adhub-pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

/* Prevent layout shift during ad loading */
.adhub-ad-container {
    /* Reserve space to prevent CLS */
    min-height: var(--adhub-ad-height, auto);
}

.adhub-ad-300x250 {
    --adhub-ad-height: 250px;
}

.adhub-ad-300x600 {
    --adhub-ad-height: 600px;
}

.adhub-ad-728x90 {
    --adhub-ad-height: 90px;
}

.adhub-ad-320x50 {
    --adhub-ad-height: 50px;
}

.adhub-ad-160x600 {
    --adhub-ad-height: 600px;
}

/* Mobile adjustments for heights */
@media (max-width: 768px) {
    .adhub-ad-728x90 {
        --adhub-ad-height: 50px;
    }
    
    .adhub-ad-300x600 {
        --adhub-ad-height: 250px;
    }
    
    .adhub-ad-160x600 {
        --adhub-ad-height: 250px;
    }
}

/* Ad positioning helpers */
.adhub-ad-header {
    text-align: center;
    margin: 20px auto;
}

.adhub-ad-sidebar {
    margin: 20px 0;
    text-align: center;
}

.adhub-ad-footer {
    text-align: center;
    margin: 30px auto;
    padding: 20px 0;
}

.adhub-ad-content-inline {
    margin: 30px auto;
    text-align: center;
    clear: both;
}

/* Widget specific styles */
.widget .adhub-ad-widget {
    margin: 0;
    text-align: center;
}

.widget .adhub-ad-widget .widget-title {
    display: none; /* Hide widget titles for ad widgets */
}

/* Accessibility improvements */
.adhub-ad-container[aria-hidden="true"] {
    display: none;
}

.adhub-ad-placeholder[role="button"] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.adhub-ad-placeholder[role="button"]:hover {
    background: #e9ecef;
}

.adhub-ad-placeholder[role="button"]:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* Core Web Vitals specific optimizations */
@supports (content-visibility: auto) {
    .adhub-ad-lazy {
        content-visibility: auto;
        contain-intrinsic-size: var(--adhub-ad-height, 250px);
    }
}

/* Critical above-the-fold optimizations */
.adhub-ad-mobile_top_ad, .adhub-ad-header_ad {
    contain: strict; /* Strict containment for critical ads */
    content-visibility: visible; /* Always visible for above-the-fold */
}

/* LCP optimization - prevent ads from being LCP candidates */
.adhub-ad-container img,
.adhub-ad-container iframe {
    content-visibility: auto;
    contain: layout style paint;
}

/* CLS prevention - reserve exact space */
.adhub-ad-container::before {
    content: '';
    display: block;
    height: var(--adhub-ad-height, 250px);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
}

/* Prevent layout shift during loading */
.adhub-ad-container[data-loading="true"] {
    height: var(--adhub-ad-height, 250px);
    overflow: hidden;
}

/* Progressive enhancement for modern browsers */
@supports (contain-intrinsic-size: 1px) {
    .adhub-ad-lazy {
        contain-intrinsic-size: var(--adhub-ad-height, 250px);
    }
}

/* Resource loading optimization */
.adhub-ad-container script {
    loading: lazy;
}

.adhub-ad-container iframe {
    loading: lazy;
    importance: low;
}

/* Prevent ad content from affecting page metrics */
.adhub-ad-content iframe,
.adhub-ad-content script {
    max-width: 100%;
    height: auto;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .adhub-ad-placeholder {
        background: #374151;
        border-color: #6b7280;
        color: #d1d5db;
    }
    
    .adhub-ad-placeholder:hover {
        background: #4b5563;
    }
}