/* Заголовок остаётся главным визуальным уровнем карточки */
#elems-list .elem h3 {
    color: var(--quick-tickets-color-text);
    font-weight: 600;
    line-height: 1.35;
}

/* Название и расположенные рядом с ним маркеры имеют общий вертикальный центр во всех афишах */
#elems-list .quick-tickets-event-card h3 > .quick-tickets-heading-link > .underline {
    vertical-align: middle;
}

.quick-tickets-progressive-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 15px 0;
    clear: both;
}

.quick-tickets-progressive-list--hidden {
    display: none;
}

.quick-tickets-progressive-list__navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.quick-tickets-progressive-list__button,
.quick-tickets-progressive-list__previous {
    min-width: 180px;
}

.quick-tickets-progressive-list--loading .quick-tickets-progressive-list__button {
    pointer-events: none;
    opacity: 0.65;
}

.quick-tickets-progressive-list__status:not(.sr-only) {
    color: #777;
    text-align: center;
}

/* Название организации сохраняет компактный вертикальный ритм её основной карточки */
#elems-list.organisation.type_1 .elem .r:empty + h3 {
    min-height: 0;
    margin-bottom: 5px;
}

/* Вторичная информация карточки отображается спокойнее основного названия */
#elems-list .elem .b {
    color: var(--quick-tickets-color-text-muted);
    font-size: 15px;
    line-height: 1.45;
}

/* Карточка организации разделяет изображение и связанные текстовые данные двумя независимыми колонками */
#elems-list.organisation.type_1 > .elem > .elem__body {
    display: grid;
    grid-template-columns: minmax(100px, 150px) minmax(0, 1fr);
    column-gap: 14px;
}

#elems-list.organisation.type_1 > .elem > .elem__body > .i {
    grid-column: 1;
}

#elems-list.organisation.type_1 > .elem > .elem__body > .i > a {
    display: block;
}

#elems-list.organisation.type_1 > .elem > .elem__body > .organisation-card__content {
    grid-column: 2;
    min-width: 0;
}

/* Метрики билетного шрифта требуют небольшой оптической коррекции относительно текста */
#organisation #elems-list .elem .b > a > .qtf {
    transform: translateY(1px);
}

/* Список сеансов абонемента начинается после описания с общим системным интервалом */
#organisation #elems-list .elem .sessions.sessions-near {
    margin-top: var(--quick-tickets-space-2);
}

/* Действия карточек образуют единую компактную группу отдельно от отзывов */
#elems-list.type_1 .elem .footer .content-card__actions {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--quick-tickets-space-2);
    min-width: 0;
    margin-left: auto;
    padding: var(--quick-tickets-space-2) 10px;
}

/* Светлая кнопка сохраняет заметность действия без тяжёлой цветной плашки */
#elems-list.type_1 .elem .footer .content-card__action {
    order: initial;
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 38px;
    margin-left: 0;
    padding: 8px 14px;
    border: 1px solid var(--quick-tickets-color-brand);
    border-radius: var(--quick-tickets-radius-small);
    background: var(--quick-tickets-color-surface);
    color: var(--quick-tickets-color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: normal;
}

#elems-list.type_1 .elem .footer .content-card__action:hover,
#elems-list.type_1 .elem .footer .content-card__action:focus {
    border-color: var(--quick-tickets-color-brand-hover);
    background: #fff7f2;
    color: var(--quick-tickets-color-text);
    text-decoration: none;
}

#elems-list.type_1 .elem .footer .content-card__action:focus {
    outline: 2px solid rgba(243, 115, 52, 0.35);
    outline-offset: 1px;
}

#elems-list.type_1 .elem .footer .content-card__action:active,
#elems-list.type_1 .elem .footer .content-card__action.active {
    border-color: var(--quick-tickets-color-brand-active);
    background: #ffede4;
    color: var(--quick-tickets-color-text);
    outline: none;
}

/* Вторичное действие получает нейтральный контур и не спорит с покупкой билетов */
#elems-list.type_1 .elem .footer .content-card__action--secondary {
    border-color: #ccc;
    color: #333;
}

#elems-list.type_1 .elem .footer .content-card__action--secondary:hover {
    border-color: var(--quick-tickets-color-brand-hover);
    background: #fff7f2;
    color: #333;
}

#elems-list.type_1 .elem .footer .content-card__action--secondary:focus {
    border-color: var(--quick-tickets-color-brand);
    background: var(--quick-tickets-color-surface);
    color: #333;
}

#elems-list.type_1 .elem .footer .content-card__action--secondary:active,
#elems-list.type_1 .elem .footer .content-card__action--secondary.active {
    border-color: #adadad;
    background: #e6e6e6;
    color: #333;
}

