/* Who Is Delano Ad Zones */

/* ==============================
   Base placement styles
   ============================== */

.ad-zone,
.wd-slot {
    width: 100%;
    margin: 24px auto;
}

.ad-zone-top-leaderboard,
.ad-zone-footer-banner,
.wd-slot-top,
.wd-slot-footer {
    max-width: 1200px;
    padding: 0 18px;
}

/* Keep the top placement tighter so the breadcrumb/card below does not feel too far away */
.ad-zone-top-leaderboard,
.wd-slot-top {
    margin-top: 24px;
    margin-bottom: 12px;
}

.ad-zone-in-content,
.wd-slot-inline {
    max-width: 760px;
}

.ad-zone-sidebar,
.wd-slot-side {
    margin: 0;
}

.ad-zone-mobile-banner,
.wd-slot-mobile {
    display: none;
}

.ad-placeholder,
.wd-slot-box {
    min-height: 90px;
    border: 1px dashed rgba(17, 17, 17, 0.22);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(245,245,245,0.94));
    color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.ad-placeholder .ad-label,
.wd-slot-box .wd-slot-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #777;
}

.ad-placeholder strong,
.wd-slot-box strong {
    font-size: 22px;
    line-height: 1.1;
}

.ad-placeholder small,
.wd-slot-box small {
    font-size: 11px;
    color: #888;
}

.ad-zone-top-leaderboard .ad-placeholder,
.ad-zone-footer-banner .ad-placeholder,
.wd-slot-top .wd-slot-box,
.wd-slot-footer .wd-slot-box {
    min-height: 90px;
}

.ad-zone-in-content .ad-placeholder,
.wd-slot-inline .wd-slot-box {
    min-height: 250px;
    max-width: 336px;
    margin: 0 auto;
}

.ad-zone-sidebar .ad-placeholder,
.wd-slot-side .wd-slot-box {
    min-height: 600px;
    width: 300px;
    max-width: 100%;
    position: sticky;
    top: 110px;
}

/* ==============================
   Single post desktop layout
   ============================== */

.post-layout-with-ads,
.post-layout-with-slots {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: start;
}

.post-layout-with-ads > .post-container,
.post-layout-with-slots > .post-container {
    width: 100%;
    max-width: none;
}

.post-sidebar-ads,
.post-side-slot {
    display: block;
}

/* ==============================
   Graceful collapse if blockers hide the side placement
   Full-width article mode when sidebar placement disappears
   ============================== */

.post-layout-with-ads.ads-collapsed,
.post-layout-with-slots.slots-collapsed {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.post-layout-with-ads.ads-collapsed > .post-container,
.post-layout-with-slots.slots-collapsed > .post-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.post-sidebar-ads.is-hidden-by-browser,
.post-side-slot.is-hidden-by-browser {
    display: none !important;
}

/* When a placement itself is hidden or emptied by a blocker */
.ad-zone.is-hidden-by-browser,
.wd-slot.is-hidden-by-browser {
    display: none !important;
}

/* ==============================
   Tablet / smaller desktop
   ============================== */

@media (max-width: 1100px) {
    .post-layout-with-ads,
    .post-layout-with-slots {
        display: block;
        max-width: 900px;
    }

    .post-sidebar-ads,
    .post-side-slot {
        display: none;
    }
}

/* ==============================
   Mobile placement behavior
   ============================== */

@media (max-width: 760px) {
    .ad-zone,
    .wd-slot {
        margin: 18px auto;
    }

    .ad-zone-top-leaderboard,
    .wd-slot-top {
        display: none;
    }

    .ad-zone-mobile-banner,
    .wd-slot-mobile {
        display: block;
        max-width: 360px;
        padding: 0 16px;
    }

    .ad-zone-mobile-banner .ad-placeholder,
    .wd-slot-mobile .wd-slot-box {
        min-height: 100px;
    }

    .ad-zone-in-content,
    .wd-slot-inline {
        max-width: 100%;
        padding: 0 16px;
    }

    .ad-zone-in-content .ad-placeholder,
    .wd-slot-inline .wd-slot-box {
        min-height: 250px;
    }
}

/* ==============================
   Archive / browse page native ad card
   Articles, Reviews, and Memes indexes
   ============================== */

/* The archive in-content placement is inserted directly inside .post-grid
   after the second card. This avoids the lonely right-side skyscraper wall. */
.post-grid > .ad-zone-in-content,
.post-grid > .wd-slot-inline {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    align-self: stretch;
}

.post-grid > .ad-zone-in-content .ad-placeholder,
.post-grid > .wd-slot-inline .wd-slot-box {
    width: 100%;
    max-width: none;
    min-height: 250px;
    height: 100%;
}

/* If the placement gets hidden by blocker-detection cleanup, the grid closes naturally. */
.post-grid > .ad-zone-in-content.is-hidden-by-browser,
.post-grid > .wd-slot-inline.is-hidden-by-browser {
    display: none !important;
}

/* When the archive placement is inside the grid, do not add mobile side padding. */
@media (max-width: 760px) {
    .post-grid > .ad-zone-in-content,
    .post-grid > .wd-slot-inline {
        padding: 0;
        max-width: none;
    }
}