/**
 * UNIMART — laptop & large-screen hub layouts
 *
 * Engaging 2 / 3 / 4 column presentation for:
 * Commerce · Opportunities · Services · Businesses · Campus Network
 *
 * Loaded after responsive-2040.css. Mobile layouts stay unchanged.
 */

/* ═══════════════════════════════════════════════════════════════════════
   COMMERCE
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    .cp-dashboard--commerce .um-hub-body.cp-wrap,
    .cp-dashboard--commerce .cp-wrap {
        max-width: min(96vw, 1280px) !important;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .cp-dashboard--commerce .cp-wrap--intent {
        max-width: 40rem !important;
        margin-left: 0;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .cp-dashboard--commerce .cp-hero--compact {
        margin-bottom: 0.85rem;
    }

    .cp-dashboard--commerce .cp-section__head {
        margin-bottom: 0.65rem;
    }

    /* Product grids: 3 columns on tablet */
    .cp-dashboard--commerce .cp-grid .row.row-cols-md-3 {
        --bs-columns: 3;
    }

    .cp-dashboard--commerce .cp-grid:not(.cp-grid--rail) .row {
        --bs-gutter-x: 0.7rem;
        --bs-gutter-y: 0.7rem;
    }

    .cp-dashboard--commerce .cp-cat-chips {
        gap: 0.45rem;
        flex-wrap: wrap;
        margin-bottom: 0.75rem;
    }
}

