/*==========================================================
    EVENTS & NEWS HERO
    فقط از متغیرهای variables.css / responsive.css استفاده می‌کند
    Breakpoint ها: 992 / 768 / 576
==========================================================*/

.events-hero{

    padding-top:calc(var(--header-height) + var(--space-md));

    padding-bottom:var(--section-space);

    background:var(--surface);

}


/*==========================================================
    Stage
==========================================================*/

.events-hero__stage{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    min-height:clamp(460px,68vh,620px);

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

    background:var(--primary-darker);

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

}

.events-hero__slides{

    position:absolute;

    inset:0;

}


/*==========================================================
    Slide  (crossfade)
==========================================================*/

.ev-slide{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:

        opacity .7s ease,

        visibility 0s linear .7s;

}

.ev-slide.is-active{

    opacity:1;

    visibility:visible;

    transition-delay:0s;

}

.ev-slide__img{

    position:absolute;

    inset:0;

    z-index:-2;

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.06);

    transition:transform 8s ease-out;

}

.ev-slide.is-active .ev-slide__img{

    transform:scale(1);

}

/* گرادیانت از سمت متن (شروع) به سمت تصویر */
.ev-slide::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    background:

        linear-gradient(

            to right,

            rgba(var(--primary-darker-rgb),.94) 0%,

            rgba(var(--primary-darker-rgb),.78) 38%,

            rgba(var(--primary-darker-rgb),.15) 80%,

            transparent 100%

        );

}

[dir="rtl"] .ev-slide::before{

    background:

        linear-gradient(

            to left,

            rgba(var(--primary-darker-rgb),.94) 0%,

            rgba(var(--primary-darker-rgb),.78) 38%,

            rgba(var(--primary-darker-rgb),.15) 80%,

            transparent 100%

        );

}


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

.ev-slide__content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    width:min(100%,560px);

    padding-inline:clamp(24px,5vw,72px);

    padding-block-end:calc(var(--button-height) + var(--space-md));

    color:var(--text-inverse);

}

/* تنها لحظه‌ی حرکت: ورود متن اسلاید فعال */
.ev-slide.is-active .ev-slide__content > *{

    animation:evRise .7s cubic-bezier(.2,.7,.2,1) both;

}

.ev-slide.is-active .ev-slide__content > :nth-child(2){ animation-delay:.08s; }
.ev-slide.is-active .ev-slide__content > :nth-child(3){ animation-delay:.16s; }
.ev-slide.is-active .ev-slide__content > :nth-child(4){ animation-delay:.22s; }
.ev-slide.is-active .ev-slide__content > :nth-child(5){ animation-delay:.28s; }

@keyframes evRise{

    from{ opacity:0; transform:translateY(18px); }

    to{ opacity:1; transform:none; }

}

.ev-tag{

    display:inline-flex;

    align-items:center;

    height:32px;

    padding-inline:16px;

    margin-bottom:var(--space-sm);

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

    background:rgba(var(--secondary-rgb),.2);

    border:1px solid rgba(var(--secondary-rgb),.55);

    color:var(--text-inverse);

    font-family:var(--font-body);

    font-size:var(--font-size-tag);

    font-weight:var(--heading-weight);

}

.ev-title{

    margin:0 0 var(--space-xs);

    color:rgb(var(--white-rgb));

    font-family:var(--font-heading);

    font-size:var(--hero-title-size-s);

    font-weight:var(--title-weight);

    line-height:1.45;

}

.ev-desc{

    margin:0 0 var(--space-xs);

    max-width:46ch;

    color:var(--text-inverse-muted);

    font-family:var(--font-body);

    font-size:var(--hero-desc-size*1.5);

    font-weight:var(--body-weight);

    line-height:1.9;

}

.ev-slide__date{

    margin:0 0 var(--space-md);

    color:var(--primary-light);

    font-family:var(--font-body);

    font-size:var(--hero-desc-size*1.5);

    font-weight:var(--heading-weight);

}


/*==========================================================
    Button on dark background
    (.btn-primary روی زمینه‌ی تیره دیده نمی‌شود)
==========================================================*/

.events-hero .btn{

    margin-top:0;

    height:var(--button-height);

    padding-inline:30px;

    align-items:center;

    font-family:var(--font-body);

    font-size:var(--btn-font-size);

}

.btn-light{

    background:rgb(var(--white-rgb));

    color:var(--primary);

    border:1px solid rgb(var(--white-rgb));

}

