/* Ближайшие показы: карточки на главной («БЛИЖАЙШЕЕ») и список на /poster.
 * Оба блока порождает build/patch-upcoming.mjs из custom/spectacles.json —
 * появляются и пропадают сами по мере того, как в реестре появляются
 * и проходят даты показов. Пока дат нет, эти классы просто не встречаются
 * на странице.
 *
 * Палитра и радиусы — те же, что в theater-search.css и custom/404.html:
 * так новые блоки не выглядят чужеродно на фоне остального сайта.
 */

.theater-upcoming {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 20px 10px;
    box-sizing: border-box;
}

.theater-upcoming__card {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    overflow: hidden;
    text-decoration: none;
    color: #000;
    transition: border-color 0.2s ease-in-out;
}
.theater-upcoming__card:hover { border-color: #b60000; }

.theater-upcoming__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    background: #f2f2f2;
}

.theater-upcoming__body { padding: 16px 18px 20px; }

.theater-upcoming__date {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b60000;
    margin: 0 0 8px;
}

.theater-upcoming__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

/* Расписание на /poster: построчный список показов вместо карточек —
 * афиша по смыслу таблица «дата — спектакль», а не витрина с фото. */

.theater-schedule {
    max-width: 700px;
    margin: 0 auto;
    padding: 10px 20px 30px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

.theater-schedule__row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5;
}
.theater-schedule__row:first-child { border-top: 1px solid #e5e5e5; }

.theater-schedule__date {
    flex: 0 0 auto;
    min-width: 130px;
    font-size: 14px;
    font-weight: 600;
    color: #b60000;
}

.theater-schedule__title {
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: 500;
}

.theater-schedule__link {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    border-bottom: 2px solid #b60000;
    white-space: nowrap;
}
.theater-schedule__link:hover { color: #b60000; }

@media (max-width: 600px) {
    .theater-schedule__row { flex-wrap: wrap; }
    .theater-upcoming { padding: 20px 16px 5px; }
}