/* ══════════════════════════════════════
   CLUB DESKTOP LAYOUT
   Mobile (< 768px): untouched — sidenav hidden
   Desktop (≥ 768px): 10-col grid activated
══════════════════════════════════════ */

.club-setup {
    padding: 32px 20px 48px;
}

.club-setup-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;   /* mobile: stacked */
    gap: 0;
    position: relative;
}

/* ── Side Nav: hidden on mobile ── */
.club-sidenav {
    display: none;
}

/* ── Content: full width on mobile ── */
.club-content {
    width: 100%;
}

/* ════════════════════════════════
   DESKTOP ≥ 768px
════════════════════════════════ */
@media (min-width: 769px) {

    .club-setup-inner {
        display: grid;
        grid-template-columns: 1fr 9fr;   /* 1 col sidenav + 9 col content */
        gap: 24px;
        align-items: start;
    }

    /* ── Side Nav capsule ── */
    .club-sidenav {
        display:block;
        position: sticky;
        top: calc(var(--header-h, 88px) + 16px);
        align-self: start;                      
        max-height: calc(100vh - var(--header-h, 88px) - 32px);
        overflow-y: auto;
        scrollbar-width: none;
    }
    .club-sidenav::-webkit-scrollbar { display: none; }

    .club-sidenav__nav {
        background: var(--c-glass-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--c-glass-border);
        box-shadow: var(--shadow-md);
        border-radius: var(--radius-full);
        padding: 25px 8px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .club-sidenav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 16px 8px;
        border-radius: var(--radius-lg);
        color: var(--c-text-muted);
        font-size: 11px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        transition: var(--tr);
        line-height: 1.2;
    }

    .club-sidenav__item svg {
        flex-shrink: 0;
    }

    .club-sidenav__item:hover {
        background: var(--c-bg);
        color: var(--c-text);
    }

    .club-sidenav__item.active {
        background: var(--c-primary);
        color: #fff;
        box-shadow: 0 4px 12px rgba(255, 95, 31, 0.30);
        border-radius: var(--radius-full);
    }
    
    .club-sidenav__item:hover:not(.active) {
        background: color-mix(in srgb, var(--c-primary) 10%, var(--c-bg));
        color: var(--c-primary);
    }
    /* ── Content: 2-column vertical sections ── */
    .club-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);  /* was repeat(3, 1fr) */
        grid-template-rows: auto;
        gap: 20px;
        /*align-items: start;*/
        align-items: stretch;
    }
    
    /* Allow a section to span all 3 columns (full-width rows) */
    .club-section--full  { grid-column: 1 / -1; }  /* keep full width for hero */
    /* Span 2 columns */
    .club-section--wide  { grid-column: span 1; }   /* was span 2 → now 1 col */
    /* Default: 1 column */
    .club-section--col   { grid-column: span 1; }

}
@media (max-width: 767px) {
    .club-setup {
        padding: 0;
    }
    .club-setup-inner {
        display: block;
    }
    .club-sidenav {
        display: none;
    }
    .club-content {
        display: block;
    }
}
/* ════════════════════════════════
   LARGE DESKTOP ≥ 1024px
════════════════════════════════ */
@media (min-width: 1024px) {
    .club-setup-inner {
        gap: 32px;
    }
    .club-content {
        gap: 24px;
    }
}