/* =========================================================
   EVENTS - GREEN SCIENTIFIC THEME
   ========================================================= */

:root {
    --event-green: #059669;
    --event-green-dark: #047857;
    --event-green-deep: #065f46;
    --event-green-light: #10b981;
    --event-green-soft: #ecfdf5;

    --event-text: #0f172a;
    --event-muted: #64748b;
    --event-border: #d1fae5;

    --event-radius: 20px;

    --event-shadow:
        0 15px 45px rgba(5, 150, 105, .10);
}


/* =========================================================
   MAIN EVENT SECTIONS
   ========================================================= */

.event-learn-more-section,
.event-detail-section {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(16, 185, 129, .10),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(5, 150, 105, .08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f0fdf4 0%,
            #f8fafc 50%,
            #ecfdf5 100%
        );
}


/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */

.event-learn-more-section::before,
.event-detail-section::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    top: -150px;
    right: -100px;

    border-radius: 50%;

    border: 1px solid rgba(5, 150, 105, .10);

    animation:
        eventFloat 8s ease-in-out infinite;
}

.event-learn-more-section::after,
.event-detail-section::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    bottom: -100px;
    left: -70px;

    border-radius: 50%;

    border: 1px solid rgba(16, 185, 129, .10);

    animation:
        eventFloatReverse 10s ease-in-out infinite;
}


/* =========================================================
   BACK TO EVENTS BUTTON
   ========================================================= */

.event-back-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 11px 21px;

    border-radius: 50px;

    color: #fff !important;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: .2px;

    text-decoration: none;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #047857,
            #059669,
            #10b981,
            #047857
        );

    background-size: 300% 300%;

    box-shadow:
        0 8px 22px rgba(5, 150, 105, .28);

    animation:
        backButtonGradient 5s ease infinite,
        backButtonGlow 3s ease-in-out infinite;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.register-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;

    gap: 10px;

    padding: 11px 21px;

    border-radius: 50px;

    color: #fff !important;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: .2px;

    text-decoration: none;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            rgb(177 134 37),
            rgb(209 157 39),
            rgb(140 114 57),
            rgb(175 153 99)
        );

    background-size: 300% 300%;

    box-shadow:
        0 8px 22px rgb(186 155 83);

    animation:
        backButtonGradient 5s ease infinite,
        backButtonGlow 3s ease-in-out infinite;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* Lumière */

.event-back-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent
        );

    transform: skewX(-20deg);

    animation:
        backButtonShine 4s ease-in-out infinite;
}


/* Contour */

.event-back-btn::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    border: 1px solid rgba(255, 255, 255, .25);

    pointer-events: none;
}


/* Texte + icône */

.event-back-btn i {
    position: relative;

    z-index: 2;

    font-size: 18px;

    transition:
        transform .35s ease;
}

.event-back-btn {
    z-index: 1;
}


/* Hover */

.event-back-btn:hover {
    color: #fff !important;

    transform: translateY(-3px);

    box-shadow:
        0 14px 32px rgba(5, 150, 105, .40);
}

.register-btn:hover {
    color: #fff !important;

    transform: translateY(-3px);

    box-shadow:
        0 14px 32px rgba(5, 150, 105, .40);
}

.event-back-btn:hover i {
    transform: translateX(-5px);
}


/* =========================================================
   EVENT LABEL
   ========================================================= */

.event-label {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 8px 16px;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .3px;

    color: var(--event-green-dark);

    background:
        linear-gradient(
            135deg,
            #d1fae5,
            #ecfdf5
        );

    border: 1px solid rgba(5, 150, 105, .15);

    box-shadow:
        0 5px 15px rgba(5, 150, 105, .08);

    animation:
        labelPulse 3s ease-in-out infinite;
}

.event-label i {
    font-size: 16px;
}


/* =========================================================
   IMAGE PLACEHOLDER
   ========================================================= */

.event-image-placeholder {
    position: relative;

    min-height: 400px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #d1fae5,
            #ecfdf5
        );

    color: var(--event-green);

    font-size: 65px;

    border-radius: var(--event-radius);

    animation:
        placeholderGlow 4s ease-in-out infinite;
}


