/*
 * CENT-ADS shared frontend styles: alignment, sticky source/host, and the
 * side_nav rail. Loaded once from the shared public blog layout
 * (resources/views/layouts/app.blade.php) so it applies on every page that
 * can render <x-tenant-centads> (index, show, categories, tags, series).
 *
 * Show-specific layout (the Series sidebar itself, the side_nav rail's
 * "opposite Series" top offset) stays in resources/views/blogs/show.blade.php
 * since it is genuinely Show-only.
 */

/*
 * Outer alignment container: controls where the ad sits inside its slot.
 * The inner .tenant-centads-content wrapper (below) is what actually lets
 * this work even when the returned CENT-ADS HTML's root element is
 * width: 100% — flex justify-content cannot move a child that already
 * fills the available width, so the inner wrapper shrinks to its content
 * instead of inheriting that full width.
 */
.tenant-centads-slot {
    display: flex;
    width: 100%;
}

.tenant-centads-align-left {
    justify-content: flex-start;
}

.tenant-centads-align-center {
    justify-content: center;
}

.tenant-centads-align-right {
    justify-content: flex-end;
}

.tenant-centads-content {
    width: fit-content;
    max-width: 100%;
}

/*
 * side_nav rail: renders opposite the Series sidebar. Series floats right
 * at desktop (see .series-sidebar-floating in blogs/show.blade.php), so
 * side_nav floats left. The exact top offset is Show-specific and is set
 * there; this file only owns the generic shape/behavior.
 */
.tenant-centads-side-nav-rail {
    display: none;
}

@media (min-width: 992px) {
    .tenant-centads-side-nav-rail {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        position: fixed;
        left: 19px;
        width: clamp(220px, 18vw, 300px);
        overflow-y: auto;
        z-index: 50;
    }
}

@media (max-width: 991.98px) {
    .tenant-centads-side-nav-rail {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        position: static;
        width: 100%;
        max-height: none;
        overflow: visible;
        margin: 1.25rem 0;
    }
}

/*
 * side_nav sticky: the rail is already a fixed, independently-scrolling
 * container spanning the viewport, so a plain CSS `position: sticky` child
 * works correctly here — unlike inline placements (see the sticky host
 * below), the side_nav rail is never nested inside a short-lived container
 * like the article body or the comments list.
 */
.tenant-centads-side-nav-item.tenant-centads-sticky-active {
    position: sticky;
    top: 0;
    z-index: 40;
}

/*
 * Inline sticky host: a single page-level element (see the shared layout)
 * that the sticky manager (centads-sticky.js) moves the active inline
 * sticky placement's already-rendered content into. Because it lives at
 * the page/layout level rather than inside any individual article/grid/
 * comments container, it is never constrained by those containers' height
 * — this is what makes show/after_comments (and similarly short-lived
 * containers on other pages) able to keep following the reader instead of
 * running out of room to stick within.
 */
.tenant-centads-sticky-host {
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    z-index: 1040;
    display: none;
    justify-content: center;
    padding-inline: 1rem;
    pointer-events: none;
}

.tenant-centads-sticky-host.is-active {
    display: flex;
}

.tenant-centads-sticky-host .tenant-centads-content {
    pointer-events: auto;
}

@media (max-width: 767.98px) {
    .tenant-centads-sticky-host {
        top: auto;
        bottom: 12px;
        max-height: 30vh;
    }

    .tenant-centads-sticky-host .tenant-centads-content {
        max-width: calc(100vw - 2rem);
        overflow: auto;
    }
}

/*
 * The original slot a sticky ad was rendered into keeps its layout
 * footprint (via a placeholder inserted by the sticky manager) while its
 * content lives in the host, so surrounding content does not jump.
 */
.tenant-centads-placeholder {
    width: 100%;
}