/**
 * VBM Responsive Overrides
 * Mobile-first: uses min-width media queries only.
 * Base (mobile) styles live in tokens.css, components.css, org.css, member.css, registration.css.
 * This file adds progressive enhancements for tablet and desktop.
 */

/* -------------------------------------------------------
   Mobile defaults (hidden until tablet+)
------------------------------------------------------- */

.vbm-header__desktop-nav {
    display: none;
}

/* -------------------------------------------------------
   Tablet — 768px and up
------------------------------------------------------- */

@media (min-width: 768px) {

    /* Content centering */
    .vbm-content {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Event list grid layout */
    .vbm-event-list--grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .vbm-event-list--grid .vbm-section-header {
        grid-column: 1 / -1;
    }

    /* Stats row */
    .vbm-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Bottom nav hidden on tablet+ */
    .vbm-bottom-nav {
        display: none;
    }

    /* Remove extra bottom padding reserved for bottom nav */
    .vbm-content--with-nav {
        padding-bottom: 12px;
    }

    .vbm-content--with-both {
        padding-bottom: 80px;
    }

    /* Sticky CTA sits flush (no bottom nav offset) */
    .vbm-has-bottom-nav .vbm-sticky-cta {
        bottom: 0;
    }

    /* Registration sections */
    .vbm-register__sections {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Desktop nav revealed */
    .vbm-header__desktop-nav {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .vbm-header__desktop-nav-link {
        color: color-mix(in srgb, var(--vbm-header-color, var(--vbm-text-secondary)) 80%, transparent);
        text-decoration: none;
        font-size: 14px;
        font-family: var(--vbm-font);
        padding: 4px 0;
        border-bottom: 2px solid transparent;
        transition: color var(--vbm-transition-fast), border-color var(--vbm-transition-fast);
    }

    .vbm-header__desktop-nav-link:hover {
        color: var(--vbm-header-color, var(--vbm-text-primary));
    }

    .vbm-header__desktop-nav-link.is-active {
        color: var(--vbm-primary);
        font-weight: 600;
        border-bottom-color: var(--vbm-primary);
    }

    /* Calendar always expanded on tablet+ */
    .vbm-calendar-strip__toggle {
        cursor: default;
    }

    .vbm-calendar-strip__chevron {
        display: none;
    }

    .vbm-calendar-strip__grid {
        padding: 0 24px 16px;
    }

    /* Filter pills centered */
    .vbm-pills--center {
        justify-content: center;
    }

    /* Match cards 2-column grid */
    .vbm-match-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .vbm-match-grid .vbm-section-header {
        grid-column: 1 / -1;
    }

    /* Overview grid 2 columns on tablet */
    .vbm-overview-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Detail hero wider padding */
    .vbm-detail-hero {
        padding: 28px 48px;
    }

    /* Tabs wider padding */
    .vbm-tabs--desktop {
        padding-left: 48px;
        padding-right: 48px;
    }

    .vbm-tab--desktop {
        padding: 14px 20px;
    }

    /* Member welcome larger */
    .vbm-welcome__name {
        font-size: 24px;
    }

    /* Member portal Up Next + stats side by side */
    .vbm-home-layout {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 16px;
    }

    .vbm-home-layout .vbm-stats {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
}

/* -------------------------------------------------------
   Desktop — 1024px and up
------------------------------------------------------- */

@media (min-width: 1024px) {

    /* Wider content */
    .vbm-content {
        max-width: 1200px;
    }

    /* Stats 4-column */
    .vbm-stats {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Registration wider */
    .vbm-register__sections {
        max-width: 700px;
    }

    /* Bracket hint hidden */
    .vbm-bracket-hint {
        display: none;
    }

    /* === HERO BANNER visible === */
    .vbm-hero-banner {
        display: block;
    }

    /* Old row-based event list hidden — replaced by week view */
    .vbm-event-rows {
        display: none;
    }

    /* Hide card layout on desktop */
    .vbm-event-list--desktop-hide {
        display: none;
    }

    /* Calendar grid wider */
    .vbm-calendar-strip__grid {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 48px 16px;
    }

    .vbm-calendar-strip__toggle {
        max-width: 1200px;
        margin: 0 auto;
        padding: 10px 48px;
    }

    /* Filter pills wider padding */
    .vbm-pills--desktop {
        padding: 16px 48px;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* === MATCH CARDS 3-column === */
    .vbm-match-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    /* === EVENT DETAIL HERO — centered on desktop === */
    .vbm-detail-hero__inner {
        text-align: center;
    }

    .vbm-detail-hero__cta {
        display: block;
    }

    /* Hide sticky CTA on desktop when detail hero CTA is visible */
    .vbm-detail-hero-page .vbm-sticky-cta {
        display: none;
    }

    /* Detail hero title larger */
    .vbm-detail-hero .vbm-hero__title {
        font-size: 28px;
    }

    /* Detail hero info row inline */
    .vbm-detail-hero .vbm-hero__info {
        flex-direction: row;
        gap: 24px;
    }

    /* === TWO-COLUMN CHECKOUT === */
    .vbm-checkout-layout {
        flex-direction: row;
        max-width: 1100px;
        margin: 0 auto;
        padding: 24px 32px;
        align-items: flex-start;
    }

    .vbm-checkout-layout__summary {
        position: sticky;
        top: 80px;
    }

    /* Hide sticky CTA on desktop checkout (CTA is in summary card) */
    .vbm-checkout-page .vbm-sticky-cta {
        display: none;
    }

    /* Teammate slots 2-column */
    .vbm-teammate-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* Add teammate form inline */
    .vbm-add-teammate__row {
        display: flex;
        gap: 8px;
    }

    .vbm-add-teammate__row .vbm-input {
        margin-bottom: 0;
    }

    /* === MEMBER HOME wider layout === */
    .vbm-home-layout .vbm-stats {
        grid-template-columns: 1fr;
    }

    /* Member events as rows on desktop */
    .vbm-member-event-rows {
        display: block;
    }

    .vbm-member-event-cards {
        display: none;
    }

    /* === WEEK VIEW visible, old calendar hidden === */
    .vbm-week-view-container {
        display: block;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 48px;
    }

    .vbm-calendar-strip {
        display: none;
    }
}

/* Mobile default: show cards, hide rows */
.vbm-member-event-rows {
    display: none;
}