/* Кнопка отзывов целиком ведёт в раздел вместе со счётчиками */
#elems-list.type_1 .elem .footer .content-card__reviews-button {
    align-items: stretch;
    padding: 0;
}

.content-card__reviews-button-label {
    display: flex;
    align-items: center;
    padding: 6px 3px 6px 12px;
}

.content-card__review-counts {
    display: flex;
    align-items: center;
    padding-right: 7px;
}

.content-card__review-count {
    display: flex;
    align-items: center;
    gap: var(--quick-tickets-space-1);
    padding: 3px 0 3px 5px;
    font-size: 18px;
}

.content-card__review-count--positive {
    color: #179347;
    font-weight: bold;
}

.content-card__review-count--negative {
    color: var(--quick-tickets-color-text-muted, #6f6f6f);
    font-size: 14px;
}

/* Поясняющие метки абонемента сохраняют компактную группу внутри доступной ширины */
#organisation #elems-list .quick-tickets-seasonticket-card__markers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--quick-tickets-space-1);
    min-width: 0;
    margin-bottom: var(--quick-tickets-space-1);
}

#organisation #elems-list .quick-tickets-seasonticket-card__markers > a,
#organisation #elems-list .quick-tickets-seasonticket-card__markers .marker {
    min-width: 0;
    max-width: 100%;
}

@media (min-width: 768px) {
    /* Текстовая колонка сохраняет ровно десять пикселей между нижней границей заголовка или рейтинга и описанием */
    #elems-list.organisation.type_1 > .elem > .elem__body > .organisation-card__content > .c > h3,
    #elems-list.organisation.type_1 > .elem > .elem__body > .organisation-card__content > .c > .r:empty + h3 {
        margin-bottom: 0;
    }

    #elems-list.organisation.type_1 > .elem > .elem__body > .organisation-card__content > .organisation-card__description {
        margin-top: 10px;
    }

    /* У длинной афиши постер и краткая сводка остаются видимыми до конца своей карточки */
    #organisation #elems-list > .quick-tickets-event-card--long-schedule > .i,
    #organisation #elems-list > .quick-tickets-event-card--long-schedule > .quick-tickets-event-card__content > .quick-tickets-event-card__summary,
    #organisation #elems-list > .quick-tickets-seasonticket-card--long-schedule > .i,
    #organisation #elems-list > .quick-tickets-seasonticket-card--long-schedule > .quick-tickets-seasonticket-card__content > .quick-tickets-seasonticket-card__summary,
    #elems-list.afisha.type_1 > .quick-tickets-event-card--long-schedule > .elem__body > .i,
    #elems-list.afisha.type_1 > .quick-tickets-event-card--long-schedule > .elem__body > .c > .event-card__summary {
        position: sticky;
        top: var(--quick-tickets-space-3);
        z-index: 1;
        align-self: start;
    }

    /* Непрозрачный фон сводки абонемента сохраняет читаемость поверх прокручиваемого расписания */
    #organisation #elems-list > .quick-tickets-seasonticket-card--long-schedule > .quick-tickets-seasonticket-card__content > .quick-tickets-seasonticket-card__summary {
        padding: 5px;
        background: var(--quick-tickets-color-surface);
    }

    /* Закреп мероприятия повторяет общий фон страницы без отдельной белой плашки */
    #organisation #elems-list > .quick-tickets-event-card--long-schedule > .quick-tickets-event-card__content > .quick-tickets-event-card__summary {
        padding: 5px;
        background: rgba(250, 247, 243, 0.95);
    }

    /* Закреп городской афиши сохраняет фон карточки поверх прокручиваемого расписания */
    #elems-list.afisha.type_1 > .quick-tickets-event-card--long-schedule > .elem__body > .c > .event-card__summary {
        padding: 5px;
        background: var(--quick-tickets-color-surface);
    }

    /* Единственный заголовок закрепа не добавляет отступ поверх заданных пяти пикселей */
    #organisation #elems-list > .quick-tickets-event-card--long-schedule > .quick-tickets-event-card__content > .quick-tickets-event-card__summary > h3,
    #elems-list.afisha.type_1 > .quick-tickets-event-card--long-schedule > .elem__body > .c > .event-card__summary > h3 {
        margin-bottom: 0;
    }
}

