/*
 * Responsive guardrails shared by the portal, battle pass and wiki.
 * This file is intentionally loaded last: it smooths the legacy breakpoints
 * without duplicating each area's visual theme.
 */

html,
body {
    width: 100%;
    max-width: 100%;
}

:where(.portal-shell, .battlepass-shell, .wiki-shell) :where(
    main,
    section,
    article,
    aside,
    header,
    footer,
    nav,
    form,
    fieldset,
    div
) {
    min-width: 0;
}

:where(.portal-shell, .battlepass-shell, .wiki-shell) :where(h1, h2, h3, h4, p, li, dd, dt) {
    overflow-wrap: anywhere;
}

:where(.portal-shell, .battlepass-shell, .wiki-shell) :where(img, video) {
    height: auto;
    max-width: 100%;
}

/* Portal --------------------------------------------------------------- */

.portal-shell {
    min-width: 0;
}

.portal-shell .product-card { min-height: 20rem; }
.portal-shell .product-image { height: 9rem; }
.portal-shell .product-image img { color: transparent; font-size: 0; }
.portal-shell .product-body > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media (max-width: 1199px) {
    .portal-shell .shop-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "cart"
            "catalog";
    }

    .portal-shell .shop-main { grid-area: catalog; }
    .portal-shell .cart-panel {
        position: static;
        grid-area: cart;
    }

    .portal-shell .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
        gap: .875rem;
    }

    .portal-shell .product-card { min-height: 18rem; }
    .portal-shell .product-image { height: 8.5rem; }
}

@media (max-width: 840px) {
    .portal-shell .inline-form > div,
    .portal-shell .hero-actions {
        align-items: stretch;
    }
}

@media (max-width: 560px) {
    .portal-shell .header-inner {
        gap: .375rem;
        padding-right: max(.625rem, env(safe-area-inset-right));
        padding-left: max(.625rem, env(safe-area-inset-left));
    }

    .portal-shell .brand {
        min-width: 5rem;
    }

    .portal-shell .brand strong {
        font-size: 1.2rem;
    }

    .portal-shell .menu-toggle {
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        flex: 0 0 2.75rem;
        margin-left: auto;
    }

    .portal-shell .header-tools {
        flex: 0 1 auto;
    }

    .portal-shell .header-tools .button-discord {
        min-width: 0;
        min-height: 2.75rem;
        padding-inline: .625rem;
        font-size: .6875rem;
        line-height: 1.15;
        text-align: center;
        white-space: nowrap;
    }

    .portal-shell .main-nav {
        max-height: calc(100dvh - var(--sitebar-height));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .portal-shell .product-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: .625rem;
    }

    .portal-shell .product-card {
        min-height: 10rem;
        display: grid;
        grid-template-columns: 6rem minmax(0, 1fr);
    }

    .portal-shell .product-image {
        width: 100%;
        height: 100%;
        min-height: 10rem;
    }

    .portal-shell .product-image img { padding: .625rem; }
    .portal-shell .product-placeholder { font-size: 2rem; }

    .portal-shell .product-body {
        min-width: 0;
        padding: .75rem;
    }

    .portal-shell .product-body h3 {
        margin-bottom: .3rem;
        font-size: 1rem;
    }

    .portal-shell .product-body > p {
        display: -webkit-box;
        flex: 0 1 auto;
        margin-bottom: .625rem;
        overflow: hidden;
        font-size: .875rem;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .portal-shell .product-actions { gap: .375rem; }

    .portal-shell .currency-button {
        min-width: 0;
        min-height: 2.75rem;
        padding: .5rem;
        font-size: .75rem;
        line-height: 1.2;
    }

    .portal-shell .flash-stack {
        top: calc(var(--sitebar-height) + .75rem);
        right: .75rem;
        left: .75rem;
    }

    .portal-shell .toast {
        right: .75rem;
        bottom: max(.75rem, env(safe-area-inset-bottom));
        left: .75rem;
        max-width: none;
    }

    .portal-shell .inline-form > div {
        flex-wrap: wrap;
    }

    .portal-shell .inline-form > div > * {
        flex: 1 1 12rem;
    }
}

@media (max-width: 360px) {
    .portal-shell .brand {
        min-width: 4.5rem;
    }

    .portal-shell .brand strong { font-size: 1.125rem; }
    .portal-shell .header-tools .button-discord { padding-inline: .45rem; font-size: .625rem; }

    .portal-shell .product-card {
        grid-template-columns: 5rem minmax(0, 1fr);
    }

    .portal-shell .product-body { padding: .625rem; }
}

/* Battle pass ---------------------------------------------------------- */

@media (min-width: 901px) and (max-width: 1199px) {
    .battlepass-shell .battlepass-command {
        grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    }
}

@media (min-width: 481px) and (max-width: 700px) {
    .battlepass-shell .bp-reward-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .battlepass-shell .bp-reward-cell:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .battlepass-shell .bp-pass-lane {
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .battlepass-shell .bp-sitebar-menu summary,
    .battlepass-shell .mobile-menu {
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
    }
}

@media (max-width: 480px) {
    .battlepass-shell .bp-reward-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .battlepass-shell .bp-reward-cell:last-child:nth-child(odd) {
        grid-column: 1;
    }
}

/* Wiki ----------------------------------------------------------------- */

@media (min-width: 641px) and (max-width: 860px) {
    .wiki-shell .item-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .wiki-shell .mobile-header {
        height: 3.25rem;
        padding-inline: .75rem;
    }

    .wiki-shell .mobile-menu,
    .wiki-shell .wiki-sitebar-menu summary {
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        flex: 0 0 2.75rem;
    }

    .wiki-shell .mobile-brand {
        min-width: 0;
        font-size: .9375rem;
    }

    .wiki-shell .topbar {
        top: calc(var(--sitebar-height) + 3.25rem);
        min-height: 3.5rem;
        padding: .375rem .75rem;
    }

    .wiki-shell .global-search input {
        min-height: 2.75rem;
    }

    .wiki-shell .main-content {
        padding: 1rem .75rem 3rem;
    }

    .wiki-shell .category-drawer {
        max-width: calc(100vw - 2.75rem);
        overscroll-behavior: contain;
    }

    .wiki-shell .prose :where(pre, table) {
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    .wiki-shell .mobile-language { display: none; }
    .wiki-shell .mobile-admin { font-size: .6875rem; }
}

/* Short screens (phones in landscape and small laptop windows). */
@media (max-height: 620px) and (pointer: coarse) {
    :where(.portal-shell .main-nav, .battlepass-shell .bp-sitebar-menu > nav, .wiki-shell .wiki-sitebar-menu > nav) {
        max-height: calc(100dvh - 4.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}