/**
 * Composantes (Facultés, UFR) - Styles
 * Univ-Droit 2026
 *
 * Chargé dans: templates/simplesimon/positions/composantes/content/mainbody.php
 */

/* =============================================
   HERO SECTION
   ============================================= */
.compo-hero {
    position: relative;
    overflow: hidden;
    min-height: var(--hero-min, 220px);
    background: none;
    isolation: isolate;
    --hero-max: 320px;
    --hero-sat: 0.9;
    --hero-blur: 2px;
    --hero-bright: 0.9;
}

/* Calque image (derrière) */
.compo-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    height: min(100%, var(--hero-max));
    background-image: var(--hero, linear-gradient(#f4f6f8, #f4f6f8));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(var(--hero-sat)) blur(var(--hero-blur)) brightness(var(--hero-bright));
    z-index: 0;
    pointer-events: none;
}

/* Calque gradient (devant l'image) */
.compo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.42) 0%,
        rgba(0, 0, 0, 0.18) 40%,
        rgba(0, 0, 0, 0) 72%
    );
    z-index: 0;
    pointer-events: none;
}

/* Contenu au-dessus */
.compo-hero__content {
    position: relative;
    z-index: 1;
}

/* =============================================
   SLIDER DANS CARD (Actualités)
   ============================================= */
.jl-card-body .jl-slider {
    max-width: min(900px, calc(100vw - 2rem));
    margin-inline: auto;
}

.jl-card-body .jl-slider > .jl-slider-container {
    width: 100%;
    overflow: hidden;
}

/* Éviter débordement dans les grids */
.jl-grid > [class*="jl-width-"],
.jl-card,
.jl-card-body {
    min-width: 0;
}

/* =============================================
   EC CARDS (Membres)
   ============================================= */
.jl-ec-card {
    display: block;
}

.jl-ec-logo-wrap {
    padding: 4px;
    text-align: center;
}

.jl-ec-logo {
    max-height: 45px;
    max-width: 100%;
    object-fit: contain;
}

.jl-ec-body {
    text-align: center;
}

.jl-ec-photo {
    display: flex;
    justify-content: center;
}

.jl-ec-portrait {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 50%;
}

.jl-ec-name {
    font-weight: 600;
}

.jl-ec-grade,
.jl-ec-cnu {
    font-size: 12px;
    color: #666;
}

/* =============================================
   CAROUSEL ACTUALITÉS - Containment
   ============================================= */
.jl-card-body .jl-slider-container {
    overflow: hidden;
}

/* =============================================
   MOBILE OPTIMIZATIONS
   ============================================= */
@media (max-width: 959px) {
    .compo-hero {
        --hero-min: 200px;
        --hero-max: 260px;
    }

    /* Désactiver les filtres lourds et hints GPU sur mobile */
    .compo-hero::before {
        filter: none !important;
        will-change: auto !important;
        transform: none !important;
        background-color: rgba(0, 0, 0, 0.3);
        background-blend-mode: darken;
    }

    .compo-hero {
        isolation: auto !important;
    }

    /* Containeur principal des cartes */
    .jl-card-body .jl-slider {
        max-width: calc(100vw - 3rem);
    }
}

@media (max-width: 900px) {
    .jl-card-body .jl-slider {
        max-width: min(400px, calc(100vw - 2rem));
    }
}

/* ======================================================
   MOBILE : Désactiver le slider, afficher en liste verticale
   ====================================================== */
@media (max-width: 639px) {
    .jl-card-body .jl-slider-container {
        overflow: visible !important;
    }

    /* Transformer en liste verticale */
    .jl-card-body .jl-slider-items {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Chaque item en pleine largeur, empilé */
    .jl-card-body .jl-slider-items > li {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        margin-bottom: 15px !important;
        transform: none !important;
    }

    /* Masquer la navigation du slider */
    .jl-card-body .jl-slidenav,
    .jl-card-body .jl-slider-nav,
    .jl-card-body .jl-dotnav {
        display: none !important;
    }

    /* Limiter le nombre d'items affichés */
    .jl-card-body .jl-slider-items > li:nth-child(n+4) {
        display: none !important;
    }
}

@media (max-width: 639px) {
    .compo-hero {
        --hero-min: 180px;
    }

    /* ======================================================
       FIX BLINKING MOBILE : Désactiver UIkit Grid JS
       ====================================================== */
    body {
        overflow-x: hidden !important;
    }

    /* Tous les grids UIkit de la page */
    .jl-section [jl-grid],
    .jl-section .jl-grid {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
    }

    .jl-section .jl-grid > * {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        margin: 10px 0 !important;
        padding-left: 0 !important;
    }

    .jl-section .jl-grid-stack {
        margin-left: 0 !important;
    }

    .jl-section .jl-first-column {
        margin-top: 0 !important;
    }

    .jl-section .jl-grid-margin {
        margin-top: 10px !important;
    }
}