/* Cercle animé */

.event-image-placeholder::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border: 2px solid rgba(5, 150, 105, .15);

    border-radius: 50%;

    animation:
        rotateCircle 12s linear infinite;
}


/* Icône */

.event-image-placeholder i {
    position: relative;

    z-index: 2;

    animation:
        iconFloat 3s ease-in-out infinite;
}


/* =========================================================
   LEARN MORE / DESCRIPTION CONTENT
   ========================================================= */

.event-content,
.event-description {
    position: relative;

    background: rgba(255, 255, 255, .94);

    padding: 38px;

    border-radius: var(--event-radius);

    line-height: 1.8;

    border: 1px solid rgba(5, 150, 105, .08);

    box-shadow: var(--event-shadow);

    backdrop-filter: blur(10px);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.event-content:hover,
.event-description:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 55px rgba(5, 150, 105, .14);
}

.event-content h2,
.event-description h2 {
    color: var(--event-green-deep);

    font-weight: 700;
}


/* =========================================================
   EVENT DETAIL CARD
   ========================================================= */

.event-detail-card {
    position: relative;

    overflow: hidden;

    background: rgba(255, 255, 255, .96);

    border-radius: 24px;

    border: 1px solid rgba(5, 150, 105, .10);

    box-shadow:
        0 20px 60px rgba(5, 150, 105, .12);

    transition:
        transform .5s ease,
        box-shadow .5s ease;

    animation:
        cardEntrance .8s ease both;
}

.event-detail-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 30px 75px rgba(5, 150, 105, .18);
}


/* =========================================================
   DETAIL IMAGE
   ========================================================= */

.event-detail-image {
    width: 100%;
    height: 100%;

    min-height: 450px;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2, .8, .2, 1),
        filter .5s ease;
}

.event-detail-card:hover .event-detail-image {
    transform: scale(1.04);

    filter: saturate(1.08);
}


/* =========================================================
   DETAIL CONTENT
   ========================================================= */

.event-detail-content {
    position: relative;

    padding: 45px;
}

.event-detail-content h1 {
    color: var(--event-text);

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -.5px;
}

.event-detail-content .lead {
    color: var(--event-muted);

    line-height: 1.7;
}


/* =========================================================
   EVENT INFORMATION
   ========================================================= */

.event-information {
    display: flex;

    flex-direction: column;

    gap: 14px;
}

.detail-item {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 13px 15px;

    border-radius: 12px;

    background: #f0fdf4;

    border: 1px solid transparent;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.detail-item:hover {
    transform: translateX(7px);

    background: #ecfdf5;

    border-color:
        rgba(5, 150, 105, .15);
}


/* Icon */

.detail-item > i {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--event-green),
            var(--event-green-dark)
        );

    font-size: 21px;

    box-shadow:
        0 6px 15px rgba(5, 150, 105, .20);

    transition:
        transform .3s ease;
}

.detail-item:hover > i {
    transform:
        rotate(-8deg)
        scale(1.08);
}

.detail-item small {
    display: block;

    color: var(--event-muted);

    font-size: 12px;

    margin-bottom: 3px;
}

.detail-item strong {
    display: block;

    color: var(--event-text);

    font-weight: 600;
}


/* =========================================================
   MAIN EVENT BUTTON
   ========================================================= */

.btn-event {
    position: relative;

    overflow: hidden;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 12px 23px;

    border: 0;

    border-radius: 10px;

    color: #fff !important;

    font-weight: 700;

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            var(--event-green-light),
            var(--event-green-dark)
        );

    box-shadow:
        0 8px 20px rgba(5, 150, 105, .25);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;
}


/* Shine */

.btn-event::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .35),
            transparent
        );

    transform: skewX(-20deg);

    animation:
        buttonShine 4s ease-in-out infinite;
}


/* Hover */

.btn-event:hover {
    color: #fff !important;

    transform: translateY(-3px);

    filter: brightness(1.08);

    box-shadow:
        0 13px 30px rgba(5, 150, 105, .35);
}


/* Arrow */

.btn-event i {
    transition:
        transform .3s ease;
}

