/* ============================================
   SERVICES EXPLORE PAGER
   On smaller screens every service panel's red sidebar nav is
   replaced with a compact prev / current / next pager — same
   pattern as the homepage page-explorer. The pager element is
   built once per nav by wireExplore() in services-page.js, and
   stays sticky inside the panel as the user scrolls.
   ============================================ */

/* Pager is mobile-only — desktop keeps the red sidebar nav as-is */
.svp-explore-pager {
    display: none;
}

@media (max-width: 1023px) {
    /* ---- Modal popup: lock to viewport width on mobile ----
       The base `.sv-card--open .sv-card__panel` uses `position: fixed;
       left: 0; right: 0; width: 100%` which should yield viewport
       width — but per-card transforms or `min-width` rules can leak in
       and make the panel resolve wider than the viewport, pushing the
       whole popup (and every card inside it) off the right edge. Cap
       it explicitly to `100vw`. */
    .sv-card--open .sv-card__panel {
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* The dashboard layout's asymmetric inner-width (`calc(100% - 48px)`
       with auto margins) doesn't make sense on a phone — it leaves
       wasted gutter inside an already-rounded panel and prevents the
       sections within from claiming the full available width. Flatten
       it on mobile so the section bands and lane cards inside align
       cleanly to the panel's own edges. */
    .sv-card--open .sv-card__panel-inner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Defensive: no section inside a popup may exceed the panel width */
    .sv-card--open .sv-pg__section {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Hide every per-card red sidebar nav. The `!important` is
       intentional: per-card rules like `#design-build .db-explore__nav`
       are higher specificity than a single class, so we need it to win. */
    .svp-explore-nav {
        display: none !important;
    }

    /* Force every explore grid to a single column with pager on top +
       content full-width below. Per-card rules use id+class specificity
       so `!important` is required to win — without this, cards whose
       single-col breakpoint differs from ours (e.g. renovation collapses
       at 900px, ours hides the nav at 1023px) end up rendering the
       content in column 2 of a still-2-column grid, which is what was
       pushing content off to the right with a big empty gap on the left. */
    .svp-explore {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 1rem !important;
    }

    .svp-explore .svp-explore-pager {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .svp-explore > [class$="-explore__content"] {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .svp-explore-pager {
        display: flex;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.55rem;
        margin: 0 0 1rem;
        background: var(--color-accent, #FF3B30);
        border-radius: 14px;
        box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.35);
        position: sticky;
        top: 0;
        z-index: 30;
    }

    .svp-explore-pager__btn {
        flex-shrink: 0;
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease, transform 0.15s ease;
    }

    .svp-explore-pager__btn:active {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(0.94);
    }

    .svp-explore-pager__current {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.18rem;
        padding: 0 0.25rem;
        text-align: center;
    }

    .svp-explore-pager__num {
        font-family: var(--font-body, "Urbanist", sans-serif);
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
    }

    .svp-explore-pager__title {
        font-family: var(--font-body, "Urbanist", sans-serif);
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.15;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}