@media (max-width: 767.999px) {
    /* Карточки сохраняют читаемую ширину изображения и текста после включения device-width */
    #elems-list.type_1 > .elem > .elem__body,
    #organisation #elems-list > .elem {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 12px;
    }

    #elems-list.type_1 > .elem > .elem__body {
        display: grid;
    }

    #elems-list.type_1 > .elem > .elem__body > .i,
    #organisation #elems-list > .elem > .i {
        width: 120px;
        min-width: 0;
        max-width: 120px;
    }

    /* Мобильная карточка оставляет изображение и сводку в верхней строке, а описание переносит ниже */
    #elems-list.organisation.type_1 > .elem > .elem__body {
        grid-template-areas:
            "image summary"
            "description description";
        grid-template-columns: var(--quick-tickets-mobile-organisation-media-width) minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 12px;
    }

    #elems-list.organisation.type_1 > .elem > .elem__body > .i,
    #elems-list.organisation.type_1 > .elem > .elem__body > .organisation-card__content {
        display: contents;
    }

    #elems-list.organisation.type_1 > .elem > .elem__body > .i > a {
        grid-area: image;
        align-self: start;
        width: var(--quick-tickets-mobile-organisation-media-width);
        max-width: var(--quick-tickets-mobile-organisation-media-width);
        justify-self: start;
    }

    #elems-list .elem .r {
        float: none;
    }

    #elems-list .elem .r + h3 {
        margin-right: 0;
    }

    /* Мобильная карточка организации выводит рейтинг непосредственно после названия */
    #elems-list.organisation.type_1 > .elem > .elem__body > .organisation-card__content > .c {
        grid-area: summary;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #elems-list.organisation.type_1 > .elem > .elem__body > .organisation-card__content > .c > h3 {
        order: 1;
        align-self: stretch;
    }

    #elems-list.organisation.type_1 > .elem > .elem__body > .organisation-card__content > .c > .r {
        order: 2;
        margin-bottom: var(--quick-tickets-space-1);
    }

    #elems-list.organisation.type_1 > .elem > .elem__body > .organisation-card__content > .c > .clear {
        display: none;
    }

    #elems-list.organisation.type_1 > .elem > .elem__body > .organisation-card__content > .organisation-card__description {
        grid-area: description;
        margin-top: 0;
    }

    /* Мобильная афиша начинает описание под сводкой и продолжает его под постером */
    #elems-list.afisha.type_1 > .elem > .elem__body {
        display: flow-root;
        grid-template-columns: var(--quick-tickets-mobile-organisation-media-width) minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 12px;
    }

    #elems-list.afisha.type_1 > .elem > .elem__body > .i {
        grid-column: 1;
        grid-row: 1;
        width: var(--quick-tickets-mobile-organisation-media-width);
        max-width: var(--quick-tickets-mobile-organisation-media-width);
        justify-self: start;
        float: left;
        margin: 0 var(--quick-tickets-space-3) 0 0;
    }

    #elems-list.afisha.type_1 > .elem > .elem__body > .c {
        display: contents;
    }

    #elems-list.afisha.type_1 > .elem > .elem__body > .c > .event-card__summary {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        align-self: start;
        min-width: 0;
    }

    #elems-list.afisha.type_1 .event-card__summary > .event-card__title {
        order: 1;
    }

    #elems-list.afisha.type_1 .event-card__summary > .r {
        order: 2;
    }

    #elems-list.afisha.type_1 > .elem > .elem__body > .c > .quick-tickets-event-location,
    #elems-list.afisha.type_1 > .elem > .elem__body > .c > .d {
        grid-column: 1 / -1;
    }

    #elems-list.afisha.type_1 > .elem > .elem__body > .c > .quick-tickets-event-location {
        margin-top: var(--quick-tickets-space-2);
    }

    /* Площадка, адрес и даты начинаются на полной ширине после постера */
    #elems-list.afisha.type_1 > .elem > .elem__body > .c > .quick-tickets-event-location,
    #elems-list.afisha.type_1 > .elem > .elem__body > .c > .afisha-session-groups {
        clear: both;
    }
}

@media (max-width: 575px) {
    /* На телефоне постер остальных карточек располагается над содержимым без обрезания изображения */
    #elems-list.type_1 > .elem > .elem__body,
    #organisation #elems-list > .elem {
        grid-template-columns: minmax(0, 1fr);
    }

    #elems-list.type_1 > .elem > .elem__body > .i,
    #organisation #elems-list > .elem > .i {
        width: 150px;
        max-width: 100%;
        justify-self: center;
    }

    /* На телефоне карточка городской афиши сохраняет горизонтальную верхнюю строку */
    #elems-list.afisha.type_1 > .elem > .elem__body {
        grid-template-columns: var(--quick-tickets-mobile-organisation-media-width) minmax(0, 1fr);
    }

    #elems-list.afisha.type_1 > .elem > .elem__body > .i {
        width: var(--quick-tickets-mobile-organisation-media-width);
        max-width: var(--quick-tickets-mobile-organisation-media-width);
        justify-self: start;
    }

    #elems-list.type_1 .elem .footer .reviews {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
        text-align: center;
    }

    /* На телефоне действия делят доступную строку и переносятся только при нехватке места */
    #elems-list.type_1 .elem .footer .content-card__actions {
        flex: 1 1 100%;
        align-items: stretch;
        justify-content: center;
        width: 100%;
        margin-left: 0;
        padding: 0 var(--quick-tickets-space-3) var(--quick-tickets-space-3);
    }

    /* Действия организаций и мероприятий сохраняют одинаковый внутренний отступ со всех сторон серой панели */
    #elems-list.organisation.type_1 .elem .footer .organisation-card__actions,
    #elems-list.afisha.type_1 .elem .footer .content-card__actions {
        padding-top: var(--quick-tickets-space-3);
    }

    #elems-list.type_1 .elem .footer .content-card__action {
        flex: 1 1 150px;
        min-height: var(--quick-tickets-touch-target);
    }
}