.btn-light:hover{

    transform:translateY(-4px);

    background:var(--surface-alt);

    box-shadow:0 20px 40px rgba(var(--black-rgb),.25);

}

.btn-light:hover::before{

    left:150%;

}

.btn-light:focus-visible{

    outline:none;

    box-shadow:0 0 0 4px rgba(var(--secondary-rgb),.55);

}

/* آیکن جهت‌دار دکمه */
[dir="rtl"] .btn-light svg{

    transform:scaleX(-1);

}


/*==========================================================
    Controls
==========================================================*/

.events-hero__controls{

    position:absolute;

    inset-inline:0;

    bottom:0;

    z-index:var(--z-decoration);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--space-sm);

    padding:var(--space-sm) clamp(24px,5vw,72px);

}

/* Dots + progress */
.ev-dots{

    display:flex;

    align-items:center;

    gap:10px;

}

.ev-dot{

    position:relative;

    overflow:hidden;

    width:12px;

    height:12px;

    padding:0;

    border:0;

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

    background:rgba(var(--white-rgb),.35);

    cursor:pointer;

    transition:width .4s ease, background var(--transition);

}

.ev-dot:hover{

    background:rgba(var(--white-rgb),.6);

}

.ev-dot.is-active{

    width:48px;

    background:rgba(var(--white-rgb),.3);

}

.ev-dot__fill{

    position:absolute;

    inset:0;

    background:var(--primary-light);

    transform:scaleX(0);

    transform-origin:left center;

}

[dir="rtl"] .ev-dot__fill{

    transform-origin:right center;

}

.ev-dot.is-active .ev-dot__fill{

    animation:evFill var(--ev-interval,7000ms) linear forwards;

}

.events-hero.is-paused .ev-dot.is-active .ev-dot__fill{

    animation-play-state:paused;

}

.events-hero.no-autoplay .ev-dot.is-active .ev-dot__fill{

    animation:none;

    transform:scaleX(1);

}

@keyframes evFill{

    to{ transform:scaleX(1); }

}

.ev-dot:focus-visible,
.ev-arrow:focus-visible{

    outline:none;

    box-shadow:0 0 0 4px rgba(var(--secondary-rgb),.55);

}

/* Arrows */
.ev-arrows{

    display:flex;

    gap:12px;

}

.ev-arrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    padding:0;

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

    border:1px solid rgba(var(--white-rgb),.45);

    background:rgba(var(--white-rgb),.12);

    -webkit-backdrop-filter:blur(var(--blur-sm));

    backdrop-filter:blur(var(--blur-sm));

    color:rgb(var(--white-rgb));

    cursor:pointer;

    transition:

        background var(--transition),

        color var(--transition),

        transform var(--transition);

}

.ev-arrow:hover{

    background:rgb(var(--white-rgb));

    color:var(--primary);

    transform:translateY(-3px);

}

.ev-arrow svg{

    width:22px;

    height:22px;

}

/* جهت فلش‌ها: «بعدی» به سمت انتهای خط، «قبلی» به سمت ابتدای خط */
.ev-arrow--prev svg{ transform:scaleX(-1); }

[dir="rtl"] .ev-arrow--prev svg{ transform:none; }

[dir="rtl"] .ev-arrow--next svg{ transform:scaleX(-1); }


/*==========================================================
    Responsive
==========================================================*/

@media (max-width:992px){

    .events-hero__stage{ min-height:520px; }

    .ev-slide::before,
    [dir="rtl"] .ev-slide::before{

        background:

            linear-gradient(

                to top,

                rgba(var(--primary-darker-rgb),.95) 0%,

                rgba(var(--primary-darker-rgb),.8) 55%,

                rgba(var(--primary-darker-rgb),.3) 100%

            );

    }

    .ev-slide{ align-items:flex-end; }

    .ev-slide__content{ width:100%; }

}

@media (max-width:576px){

    .events-hero__stage{

        min-height:580px;

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

    }

    .ev-arrow{ width:46px; height:46px; }

    .ev-dot.is-active{ width:34px; }

}


/*==========================================================
    Reduced motion
==========================================================*/

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

    .ev-slide,
    .ev-slide__img{ transition:none; }

    .ev-slide.is-active .ev-slide__content > *{ animation:none; }

    .ev-slide__img{ transform:none; }

}