/* Carrousel événements — accueil Pro Fight Team
   Version "mise en avant" : une carte centrale active, cartes voisines en retrait. */
.ed-event-carousel-section {
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(760px 420px at 88% 20%, rgba(173, 23, 33, .30), transparent 72%),
        radial-gradient(720px 380px at 8% 78%, rgba(196, 143, 55, .08), transparent 74%),
        linear-gradient(110deg, #111113 0%, #181416 58%, #410b12 100%);
}

.ed-event-carousel-head {
    display: flex;
    justify-content: space-between;
    gap: 36px;
    align-items: end;
    margin-bottom: 34px;
}

.ed-event-carousel-head h2 {
    margin: 0;
    color: #fff;
    font-family: var(--ed-serif);
    font-size: clamp(48px, 5.5vw, 76px);
    font-weight: 600;
    line-height: .92;
}

.ed-event-carousel-head h2 em {
    color: var(--ed-gold);
    font-weight: 600;
}

.ed-event-carousel-head-actions {
    display: flex;
    gap: 24px;
    align-items: center;
    padding-bottom: 8px;
}

.ed-event-carousel-controls {
    display: flex;
    gap: 8px;
}

.ed-event-carousel-controls button {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 20px;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.ed-event-carousel-controls button:hover,
.ed-event-carousel-controls button:focus-visible {
    border-color: rgba(255,255,255,.48);
    background: rgba(255,255,255,.13);
}

.ed-event-carousel-controls button:active { transform: scale(.96); }

/*
 * Le viewport reste large afin de laisser apparaître les événements voisins.
 * Les cartes ne sont plus un simple scroll horizontal : le JS leur attribue
 * un décalage circulaire et la carte active reste toujours au centre.
 */
.ed-event-carousel-viewport {
    position: relative;
    width: 100vw;
    margin-left: calc((100vw - 100%) / -2);
    overflow: hidden;
    padding: 14px 0 22px;
}

.ed-event-carousel-track {
    position: relative;
    width: 100%;
    height: clamp(480px, 48vw, 585px);
    overflow: visible;
    outline: none;
}

.ed-event-card {
    --carousel-offset: 0;
    --carousel-distance: 0;
    position: absolute;
    top: 18px;
    left: 50%;
    width: min(430px, 31vw);
    min-width: 300px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(8,8,9,.90);
    box-shadow: 0 18px 48px rgba(0,0,0,.24);
    opacity: 0;
    pointer-events: none;
    transform:
        translateX(calc(-50% + (var(--carousel-offset) * clamp(285px, 27vw, 410px))))
        translateY(calc(var(--carousel-distance) * 26px))
        scale(calc(1 - (var(--carousel-distance) * .13)));
    transform-origin: center center;
    transition:
        transform .72s cubic-bezier(.22,.75,.16,1),
        opacity .55s ease,
        filter .55s ease,
        box-shadow .55s ease;
    will-change: transform, opacity;
    z-index: calc(20 - var(--carousel-distance));
    filter: saturate(.74) brightness(.72);
}

.ed-event-card.is-visible {
    opacity: .55;
    pointer-events: auto;
}

.ed-event-card.is-near {
    opacity: .78;
    filter: saturate(.86) brightness(.84);
}

.ed-event-card.is-active {
    opacity: 1;
    pointer-events: auto;
    filter: none;
    box-shadow: 0 30px 72px rgba(0,0,0,.42);
}

.ed-event-card:not(.is-active) .ed-event-card-body {
    opacity: .84;
}

.ed-event-card-media {
    position: relative;
    display: grid;
    min-height: 260px;
    place-items: center;
    overflow: hidden;
    color: inherit;
    background:
        linear-gradient(135deg, rgba(255,255,255,.04), transparent 45%),
        repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.025) 22px 23px),
        #0d0d0f;
}

.ed-event-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}

