/* ==========================================================================
   GHOST SOURCE THEME - AD STYLES
   Custom Advertisement Layouts for source_ads theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS CUSTOM PROPERTIES (Easy to customize)
   -------------------------------------------------------------------------- */
:root {
    /* Ad dimensions */
    --promo-header-width: 1400px;
    --promo-header-height: 240px;
    --promo-side-width: 160px;
    --promo-side-height: 600px;
    
    /* Placeholder styling - matches Source theme aesthetics */
    --promo-placeholder-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --promo-placeholder-border: #dee2e6;
    --promo-placeholder-text: #6c757d;
    --promo-placeholder-label-bg: #495057;
    --promo-placeholder-label-text: #ffffff;
    
    /* Layout spacing - matches Source theme's spacing */
    --promo-side-gap: 24px;
    --promo-header-margin-top: 24px;
    --promo-header-margin-bottom: 32px;
    
    /* Breakpoint for sidebar visibility */
    --promo-side-min-width: 1400px;
}

/* --------------------------------------------------------------------------
   BASE AD CONTAINER STYLES
   -------------------------------------------------------------------------- */
.promo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.promo-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.promo-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
}

.promo-wrap a {
    display: block;
    line-height: 0;
}

.promo-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--promo-placeholder-text);
    margin-top: 4px;
    opacity: 0.7;
    font-family: var(--font-sans);
}

/* --------------------------------------------------------------------------
   HEADER BANNER AD (Home Page) - 1400x240
   Positioned above the header section in home.hbs
   -------------------------------------------------------------------------- */
.promo-header {
    width: 100%;
    max-width: var(--promo-header-width);
    margin: 80px auto 20px auto; /* Reduced bottom margin */
    padding: 0 max(4vmin, 20px);
    box-sizing: border-box;
}

.promo-header .promo-wrap {
    width: 100%;
    max-width: var(--promo-header-width);
    height: 240px; /* Fixed height instead of aspect-ratio for reliability */
    border-radius: 8px;
    overflow: hidden;
    background-color: #f0f0f0; /* Visible fallback background */
    border: 1px solid #e0e0e0; /* Subtle border to show boundaries */
}

