/* Портретная полоса на карточках артистов: красное поле, фото, шторки.
 *
 * Что чинится. Тильда позиционировала три элемента полосы в трёх разных
 * системах координат: красный фон — процентами от окна, шторки — пикселями
 * от левого края плюс процентами ширины, фото — через calc() от центра
 * воображаемого холста 1200/960/640/480/320. Три разные линейные функции
 * ширины окна сходились ровно в пяти точках, а между ними расползались:
 * шторка отрывалась от красного поля и повисала посреди фото. Высота шторки
 * при этом считалась от её же ширины, а высота полосы задавалась отдельно —
 * поэтому шторка ещё и не доставала до низа.
 *
 * Как чинится. Всё сведено к одной системе: полоса центрирует «сцену» —
 * кадр с фото, — а шторки цепляются за края этой же сцены. Их край и край
 * кадра — буквально одна и та же координата, разойтись им больше нечем.
 * Высота у шторок — 100% полосы, поэтому по вертикали они совпадают с ней
 * при любой ширине экрана.
 *
 * Разметку под это готовит build/patch-portrait.mjs.
 *
 * !important обязателен: у Тильды правила висят на #recNNN (id + класс),
 * а номер записи меняется при каждой выгрузке — цепляться за него нельзя.
 */

.theater-portrait {
    /* Высота полосы задаёт всё остальное: ширина фото = высота × пропорция
       снимка, ширина шторки = высота × пропорция файла.
       46vw держит прежний масштаб фото (примерно две трети ширины экрана),
       58vh не даёт полосе съесть экран на широких мониторах,
       225px — нижняя граница, иначе на телефоне фото становится маркой. */
    height: clamp(225px, 46vw, 58vh) !important;

    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    background-color: #bc0022 !important;
    overflow: hidden !important;
}

/* Подложки Тильды под фон и фильтр больше не нужны: фон красит сама полоса. */
.theater-portrait .t396__carrier,
.theater-portrait .t396__filter { display: none !important; }

/* Сцена — кадр, к краям которого цепляются шторки.
 *
 * Пропорция задана здесь, а не берётся у снимка, потому что снимки разные:
 * у большинства 3:2, но у двоих артистов фото вертикальные. Если бы кадр
 * повторял пропорцию файла, вертикальное фото стало бы узкой полоской, а
 * шторки — они всегда во всю высоту — закрыли бы почти всё, что на нём есть.
 * Постоянная пропорция заодно делает карточки похожими друг на друга. */
.theater-portrait__stage {
    position: relative;
    height: 100%;
    aspect-ratio: 3 / 2;
}

.theater-portrait__photo {
    display: block;
    width: 100%;
    height: 100%;
    /* Обрезаем, а не вписываем: шторки того же красного, что и фон, и на
       красном их попросту не видно — им нужно лежать на снимке.
       Точка 22% сверху — там, где на ростовом портрете оказывается лицо:
       по верхнему краю оно срезается, по центру уходит из кадра.
       У снимков 3:2 (таких большинство) обрезки нет вовсе. */
    object-fit: cover;
    object-position: 50% 22%;
}

.theater-portrait__curtain {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    /* Шторки декоративные и лежат поверх фото — клики должны проходить
       сквозь них, иначе они перехватывают половину картинки. */
    pointer-events: none;
}
.theater-portrait__curtain_l { left: 0; }
.theater-portrait__curtain_r { right: 0; }