.ed-event-card.is-active:hover .ed-event-card-media img { transform: scale(1.04); }

.ed-event-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 38%, rgba(5,5,6,.78));
    pointer-events: none;
}

.ed-event-card-date {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
}

.ed-event-card-date strong {
    font-family: var(--ed-serif);
    font-size: 88px;
    font-weight: 600;
    line-height: .8;
}

.ed-event-card-date em {
    margin-top: 12px;
    color: var(--ed-gold);
    font-family: var(--ed-serif);
    font-size: 22px;
    font-style: normal;
}

.ed-event-state {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;
    padding: 7px 10px;
    background: rgba(8,8,9,.82);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ed-event-state.is-upcoming { background: #a91721; }
.ed-event-state.is-past { color: #d9d2c6; }

.ed-event-card-body {
    padding: 24px;
    transition: opacity .45s ease;
}

.ed-event-card-meta {
    display: flex;
    gap: 10px 16px;
    flex-wrap: wrap;
    color: rgba(255,255,255,.50);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ed-event-card-body h3 {
    margin: 14px 0 8px;
    color: #fff;
    font-family: var(--ed-serif);
    font-size: 31px;
    font-weight: 600;
    line-height: 1;
}

.ed-event-card-body > p {
    margin: 0;
    color: rgba(255,255,255,.66);
    font-size: 12px;
    line-height: 1.6;
}

.ed-event-description {
    display: -webkit-box;
    margin-top: 10px !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.ed-event-result {
    display: inline-block;
    margin-top: 14px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.14);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ed-event-result.result-win { border-color: rgba(117, 197, 145, .4); color: #a8ddb9; }
.ed-event-result.result-loss { border-color: rgba(225, 111, 111, .35); color: #efa2a2; }

.ed-event-card-link {
    display: inline-flex;
    margin-top: 20px;
    color: var(--ed-gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ed-event-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    min-height: 18px;
    margin-top: 2px;
}

.ed-event-carousel-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    cursor: pointer;
    transition: width .25s ease, border-radius .25s ease, background .25s ease;
}

.ed-event-carousel-dots button.is-active {
    width: 28px;
    border-radius: 8px;
    background: var(--ed-gold);
}

@media (max-width: 980px) {
    .ed-event-carousel-track { height: 535px; }
    .ed-event-card {
        width: min(405px, 45vw);
        transform:
            translateX(calc(-50% + (var(--carousel-offset) * clamp(250px, 38vw, 355px))))
            translateY(calc(var(--carousel-distance) * 22px))
            scale(calc(1 - (var(--carousel-distance) * .15)));
    }
}

@media (max-width: 860px) {
    .ed-event-carousel-head { align-items: flex-start; flex-direction: column; }
    .ed-event-carousel-head-actions { width: 100%; justify-content: space-between; }
    .ed-event-carousel-track { height: 510px; }
    .ed-event-card { width: min(390px, 66vw); }
}

@media (max-width: 560px) {
    .ed-event-carousel-section { padding-left: 0; padding-right: 0; }
    .ed-event-carousel-section > .ed-container { width: min(100% - 32px, 1180px); }
    .ed-event-carousel-head-actions { align-items: flex-start; flex-direction: column; }
    .ed-event-carousel-viewport {
        width: 100vw;
        margin-left: calc((100vw - 100%) / -2);
    }
    .ed-event-carousel-track { height: 500px; }
    .ed-event-card {
        width: 84vw;
        min-width: 0;
        transform:
            translateX(calc(-50% + (var(--carousel-offset) * 76vw)))
            translateY(calc(var(--carousel-distance) * 16px))
            scale(calc(1 - (var(--carousel-distance) * .18)));
    }
    .ed-event-card.is-visible:not(.is-active) { opacity: .32; }
    .ed-event-card-media { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
    .ed-event-card,
    .ed-event-card-media img,
    .ed-event-carousel-dots button { transition: none; }
}