/**
 * UNIMART2040 — system-wide responsive layout
 *
 * Loaded last from base.html so these rules win over page-level
 * phone-column shells (max-width: 720px / 560px).
 *
 * Breakpoints: 768 (tablet) · 992 (laptop) · 1200 (desktop) · 1400 (wide)
 */

/* ── Shared shell groups ─────────────────────────────────────────────── */
/* Phone-column shells (feeds, dashboards, discovery) */
:root {
    --um-shell-phone: 720px;
    --um-shell-tablet: 960px;
    --um-shell-laptop: 1120px;
    --um-shell-desktop: 1200px;
    --um-shell-wide: 1320px;
    --um-shell-max: 1400px;
}

/* ── Global overflow / media safety ──────────────────────────────────── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
video,
iframe,
embed,
object {
    max-width: 100%;
}

table {
    max-width: 100%;
}

.table-responsive,
.um-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Utility: opt-in fluid shells for new pages */
.um-shell,
.um-shell--phone {
    width: 100%;
    max-width: var(--um-shell-phone);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--um-pad-x, 1rem);
    padding-right: var(--um-pad-x, 1rem);
    box-sizing: border-box;
}

.um-shell--hub {
    max-width: var(--um-shell-desktop);
}

.um-shell--wide {
    max-width: var(--um-shell-wide);
}

.um-shell--fluid {
    max-width: var(--um-shell-max);
}

/* ── Tablet (≥768px) ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
    body.has-unimart-nav:not(.assistant-layer-page) {
        padding-bottom: 0 !important;
    }

    :root {
        --um-pad-x: 1.35rem;
    }

    /* Phone-column → tablet */
    .home-intel__wrap,
    .explore-hub__wrap,
    .discover-page__wrap,
    .discover__wrap,
    .disc-wrap,
    .notif-center__wrap,
    .me-wrap,
    .bd-wrap,
    .biz-connect__wrap,
    .osn-main,
    .osn-messages,
    .uz-hub,
    .biz-show,
    .pdp-hub,
    .uniz,
    .cn-dir,
    .biz-port,
    .student-page:not(.student-page--wide),
    .visibility-wrap,
    .opp-board-wrap,
    .opp2040-wrap,
    .inst-wrap,
    .fd-wrap,
    .fe-wrap,
    .um-shell,
    .um-shell--phone {
        max-width: var(--um-shell-tablet) !important;
    }

    .search-container {
        max-width: var(--um-shell-tablet) !important;
    }

    /* Hub shells already ~1200 — slight pad bump */
    .cp-wrap,
    .opp-wrap,
    .sp-wrap,
    .bp-wrap,
    .tl-wrap,
    .demand-wrap,
    .cat-wrap,
    .sb-wrap,
    .layer-admin-wrap,
    .um-shell--hub {
        padding-left: var(--um-pad-x-md, 1.35rem);
        padding-right: var(--um-pad-x-md, 1.35rem);
    }

    /* Common 2-column grids when pages use generic patterns */
    .um-grid-2,
    .bd-hub__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .um-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── Laptop (≥992px) ─────────────────────────────────────────────────── */
@media (min-width: 992px) {
    :root {
        --um-pad-x: 1.5rem;
    }

    .home-intel {
        padding: 1.75rem 1.5rem 2.5rem;
    }

    .home-intel__wrap {
        max-width: 880px !important;
    }

    .home-intel__orient-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .explore-hub {
        padding: 2rem 1.75rem 3rem;
    }

    .explore-hub__wrap {
        max-width: var(--um-shell-laptop) !important;
    }

    .explore-hub__paths {
        gap: 0.65rem;
    }

    .explore-hub__path {
        flex: 1 1 calc(25% - 0.5rem);
        min-width: 120px;
    }

    .discover-page__wrap,
    .discover__wrap,
    .disc-wrap,
    .notif-center__wrap,
    .me-wrap,
    .bd-wrap,
    .biz-connect__wrap,
    .osn-main,
    .osn-messages,
    .uz-hub,
    .biz-show,
    .pdp-hub,
    .uniz,
    .cn-dir,
    .biz-port,
    .student-page:not(.student-page--wide),
    .visibility-wrap,
    .opp-board-wrap,
    .opp2040-wrap,
    .inst-wrap,
    .fd-wrap,
    .fe-wrap,
    .um-shell,
    .um-shell--phone,
    .search-container {
        max-width: var(--um-shell-laptop) !important;
    }

    /* Marketplace / layer hubs */
    .cp-wrap,
    .opp-wrap,
    .sp-wrap,
    .bp-wrap,
    .tl-wrap,
    .demand-wrap,
    .cat-wrap,
    .sb-wrap,
    .layer-admin-wrap,
    .commerce-landing__wrap,
    .um-shell--hub {
        max-width: 1280px !important;
        padding-left: var(--um-pad-x-lg, 1.5rem);
        padding-right: var(--um-pad-x-lg, 1.5rem);
    }

    /* Readable multi-column utilities */
    .um-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .um-grid-3,
    .bd-hub__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .um-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }

    /* Forms / settings: keep readable, not stretched to full hub width */
    .um-shell--form,
    .content-wrapper.centered-form .content-inner {
        max-width: 560px !important;
    }
}

