/* 
 * Ad Placeholder Styles
 * Premium ad slots with placeholder styling for testing and development
 */

/* Premium Header Ad - Leaderboard 728x90 */
#header-ad-placeholder {
    width: 728px;
    height: 90px;
    max-width: 100%;
    margin: 25px auto;
    background-color: #e0e0e0;
    border: 1px dashed #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    color: #666;
    font-size: 14px;
}

/* Optional: Add "AD" text to placeholder */
#header-ad-placeholder::before {
    content: "728x90 Header Ad Placeholder";
    opacity: 0.5;
}

/* ========================================
   TWO-COLUMN LAYOUT WITH SIDEBAR
   ======================================== */

/* Main content wrapper using CSS Grid */
.content-sidebar-wrapper {
    display: grid;
    grid-template-columns: 68% 30%;
    gap: 2%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Primary content area */
.primary-content {
    min-width: 0; /* Prevents grid blowout */
}

/* Sidebar area */
#primary-sidebar {
    min-width: 0; /* Prevents grid blowout */
    position: sticky;
    top: 20px;
    align-self: start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* Sidebar widgets */
.sidebar-widget {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Responsive: Stack on smaller screens */
@media (max-width: 992px) {
    .content-sidebar-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    #primary-sidebar {
        position: static;
        max-height: none;
        order: 2; /* Sidebar appears below content on mobile */
    }
}

/* Tablet optimization */
@media (min-width: 768px) and (max-width: 992px) {
    .content-sidebar-wrapper {
        grid-template-columns: 65% 33%;
        gap: 2%;
    }
}

/* Content inner wrappers (for sections that need full width backgrounds) */
.content-inner,
.article-content-wrapper {
    width: 100%;
}

/* Ensure sections with background colors extend properly */
.primary-content section {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* ========================================
   STICKY SIDEBAR AD PLACEHOLDER
   ======================================== */

/* Sticky Ad - 300x600 Sidebar Ad */
#sticky-ad-placeholder {
    width: 300px;
    height: 600px;
    background-color: #e0e0e0;
    border: 1px dashed #cccccc;
    position: sticky;
    top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    color: #666;
    font-size: 14px;
}

/* Optional: Add "AD" text to sticky placeholder */
#sticky-ad-placeholder::before {
    content: "300x600 Sticky Sidebar Ad";
    opacity: 0.5;
}

/* ========================================
   IN-ARTICLE AD PLACEHOLDERS
   ======================================== */

/* In-Article Ad - 336x280 Medium Rectangle */
.in-article-ad {
    width: 336px;
    height: 280px;
    max-width: 100%;
    margin: 30px auto;
    background-color: #e0e0e0;
    border: 1px dashed #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    color: #666;
    font-size: 14px;
}

/* Add subtle styling to in-article ads */
.in-article-ad span {
    opacity: 0.5;
}