/*
 * One physical rail for every routed view.
 *
 * This file deliberately stays outside the project's cascade layers and is
 * loaded last. Legacy section styles still contain shorthand margins such as
 * `margin: -20px auto 50px`; those re-center an otherwise correct 1400px
 * view on wide screens while the guild banners remain left-anchored.
 */
:root {
    --vsg-content-rail-width: min(100%, var(--vsg-banner-max-width, 1400px));
}

#topsideContainer,
.content-wrapper {
    width: var(--vsg-content-rail-width) !important;
    max-width: var(--vsg-banner-max-width, 1400px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.content-wrapper > .nw-wrapper,
.content-wrapper > .rd-wrapper,
.content-wrapper > .rd-details-wrapper,
.content-wrapper > .roster-wrapper,
.content-wrapper > .mg-wrapper,
.content-wrapper > .gd-wrapper,
.content-wrapper > .cal-wrapper,
.content-wrapper > .wt-wrapper,
.content-wrapper > .cons-wrapper,
.content-wrapper > .calc-wrapper {
    width: var(--vsg-content-rail-width) !important;
    max-width: var(--vsg-banner-max-width, 1400px) !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* WCL details are a sibling of the normal raids view, rather than its child. */
.content-wrapper > #raidDetailsView.rd-details-wrapper {
    width: var(--vsg-content-rail-width) !important;
    max-width: var(--vsg-banner-max-width, 1400px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Internal wide panels must not choose a second, narrower centered rail. */
.cal-wrapper > .cal-container,
.cal-wrapper > .cal-agenda-list,
.wt-wrapper > #storeGridView,
.wt-wrapper > #storePurchaseSection,
.wt-wrapper > #storePurchaseSection > .card,
.mg-wrapper > .mg-view-area,
.gd-wrapper > .gd-view-area,
.cons-wrapper > #consGrid,
.rd-details-wrapper > .wcl-view-content,
.nw-wrapper > .nw-hero-grid,
.nw-wrapper > .nw-list-layout {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* La barra lateral cambia el ancho útil antes que el viewport. Estos límites
 * viven en el rail real de contenido, para que las secciones nunca intenten
 * conservar una composición de escritorio dentro de una columna estrecha. */
.content-container {
    min-width: 0;
    container-type: inline-size;
    container-name: vsg-content;
}

.content-wrapper,
.content-wrapper > *,
.universal-top-container,
.universal-top-header,
.universal-top-header > * {
    min-width: 0;
    max-width: 100%;
}

#topsideContainer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(12px, 1.5vw, 20px);
}

#topsideContainer > #guildProgressionBanner,
#topsideContainer > #thisWeekWowBanner {
    min-width: 0;
    max-width: 100%;
    min-height: var(--vsg-banner-height, 144px);
    height: var(--vsg-banner-height, 144px);
}

/* Ambos formatos comparten la altura editorial de Noticias (144px). El
 * progreso compacta su interior para que esa altura no oculte información. */
#guildProgressionBanner .prog-banner-header {
    padding: 6px 8px;
    gap: 4px;
}

#guildProgressionBanner .prog-boss-panel {
    padding: 7px 10px;
}

/* Un ancho de rail reducido no admite dos resúmenes complejos. Al apilarlos
 * antes de comprimirlos, cada uno conserva jerarquía, iconos y acciones. */
@container vsg-content (max-width: 1040px) {
    #topsideContainer {
        grid-template-columns: minmax(0, 1fr);
    }

    #topsideContainer > #guildProgressionBanner,
    #topsideContainer > #thisWeekWowBanner {
        min-height: var(--vsg-banner-height, 144px);
        height: var(--vsg-banner-height, 144px);
    }

}

@container vsg-content (max-width: 760px) {
    #guildProgressionBanner .prog-header-top {
        align-items: center;
        flex-wrap: nowrap;
    }

    #guildProgressionBanner .prog-stats-row {
        width: auto;
        flex: 0 0 auto;
        gap: 4px;
    }

    #guildProgressionBanner .prog-stat-badge {
        flex: 0 0 auto;
        min-width: 40px;
    }

    #guildProgressionBanner .prog-next-box {
        display: none;
    }
}

@container vsg-content (max-width: 520px) {
    #topsideContainer {
        gap: 12px;
    }

    #guildProgressionBanner .prog-banner-header {
        padding: 6px 7px;
        gap: 4px;
    }

    #guildProgressionBanner .prog-header-top-left {
        gap: 8px;
    }

    #guildProgressionBanner .prog-season-logo {
        width: 19px;
        height: 19px;
    }

    #guildProgressionBanner .prog-season-name {
        display: none;
    }

    #guildProgressionBanner .prog-raid-name {
        font-size: clamp(.85rem, 4.4cqw, 1rem);
    }

    #guildProgressionBanner .prog-stat-badge {
        min-width: 34px;
        padding: 4px 3px;
        border-radius: 8px;
    }

    #guildProgressionBanner .prog-stat-badge small {
        display: none;
    }

    #guildProgressionBanner .prog-boss-panel {
        gap: 6px;
        padding: 5px 7px;
    }

    #guildProgressionBanner .prog-boss-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }
}