/* =========================================================
   FLY4 – Explore Teamwear  (Angie snippet 67c44705)
   Desktop: static overlapping "arc" of 5 cards (NO hover / NO shadow by default).
   Mobile:  3-up LOOPING carousel (centre focus + side peeks) via arrows/swipe.
   Cards are 4:5 so 4:5 product images fit perfectly (object-fit: cover).
   ========================================================= */

.sba-section {
    background-color: #FFFFFF;
    padding: 90px 20px 100px 20px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    overflow: hidden;
}
.sba-container { max-width: 1400px; margin: 0 auto; width: 100%; }

/* ---------- Header ---------- */
.sba-header { text-align: center; margin-bottom: 30px; }
.sba-eyebrow {
    display: block; font-size: 13px; letter-spacing: 0.15em;
    color: var(--sba-heading, #C48C2B); font-weight: 700;
    text-transform: uppercase; margin-bottom: 12px;
}
.sba-heading {
    font-family: "Poppins", sans-serif; font-size: 32px; font-weight: 800;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--sba-heading, #C48C2B); margin: 0; line-height: 1.15;
}

/* ---------- Category tabs ---------- */
.sba-tabs-wrapper { display: flex; justify-content: center; margin-bottom: 44px; }
.sba-tabs { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: center; align-items: center; }
.sba-tab-btn {
    background: none; border: none; outline: none; cursor: pointer;
    font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 600;
    color: var(--sba-tab-color, #C48C2B); position: relative; padding: 2px 0;
    white-space: nowrap; display: inline-flex; align-items: center; gap: 10px;
    transition: color 0.25s ease;
}
.sba-tab-btn::before {
    content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
    background-color: var(--sba-tab-color, #C48C2B);
}
.sba-tab-btn:hover { color: var(--sba-tab-active, #A86A1F); }
.sba-tab-btn.sba-tab-active { color: var(--sba-tab-active, #A86A1F); font-weight: 700; }
.sba-tab-btn.sba-tab-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -7px;
    height: 2px; border-radius: 2px; background-color: var(--sba-tab-active, #A86A1F);
}

/* ---------- Galleries ---------- */
.sba-galleries-container { position: relative; width: 100%; }
.sba-gallery { display: none; opacity: 0; transition: opacity 0.4s ease; }
.sba-gallery.sba-gallery-active { display: block; opacity: 1; }

/* =========================================================
   DESKTOP – overlapping arc (4:5 cards)
   ========================================================= */
.sba-cards-grid { display: flex; justify-content: center; align-items: center; width: 100%; }
.sba-card {
    position: relative;
    flex: 0 0 auto;
    border-radius: var(--sba-radius, 16px);
    overflow: hidden;
    background-color: var(--sba-card-bg, #E8E7E3);
    aspect-ratio: 4 / 5;                       /* perfect fit for 4:5 images */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
    text-decoration: none;
    color: inherit;
}
.sba-card-1, .sba-card-5 { width: var(--sba-w-outer, 16%);  z-index: 10; }
.sba-card-2, .sba-card-4 { width: var(--sba-w-mid, 19%);    z-index: 20; }
.sba-card-3            { width: var(--sba-w-center, 23%);  z-index: 30; }
.sba-card-2, .sba-card-3, .sba-card-4, .sba-card-5 {
    margin-left: calc(var(--sba-overlap, 2.5%) * -1);
}

.sba-card-inner { position: relative; width: 100%; height: 100%; }
.sba-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sba-card-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: #9D9D99;
}

/* ---------- Optional shadow (OFF by default) ---------- */
.sba-shadow-yes .sba-card { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); }

/* ---------- Optional hover (OFF by default) ---------- */
.sba-hover-yes .sba-card:hover { transform: translateY(-10px) scale(1.03); z-index: 40; }
.sba-hover-yes.sba-shadow-yes .sba-card:hover { box-shadow: 0 22px 46px rgba(0, 0, 0, 0.20); }
.sba-hover-yes .sba-card-img { transition: transform 0.6s ease; }
.sba-hover-yes .sba-card:hover .sba-card-img { transform: scale(1.05); }

/* ---------- Optional overlay ---------- */
.sba-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 40%, transparent 100%);
    display: flex; align-items: flex-end; padding: 22px;
}
.sba-card-meta { display: flex; flex-direction: column; gap: 4px; }
.sba-card-sport { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.85); }
.sba-card-label { font-size: 20px; font-weight: 700; color: #FFFFFF; }

/* mobile nav hidden on desktop */
.sba-mobile-nav { display: none; }

/* =========================================================
   MOBILE (≤767px) – 3-up looping carousel
   Cards are absolutely stacked; JS assigns slot classes.
   ========================================================= */
@media (max-width: 767px) {
    .sba-heading { font-size: 26px; }
    .sba-tabs-wrapper { margin-bottom: 24px; }

    /* tabs → horizontal scroll strip */
    .sba-tabs {
        flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
        gap: 20px; padding: 0 12px 6px; scrollbar-width: none;
    }
    .sba-tabs::-webkit-scrollbar { display: none; }

    /* stage: height = centre card height (4:5) */
    .sba-cards-grid {
        position: relative;
        display: block;
        height: 0;
        padding-bottom: calc(var(--sba-m-card-w, 66%) * 1.25);
        overflow: hidden;
    }

    .sba-card,
    .sba-card-1, .sba-card-2, .sba-card-3, .sba-card-4, .sba-card-5 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--sba-m-card-w, 66%);
        aspect-ratio: 4 / 5;
        height: auto;
        margin: 0;
        z-index: 1;
        opacity: 0;                              /* hidden until JS slots it */
        transform: translate(-50%, -50%);
        transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s ease;
        will-change: transform, opacity;
        box-shadow: none;
    }
    .sba-card.sba-no-anim { transition: none !important; }

    .sba-card.sba-slot-center {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1; z-index: 30;
    }
    .sba-card.sba-slot-left {
        transform: translate(-50%, -50%) translateX(calc(-1 * var(--sba-m-shift, 82%))) scale(var(--sba-m-side-scale, 0.82));
        opacity: var(--sba-m-side-opacity, 0.5); z-index: 20;
    }
    .sba-card.sba-slot-right {
        transform: translate(-50%, -50%) translateX(var(--sba-m-shift, 82%)) scale(var(--sba-m-side-scale, 0.82));
        opacity: var(--sba-m-side-opacity, 0.5); z-index: 20;
    }
    .sba-card.sba-slot-hleft {
        transform: translate(-50%, -50%) translateX(-185%) scale(0.7);
        opacity: 0; z-index: 10;
    }
    .sba-card.sba-slot-hright {
        transform: translate(-50%, -50%) translateX(185%) scale(0.7);
        opacity: 0; z-index: 10;
    }

    /* neutralise desktop hover on touch */
    .sba-hover-yes .sba-card:hover { transform: translate(-50%, -50%); }
    .sba-hover-yes .sba-card.sba-slot-center:hover { transform: translate(-50%, -50%) scale(1); }
    .sba-hover-yes .sba-card:hover .sba-card-img { transform: none; }

    /* arrows + CTA */
    .sba-mobile-nav {
        display: flex; align-items: center; justify-content: center;
        gap: 22px; margin-top: 18px;
    }
    .sba-nav-btn { background: none; border: none; cursor: pointer; color: #121212; line-height: 0; padding: 6px; }
    .sba-cta-text { font-size: 15px; font-weight: 600; color: #121212; letter-spacing: 0.02em; text-decoration: none; }
}