/* Shared sizing for the six redesigned V3 companion pages.
   Zoom participates in layout: text, artwork and controls grow together.
   The browser's own zoom and the existing mobile breakpoints remain usable. */
body { --screen-ui-scale: 1; }
html { overflow-x: clip; }
body.landing-page { overflow-x: clip; }
.landing-page .landing-splash-content { min-width: 0; }

/* The market sidebar scrolls within the viewport, including at UI zoom. */
@media (min-width: 901px) {
    body.shop-v2 #vshop-shell #vshop-filter-sidebar {
        top: calc(var(--market-nav-height, 96px) / var(--screen-ui-scale) + 16px);
        max-height: calc((100dvh - var(--market-nav-height, 96px)) / var(--screen-ui-scale) - 32px);
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    body.shop-v2 #vshop-filter-sidebar > * { flex-shrink: 0; }
}

.landing-page .landing-hub,
.profile-archive-page #profil-shell,
body[data-shell-active="vasarcsarnok"] #vshop-shell,
body[data-shell-active="codex"] #codex-browse,
body[data-shell-active="codex"] #codex-shell.v2-detail-shell,
.su-forge-page .su-shell,
.bp-bi4 .bp-page {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    zoom: var(--screen-ui-scale);
}

/* A hero's data sheet shares the full-width detail shell, rather than
   retaining the old 1100px card inside a wider navigation bar. */
body[data-shell-active="codex"] #codex-shell.v2-detail-shell #codex-onepager-card {
    width: 100%;
    max-width: none;
}

/* Keep the single-column homepage comfortable on tablets. */
@media (min-width: 851px) {
    .landing-page .landing-video-hero { padding-inline: 2vw; }
    .landing-page .landing-hub { gap: 28px; }
}
@media (max-width: 850px) {
    .landing-page .landing-hub { max-width: 680px; }
}

@media (min-width: 1601px) {
    body { --screen-ui-scale: clamp(1, calc(100vw / 1600px), 2.4); }

    .landing-page .landing-video-hero { padding-top: 120px; padding-bottom: 48px; }
    .landing-page .hub-stage { min-height: 660px; }
    .landing-page .hub-character { height: 620px; }
    .landing-page .hub-event { height: 200px; }

    /* Topbar measurements are physical pixels; convert them to local units. */
    .profile-archive-page #profil-shell {
        padding: calc(var(--pa-topbar-height, 96px) / var(--screen-ui-scale) + 20px) 28px 40px;
    }
    .su-forge-page .su-shell {
        padding: calc(var(--forge-shell-height, 96px) / var(--screen-ui-scale) + 20px) 28px 36px;
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 28px;
    }
    .su-forge-page .su-forge-layout { grid-template-columns: minmax(0, 1fr) 270px; }
    .su-forge-page .su-fusion-stage { grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); }

    body[data-shell-active="codex"] #codex-browse {
        grid-template-columns: 280px minmax(0, 1fr);
        min-height: calc((100dvh - 96px) / var(--screen-ui-scale));
    }
    #codex-browse .hero-grid:not(.is-list) { grid-template-columns: repeat(5, minmax(0, 1fr)); }

    body[data-shell-active="vasarcsarnok"] #vshop-shell { padding: 24px 28px 48px; }
    #vshop-shell .codex-browse-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 24px; }
    #vshop-shell .vshop-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr)); gap: 18px; }
    #vshop-shell #vshop-filter-sidebar { padding: 20px 16px; gap: 16px; }
    body.shop-v2 #vshop-shell.shop-v2-layout { grid-template-columns: 250px minmax(0, 1fr); }

    .bp-bi4 { --concert-card: 160px; }
    .bp-bi4 .bp-page {
        padding: 24px 28px 30px;
        min-height: calc((100dvh - var(--bp-shell-height)) / var(--screen-ui-scale));
    }
    .bp-bi4 .bp-concert-stage { grid-template-columns: 320px minmax(0, 1fr); gap: 32px; }
    .bp-bi4 .bp-concert-art { height: 320px; }
}