@media (max-width: 767.999px) {
    /* Мобильные карточки объединяют постер и основные сведения в одну верхнюю строку */
    #organisation #elems-list > .quick-tickets-event-card,
    #organisation #elems-list > .quick-tickets-seasonticket-card {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: var(--quick-tickets-space-3);
    }

    #organisation #elems-list > .quick-tickets-event-card > .i,
    #organisation #elems-list > .quick-tickets-seasonticket-card > .i {
        grid-column: 1;
        grid-row: 1;
        width: 120px;
        max-width: 120px;
        justify-self: start;
    }

    /* Описание начинается под названием и продолжает строковый поток под постером */
    #organisation #elems-list > .quick-tickets-event-card,
    #organisation #elems-list > .quick-tickets-seasonticket-card {
        display: flow-root;
    }

    #organisation #elems-list > .quick-tickets-event-card > .i,
    #organisation #elems-list > .quick-tickets-seasonticket-card > .i {
        float: left;
        margin: 0 var(--quick-tickets-space-3) 0 0;
    }

    /* Прозрачная структурная обёртка позволяет расписанию занять всю ширину под верхней строкой */
    #organisation #elems-list > .quick-tickets-event-card > .quick-tickets-event-card__content,
    #organisation #elems-list > .quick-tickets-seasonticket-card > .quick-tickets-seasonticket-card__content {
        display: contents;
    }

    #organisation #elems-list > .quick-tickets-event-card .quick-tickets-event-card__summary,
    #organisation #elems-list > .quick-tickets-seasonticket-card .quick-tickets-seasonticket-card__summary {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        min-width: 0;
    }

    /* Мобильная афиша организации выводит рейтинг непосредственно после названия мероприятия */
    #organisation #elems-list > .quick-tickets-event-card .quick-tickets-event-card__summary {
        display: flex;
        flex-direction: column;
    }

    #organisation #elems-list > .quick-tickets-event-card .quick-tickets-event-card__summary > h3 {
        order: 1;
    }

    #organisation #elems-list > .quick-tickets-event-card .quick-tickets-event-card__summary > .r {
        order: 2;
    }

    #organisation #elems-list > .quick-tickets-event-card .quick-tickets-event-card__description,
    #organisation #elems-list > .quick-tickets-event-card .quick-tickets-event-location,
    #organisation #elems-list > .quick-tickets-event-card .sessions,
    #organisation #elems-list > .quick-tickets-event-card .session-schedule,
    #organisation #elems-list > .quick-tickets-seasonticket-card .quick-tickets-seasonticket-card__description,
    #organisation #elems-list > .quick-tickets-seasonticket-card .sessions {
        grid-column: 1 / -1;
    }

    /* Сведения о месте и расписание начинаются на полной ширине после постера */
    #organisation #elems-list > .quick-tickets-event-card .quick-tickets-event-location,
    #organisation #elems-list > .quick-tickets-event-card .sessions,
    #organisation #elems-list > .quick-tickets-event-card .session-schedule,
    #organisation #elems-list > .quick-tickets-seasonticket-card .sessions {
        clear: both;
    }

    /* После перехода карточки в строковый поток сохраняем системный интервал между адресом и расписанием */
    #organisation #elems-list > .quick-tickets-event-card .quick-tickets-event-location {
        margin-bottom: 0;
    }

    #organisation #elems-list > .quick-tickets-event-card .session-schedule {
        margin-top: 0;
    }

    #organisation #elems-list > .quick-tickets-event-card .quick-tickets-event-location + .sessions,
    #organisation #elems-list > .quick-tickets-event-card .quick-tickets-event-location + .session-schedule {
        margin-top: var(--quick-tickets-space-2);
    }

    #organisation #elems-list > .quick-tickets-event-card .session-schedule__content > .session-schedule__month:first-child {
        margin-top: 0;
    }
}