.promo-header .promo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.promo-header .promo-wrap a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Responsive header banner */
@media (max-width: 768px) {
    .promo-header {
        margin: 60px auto 5px auto; /* Restore top margin, minimal bottom margin */
        padding: 0 16px;
    }
    
    .promo-header .promo-wrap {
        height: auto;
        min-height: 160px;
        aspect-ratio: 3 / 1;
        border-radius: 6px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .promo-header {
        margin: 50px auto 3px auto; /* Keep top margin, minimal bottom */
    }
    
    .promo-header .promo-wrap {
        min-height: 140px;
        aspect-ratio: 2.5 / 1;
    }
}

/* --------------------------------------------------------------------------
   SIDEBAR ADS (Post Pages) - 160x600 Skyscrapers
   -------------------------------------------------------------------------- */

/* Main wrapper with sidebar support */
.gh-main-with-promos {
    width: 100%;
}

/* Post content with sidebars grid layout */
.post-with-promos {
    display: grid;
    grid-template-columns: var(--promo-side-width) minmax(0, 1fr) var(--promo-side-width);
    gap: var(--promo-side-gap);
    max-width: calc(var(--promo-side-width) * 2 + 720px + var(--promo-side-gap) * 2);
    margin: 0 auto;
    padding: 0 20px;
    align-items: start;
}

.post-with-promos .gh-article {
    grid-column: 2;
    min-width: 0; /* Prevent grid blowout */
    width: 100%;
}

/* Sidebar ad positioning */
.promo-side {
    position: static; /* Changed from sticky to static */
    width: var(--promo-side-width);
    height: fit-content;
    flex-shrink: 0;
    margin-top: 80px; /* Align with body text start */
}

.promo-side .promo-wrap {
    width: var(--promo-side-width);
    height: var(--promo-side-height);
    border-radius: 6px;
    overflow: hidden;
    background-color: #f8f9fa; /* Fallback background */
}

.promo-side .promo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.promo-side-left {
    grid-column: 1;
    justify-self: end;
}

.promo-side-right {
    grid-column: 3;
    justify-self: start;
}

/* --------------------------------------------------------------------------
   RESPONSIVE SIDEBAR BEHAVIOR
   -------------------------------------------------------------------------- */

/* Default: Hide mobile inline ad */
.promo-inline {
    display: none;
}

/* Large screens (≥1400px): Both sidebars visible */
@media (min-width: 1400px) {
    .promo-side-left,
    .promo-side-right {
        display: flex;
    }
    
    .promo-inline {
        display: none;
    }
}

/* Medium/small screens (<1400px): Hide sidebars, show inline ad */
@media (max-width: 1399px) {
    .post-with-promos {
        display: block;
        max-width: 720px;
        padding: 0 max(4vmin, 20px);
    }
    
    .promo-side {
        display: none;
    }
    
    /* Show mobile inline ad */
    .promo-inline {
        display: flex;
        width: 100%;
        max-width: 728px;
        margin: 32px auto;
        padding: 0 max(4vmin, 20px);
        box-sizing: border-box;
    }
    
    .promo-inline .promo-wrap {
        width: 100%;
        aspect-ratio: 4 / 1;
        min-height: 120px; /* Taller */
        border-radius: 6px;
        overflow: hidden;
        background-color: #f8f9fa;
    }
    
    .promo-inline .promo-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* Mobile: Compact inline ad */
@media (max-width: 767px) {
    .promo-inline {
        max-width: 100%;
        margin: 24px auto;
    }
    
    .promo-inline .promo-wrap {
        aspect-ratio: 3 / 1;
        min-height: 140px; /* Taller */
        max-height: none;
    }
    
    .promo-inline .promo-placeholder-size {
        display: none;
    }
}

/* Extra small screens - inline ad */
@media (max-width: 480px) {
    .promo-inline .promo-wrap {
        aspect-ratio: 2.5 / 1;
        min-height: 130px;
    }
}

/* --------------------------------------------------------------------------
   PLACEHOLDER STYLES (Professional "Your Ad Here")
   -------------------------------------------------------------------------- */
.promo-placeholder {
    width: 100%;
    height: 100%;
    background: var(--promo-placeholder-bg);
    border: 2px dashed var(--promo-placeholder-border);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.promo-placeholder:hover {
    border-color: #adb5bd;
}

.promo-placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 20px;
}

.promo-placeholder-label {
    background: var(--promo-placeholder-label-bg);
    color: var(--promo-placeholder-label-text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 4px;
    font-family: var(--font-sans);
}

.promo-placeholder-size {
    font-size: 12px;
    color: var(--promo-placeholder-text);
    font-family: 'JetBrains Mono', monospace;
    opacity: 0.8;
}

.promo-placeholder-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--promo-placeholder-text);
    font-family: var(--font-sans);
}

.promo-placeholder-email {
    font-weight: 600;
    color: #495057;
}

/* Header placeholder specific styles */
.promo-placeholder-header .promo-placeholder-label {
    font-size: 18px;
    padding: 14px 32px;
}

.promo-placeholder-header .promo-placeholder-size {
    font-size: 14px;
}

.promo-placeholder-header .promo-placeholder-contact {
    flex-direction: row;
    gap: 16px;
    font-size: 14px;
}

/* Sidebar placeholder specific styles */
.promo-placeholder-sidebar .promo-placeholder-content {
    padding: 16px 10px;
    gap: 16px;
}

.promo-placeholder-sidebar .promo-placeholder-label {
    font-size: 11px;
    padding: 8px 12px;
    letter-spacing: 1.5px;
}

.promo-placeholder-sidebar .promo-placeholder-contact {
    font-size: 10px;
}

.promo-placeholder-sidebar .promo-placeholder-email {
    font-size: 9px;
    word-break: break-all;
}

/* --------------------------------------------------------------------------
   DARK MODE SUPPORT
   Integrates with Source theme's dark mode
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --promo-placeholder-bg: linear-gradient(135deg, #2d3436 0%, #1e2022 100%);
        --promo-placeholder-border: #495057;
        --promo-placeholder-text: #adb5bd;
        --promo-placeholder-label-bg: #6c757d;
        --promo-placeholder-label-text: #ffffff;
    }
    
    .promo-placeholder-email {
        color: #ced4da;
    }
}

/* Source theme dark text class support */
.has-dark-text .promo-placeholder {
    background: var(--promo-placeholder-bg);
}

.has-light-text .promo-placeholder {
    background: linear-gradient(135deg, #2d3436 0%, #1e2022 100%);
    border-color: #495057;
}

.has-light-text .promo-placeholder-content {
    color: #adb5bd;
}

.has-light-text .promo-placeholder-email {
    color: #ced4da;
}

/* --------------------------------------------------------------------------
   PRINT STYLES (Hide ads when printing)
   -------------------------------------------------------------------------- */
@media print {
    .promo-box,
    .promo-side,
    .promo-header,
    .promo-inline {
        display: none !important;
    }
    
    .post-with-promos {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   ANIMATION (Subtle load-in effect)
   -------------------------------------------------------------------------- */
@keyframes adFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.promo-box {
    animation: adFadeIn 0.4s ease-out;
}

/* --------------------------------------------------------------------------
   UTILITY CLASSES
   -------------------------------------------------------------------------- */

/* Hide ad completely */
.promo-hidden {
    display: none !important;
}

/* Temporarily disable ad (greyed out) */
.promo-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Make ad clickable placeholder */
.promo-placeholder-clickable {
    cursor: pointer;
}

.promo-placeholder-clickable:hover {
    transform: scale(1.01);
}


/* --------------------------------------------------------------------------
   MOBILE LAYOUT ADJUSTMENTS
   -------------------------------------------------------------------------- */

/* Reduce header padding on mobile */
@media (max-width: 768px) {
    .gh-header.is-classic {
        padding-block: 50px; /* Reduced from 150px */
    }
    
    .gh-article-title.is-title {
        padding-top: 50px;
    }
}