.btn-event:hover i {
    transform:
        translateX(5px);
}


/* =========================================================
   EVENT SIDEBAR
   ========================================================= */

.event-sidebar {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f0fdf4
        );

    padding: 30px;

    border-radius: var(--event-radius);

    border: 1px solid rgba(5, 150, 105, .10);

    box-shadow:
        0 15px 40px rgba(5, 150, 105, .09);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.event-sidebar:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 50px rgba(5, 150, 105, .15);
}


/* Decorative circle */

.event-sidebar::before {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -45px;
    top: -45px;

    border-radius: 50%;

    background:
        rgba(16, 185, 129, .08);

    animation:
        sidebarOrb 6s ease-in-out infinite;
}

.event-sidebar h4 {
    position: relative;

    color: var(--event-green-deep);

    font-weight: 700;
}


/* =========================================================
   SIDEBAR ITEMS
   ========================================================= */

.sidebar-item {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 15px 0;

    border-bottom:
        1px solid #d1fae5;

    transition:
        padding .3s ease;
}

.sidebar-item:hover {
    padding-left: 6px;

    padding-right: 6px;
}

.sidebar-item:last-child {
    border-bottom: 0;
}

.sidebar-item span {
    color: var(--event-muted);

    font-size: 14px;
}

.sidebar-item strong {
    color: var(--event-green-dark);

    text-align: right;

    font-weight: 700;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes eventFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-25px, 20px);
    }

}


@keyframes eventFloatReverse {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(25px, -20px);
    }

}


@keyframes labelPulse {

    0%,
    100% {
        box-shadow:
            0 5px 15px rgba(5, 150, 105, .08);
    }

    50% {
        box-shadow:
            0 8px 25px rgba(5, 150, 105, .18);
    }

}


@keyframes placeholderGlow {

    0%,
    100% {
        box-shadow:
            inset 0 0 0 rgba(5, 150, 105, 0);
    }

    50% {
        box-shadow:
            inset 0 0 70px rgba(5, 150, 105, .08);
    }

}


@keyframes rotateCircle {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}


@keyframes cardEntrance {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes buttonShine {

    0% {
        left: -120%;
    }

    35% {
        left: 150%;
    }

    100% {
        left: 150%;
    }

}


/* =========================================================
   BACK BUTTON ANIMATIONS
   ========================================================= */

@keyframes backButtonGradient {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


@keyframes backButtonShine {

    0% {
        left: -120%;
    }

    35% {
        left: 150%;
    }

    100% {
        left: 150%;
    }

}


@keyframes backButtonGlow {

    0%,
    100% {
        box-shadow:
            0 8px 22px rgba(5, 150, 105, .22);
    }

    50% {
        box-shadow:
            0 10px 30px rgba(16, 185, 129, .42);
    }

}


@keyframes sidebarOrb {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }

}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 991px) {

    .event-detail-content {
        padding: 30px;
    }

    .event-detail-image {
        min-height: 320px;
    }

    .event-content,
    .event-description {
        padding: 28px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .event-detail-content {
        padding: 24px;
    }

    .event-content,
    .event-description,
    .event-sidebar {
        padding: 22px;
    }

    .event-detail-image {
        min-height: 250px;
    }

    .detail-item {
        align-items: flex-start;
    }

    .sidebar-item {
        flex-direction: column;

        align-items: flex-start;

        gap: 5px;
    }

    .sidebar-item strong {
        text-align: left;
    }

    .event-back-btn {
        padding: 10px 17px;

        font-size: 13px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .event-learn-more-section::before,
    .event-detail-section::before,
    .event-learn-more-section::after,
    .event-detail-section::after,
    .event-label,
    .event-image-placeholder,
    .event-image-placeholder::before,
    .event-image-placeholder i,
    .event-detail-card,
    .btn-event::before,
    .event-back-btn,
    .event-back-btn::before,
    .event-sidebar::before {
        animation: none;
    }

    .event-detail-image,
    .event-content,
    .event-description,
    .event-sidebar,
    .detail-item,
    .btn-event,
    .event-back-btn {
        transition: none;
    }

}