/* ShapeAnywhere responsive portal layouts – web-2026.10.10.8
   The original 1180px .container remains the safe default for auth,
   legal pages, long text and small forms. Wide layout is opt-in by page role. */
:root { --layout-gutter: clamp(18px, 2.3vw, 48px); }
body.layout-home      { --layout-width: 1380px; }
body.layout-community { --layout-width: 1880px; }
body.layout-challenges{ --layout-width: 1760px; }
body.layout-challenge { --layout-width: 1460px; }
body.layout-model     { --layout-width: 1560px; }
body.layout-creator   { --layout-width: 1720px; }
body.layout-academy   { --layout-width: 1650px; }
body.layout-tutorial  { --layout-width: 1450px; }
body.layout-dashboard { --layout-width: 1580px; }
body.layout-publisher { --layout-width: 1640px; }
body.layout-library   { --layout-width: 1720px; }
body.layout-admin     { --layout-width: 1620px; }
/* Only page types with visual grids go wide; .narrow always remains narrow. */
body:not(.layout-standard) .container:not(.narrow) {
    width: min(var(--layout-width), calc(100% - var(--layout-gutter) * 2));
}
/* Long text should never expand to 1600px lines. */
body.layout-challenge .challenge-brief-content { max-width: 112ch; }
body.layout-tutorial .academy-main-copy { max-width: 92ch; }
body.layout-model .model-description, body.layout-creator .creator-bio { max-width: 92ch; }
/* Prevent nested cards and long headings from expanding grid tracks. */
body:not(.layout-standard) main .container > *,
body:not(.layout-standard) main [class*="-grid"] > *,
body:not(.layout-standard) main [class*="-layout"] > * { min-width: 0; }

/* Community: a wider yet controlled model gallery, not giant oversized cards. */
body.layout-community .community-shell .community-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr));
    gap: clamp(13px, 1.15vw, 22px);
}
body.layout-community .community-highlights-v6-grid,
body.layout-community .community-winners-v7-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.layout-community .community-weekly-v7-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
body.layout-community .community-weekly-v7-story { padding: clamp(20px, 2vw, 34px); }
body.layout-community .community-hero { padding-top: clamp(34px, 3vw, 52px); padding-bottom: 26px; }
body.layout-community .community-hero-v6-layout { gap: clamp(18px, 3vw, 48px); }
body.layout-community .community-showcase-v8 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
body.layout-community .community-showcase-v8 > .container { width: 100%; margin-inline: 0; min-width: 0; }
body.layout-community .community-showcase-v8 .community-creators-v7 { align-self: start; }
body.layout-community .community-showcase-v8 .community-creators-v7-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.layout-community .community-winners-v7 { margin-top: 18px; }
body.layout-community .community-winners-v7-grid { max-width: 1400px; }
body.layout-community .community-shell { padding-top: 22px; }

/* Challenges: 4 comfortable cards on large monitors, 2 on small desktops. */
body.layout-challenges .challenge-grid-v6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.15vw, 23px); }
body.layout-challenges .challenge-feature-v6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
body.layout-challenges .challenge-winners-v7 .community-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.layout-challenge .challenge-entry-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 275px), 1fr)); }
body.layout-challenge .challenge-detail-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
body.layout-challenge .challenge-detail-hero--plain { grid-template-columns: 1fr; }
body.layout-challenge .challenge-brief { padding-inline: clamp(18px, 2.5vw, 34px); }

/* Personal workspace: compact project and publishing galleries. */
body.layout-dashboard .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
body.layout-dashboard .dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.layout-publisher .publisher-model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
body.layout-library .library-layout { grid-template-columns: minmax(220px, 250px) minmax(0, 1fr); gap: clamp(18px, 2vw, 34px); }
body.layout-library .library-sidebar { position: sticky; top: 88px; }
body.layout-library .community-grid, body.layout-creator .community-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: clamp(14px, 1vw, 22px);
}
/* Avoid 6-column, unreadable model metadata on large displays. */
body.layout-library .library-main, body.layout-dashboard .dashboard-shell, body.layout-publisher .publisher-center { min-width: 0; }

/* Academy: widen media and cards, but keep tutorial instructions readable. */
body.layout-academy .academy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body.layout-tutorial .academy-content-grid { grid-template-columns: minmax(0, 1fr) minmax(270px, 320px); gap: clamp(24px, 3vw, 48px); }
body.layout-tutorial .academy-sidebar { max-width: 320px; }
body.layout-tutorial .academy-tutorial-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }

