/* drag-carousel.css — Phase 7: Draggable Horizontal Carousel
 *
 * Confirmed DOM structure (Elementor Flexbox containers, no .e-con-inner between track and cards):
 *
 *   div.e-con[data-drag-carousel].carousel-overflow-hidden
 *     └─ div.e-con.drag-carousel__track.carousel-track-width   ← GSAP translates this
 *          └─ div.e-con.drag-carousel__card  (× N, direct children)
 *
 * Elementor flex defaults (e-con-full, flex-grow:1, width:100%) are defeated via
 * !important on all sizing rules. flex-basis:auto lets width: drive card size,
 * which is more reliable than px flex-basis across Elementor's override layers.
 */

/* ── Outer container ─────────────────────────────────────────────────────── */

[data-drag-carousel] {
    position: relative;
    width: 100%;
}

/* ── Track — the .e-con that GSAP translates ────────────────────────────── */
/* In this Elementor setup cards are DIRECT children of the track .e-con —
 * no .e-con-inner wrapper present. Rules must target track directly. */

.drag-carousel__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: 100% !important;
    gap: var(--carousel-gap, 1.5rem);
    padding: var(--carousel-padding, 2rem 3rem);
    cursor: grab;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.drag-carousel__track:active {
    cursor: grabbing;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */

/* !important defeats Elementor e-con-full defaults (flex-grow:1, width:100%).
 * flex-basis:auto + explicit width lets width: drive card size reliably.
 * Set --carousel-card-width via a carousel-card-* utility class on each card. */
.drag-carousel__card {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    width: var(--carousel-card-width, 480px) !important;
    min-width: var(--carousel-card-width, 480px) !important;
    max-width: none !important;
    position: relative;
    overflow: hidden; /* clips the Watch Video pill cursor at card edges */
    transform-origin: center center;
    will-change: transform, opacity;
    /* Initial off-center state — JS overrides immediately */
    opacity: 0.7;
    transform: scale(0.92);
    transition: none; /* GSAP owns all transitions */
}

/* First card: center state before JS runs */
.drag-carousel__card:first-child {
    opacity: 1;
    transform: scale(1);
}

/* cursor: none disabled — re-enable when carousel-cursor.js is active */
/* @media (pointer: fine) { .drag-carousel__card:hover { cursor: none; } } */

/* ── Pill Nav — absolute, anchored to bottom-right corner of centered card ── */

.drag-carousel__nav {
    position: absolute;
    /* Right edge of nav = right edge of centered card (card is always at 50% of root) */
    right: calc(50% - var(--carousel-card-width-active, 480px) / 2 + 1rem);
    bottom: 2rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin: 0;
    pointer-events: auto;
}

.drag-carousel__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    color: var(--ink-primary, #1a1a1a);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 180ms ease;
    flex-shrink: 0;
}

.drag-carousel__btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Click-then-drag-outside: gold (#FDD56E = project accent) instead of browser default.
   :not(:hover) ensures hover state (light gray) still wins when clicking in-place. */
.drag-carousel__btn:active:not(:hover) {
    background: rgba(253, 213, 110, 0.2);
}

.drag-carousel__btn:focus-visible {
    outline: 2px solid var(--ink-primary, #1a1a1a);
    outline-offset: 2px;
}

.drag-carousel__btn svg {
    display: block;
    pointer-events: none;
}

/* ── Mobile (≤767px): 100vw single-card swipe, drag remains active ── */

@media (max-width: 767px) {
    /* One card fills the viewport — horizontal drag + nav remain active */
    [data-drag-carousel] {
        overflow: hidden !important;
        padding-bottom: 4.5rem; /* room for centered nav below cards */
    }

    .drag-carousel__track {
        padding: 0 !important;
        gap: 0 !important;
    }

    /* Set mobile card width variable — JS enforceCardSizing reads this */
    .drag-carousel__card {
        --carousel-card-width-mobile: 100vw;
    }

    /* Nav: centered horizontally, sits in the padding-bottom space */
    .drag-carousel__nav {
        right: auto !important;
        left: 50% !important;
        bottom: 1rem !important;
        transform: translateX(-50%);
    }
}

/* ── Utility classes — apply via Elementor CSS Classes field (free) ─────── */

/* Apply to outer [data-drag-carousel] container */
.carousel-overflow-hidden {
    overflow: hidden;
}

/* Apply to track container — sets width so GSAP scroll calc is accurate */
.carousel-track-width {
    width: max-content;
    min-width: 100%;
}

/* Card width presets — apply ONE to each card via Elementor CSS Classes.
 * These set --carousel-card-width which the card sizing rule reads.
 * Use when Elementor Custom CSS (paid) is unavailable. */
.carousel-card-sm  { --carousel-card-width: 320px; }
.carousel-card-md  { --carousel-card-width: 480px; }  /* default */
.carousel-card-lg  { --carousel-card-width: 640px; }
.carousel-card-xl  { --carousel-card-width: 800px; }

/* ── Reduced-motion: native scroll, no scale/opacity effects ─────────────── */

@media (prefers-reduced-motion: reduce) {
    [data-drag-carousel] {
        overflow: visible;
    }

    .drag-carousel__track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        cursor: auto;
        will-change: auto;
    }

    .drag-carousel__card {
        scroll-snap-align: center;
        opacity: 1 !important;
        transform: none !important;
        will-change: auto;
    }
}