/* Разделы карточки артиста — одним рядом, а не тремя полосами.
 *
 * Было: «Биография», «Роли» и «Фото» шли одна под другой во всю ширину, и все
 * три закрыты. Три строки ни о чём плюс пустота под ними — по такой странице
 * не видно, что она продолжается.
 *
 * Стало: один ряд. Экономит две строки, и ряд кнопок сам по себе читается как
 * переключатель, а не как три отдельные полосы.
 *
 * Разметку под это готовит build/patch-tabs.mjs, он же переносит кнопки.
 * Внутри каждой кнопки — «нулевой блок» Тильды со своей высотой и абсолютно
 * размещённой ссылкой; поэтому ширину задаём контейнеру, а высоту не трогаем.
 */

.theater-tabs {
    display: flex;
    align-items: stretch;
}

/* Каждая кнопка — своя запись Тильды со своим оформлением. Делим поровну и
   не даём ужиматься по содержимому: у «Биографии» слово длиннее, чем «Роли»,
   и без этого доли вышли бы разными. */
.theater-tabs > .t-rec {
    flex: 1 1 0;
    min-width: 0;
}

/* Тильда рисует у кнопки рамку в 2px со всех сторон. В ряду соседние рамки
   складываются в двойную линию — убираем правую у всех, кроме последней. */
.theater-tabs > .t-rec:not(:last-child) .tn-atom {
    border-right-width: 0 !important;
}

/* На узком экране три слова в строку не помещаются — возвращаем столбиком.
   Порог не круглый: при 560px «БИОГРАФИЯ» с разрядкой уже упирается в край. */
@media (max-width: 560px) {
    .theater-tabs { display: block; }
    .theater-tabs > .t-rec:not(:last-child) .tn-atom { border-right-width: 2px !important; }
}