@media (min-width: 992px) {
    .cp-dashboard--commerce .um-hub-body.cp-wrap,
    .cp-dashboard--commerce .cp-wrap {
        max-width: min(96vw, 1480px) !important;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* 4-column product grids from laptop (not only xl) */
    .cp-dashboard--commerce .cp-grid:not(.cp-grid--rail) .row > [class*="col"] {
        flex: 0 0 25%;
        max-width: 25%;
        width: 25%;
    }

    .cp-dashboard--commerce .cp-grid--rail .cp-grid__item {
        flex: 0 0 calc(25% - 0.4rem);
        max-width: calc(25% - 0.4rem);
    }

    /* Featured / recommended sections — tighter */
    .cp-dashboard--commerce .cp-section--featured {
        padding: 0.95rem 1rem 1.05rem;
        border-radius: 14px;
    }

    .cp-dashboard--commerce .cp-section {
        margin-bottom: 1.1rem;
    }
}

@media (min-width: 1200px) {
    .cp-dashboard--commerce .um-hub-body.cp-wrap,
    .cp-dashboard--commerce .cp-wrap {
        max-width: min(96vw, 1600px) !important;
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }

    /* Peek 5 cards in rails on wide monitors */
    .cp-dashboard--commerce .cp-grid--rail .cp-grid__item {
        flex: 0 0 calc(20% - 0.45rem);
        max-width: calc(20% - 0.45rem);
    }

    .cp-dashboard--commerce .cp-grid:not(.cp-grid--rail) .row > [class*="col"] {
        flex: 0 0 20%;
        max-width: 20%;
        width: 20%;
    }
}

@media (min-width: 1500px) {
    .cp-dashboard--commerce .um-hub-body.cp-wrap,
    .cp-dashboard--commerce .cp-wrap {
        max-width: min(96vw, 1680px) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   OPPORTUNITIES
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    .opp-board-page .opp-wrap {
        max-width: min(96vw, 1280px) !important;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Unlock 3 columns — overrides moments 2-col lock */
    .opp-board-page.opp-moments-page .opp-board-grid,
    .opp-board-page .opp-board-grid,
    .opp-moments-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.85rem !important;
    }

    .opp-board-page .opp-board-section__head {
        margin-bottom: 0.75rem;
    }

    .opp-board-page .opp-board-chips {
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .opp-board-page .om-header__inner {
        max-width: min(96vw, 1280px) !important;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (min-width: 992px) {
    .opp-board-page .opp-wrap {
        max-width: min(96vw, 1480px) !important;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .opp-board-page .om-header__inner {
        max-width: min(96vw, 1480px) !important;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* 4 columns on laptop — use the wider shell */
    .opp-board-page.opp-moments-page .opp-board-grid,
    .opp-board-page .opp-board-grid,
    .opp-moments-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }

    /* Moments stack (Worth exploring) → 2-col cards on laptop */
    .opp-moments-stack {
        max-width: none !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .opp-moments-stack .opp-moment__media {
        aspect-ratio: 16 / 10;
        max-height: none;
    }
}

@media (min-width: 1200px) {
    .opp-board-page .opp-wrap {
        max-width: min(96vw, 1600px) !important;
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }

    .opp-board-page .om-header__inner {
        max-width: min(96vw, 1600px) !important;
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }

    .opp-board-page.opp-moments-page .opp-board-grid,
    .opp-board-page .opp-board-grid,
    .opp-moments-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 1.1rem !important;
    }

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

    .opp-moments-rail .opp-moment {
        flex-basis: 15.5rem;
    }
}

/* Confidence For me — unlock phone column on large screens */
@media (min-width: 1100px) {
    body.learn-board-confidence .opp-moments-shell .home-intel__wrap,
    .opp-moments-shell .home-intel__wrap {
        width: 100% !important;
        max-width: none !important;
        padding-left: clamp(1.25rem, 2.5vw, 2.5rem) !important;
        padding-right: clamp(1.25rem, 2.5vw, 2.5rem) !important;
    }
}

@media (min-width: 1400px) {
    body.learn-board-confidence .opp-moments-shell .home-intel__wrap,
    .opp-moments-shell .home-intel__wrap {
        padding-left: clamp(1.5rem, 3vw, 3rem) !important;
        padding-right: clamp(1.5rem, 3vw, 3rem) !important;
    }

    .opp-moments-stack {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   SERVICES / EARN (service discovery)
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    .sd-page .um-hub-body.sd-wrap,
    .sd-page .sd-wrap,
    body.sd-home .sd-wrap {
        max-width: min(96vw, 1280px) !important;
        width: 100% !important;
        margin-inline: auto;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        box-sizing: border-box;
    }

    .sd-page .sd-hero__toolbar,
    .sd-page .sd-search--toolbar {
        max-width: 36rem !important;
        margin-left: 0;
        margin-right: auto;
    }

    .sd-page .sd-section {
        margin-top: 1.25rem;
    }

    .sd-page .sd-section__head {
        margin-bottom: 0.65rem;
    }

    .sd-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    .sd-provider-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.9rem !important;
    }

    .sd-hero--compact .sd-hero__toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
        align-items: center;
        margin-top: 0.85rem;
    }

    .sd-moments {
        margin-left: 0;
        margin-right: 0;
    }

    .sd-moments__track {
        scroll-padding-inline: 0;
        padding-left: 0;
        padding-right: 0;
        gap: 0.75rem;
    }

    .sd-moments__track .sd-moment {
        flex: 0 0 14rem;
        scroll-snap-align: start;
    }

    .sd-category-rail {
        flex-wrap: wrap;
        overflow: visible;
        gap: 0.5rem;
        padding-bottom: 0;
    }
}

@media (min-width: 992px) {
    .sd-page .um-hub-body.sd-wrap,
    .sd-page .sd-wrap,
    body.sd-home .sd-wrap {
        max-width: min(96vw, 1480px) !important;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sd-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.85rem !important;
    }

    .sd-provider-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }

    .sd-moments__track .sd-moment {
        flex: 0 0 15.5rem;
    }
}

@media (min-width: 1200px) {
    .sd-page .um-hub-body.sd-wrap,
    .sd-page .sd-wrap,
    body.sd-home .sd-wrap {
        max-width: min(96vw, 1600px) !important;
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }

    .sd-card-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0.95rem !important;
    }

    .sd-provider-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .sd-moments__track .sd-moment {
        flex: 0 0 16.5rem;
    }
}

@media (min-width: 1500px) {
    .sd-page .um-hub-body.sd-wrap,
    .sd-page .sd-wrap,
    body.sd-home .sd-wrap {
        max-width: min(96vw, 1680px) !important;
        padding-left: 1.85rem;
        padding-right: 1.85rem;
    }

    .sd-card-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }

    .sd-moments__track .sd-moment {
        flex: 0 0 17.5rem;
    }
}

/* Legacy services products shell (if still used) */
@media (min-width: 768px) {
    .cp-dashboard--service .sp-rail--grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .cp-dashboard--service .sp-rail--grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sp-layer-discover__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   BUSINESSES (discovery showcase)
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    .biz-show-page .um-hub-body.biz-show,
    .biz-show-page .biz-show {
        max-width: min(96vw, 1280px) !important;
        width: 100%;
        margin-inline: auto;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .biz-show-page .biz-show__search {
        max-width: 36rem;
        margin-left: 0;
        margin-right: 0;
    }

    .biz-show-page .biz-show__chips,
    .biz-show-page .biz-show__meta,
    .biz-show-page .biz-show__section-head {
        margin-left: 0;
        margin-right: 0;
    }

    .biz-show-page .biz-show__section-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        margin-top: 1.15rem;
        margin-bottom: 0.65rem;
    }

    .biz-show__feed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        padding-left: 0;
        padding-right: 0;
    }

    .biz-show__feed > .biz-show__section-head,
    .biz-show__feed > .biz-show__empty,
    .biz-show__feed > .biz-show__sentinel,
    .biz-show__feed > .biz-show__list-cta {
        grid-column: 1 / -1;
    }

    .biz-show__rail-scroll .biz-show__rail-item {
        flex: 0 0 11.5rem;
    }

    .biz-show__partner {
        min-width: 200px;
    }
}

@media (min-width: 992px) {
    .biz-show-page .um-hub-body.biz-show,
    .biz-show-page .biz-show {
        max-width: min(96vw, 1480px) !important;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .biz-show__feed {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.1rem;
    }

    .biz-show__mast {
        display: grid;
        grid-template-columns: 1.5fr auto;
        gap: 1.25rem;
        align-items: end;
    }

    /* Business profile offerings: 2-col cards already; tighten mosaic to 4 */
    .uz-hub__offerings {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem;
    }

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

@media (min-width: 1200px) {
    .biz-show-page .um-hub-body.biz-show,
    .biz-show-page .biz-show {
        max-width: min(96vw, 1600px) !important;
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }

    .biz-show__feed {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.2rem;
        padding-left: 0;
        padding-right: 0;
    }

    .biz-show__rail-scroll .biz-show__rail-item {
        flex: 0 0 12.5rem;
    }
}

@media (min-width: 1500px) {
    .biz-show-page .um-hub-body.biz-show,
    .biz-show-page .biz-show {
        max-width: min(96vw, 1680px) !important;
    }

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


/* ═══════════════════════════════════════════════════════════════════════
   CAMPUS NETWORK (explore feed)
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    body.cn-uniz-page .uniz,
    .uniz {
        max-width: min(96vw, 1280px) !important;
    }

    .uniz__feed,
    .uniz__feed.cn-explore__feed {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        padding: 0.65rem 1.35rem 0;
    }

    /* Story / pulse rails span full width between campus cards */
    .uniz__feed .tl-pulse,
    .uniz__feed .uniz-pulse,
    .uniz__feed [class*="story-rail"],
    .uniz__feed .cn-explore__story {
        grid-column: 1 / -1;
    }

    .uniz__search {
        max-width: 36rem;
        margin-left: 1.35rem;
        margin-right: 1.35rem;
    }

    .uniz__home-campus {
        margin-left: 1.35rem;
        margin-right: 1.35rem;
    }

    .uniz-moment__hero {
        min-height: 200px;
    }
}

@media (min-width: 992px) {
    body.cn-uniz-page .uniz,
    .uniz {
        max-width: min(96vw, 1480px) !important;
    }

    .uniz__feed,
    .uniz__feed.cn-explore__feed {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.15rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .uniz-moment {
        border-radius: 0;
        overflow: visible;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .uniz-moment__hero {
        min-height: 200px;
        aspect-ratio: 16 / 10;
        border-radius: 16px;
    }
}

@media (min-width: 1200px) {
    body.cn-uniz-page .uniz,
    .uniz {
        max-width: min(96vw, 1600px) !important;
    }

    .uniz__feed,
    .uniz__feed.cn-explore__feed {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.2rem;
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }

    .uniz-moment__hero {
        min-height: 200px;
    }
}

/* Also widen business profile hub shells */
@media (min-width: 992px) {
    .uz-hub.biz-hub,
    body.business-discovery-active .uz-hub {
        max-width: min(96vw, 1480px) !important;
    }
}

@media (min-width: 1200px) {
    .uz-hub.biz-hub,
    body.business-discovery-active .uz-hub {
        max-width: min(96vw, 1600px) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   SHARED ENGAGEMENT POLISH
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    .cp-dashboard--commerce .product-card,
    .sd-card,
    .opp-board-page .opp-card,
    .biz-moment {
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .cp-dashboard--commerce .product-card:hover,
    .sd-card:hover,
    .biz-moment:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(12, 18, 28, 0.1);
    }

    .uniz-moment__hero {
        transition: transform 0.18s ease;
    }

    .uniz-moment__hero:hover {
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-dashboard--commerce .product-card,
    .sd-card,
    .biz-moment,
    .uniz-moment__hero {
        transition: none;
    }

    .cp-dashboard--commerce .product-card:hover,
    .sd-card:hover,
    .biz-moment:hover,
    .uniz-moment__hero:hover {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   TODAY (OS home) — same container breakpoints as Businesses
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    .today-os-page .um-hub-body.tos-show {
        max-width: min(96vw, 1280px) !important;
        width: 100%;
        margin-inline: auto;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .today-os-page .tos-show .biz-show__section-head {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width: 992px) {
    .today-os-page .um-hub-body.tos-show {
        max-width: min(96vw, 1480px) !important;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .today-os-page .um-hub-body.tos-show {
        max-width: min(96vw, 1600px) !important;
    }
}

@media (min-width: 1500px) {
    .today-os-page .um-hub-body.tos-show {
        max-width: min(96vw, 1680px) !important;
    }
}