/**
 * Formations Carousel - Mobile Stack Cards View
 * Tinder-style stacked cards with 3D physics
 *
 * Design: Luxe Épuré + Ludique
 * Typography: DM Serif Display + Plus Jakarta Sans
 */

/* ==========================================================================
   Font Imports
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Mobile Stack - Only on screens < 768px
   ========================================================================== */

@media (max-width: 768px) {

    /* Hide desktop carousel on mobile */
    .formations-carousel__container,
    .formations-carousel__dots,
    .formations-carousel__nav {
        display: none !important;
    }

    /* Show mobile stack */
    .formations-carousel__mobile-stack {
        display: block !important;
    }

    /* ==========================================================================
       CSS Custom Properties - Mobile
       ========================================================================== */

    .formations-carousel {
        --card-bg: #FFFFFF;
        --card-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15), 0 8px 16px -8px rgba(0, 0, 0, 0.1);
        --accent: #F8740E;
        --accent-glow: rgba(248, 116, 14, 0.25);
        --text-primary: #1A1A1A;
        --text-secondary: #6B6B6B;
        --text-muted: #9CA3AF;
        --border-color: rgba(0, 0, 0, 0.08);
        --font-display: 'DM Serif Display', Georgia, serif;
        --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;

        /* Inherit background from parent/page */
        background: transparent;
        min-height: 100vh;
        min-height: 100dvh;
        padding-bottom: 0;
    }

    /* ==========================================================================
       Hide desktop tabs on mobile
       ========================================================================== */

    .formations-carousel__tabs {
        display: none !important;
    }

    /* ==========================================================================
       Category Dropdown (Inline Expandable)
       ========================================================================== */

    .mobile-stack__category-dropdown {
        margin: 1rem;
        position: relative;
        z-index: 100;
    }

    .mobile-stack__category-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0.875rem 1rem;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: var(--font-body);
    }

    .mobile-stack__category-trigger:active {
        transform: scale(0.98);
    }

    .mobile-stack__category-dropdown.is-open .mobile-stack__category-trigger {
        border-radius: 12px 12px 0 0;
        border-bottom-color: transparent;
    }

    .mobile-stack__category-label {
        font-size: 0.75rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .mobile-stack__category-value {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .mobile-stack__category-arrow {
        width: 16px;
        height: 16px;
        color: var(--text-muted);
        transition: transform 0.3s ease;
    }

    .mobile-stack__category-dropdown.is-open .mobile-stack__category-arrow {
        transform: rotate(180deg);
    }

    /* Dropdown List */
    .mobile-stack__category-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-top: none;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .mobile-stack__category-dropdown.is-open .mobile-stack__category-list {
        max-height: 300px;
        overflow-y: auto;
    }

    .mobile-stack__category-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0.875rem 1rem;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--border-color);
        font-family: var(--font-body);
        font-size: 0.9375rem;
        color: var(--text-primary);
        text-align: left;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .mobile-stack__category-item:last-child {
        border-bottom: none;
    }

    .mobile-stack__category-item:active {
        background: rgba(0, 0, 0, 0.04);
    }

    .mobile-stack__category-item.is-selected {
        color: var(--accent);
        font-weight: 600;
    }

    .mobile-stack__category-item .checkmark {
        width: 18px;
        height: 18px;
        color: var(--accent);
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .mobile-stack__category-item.is-selected .checkmark {
        opacity: 1;
    }

    /* ==========================================================================
       Mobile Stack Container
       ========================================================================== */

    .formations-carousel__mobile-stack {
        position: relative;
        width: 100%;
        height: calc(100vh - 120px);
        height: calc(100dvh - 120px);
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 1000px;
        overflow: hidden;
    }

    /* ==========================================================================
       Card Stack
       ========================================================================== */

    .mobile-stack__cards {
        position: relative;
        width: 100%;
        max-width: 340px;
        height: 480px;
        margin: 0 auto;
    }

    /* ==========================================================================
       Individual Card
       ========================================================================== */

    .mobile-stack__card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--card-bg);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: var(--card-shadow);
        transform-origin: center bottom;
        will-change: transform, opacity;
        touch-action: pan-y;
        cursor: grab;

        /* Initial hidden state */
        opacity: 0;
        transform: scale(0.9) translateY(30px);
        pointer-events: none;
    }

    .mobile-stack__card:active {
        cursor: grabbing;
    }

    /* Stack positions - cards behind */
    .mobile-stack__card[data-position="0"] {
        opacity: 1;
        transform: scale(1) translateY(0) rotateX(0);
        pointer-events: auto;
        z-index: 30;
    }

    .mobile-stack__card[data-position="1"] {
        opacity: 0.7;
        transform: scale(0.95) translateY(20px) rotateX(2deg);
        z-index: 20;
        filter: brightness(0.9);
    }

    .mobile-stack__card[data-position="2"] {
        opacity: 0.4;
        transform: scale(0.9) translateY(40px) rotateX(4deg);
        z-index: 10;
        filter: brightness(0.8) blur(2px);
    }

    /* Hidden cards */
    .mobile-stack__card[data-position="3"],
    .mobile-stack__card[data-position="4"],
    .mobile-stack__card[data-position="5"] {
        opacity: 0;
        transform: scale(0.85) translateY(60px);
        z-index: 0;
    }

    /* ==========================================================================
       Card Image
       ========================================================================== */

    .mobile-stack__card-image {
        position: relative;
        width: 100%;
        height: 45%;
        overflow: hidden;
    }

    .mobile-stack__card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-stack__card[data-position="0"]:hover .mobile-stack__card-image img {
        transform: scale(1.05);
    }

    /* Image overlay gradient */
    .mobile-stack__card-image::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
        pointer-events: none;
    }

    /* ==========================================================================
       Card Tags - Positioned on image
       ========================================================================== */

    .mobile-stack__card-tags {
        position: absolute;
        top: 1rem;
        left: 1rem;
        right: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
        z-index: 5;
    }

    .mobile-stack__card-tag {
        padding: 0.375rem 0.75rem;
        font-family: var(--font-body);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: white;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 6px;
    }

    .mobile-stack__card-tag.tag-urgent {
        background: rgba(220, 38, 38, 0.9);
    }

    .mobile-stack__card-tag.tag-free {
        background: rgba(5, 150, 105, 0.9);
    }

    .mobile-stack__card-tag.tag-special {
        background: rgba(37, 99, 235, 0.9);
    }

    .mobile-stack__card-tag.tag-funded {
        background: rgba(124, 58, 237, 0.9);
    }

    /* ==========================================================================
       Card Content
       ========================================================================== */

    .mobile-stack__card-content {
        padding: 1.25rem 1.5rem;
        height: 55%;
        display: flex;
        flex-direction: column;
    }

    /* Title */
    .mobile-stack__card-title {
        font-family: var(--font-display);
        font-size: 1.25rem;
        font-weight: 400;
        line-height: 1.3;
        color: var(--text-primary);
        margin: 0 0 0.75rem;

        /* Allow up to 4 lines for long titles */
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Meta info */
    .mobile-stack__card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1rem;
        font-family: var(--font-body);
        font-size: 0.8125rem;
        color: var(--text-secondary);
    }

    .mobile-stack__card-meta span {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .mobile-stack__card-meta svg {
        width: 14px;
        height: 14px;
        opacity: 0.7;
    }

    /* CTA Button */
    .mobile-stack__card-cta {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.875rem 1.5rem;
        background: var(--accent);
        color: white;
        font-family: var(--font-body);
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 15px var(--accent-glow);
    }

    .mobile-stack__card-cta:active {
        transform: scale(0.98);
        box-shadow: 0 2px 10px var(--accent-glow);
    }

    .mobile-stack__card-cta svg {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
    }

    /* ==========================================================================
       Swipe Indicator - Élégant et Informatif
       ========================================================================== */

    .mobile-stack__swipe-hint {
        position: absolute;
        bottom: -60px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem 1.5rem;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 16px;
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.1),
            0 2px 8px rgba(0, 0, 0, 0.05);
        z-index: 50;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Animation d'apparition */
    .mobile-stack__swipe-hint {
        animation: hintAppear 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes hintAppear {
        0% {
            opacity: 0;
            transform: translateX(-50%) translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    /* Icônes de direction */
    .mobile-stack__swipe-icons {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .mobile-stack__swipe-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    .mobile-stack__swipe-icon svg {
        width: 24px;
        height: 24px;
        color: var(--text-secondary);
        transition: all 0.3s ease;
    }

    .mobile-stack__swipe-icon--left svg {
        animation: swipeHintLeft 1.5s ease-in-out infinite;
    }

    .mobile-stack__swipe-icon--right svg {
        animation: swipeHintRight 1.5s ease-in-out infinite;
    }

    .mobile-stack__swipe-icon--up svg {
        color: var(--accent);
        animation: swipeHintUp 1.5s ease-in-out infinite;
    }

    @keyframes swipeHintLeft {
        0%, 100% { transform: translateX(0); opacity: 0.5; }
        50% { transform: translateX(-8px); opacity: 1; }
    }

    @keyframes swipeHintRight {
        0%, 100% { transform: translateX(0); opacity: 0.5; }
        50% { transform: translateX(8px); opacity: 1; }
    }

    @keyframes swipeHintUp {
        0%, 100% { transform: translateY(0); opacity: 0.6; }
        50% { transform: translateY(-6px); opacity: 1; }
    }

    .mobile-stack__swipe-icon-label {
        font-family: var(--font-body);
        font-size: 0.625rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
    }

    .mobile-stack__swipe-icon--up .mobile-stack__swipe-icon-label {
        color: var(--accent);
    }

    /* Texte principal */
    .mobile-stack__swipe-text {
        font-family: var(--font-body);
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-secondary);
        text-align: center;
        margin-top: 0.25rem;
    }

    /* Geste animé central - Doigt qui swipe */
    .mobile-stack__swipe-gesture {
        position: relative;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 0.5rem;
    }

    .mobile-stack__swipe-gesture::before {
        content: '👆';
        font-size: 1.5rem;
        animation: gestureSwipe 2.5s ease-in-out infinite;
    }

    @keyframes gestureSwipe {
        0%, 100% {
            transform: translateX(0) rotate(0deg);
            opacity: 0.7;
        }
        25% {
            transform: translateX(-15px) rotate(-15deg);
            opacity: 1;
        }
        50% {
            transform: translateX(0) rotate(0deg);
            opacity: 0.7;
        }
        75% {
            transform: translateX(15px) rotate(15deg);
            opacity: 1;
        }
    }

    /* Masquer l'indication après interaction */
    .formations-carousel.has-interacted .mobile-stack__swipe-hint {
        animation: hintDisappear 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        pointer-events: none;
    }

    @keyframes hintDisappear {
        0% {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        100% {
            opacity: 0;
            transform: translateX(-50%) translateY(20px);
        }
    }

    /* Version compacte pour petits écrans */
    @media (max-height: 700px) {
        .mobile-stack__swipe-hint {
            bottom: -50px;
            padding: 0.75rem 1.25rem;
            gap: 0.375rem;
        }

        .mobile-stack__swipe-icons {
            gap: 1rem;
        }

        .mobile-stack__swipe-icon svg {
            width: 20px;
            height: 20px;
        }

        .mobile-stack__swipe-gesture::before {
            font-size: 1.25rem;
        }
    }

    /* ==========================================================================
       Card Counter
       ========================================================================== */

    .mobile-stack__counter {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-family: var(--font-body);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-muted);
        z-index: 40;
    }

    /* ==========================================================================
       Swipe Animation States
       ========================================================================== */

    .mobile-stack__card.swiping-left {
        animation: swipeLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        pointer-events: none !important;
    }

    .mobile-stack__card.swiping-right {
        animation: swipeRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        pointer-events: none !important;
    }

    .mobile-stack__card.swiping-up {
        animation: swipeUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        pointer-events: none !important;
    }

    @keyframes swipeLeft {
        0% {
            transform: scale(1) translateX(0) rotate(0);
            opacity: 1;
        }
        100% {
            transform: translateX(-150%) rotate(-20deg);
            opacity: 0;
        }
    }

    @keyframes swipeRight {
        0% {
            transform: scale(1) translateX(0) rotate(0);
            opacity: 1;
        }
        100% {
            transform: translateX(150%) rotate(20deg);
            opacity: 0;
        }
    }

    @keyframes swipeUp {
        0% {
            transform: scale(1) translateY(0);
            opacity: 1;
        }
        100% {
            transform: translateY(-150%) scale(0.9);
            opacity: 0;
        }
    }

    /* Card that was swiped away - keep it hidden */
    .mobile-stack__card.swiped {
        opacity: 0 !important;
        pointer-events: none !important;
        animation: none !important;
    }

    /* Card entering from bottom - no animation, just smooth position transition */
    .mobile-stack__card {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Disable transition during drag */
    .mobile-stack__card.dragging {
        transition: none !important;
    }

    /* ==========================================================================
       Empty State
       ========================================================================== */

    .mobile-stack__empty {
        text-align: center;
        padding: 3rem 2rem;
        color: rgba(255, 255, 255, 0.6);
    }

    .mobile-stack__empty-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .mobile-stack__empty-title {
        font-family: var(--font-display);
        font-size: 1.5rem;
        color: white;
        margin: 0 0 0.5rem;
    }

    .mobile-stack__empty-text {
        font-family: var(--font-body);
        font-size: 0.875rem;
        margin: 0;
    }

    /* ==========================================================================
       Loading State
       ========================================================================== */

    .mobile-stack__loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        color: rgba(255, 255, 255, 0.6);
    }

    .mobile-stack__spinner {
        width: 40px;
        height: 40px;
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* ==========================================================================
       Drag Visual Feedback
       ========================================================================== */

    .mobile-stack__card.dragging {
        transition: none !important;
        box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.6);
    }

    /* Tilt based on drag direction - controlled via JS */
    .mobile-stack__card[style*="--drag-x"] {
        transform:
            translateX(calc(var(--drag-x, 0) * 1px))
            translateY(calc(var(--drag-y, 0) * 1px))
            rotate(calc(var(--drag-x, 0) * 0.1deg))
            scale(1.02);
    }

}

/* ==========================================================================
   Desktop: Hide mobile stack
   ========================================================================== */

@media (min-width: 769px) {
    .formations-carousel__mobile-stack {
        display: none !important;
    }
}

/* ==========================================================================
   Very Small Screens (iPhone SE)
   ========================================================================== */

@media (max-width: 375px) {
    .mobile-stack__cards {
        max-width: 300px;
        height: 440px;
    }

    .mobile-stack__card-title {
        font-size: 1.25rem;
    }

    .mobile-stack__card-content {
        padding: 1rem 1.25rem;
    }

    .mobile-stack__card-cta {
        padding: 0.75rem 1.25rem;
        font-size: 0.8125rem;
    }
}

/* ==========================================================================
   Landscape Mode
   ========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .formations-carousel__mobile-stack {
        height: calc(100vh - 80px);
        padding: 0.5rem 1rem;
    }

    .mobile-stack__cards {
        max-width: 280px;
        height: 320px;
    }

    .mobile-stack__card-image {
        height: 50%;
    }

    .mobile-stack__card-title {
        font-size: 1.125rem;
        -webkit-line-clamp: 1;
    }

    .mobile-stack__card-meta {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .mobile-stack__card-cta {
        padding: 0.625rem 1rem;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mobile-stack__card,
    .mobile-stack__card-cta,
    .mobile-stack__swipe-hint {
        animation: none !important;
        transition: opacity 0.2s ease !important;
    }
}