/**
 * Ads Responsive Styles
 * Controls ad visibility and layout across different screen sizes
 * Includes comprehensive layout for content wrapper and sidebars
 */

/* ============================================
   SIDEBAR BASE STYLES
   ============================================ */

/* Hide empty sidebars when ads are disabled */
.sidebar:empty {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    grid-column: auto !important;
}

.sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

/* ============================================
   DESKTOP LAYOUT (> 1200px)
   ============================================ */

@media (min-width: 1200px) {

    /* 3-column grid: left sidebar | main content | right sidebar */
    .content-wrapper {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 30px;
        max-width: 1800px;
        margin: 0 auto;
        padding: 0 20px;
        align-items: start;
    }

    .sidebar {
        display: block;
        width: 336px;
        min-width: 336px;
    }

    /* Explicitly hide empty sidebars and remove from grid */
    .sidebar:empty {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
    }

    /* Main content should always be in the center */
    .main-content {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* When both sidebars are empty, center everything */
    .content-wrapper:has(.left-sidebar:empty):has(.right-sidebar:empty) {
        grid-template-columns: 1fr;
        max-width: 1200px;
        justify-content: center;
    }

    /* Ensure proper grid column assignment */
    .left-sidebar {
        grid-column: 1;
    }

    .main-content {
        grid-column: 2;
    }

    .right-sidebar {
        grid-column: 3;
    }

    /* When left sidebar is empty, shift main content */
    .content-wrapper:has(.left-sidebar:empty) .main-content {
        grid-column: 1;
    }

    .content-wrapper:has(.left-sidebar:empty) .right-sidebar {
        grid-column: 2;
    }

    /* When both sidebars are empty, main content takes full width */
    .content-wrapper:has(.left-sidebar:empty):has(.right-sidebar:empty) .main-content {
        grid-column: 1;
    }

    /* Smooth transitions for layout changes */
    .content-wrapper,
    .main-content,
    .sidebar {
        transition: grid-template-columns 0.3s ease, width 0.3s ease, opacity 0.2s ease;
    }

    /* Prevent layout shift during ad loading */
    .sidebar:not(:empty) {
        min-height: 600px;
    }
}

/* ============================================
   TABLET LAYOUT (768px - 1199px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1199px) {
    .content-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Hide sidebars on tablet */
    .sidebar {
        display: none !important;
    }
}

/* ============================================
   MOBILE LAYOUT (< 768px)
   ============================================ */

@media (max-width: 767px) {
    .content-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 15px;
    }

    /* Hide all sidebars on mobile */
    .sidebar {
        display: none !important;
    }
}

/* ============================================
   AD POSITION STYLES
   ============================================ */

/* Desktop styles - ads visible by default */
.ad-position-header,
.ad-position-sidebar,
.ad-position-left-sidebar,
.ad-position-right-sidebar,
.ad-position-footer,
.ad-position-incontent {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

/* Header and Footer ads - 728x90 leaderboard */
.ad-position-header,
.ad-position-footer {
    max-width: 728px;
    min-height: 90px;
    margin: 20px auto;
}

/* In-content ads */
.ad-position-incontent {
    margin: 30px auto;
    max-width: 728px;
}

/* Sidebar ads (all types) */
.ad-position-sidebar,
.ad-position-left-sidebar,
.ad-position-right-sidebar {
    width: 100%;
    max-width: 336px;
    margin: 0 auto 20px;
}

/* ============================================
   RESPONSIVE AD ADJUSTMENTS
   ============================================ */

/* Tablet breakpoint - 768px and below */
@media (max-width: 768px) {

    /* Hide sidebar ads on tablets and mobile */
    .ad-hide-mobile,
    .ad-position-sidebar,
    .ad-position-left-sidebar,
    .ad-position-right-sidebar {
        display: none !important;
    }

    /* Adjust other ad positions for smaller screens */
    .ad-position-header,
    .ad-position-footer,
    .ad-position-incontent {
        max-width: 100%;
        padding: 10px 0;
        min-height: 50px;
    }
}

/* Mobile breakpoint - 480px and below */
@media (max-width: 480px) {

    /* Ensure sidebar ads stay hidden */
    .ad-hide-mobile,
    .ad-position-sidebar,
    .ad-position-left-sidebar,
    .ad-position-right-sidebar {
        display: none !important;
    }

    /* Mobile-specific ad adjustments */
    .ad-position-header,
    .ad-position-footer,
    .ad-position-incontent {
        padding: 5px 0;
    }
}

/* ============================================
   ADSENSE RESPONSIVE BEHAVIOR
   ============================================ */

/* Fine-tune AdSense responsive behavior */
@media (max-width: 768px) {
    .adsbygoogle {
        min-height: 50px;
        /* Prevent layout shift */
    }
}

/* Ensure AdSense ads are responsive */
ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}