/* ============================================
   Moovalto - HERO COMPONENT
   Composants hero réutilisables
   ============================================

   VARIABLES CSS UTILISÉES
   Source: shared/css/01-variables.css

   📦 COULEURS (6 variables)
   --color-primary              #282c5c (Bleu Nuit profond)
   --color-primary-light        #3d4275 (Bleu Nuit clair)
   --color-secondary               #28ccc4 (Turquoise)
   --color-secondary-alpha-20      rgba(40, 204, 196, 0.2)
   --color-secondary-alpha-30      rgba(40, 204, 196, 0.3)
   --color-text-primary         #1F2937 (Texte sombre)

   📏 ESPACEMENTS (8 variables)
   --spacing-xs: 0.25rem        4px
   --spacing-sm: 0.5rem         8px
   --spacing-md: 1rem           16px
   --spacing-lg: 1.5rem         24px
   --spacing-xl: 2rem           32px
   --spacing-2xl: 3rem          48px
   --spacing-3xl: 4rem          64px
   --spacing-4xl: 6rem          96px ← Ajouté pour Hero V3 fullscreen

   🔤 TYPOGRAPHIE (15 variables)
   Font Sizes:
   --font-size-xs: 0.75rem      12px
   --font-size-sm: 0.875rem     14px
   --font-size-base: 1rem       16px
   --font-size-lg: 1.125rem     18px
   --font-size-xl: 1.25rem      20px
   --font-size-2xl: 1.5rem      24px
   --font-size-3xl: 1.875rem    30px
   --font-size-4xl: 2.25rem     36px
   --font-size-5xl: 3rem        48px

   Font Weights:
   --font-weight-semibold: 600
   --font-weight-bold: 700
   --font-weight-extrabold: 800

   Line Heights:
   --line-height-tight: 1.25
   --line-height-relaxed: 1.75

   🔲 BORDER RADIUS (3 variables)
   --radius-lg: 12px
   --radius-xl: 16px
   --radius-full: 9999px        Cercles parfaits

   🌑 SHADOWS (2 variables)
   --shadow-lg                  0 10px 15px rgba(0,0,0,0.1)...
   --shadow-2xl                 0 25px 50px rgba(0,0,0,0.25)

   📐 LAYOUT (1 variable)
   --max-width-content: 1024px  Largeur standard contenu

   ============================================ */

/* ========== VARIANT 1: HERO PAGES SECONDAIRES ========== */
/* Usage: Pages secondaires landing (How-it-works, About, etc.)
   Layout centré simple, avec support optionnel d'image de fond

   Exemples d'usage:
   - Gradient seul (défaut): <section class="hero--v1">
   - Avec image: <section class="hero--v1" style="background: linear-gradient(rgba(40,44,92,0.85), rgba(40,44,92,0.85)), url('image.jpg') center/cover;"> */

.hero--v1 {
    min-height: 400px;
    /* Gradient bleu par défaut - peut être surchargé via inline style pour ajouter une image */
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    background-size: cover;
    background-position: center;
    color: var(--color-text-inverse);
    padding: var(--spacing-3xl) 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero--v1-content {
    max-width: var(--max-width-content, 800px);
    margin: 0 auto;
}

.hero--v1 h1 {
    font-size: var(--font-size-3xl, 2.5rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-lg);
    color: inherit; /* Hérite du color: white du parent .hero--v1 */
}

.hero--v1 p {
    font-size: var(--font-size-lg);
    color: var(--color-white-alpha-90);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-xl);
}

.hero--v1-cta {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
}

/* ========== VARIANT 2: HERO FULLSCREEN ========== */
/* Usage: Hero fullscreen avec background image + benefits
   Inspiré par D5 Movers Landing - Version générique réutilisable
   Supporte : background image, gradient overlay, benefits grid */

.hero--v2 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
    padding: var(--spacing-4xl) var(--spacing-xl) var(--spacing-3xl);
    text-align: center;
}

/* Dark overlay - personnalisable via inline style sur ::before */
.hero--v2::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-primary-dark-alpha-30);
    z-index: 1;
}

.hero--v2-content {
    position: relative;
    z-index: 2;
    max-width: var(--max-width-content);
    margin: 0 auto;
    width: 100%;
}

.hero--v2 h1 {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-extrabold);
    margin-bottom: var(--spacing-lg);
    text-shadow: 0 2px 8px var(--color-primary-dark-alpha-30);
    line-height: var(--line-height-tight);
    color: inherit; /* Hérite du color: white du parent .hero--v2 */
}

.hero--v2-subtitle {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-2xl);
    opacity: 0.95;
    text-shadow: 0 1px 4px var(--color-primary-dark-alpha-20);
    line-height: var(--line-height-relaxed);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Benefits grid - cartes blanches avec glassmorphism */
.hero--v2-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.hero--v2-benefit {
    background: var(--color-white-alpha-90);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-white-alpha-20);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-shadow: var(--shadow-lg);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: var(--font-size-sm);
}

.hero--v2-benefit-icon {
    font-size: var(--font-size-3xl);
    flex-shrink: 0;
}

.hero--v2-cta {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.hero--v2-note {
    font-size: var(--font-size-sm);
    opacity: 0.85;
    margin: 0;
    margin-top: var(--spacing-md);
}

/* ========== COMMON ELEMENTS ========== */

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--color-secondary-alpha-20);
    border: 1px solid var(--color-secondary-alpha-30);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-features {
    display: flex;
    gap: var(--spacing-2xl);
    margin-top: var(--spacing-2xl);
    flex-wrap: wrap;
}

.hero-feature-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.hero-feature-icon {
    color: var(--color-secondary);
    font-size: var(--font-size-xl);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 1024px) {
    .hero--v2 {
        padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);
    }

    .hero--v2-benefits {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero--v1 {
        padding: var(--spacing-2xl) 0;
        min-height: auto;
    }

    .hero--v1 h1 {
        font-size: var(--font-size-2xl, 2rem);
    }

    .hero--v1-cta {
        flex-direction: column;
    }

    .hero--v2 {
        min-height: auto;
        padding: var(--spacing-3xl) var(--spacing-md) var(--spacing-2xl);
    }

    .hero--v2 h1 {
        font-size: var(--font-size-3xl);
    }

    .hero--v2-subtitle {
        font-size: var(--font-size-base);
    }

    .hero--v2-benefit {
        flex-direction: column;
        text-align: center;
    }

    .hero--v2-cta {
        flex-direction: column;
        width: 100%;
    }

    .hero-features {
        flex-direction: column;
        gap: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .hero--v1 h1 {
        font-size: var(--font-size-xl, 1.7rem);
    }

    .hero--v2 h1 {
        font-size: var(--font-size-2xl);
    }

    .hero-badge {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}