/* ==========================================================
   1. ШАПКА (БАННЕР) — DESKTOP
   ========================================================== */
.background-1-article { width: 100%; background-color: #F9FED8; }

.event-title-photo {
    display: flex; position: relative; width: 100%; max-width: 1200px;
    height: 700px; margin: 0 auto; overflow: hidden;
}

.event-title-photo img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 1;
}

.event-title-content-box {
    display: flex; flex-direction: column; justify-content: flex-end;
    position: relative; width: 100%; height: 100%; z-index: 5;
    background: linear-gradient(to top, rgba(90, 6, 42, 0.9) 0%, rgba(90, 6, 42, 0.2) 100%);
    padding: 0 46px 40px 46px; box-sizing: border-box;
}

.event-video {
    float: left; /* Оставляем обтекание для десктопа */
    width: 720px;
    height: 405px;
    margin: 0 30px 20px 0;
    border-radius: 15px;
    background-color: black;
}

.event-title-text {
    width: 100%; max-width: 850px; color: #F9FED8; text-shadow: 2px 4px 10px rgba(0,0,0,0.5);
    font-family: 'Novelist', serif; font-size: 80px; text-transform: uppercase;
    line-height: 1.1; margin-bottom: 30px;
}

.event-title-address-date-field { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; }

.address, .time { display: flex; align-items: center; gap: 12px; color: #FFF; font-family: 'Gabriola', serif; font-size: 36px; }

.event-map-pin-icon, .event-clock-icon { width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.event-map-pin-icon { background-image: url(/dist/0d5a4aa860466cffa3fb.svg); }
.event-clock-icon { background-image: url(/dist/6833e57a43d0950e6025.svg); }

.event-title-torn-edge {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 60px;
    background: url(/dist/ba077a449d6cfc0c63c2.png) repeat-x bottom / contain; z-index: 10;
}

/* ==========================================================
   2. КОНТЕНТ И ФОТОАЛЬБОМ (DESKTOP)
   ========================================================== */
.event-title-text-field { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 10px; box-sizing: border-box;}
.event-title {text-align: right; color: #BB1023; font-family: "Playfair Display"; font-size: clamp(32px, 5vw, 64px); font-style: normal; font-weight: 900; line-height: normal; margin-bottom: 30px;}
.event-description {
    width: 100%; max-width: 1200px; height: auto; margin-bottom: 10px !important;
    color: #5A062A; font-family: Gabriola; font-size: 44px; line-height: 44px; text-align: justify;
}

.event-photo-field {
    display: flex; flex-direction: column; width: 100%; max-width: 1200px;
    margin: 10px auto 100px auto !important; padding: 0 40px; box-sizing: border-box; gap: 10px;
}

.event-photo-title {
    font-family: 'Novelist', serif; font-size: 48px; color: #5A062A; text-transform: uppercase;
    text-align: center; height: auto !important; line-height: 1 !important;
    padding: 10px 0 !important; margin: 0 !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
}

.event-photo-album {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    justify-content: center; gap: 20px; width: 100%; height: auto; align-items: start;
}

.photo-card, .first-photo-card { height: 250px; border-radius: 12px; overflow: hidden; transition: transform 0.3s ease; }
.photo-card img, .first-photo-card img { width: 100%; height: 100%; object-fit: cover; }



/* ==========================================================
   НАВИГАЦИЯ (DESKTOP)
   ========================================================== */
.event-transition-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 60px 40px;
    border-top: 2px solid #8D0B19;
}

/* Обертка для одного направления (Назад или Вперед) */
.event-transition-backward-forward-field {
    display: flex;
    width: 48%; /* Чтобы блоки не наезжали друг на друга */
}

/* МАГИЯ: Располагаем Текст и Кнопку в одну линию */
.transition-wrapper {
    display: flex;
    align-items: center; /* Центровка по вертикали */
    gap: 20px;
    width: 100%;
}

/* Для блока "Вперед" разворачиваем порядок, чтобы кнопка была справа */
.event-transition-backward-forward-field:last-child .transition-wrapper {
    justify-content: flex-end; /* Прижимаем к правому краю */
}

.event-transition-backward-title,
.event-transition-forward-title {
    font-family: 'Novelist', serif;
    font-size: 28px;
    color: #5A062A;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
}

.event-transition-backward-btn,
.event-transition-forward-btn {
    display: block !important;
    width: 48px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    flex-shrink: 0; /* Чтобы кнопка не сплющилась */
}

.event-transition-backward-btn { background-image: url(/dist/03ae0477f069e661049b.svg); }
.event-transition-forward-btn { background-image: url(/dist/7d208e6c06d4a0ea599f.svg); }

/* ==========================================================
   4. МОБИЛЬНАЯ ВЕРСИЯ (991.98px)
   ========================================================== */
@media (max-width: 991.98px) {
    .event-title-photo { height: 500px !important; display: block !important; position: relative !important; }
    .event-title-content-box {
        position: absolute !important; inset: 0 !important;
        background: rgba(90, 6, 42, 0.85) !important;
        padding: 20px !important; justify-content: center !important; align-items: center !important;
    }
    .event-title-text {font-size: 34px !important; line-height: 1 !important; text-align: center !important; margin: 0 0 20px 0 !important; }

    .event-title-address-date-field { flex-direction: column !important; align-items: center !important; gap: 5px !important; margin-top: 80px; }
    .address, .time {
        display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
        justify-content: center !important; align-items: center !important;
        font-size: 24px !important; line-height: 1.3 !important; gap: 10px !important; width: 100% !important; height: auto !important;
    }
    .event-map-pin-icon, .event-clock-icon { width: 30px !important; height: 30px !important; flex-shrink: 0 !important; position: static !important; }

    .event-title-torn-edge { height: 40px !important; background-size: contain !important; }
    .event-description {font-size: 24px !important; line-height: 1.3 !important; margin-bottom: 5px !important; }

    /* АДАПТАЦИЯ ВИДЕО: ТОЛЬКО ШИРИНА */
    .event-video {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        float: none !important;
        margin: 0 auto 20px auto !important;
    }

    .event-photo-field { padding: 0 20px !important; margin: 0 auto !important; gap: 5px !important; }
    .event-photo-title { font-size: 28px !important; padding: 5px 0 !important; }
    .event-photo-album { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-top: 10px !important; height: auto !important; }
    .photo-card, .first-photo-card { height: 130px !important; width: 100% !important; }

    .modal-nav-btn {
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        line-height: 1 !important;
        font-size: 30px !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border-radius: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .prev-btn { left: 10px !important; }
    .next-btn { right: 10px !important; }

    .modal-image {
        max-width: 90vw !important;
        max-height: 70vh !important;
    }

    .event-transition-field {
        flex-direction: column !important; gap: 40px !important;
        padding: 40px 20px !important; align-items: center !important;
        margin-top: 60px !important;
    }
    .event-transition-backward-forward-field { width: 100% !important; align-items: center !important; height: auto !important; }
    .event-transition-backward-title, .event-transition-forward-title { text-align: center !important; width: 100% !important; font-size: 20px !important; }
    .event-transition-forward-btn { align-self: center !important; }
}

/* МОДАЛКА */
.event-modal-window { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); z-index: 1000; display: none; align-items: center; justify-content: center; }
.event-modal-window:target { display: flex; }
.event-modal-window img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.event-modal-close { position: absolute; top: 15px; right: 20px; color: #FFF; font-size: 45px; text-decoration: none; }

.modal-content-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.modal-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 80px;
    text-decoration: none;
    padding: 20px;
    z-index: 1010;
    font-family: serif;
    transition: color 0.3s, transform 0.2s;
    user-select: none;
}

.modal-nav-btn:hover {
    color: #FFF;
    transform: translateY(-50%) scale(1.2);
}

.prev-btn { left: 20px; }
.next-btn { right: 20px; }
.modal-image {
    max-width: 85vw;
    max-height: 85vh;
    object-fit: contain;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}