/* Administration: overview panels get width, but forms still remain bounded. */
body.layout-admin .admin-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.layout-admin .admin-users-layout { grid-template-columns: minmax(300px, .9fr) minmax(0, 1.3fr); }
body.layout-admin .challenge-admin-layout { grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr); }
body.layout-admin .admin-panel input, body.layout-admin .admin-panel select,
body.layout-admin .admin-panel textarea { max-width: 100%; }

/* A paired presentation replaces two tall, full-width spotlight sections. */
@media (min-width: 1480px) {
    /* Don't let the featured model become a 700px-tall card on ultrawide displays. */
    body.layout-community .community-weekly-v7-feature .community-card-thumb { aspect-ratio: auto; height: clamp(240px, 19vw, 315px); }
    body.layout-community .community-weekly-v7-feature .community-card-thumb img { object-fit: contain; }
    body.layout-community .community-showcase-v8:has(> .community-highlights-v6):has(> .community-creators-v7) {
        grid-template-columns: minmax(0, 1.95fr) minmax(350px, .92fr);
        gap: 24px;
        align-items: start;
    }
    body.layout-community .community-showcase-v8 > section { margin-block: 14px 16px; }
    body.layout-community .community-showcase-v8 .community-creators-v7-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.layout-community .community-showcase-v8 .community-creator-tile-v7 { padding: 14px; }
}
@media (min-width: 1520px) {
    body.layout-challenges .challenge-grid-v6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.layout-dashboard .project-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.layout-academy .academy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.layout-admin .admin-stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1800px) {
    body.layout-community .community-shell .community-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
    body.layout-community .community-hero-v6-layout { grid-template-columns: minmax(0, 1.9fr) minmax(290px, .65fr); }
    body.layout-publisher .publisher-model-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* On regular laptops, opt-in page widths still fill the available space while
   existing mobile layouts from their respective modules stay in control. */
@media (max-width: 1279px) {
    body.layout-community .community-showcase-v8 .community-creators-v7-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.layout-publisher .publisher-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.layout-challenges .challenge-feature-v6 { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
    body.layout-library .library-sidebar { position: static; }
}
@media (max-width: 1100px) {
    body.layout-community .community-weekly-v7-layout { grid-template-columns: 1fr; }
    body.layout-community .community-showcase-v8 .community-creators-v7-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.layout-tutorial .academy-tutorial-grid { grid-template-columns: 1fr; }
    body.layout-dashboard .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
    body.layout-challenges .challenge-feature-v6 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    body.layout-dashboard .dashboard-grid { grid-template-columns: 1fr; }
    body.layout-dashboard .dashboard-grid .dash-card:last-child { grid-column: auto; }
}
@media (max-width: 1080px) {
    body.layout-tutorial .academy-content-grid { grid-template-columns: 1fr; }
    body.layout-tutorial .academy-sidebar { max-width: none; }
    body.layout-challenges .challenge-grid-v6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.layout-challenge .challenge-detail-hero { grid-template-columns: 1fr; }
    body.layout-challenge .challenge-detail-info { grid-column: 1; }
    body.layout-dashboard .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.layout-admin .challenge-admin-layout, body.layout-admin .admin-users-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    :root { --layout-gutter: 16px; }
    body.layout-community .community-showcase-v8 .community-creators-v7-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.layout-challenges .challenge-grid-v6 { grid-template-columns: 1fr; }
    body.layout-challenge .challenge-entry-grid { grid-template-columns: 1fr; }
    body.layout-dashboard .project-grid, body.layout-publisher .publisher-model-grid { grid-template-columns: 1fr; }
    body.layout-library .library-layout { grid-template-columns: 1fr; }
    body.layout-library .library-sidebar { position: static; }
    body.layout-academy .academy-grid { grid-template-columns: 1fr; }
    body.layout-admin .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.layout-tutorial .academy-tutorial-grid { grid-template-columns: 1fr; }
    body.layout-community .community-highlights-v6-grid,
    body.layout-community .community-winners-v7-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
    body.layout-community .community-showcase-v8 .community-creators-v7-grid { grid-template-columns: 1fr; }
    body.layout-admin .admin-stat-grid { grid-template-columns: 1fr; }
}