:root {
    --color-red: #D2232A;
}

.site-content {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 20px;
}

  .site-content {
    padding-top: 200px !important;
  }
  .events-hero-parallax {
    position: absolute;
    left: 50%;
    top: 185px;
    transform: translate(-50%, 0);
    padding: 0 15px;
    height: 150px;
    width: 100%;
    max-width: 800px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* По умолчанию выключаем фиксацию для мобилок */
    background-attachment: scroll;
}

@media (min-width: 1025px) {
    .events-hero-parallax {
        /* Включаем параллакс только для десктопов */
        background-attachment: fixed;
    }
}
@media (max-width: 991px){
    .events-hero-parallax {
    	top: 100px;
    }
    .site-content {
    	padding-top: 140px !important;
    }
}

.events-page-header { margin-bottom: 40px; }
.events-hero { 
    width: 100%; 
    max-height: 570px; 
    object-fit: cover; 
    object-position: center top;
    border-radius: 8px;
    margin-bottom: 50px; 
}

.event-item { 
    display: flex; 
    align-items: center; 
    gap: 30px; 
    margin-bottom: 40px; 
    text-decoration: none; 
    transition: transform 0.2s ease;
}
.event-item:hover,
.event-item.active { transform: translateX(10px); color: var(--color-red)}

.event-date-circle { 
    min-width: 90px; 
    height: 90px; 
    border-radius: 50%; 
    border: 2px solid var(--color-red); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    text-align: center; 
    color: var(--color-black);
    font-family: var(--font-main);
}
.event-item:hover .event-date-circle,
.event-item.active .event-date-circle { 
    background-color: var(--color-red); 
    color: #fff; 
}

.event-item:hover .event-title,
.event-item.active .event-title {
    color: var(--color-red);
}

.event-item:hover .event-excerpt,
.event-item.active .event-excerpt {
    color: var(--color-red);
}
.date-day { font-size: 24px; font-weight: 900; line-height: 1; }
.date-month { font-size: 14px; text-transform: uppercase; }

.event-info { flex: 1; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.event-title { font-size: 16px; color: var(--color-black); margin-bottom: 8px; }
.event-excerpt { color: var(--color-gray); font-size: 16px; line-height: 1.4; }

.past-events-divider {
    text-align: center;
    margin: 80px 0 50px;
    position: relative;
    border-bottom: 2px dashed #ccc;
}
.past-events-label {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 20px;
    color: #999;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}