/* ---------------------------------------------------------------------------
   MateHill · расписание ивентов
   Подключается последним, после matehill.css / fixes.css / production.css.
   --------------------------------------------------------------------------- */

@media only screen and (min-width:768px) {
    .event ul {
        row-gap:30px;
    }

    .event li {
        flex:0 0 calc((100% - 30px) / 3);
        max-width:calc((100% - 30px) / 3);
    }
}

/* На телефоне сохраняем компактную сетку 3 × N вместо старой одной колонки. */
@media only screen and (max-width:767px) {
    .event ul {
        flex-direction:row;
        flex-wrap:wrap;
        gap:8px;
        margin-bottom:10px;
    }

    .event li {
        flex:0 0 calc((100% - 16px) / 3);
        max-width:calc((100% - 16px) / 3);
    }

    .event_flag {
        padding:6px 0;
        font-size:9px;
        letter-spacing:.5px;
    }
}

/* matehill.css сбрасывает margin у dialog, поэтому без явного margin:auto
   модалка прилипает к левому верхнему углу. */
.event-dialog {
    position:fixed;
    inset:0;
    margin:auto;
    width:fit-content;
    height:fit-content;
    max-width:calc(100vw - 24px);
    max-height:calc(100dvh - 24px);
    overflow:visible;
}

.event-dialog img {
    display:block;
    width:auto;
    height:auto;
    max-width:min(92vw, 1000px);
    max-height:88dvh;
    object-fit:contain;
}

.event-dialog button {
    position:absolute;
    top:8px;
    right:8px;
    z-index:2;
    margin:0;
}

/* Плашки лежат в разметке у каждого постера всегда — так их подхватывает
   переводчик i18n, в том числе при смене языка на лету. Показывает их CSS,
   ориентируясь на состояние, которое проставил скрипт. */
.event_flag {
    display:none;
}

.event a[data-state="ended"] .event_flag--ended,
.event li.off .event_flag--ended,
.main_event .list a[data-state="ended"] .event_flag--ended,
.main_event .list li.off .event_flag--ended {
    display:block;
}

.event a[data-state="upcoming"] .event_flag--soon,
.main_event .list a[data-state="upcoming"] .event_flag--soon {
    display:block;
}

.event_flag--soon {
    background:
        repeating-linear-gradient(135deg, #1b7a4b 0 9px, #fff 9px 18px) top/100% 5px no-repeat,
        repeating-linear-gradient(135deg, #1b7a4b 0 9px, #fff 9px 18px) bottom/100% 5px no-repeat,
        #fff;
}

.event a[data-state="ended"],
.main_event .list a[data-state="ended"] {
    cursor:default;
}