/*
 * Arundel Post: ad placements.
 * Each .ad-slot pulls the HTML card of a Ghost page (see partials/ad-slot.hbs).
 * Kept outside the vendor bundle (built/index.css) so theme updates stay easy to merge.
 */

/* An unpublished ad page renders an empty <aside>: collapse it. */
.ad-slot:not(:has(.ad-slot-creative)) {
    display: none;
}

.ad-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.ad-slot-label {
    color: var(--text-secondary);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.ad-slot-creative {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ad-slot-creative > *,
.ad-slot-creative img,
.ad-slot-creative iframe {
    max-width: 100%;
}

.ad-slot-creative img {
    height: auto;
}

/* #1 Sidebar display card (300x600): homepage hero, "Latest" column, after the 3rd post. */
/* Post cards (.group) alternate with 1px dividers; everything after the 3rd card moves below the ad. */
.hero-right > .grid > .group:nth-child(3 of .group) ~ :not(.ad-slot) {
    order: 2;
}

/* The column is a 2-up grid on tablets (dividers hidden): go after the 4th post to keep rows even. */
@media (min-width: 768px) and (max-width: 990.98px) {
    .hero-right > .grid > .group:nth-child(3 of .group) ~ :not(.ad-slot) {
        order: 0;
    }

    .hero-right > .grid > .group:nth-child(4 of .group) ~ :not(.ad-slot) {
        order: 2;
    }
}

.hero-right > .grid > .ad-slot {
    order: 1;
    grid-column: 1 / -1;
}

.ad-slot--ad-sidebar-sticky .ad-slot-creative {
    max-width: 300px;
    min-height: 250px;
}

/* Extra left-column stories that balance the height Ad #1 adds (partials/hero-featured-post-left.hbs).
   Desktop only: one card from 991px, a second from 1280px. `display: contents` keeps the divider and card
   as direct flex items of .hero-left so they share its spacing. */
.hero-left-more {
    display: none;
}

@media (min-width: 991px) {
    .hero-left-more {
        display: contents;
    }

    .hero-left-more--wide {
        display: none;
    }

    /* The card partial adds a trailing divider when it isn't the loop's last item; the wrapper already leads with one. */
    .hero-left-more > .h-px:last-child:not(:first-child) {
        display: none;
    }
}

@media (min-width: 1280px) {
    .hero-left-more--wide {
        display: contents;
    }
}

/* #2 Hero interstitial card (336x280): replaces the hero newsletter box. */
.hero .ad-slot--ad-hero-interstitial {
    padding-top: 2.5rem;
}

@media (min-width: 991px) {
    /* Ad #1 makes the side columns taller: keep the centre post at its natural height and
       give the extra height to the ad row, where the card sticks while the columns scroll by. */
    .hero:has(> .ad-slot--ad-hero-interstitial) {
        grid-template-rows: auto 1fr;
    }

    .hero .ad-slot--ad-hero-interstitial {
        border-inline: 1px solid var(--border-color);
        padding-inline: 1.25rem;
    }

    .hero .ad-slot--ad-hero-interstitial .ad-slot-label,
    .hero .ad-slot--ad-hero-interstitial .ad-slot-creative {
        position: sticky;
        top: 9rem;
    }

    .hero .ad-slot--ad-hero-interstitial .ad-slot-label {
        top: 8rem;
    }
}

.ad-slot--ad-hero-interstitial .ad-slot-creative {
    background-color: var(--bg-color-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.125rem;
    min-height: 280px;
    padding: 2rem 1rem;
}

/* #3 Homepage leaderboard (970x90, 320x100 on phones): between Editor's Choice and the next topic section. */
.ad-slot--ad-home-leaderboard {
    padding-top: 2.5rem;
}

@media (min-width: 478px) {
    .ad-slot--ad-home-leaderboard {
        padding-top: 3rem;
    }
}

@media (min-width: 768px) {
    .ad-slot--ad-home-leaderboard {
        padding-top: 4rem;
    }
}

.ad-slot--ad-home-leaderboard .ad-slot-creative {
    max-width: 970px;
    min-height: 100px;
}

@media (min-width: 768px) {
    .ad-slot--ad-home-leaderboard .ad-slot-creative {
        min-height: 90px;
    }
}

/* #4 Post sidebar medium rectangle (300x250): sticks together with the sidebar subscribe form. */
.sticky-stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ad-slot--ad-post-sidebar .ad-slot-creative {
    max-width: 300px;
    min-height: 250px;
}

/* Preview layout on the ad pages themselves (/ad-*). */
.ad-slot--preview {
    border: 1px dashed var(--border-color);
    border-radius: 0.25rem;
    padding: 2rem 1rem;
    width: 100%;
}