/* ── Desktop (≥1200px) ───────────────────────────────────────────────── */
@media (min-width: 1200px) {
    :root {
        --um-pad-x: 1.75rem;
    }

    .home-intel__wrap {
        max-width: 1020px !important;
    }

    .home-intel__layers {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 1.25rem;
        align-items: start;
    }

    .home-intel__layer {
        margin: 0;
    }

    .explore-hub__wrap {
        max-width: 1100px !important;
    }

    .explore-hub__cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        align-items: stretch;
    }

    .explore-hub__card--featured {
        grid-column: 1 / -1;
    }

    .discover-page__wrap,
    .discover__wrap,
    .disc-wrap,
    .notif-center__wrap,
    .me-wrap,
    .bd-wrap,
    .biz-connect__wrap,
    .osn-main,
    .osn-messages,
    .uz-hub,
    .biz-show,
    .pdp-hub,
    .uniz,
    .cn-dir,
    .biz-port,
    .student-page:not(.student-page--wide),
    .visibility-wrap,
    .opp-board-wrap,
    .opp2040-wrap,
    .inst-wrap,
    .fd-wrap,
    .fe-wrap,
    .um-shell,
    .um-shell--phone,
    .search-container {
        max-width: var(--um-shell-desktop) !important;
    }

    .cp-wrap,
    .opp-wrap,
    .sp-wrap,
    .bp-wrap,
    .tl-wrap,
    .demand-wrap,
    .cat-wrap,
    .sb-wrap,
    .layer-admin-wrap,
    .commerce-landing__wrap,
    .um-shell--hub,
    .um-shell--wide {
        max-width: var(--um-shell-wide) !important;
        padding-left: var(--um-pad-x-xl, 1.75rem);
        padding-right: var(--um-pad-x-xl, 1.75rem);
    }

    .bd-hub__grid,
    .um-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .um-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ── Wide (≥1400px) ──────────────────────────────────────────────────── */
@media (min-width: 1400px) {
    .home-intel__wrap {
        max-width: 1140px !important;
    }

    .explore-hub__wrap {
        max-width: 1200px !important;
    }

    .discover-page__wrap,
    .discover__wrap,
    .disc-wrap,
    .me-wrap,
    .bd-wrap,
    .uz-hub,
    .biz-show,
    .pdp-hub,
    .uniz,
    .search-container {
        max-width: 1240px !important;
    }

    .cp-wrap,
    .opp-wrap,
    .sp-wrap,
    .bp-wrap,
    .tl-wrap,
    .demand-wrap,
    .cat-wrap,
    .sb-wrap,
    .um-shell--hub,
    .um-shell--wide {
        max-width: var(--um-shell-max) !important;
    }
}

/* ── Hybrid header search bar (beats hybrid-header.css 720px) ────────── */
@media (min-width: 768px) {
    body.has-hybrid-header .search-filter-bar--hybrid .search-container {
        max-width: var(--um-shell-tablet) !important;
    }
}

@media (min-width: 992px) {
    body.has-hybrid-header .search-filter-bar--hybrid .search-container {
        max-width: var(--um-shell-laptop) !important;
    }
}

@media (min-width: 1200px) {
    body.has-hybrid-header .search-filter-bar--hybrid .search-container {
        max-width: var(--um-shell-desktop) !important;
    }
}

/* ── Default content shell (non-bleed pages) ─────────────────────────── */
@media (min-width: 768px) {
    .content-wrapper:not(.full-width) .content-inner {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1200px) {
    .content-wrapper:not(.full-width) .content-inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* ── Catalog / mosaic grids — use more columns on larger screens ─────── */
@media (min-width: 992px) {
    .uz-hub__mosaic,
    .pdp-hub__related .uz-hub__mosaic,
    .cp-mosaic,
    .product-mosaic,
    .catalog-visual-grid,
    .opp-board-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .uz-hub__mosaic,
    .pdp-hub__related .uz-hub__mosaic,
    .cp-mosaic,
    .product-mosaic,
    .catalog-visual-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .opp-board-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── Small phones — tighten horizontal padding, avoid overflow ───────── */
@media (max-width: 379px) {
    .content-inner,
    .um-shell,
    .me-wrap,
    .bd-wrap,
    .disc-wrap,
    .discover__wrap,
    .cp-wrap,
    .opp-wrap,
    .sp-wrap {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}