/**
 * Премиальный слой — приёмы studiotakaya.fr на нашей тёмной палитре.
 *
 * Решение Павла 15.10.2026: «делаем как у Takaya, но с контентом Оли,
 * только в тёмном цвете — и меню, и всё по максимуму». Оле показали
 * Takaya голосом, ей понравилось; фон при этом остаётся наш (#11252D) —
 * это цвет старого сайта и узнаваемость школы.
 *
 * Премиальность у образца держится не на светлом фоне, а на четырёх
 * вещах, и все четыре переносимы на тёмное:
 *
 *   1. ВОЗДУХ. Между секциями 120–160px. У нас блоки шли сплошной
 *      лентой, отчего страница читалась как документ, а не как сайт.
 *   2. НАДЗАГОЛОВОК (eyebrow): короткая черта и мелкий капс с большой
 *      разрядкой над заголовком. Самый дешёвый приём «дорогого» вида.
 *   3. МЕРА СТРОКИ. Текст в 34 символа, а не во всю ширину экрана: на
 *      1700px строка нечитаема, глаз теряет начало следующей.
 *   4. ЕДИНЫЙ РИТМ. Все секции собраны одинаково — отсюда ощущение, что
 *      сайт делал один человек, а не трое по очереди.
 *
 * Файл подключается ПОСЛЕДНИМ в takaya_theme.libraries.yml: при равной
 * специфичности побеждает тот, кто ниже, и премиальный слой должен
 * перекрывать более ранние правила, а не воевать с ними через !important.
 */

:root {
  /* Вертикальный ритм. Один шаг — одна «полоса» страницы. */
  --bbt-section-gap: clamp(64px, 8vw, 150px);
  --bbt-block-gap: clamp(28px, 3.4vw, 56px);

  /* Разрядка капса — то, на чём держится «дорогое» ощущение. */
  --bbt-tracking-eyebrow: 0.22em;
  --bbt-tracking-head: 0.06em;
  --bbt-tracking-button: 0.14em;

  /* Полупрозрачные плоскости поверх тёмного фона: на тёмном «светлее на
     N%» работает лучше, чем отдельный цвет, — плоскости остаются одной
     семьёй при любой подложке, включая фотографию. */
  --bbt-surface: rgb(255 255 255 / 0.04);
  --bbt-surface-strong: rgb(255 255 255 / 0.07);
  --bbt-hairline: rgb(255 255 255 / 0.14);

}

/* ─────────────────────────── надзаголовок ─────────────────────────── */

.bbt-eyebrow {
  display: block;
  margin-block-end: 1.1rem;
  color: var(--color-primary);
  font-family: var(--font-text);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 400;
  letter-spacing: var(--bbt-tracking-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
}

/* Короткая черта над надзаголовком — как у образца. */
.bbt-eyebrow::before {
  content: "";
  display: block;
  width: 52px;
  height: 1px;
  margin-block-end: 1rem;
  background: var(--color-primary);
}

/* В центрированных секциях черта тоже по центру. */
.bbt-section--centered .bbt-eyebrow::before {
  margin-inline: auto;
}

/* Акцентное слово внутри заголовка — приём образца. */
.bbt-accent {
  color: var(--color-primary);
}

/* ───────────────────────── первый экран ───────────────────────── */

/*
 * Разворот: слева тёмная панель с текстом, справа фотография.
 * На узком экране панель уходит под фотографию — текст поверх кадра на
 * телефоне нечитаем, а панель отдельной плоскостью читается всегда.
 */
/*
 * Первый экран — во всю ширину окна, как у образца: тёмная половина
 * начинается от самого края, а не от сетки содержимого.
 *
 * Olivero смещает .main-content на ~90px слева под свою сетку, и в этой
 * полосе просвечивал фон страницы — разворот выглядел «приклеенным» не
 * к краю. Приём full-bleed: ширина в вьюпорт и отрицательный отступ на
 * половину разницы.
 *
 * ⚠️ Обычная формула full-bleed `margin-left: calc(50% - 50vw)` здесь
 * НЕ подходит и даёт горизонтальную прокрутку: она предполагает, что
 * контейнер центрирован, а Olivero смещает .main-content только слева
 * (левый отступ ~90px, правый край уже совпадает с краем окна).
 * Половина разницы увела бы блок на 45px влево и настолько же вывела
 * за правый край — проверено, появилась прокрутка в 45px.
 *
 * Поэтому сдвигаем на ПОЛНУЮ разницу ширин: столько и составляет левый
 * отступ контейнера.
 */
.bbt-hero--front {
  width: 100vw;
  width: 100dvw;
  margin-inline-start: calc(100% - 100vw);
  margin-inline-start: calc(100% - 100dvw);
}

@media (min-width: 62rem) {
  .bbt-hero--front {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: stretch;
    /*
     * Высота задана жёстко, а не min-height: js/hero-slider.js считает
     * высоту слайда как «экран минус шапка» и пишет её инлайн-стилем.
     * На широком мониторе это давало 1352px — панель с текстом честно
     * центрировалась в этой высоте и уезжала ниже видимой части экрана,
     * человек открывал сайт и видел пустую тёмную плоскость.
     */
    height: min(78vh, 760px);
  }

  /*
   * !important обязателен: JS пишет --hero-slide-height инлайном на
   * самом элементе, и обычное правило через var() его не перебьёт.
   * Тот же приём уже применён для шапки внутренних страниц, см.
   * blocks.css.
   */
  .bbt-hero--front .takaya-hero-slider__track .field__item,
  .bbt-hero--front .takaya-hero-slider,
  .bbt-hero--front .region--hero > * {
    height: 100% !important;
  }

  /* Панель — первой колонкой, хотя в разметке идёт после обложки:
     обложку оставили первой, чтобы без CSS страница начиналась с
     фотографии, а не с висящего текста. */
  .bbt-hero--front .bbt-hero-split {
    grid-column: 1;
    grid-row: 1;
  }

  .bbt-hero--front > :not(.bbt-hero-split) {
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
  }

  /* Обложка заполняет свою половину целиком. */
  .bbt-hero--front > :not(.bbt-hero-split) img,
  .bbt-hero--front > :not(.bbt-hero-split) .takaya-hero-slider__track .field__item {
    height: 100% !important;
  }

  .bbt-hero--front > :not(.bbt-hero-split) img {
    width: 100%;
    object-fit: cover;
  }
}

.bbt-hero-split {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 86px) clamp(20px, 4vw, 72px);
  background: var(--color-body-bg);
}

/*
 * Отступы между строками панели задаёт именно __panel, а не .bbt-hero-split:
 * текст лежит внутри панели, и gap у внешнего контейнера на него не влияет —
 * у того единственный ребёнок. Без этого подписи под цифрами налезали на
 * кнопку.
 */
.bbt-hero-split__panel {
  display: flex;
  flex-direction: column;
  gap: var(--bbt-block-gap);
}

.bbt-hero-split__title {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-head);
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--bbt-tracking-head);
  text-transform: uppercase;
  text-wrap: balance;
}

/* Цифры под заголовком — три коротких факта, как у образца. */
.bbt-hero-split__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 54px);
  margin: 0;
  padding-block-start: var(--bbt-block-gap);
  padding-inline: 0;
  border-block-start: 1px solid var(--bbt-hairline);
  list-style: none;
}

.bbt-hero-split__stats li {
  margin: 0;
}

.bbt-hero-split__stat-value {
  display: block;
  color: var(--color-white);
  font-family: var(--font-head);
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.bbt-hero-split__stat-label {
  display: block;
  margin-block-start: 0.35rem;
  max-width: 14em;
  color: var(--color-muted);
  font-size: clamp(11px, 1vw, 12px);
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
}

.bbt-hero-split__cta {
  align-self: flex-start;
  padding: 17px 40px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: clamp(14px, 1.3vw, 16px);
  letter-spacing: var(--bbt-tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.bbt-hero-split__cta:hover,
.bbt-hero-split__cta:focus-visible {
  background: var(--color-white);
  color: var(--color-body-bg);
}

/* ───────────────────────── ритм страницы ───────────────────────── */

/*
 * Воздух между секциями. Задаём отступом сверху у каждой секции, а не
 * gap у родителя: секции приходят из разных мест (параграфы, блоки,
 * views), общего грид-контейнера у них нет.
 */
.takaya-messaging,
.takaya-articles-preview,
.bbt-videos,
.takaya-section {
  margin-block-start: var(--bbt-section-gap);
}

/*
 * Первая секция после обложки прижата к ней — там воздух уже есть.
 * :first-child недостаточно: первым ребёнком контейнера идут хлебные
 * крошки, и отступ доставался секции, которая шла второй — между
 * крошками и текстом зияла дыра в полтора экрана.
 */
.main-content__container > *:first-child,
/*
 * Первая секция страницы. Секции приходят внутри поля field_sections,
 * каждая в своём .field__item, поэтому «первый ребёнок контейнера» их
 * не ловит: между контейнером и секцией лежат блок, поле и обёртка
 * элемента поля. Без этого правила между хлебными крошками и первым
 * текстом зияло полтора экрана пустоты.
 */
.field--name-field-sections > .field__item:first-child > * {
  margin-block-start: 0;
}

/* Заголовки секций — единый вид на всей странице. Было: «Блог» слева,
   «Видео» и «Отзывы» по центру, разного размера. */
.takaya-section-heading {
  margin-block-end: var(--bbt-block-gap);
  font-family: var(--font-head);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 400;
  letter-spacing: var(--bbt-tracking-head);
  text-transform: uppercase;
  color: var(--color-white);
}

/* Мера строки: длинная строка утомляет. Ограничиваем текст, а не блок —
   иначе развалится сетка соседних элементов. */
.takaya-messaging__text p,
.takaya-messaging__text li {
  max-width: 46em;
}

/* ─────────────────────── блок «О нас» ─────────────────────── */

/*
 * Текст слева, фотография справа, внизу строка мест через разделители —
 * приём «ABOUT US» с studiotakaya.fr.
 *
 * Разметку кладёт scripts/home_about_block.php прямо в текст параграфа:
 * так блок остаётся переводимым обычными средствами Drupal, и Оля
 * правит его через админку как любой другой текст.
 */
.bbt-about {
  display: grid;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

@media (min-width: 62rem) {
  .bbt-about {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.bbt-about__heading {
  margin: 0 0 1.4rem;
  font-family: var(--font-head);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--bbt-tracking-head);
  text-transform: uppercase;
  color: var(--color-white);
}

/* Мера строки: ограничиваем сам текст, а не колонку — иначе поедет
   сетка и фотография перестанет быть ровно вполовину. */
.bbt-about__body p {
  max-width: 34em;
  margin: 0 0 1.1rem;
}

.bbt-about__body p:last-child {
  margin-bottom: 0;
}

/* Строка мест — как города у образца: тонкие линии сверху и снизу,
   мелкий капс с разрядкой. */
.bbt-about__places {
  display: flex;
  flex-wrap: wrap;
  /* Контейнер текста уже сужен мерой строки, и пять мест в него не
     помещались в одну строку — разрешаем полосе мест занять всю
     ширину колонки. */
  width: 100%;
  gap: clamp(14px, 2vw, 38px);
  margin: clamp(26px, 3vw, 44px) 0 0;
  padding: 1.1rem 0;
  border-block: 1px solid var(--bbt-hairline);
  list-style: none;
}

.bbt-about__place {
  margin: 0;
  /* Olivero рисует маркер списка псевдоэлементом, и list-style: none у
     родителя его не убирает — точки оставались перед каждым местом. */
  padding-inline-start: 0;
  color: var(--color-muted);
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bbt-about__media img {
  display: block;
  width: 100%;
  /* Вертикальная пропорция, как у образца: фотография выше текста и
     держит блок, не давая ему расплыться в ленту. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 61.9rem) {
  .bbt-about__media img {
    aspect-ratio: 3 / 2;
  }
}

/* ─────────────────────── светлая шапка ───────────────────────
 *
 * Решение Павла 15.10.2026: «меню может светлым сделаем? и стили самого
 * меню как у Takaya, у неё там стрелочки и шрифт как-то красивее».
 *
 * У образца белая шапка стоит над тёмной половиной первого экрана —
 * контраст работает на оба: шапка не спорит с фотографией, а тёмная
 * половина под ней читается как отдельная плоскость.
 *
 * Сам цвет шапки живёт в НАСТРОЙКАХ темы (takaya_header_bg) и
 * инжектится в <head> с !important — см. takaya_theme_preprocess_html().
 * Поэтому здесь только то, что лежит поверх: цвет текста, стрелки,
 * разделители. Поменять фон одним CSS не вышло бы.
 */
.site-header,
.site-header .site-header__inner,
.site-header .site-header__initial {
  border-bottom: 1px solid rgb(17 37 45 / 0.1);
}

/* Текст меню на светлом — основной тёмный цвет сайта. */
.site-header .primary-nav__menu-link,
.site-header .primary-nav__menu-link--level-1 {
  color: var(--color-body-bg);
}

.site-header .primary-nav__menu-link:hover,
.site-header .primary-nav__menu-link:focus-visible {
  color: var(--color-primary);
}

/*
 * Стрелка у пунктов с подменю. Olivero рисует свою иконку фоновой
 * картинкой в цвете шапки (см. takaya_theme_preprocess_html) — на белом
 * она исчезала. Рисуем свою: чистый шеврон из двух линий, как у
 * образца, и он поворачивается при раскрытии.
 */
.site-header .primary-nav__button-toggle {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 0;
  background: none;
}

.site-header .primary-nav__button-toggle .icon--menu-toggle {
  display: none;
}

.site-header .primary-nav__button-toggle::after {
  content: "";
  position: absolute;
  inset-block-start: 38%;
  inset-inline-start: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--color-body-bg);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.25s ease, color 0.25s ease;
}

.site-header .primary-nav__menu-item:hover .primary-nav__button-toggle::after,
.site-header .primary-nav__button-toggle[aria-expanded="true"]::after {
  color: var(--color-primary);
}

/* Раскрытое подменю — стрелка смотрит вверх. */
.site-header .primary-nav__button-toggle[aria-expanded="true"]::after {
  transform: translate(-50%, -20%) rotate(-135deg);
}

/* Выпадающее меню на белом. */
@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-header .primary-nav__menu--level-2 {
    border: 1px solid rgb(17 37 45 / 0.12);
    box-shadow: 0 18px 40px rgb(17 37 45 / 0.14);
  }

  body:not(.is-always-mobile-nav) .site-header .primary-nav__menu-link--level-2,
  body:not(.is-always-mobile-nav) .site-header .primary-nav__menu-link--level-3 {
    color: var(--color-body-bg);
  }

  body:not(.is-always-mobile-nav) .site-header .primary-nav__menu-link--level-3 {
    color: rgb(17 37 45 / 0.6);
  }

  body:not(.is-always-mobile-nav) .site-header .primary-nav__menu-link--level-2:hover,
  body:not(.is-always-mobile-nav) .site-header .primary-nav__menu-link--level-3:hover {
    color: var(--color-primary);
  }
}

/*
 * Логотип. На тёмной шапке он сидел на белой плашке, чтобы не пропасть;
 * на белой шапке плашка стала заплаткой — убираем её.
 */
.site-header .site-branding img {
  background: none;
  padding: 0;
}

/* Переключатель языков — как у образца: простые подчёркнутые коды,
   без рамки-кнопки. */
.site-header .bbt-langswitch__toggle {
  border-color: rgb(17 37 45 / 0.25);
  color: var(--color-body-bg);
}

.site-header .bbt-langswitch__toggle:hover,
.site-header .bbt-langswitch__toggle:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.site-header .bbt-langswitch--js .bbt-langswitch__list {
  background: var(--color-white);
  border-color: rgb(17 37 45 / 0.12);
  box-shadow: 0 18px 40px rgb(17 37 45 / 0.16);
}

.site-header .bbt-langswitch__link {
  color: var(--color-body-bg);
}

.site-header .bbt-langswitch__link:hover,
.site-header .bbt-langswitch__link:focus-visible {
  background: rgb(17 37 45 / 0.06);
  color: var(--color-primary);
}

/*
 * Здесь стоял `.main-content { overflow-x: clip }` — он срезал лишнее у
 * подложки светлой полосы. Полосы отменены, а clip остался и срезал
 * ровно те ~90px, на которые первый экран сдвинут влево ради full-bleed:
 * заголовок визуально начинался с «АЙТСЁРФИНГ».
 *
 * Коварство в том, что через JS всё выглядело правильно —
 * getBoundingClientRect() возвращает полный прямоугольник, clip меняет
 * только отрисовку. Видно было лишь глазами на снимке экрана.
 */

/* Маркеры списка мест: Olivero вешает их через ::before на li. */
.bbt-about__places li::before,
.bbt-about__places li::marker {
  content: none;
  display: none;
}

.bbt-about__places {
  padding-inline-start: 0;
}

/* ──────────────── полоса под первым экраном ──────────────── */

/*
 * Акцентная лента во всю ширину с одной строкой о школе — ровно как у
 * образца под его первым экраном. Она закрывает разворот снизу: без
 * неё фотография обрывалась в пустоту и первый экран не читался как
 * законченный.
 */
.bbt-hero-strip {
  width: 100vw;
  width: 100dvw;
  margin-inline-start: calc(100% - 100vw);
  margin-inline-start: calc(100% - 100dvw);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 4vw, 72px);
  background: var(--color-primary);
}

.bbt-hero-strip__text {
  max-width: 62em;
  margin: 0;
  /* Тёмный текст на бирюзовой заливке: белый по ней даёт 2.1:1 и на
     солнце с телефона не читается, тёмный — 7.4:1. */
  color: var(--color-body-bg);
  font-size: clamp(12px, 1.15vw, 14px);
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ──────────────── правки шапки по образцу ──────────────── */

/*
 * Левая полоса отступа вдоль всего сайта.
 *
 * Olivero держит .main-content в своей сетке со смещением ~90px слева,
 * а справа контейнер уже упирается в край — получалась асимметричная
 * полоса вдоль всей страницы. Выравниваем контейнер по центру и даём
 * ему одинаковые поля с обеих сторон.
 */
/*
 * Olivero кладёт .main-content в свою сетку со смещением: слева ~90px,
 * справа край в край. Вдоль всей страницы шла светлая полоса, а контент
 * выглядел сдвинутым. margin-inline: auto тут бессилен — элемент стоит
 * в grid-колонке, и его положение задаёт именно она.
 */
.main-content {
  grid-column: 1 / -1;
  width: 100%;
  margin-inline: 0;
}

/* Содержимое держим по центру в своей мере ширины. */
.main-content__container.container {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 72px);
}

/*
 * Обложка внутренних страниц — тоже во всю ширину. Коллаж «лето и зима»
 * нарисован панорамой, и в 1620px из 1710 он смотрелся как вставка, а не
 * как шапка раздела.
 */
.bbt-hero {
  width: 100%;
}

/*
 * Меню прижато вправо, как у образца: логотип слева, пункты и языки
 * справа одной строкой.
 */
@media (min-width: 75rem) {
  .site-header__inner__container {
    gap: clamp(16px, 2vw, 42px);
  }

  body:not(.is-always-mobile-nav) .header-nav {
    margin-inline-start: auto;
  }

  body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
    justify-content: flex-end;
  }
}

/*
 * Стрелка у пунктов с подменю «улетала вверх»: Olivero кладёт кнопку
 * отдельным блоком рядом со ссылкой, и наш абсолютный шеврон считал
 * верх от неё, а не от строки меню. Ставим кнопку в одну линию со
 * ссылкой и выравниваем по центру — шеврон встаёт на базовую линию
 * текста.
 */
@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
    display: flex;
    align-items: center;
    gap: 0.15rem;
  }

  body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
    position: relative;
    inset: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
     * align-self обязателен: Olivero задаёт кнопке `align-self: stretch`,
     * а это свойство САМОГО элемента — оно перебивает `align-items:
     * center` родителя. Пункт меню высотой 99px, кнопка 18px — и она
     * прижималась к верхнему краю, отчего стрелки висели над строкой
     * меню, а не рядом с текстом.
     */
    align-self: center;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    transform: none;
  }

  body:not(.is-always-mobile-nav) .primary-nav__button-toggle::after {
    inset-block-start: 45%;
  }
}

/*
 * Языки в строку на большом экране — как EN | FR | RU у образца.
 * Выпадающий список остаётся для телефона: шесть кодов в строку там не
 * помещаются.
 */
@media (min-width: 75rem) {
  .site-header .bbt-langswitch--js .bbt-langswitch__toggle {
    display: none;
  }

  .site-header .bbt-langswitch--js .bbt-langswitch__list {
    position: static;
    display: flex;
    gap: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .site-header .bbt-langswitch__item + .bbt-langswitch__item {
    border-inline-start: 1px solid rgb(17 37 45 / 0.25);
  }

  .site-header .bbt-langswitch__link {
    gap: 0;
    padding: 0.1rem 0.5rem;
    border-radius: 0;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .site-header .bbt-langswitch__link:hover {
    background: none;
  }

  /* В строке оставляем только код языка: названия («Українська»,
     «Deutsch») заняли бы пол-шапки. */
  .site-header .bbt-langswitch__name {
    display: none;
  }

  /* Текущий язык подчёркнут — так у образца. */
  .site-header .bbt-langswitch__link.is-current {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/*
 * Пункты меню: крупнее и обычным начертанием.
 *
 * Было 18px полужирным — в одну величину с кодами языков рядом, отчего
 * меню и переключатель читались как один ряд равнозначных ссылок. У
 * образца пункты заметно крупнее языков и набраны обычным весом:
 * жирный капс читается как вывеска, обычный — как навигация.
 */
.site-header .primary-nav__menu-link--level-1 {
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Коды языков наоборот мельче — они вторичны. */
@media (min-width: 75rem) {
  .site-header .bbt-langswitch__link {
    font-size: 12px;
  }
}

/* ─────────────────────────── карусель ───────────────────────────
 *
 * Один компонент на три применения: локации, блог, отзывы. Приём с
 * образца — лента карточек, соседняя подглядывает из-за края, стрелки
 * в кругах. Подглядывающий край важнее, чем кажется: он единственный
 * честно говорит, что лента продолжается.
 *
 * Прокручивает браузер (overflow + scroll-snap), скрипт только жмёт
 * стрелки — см. js/carousel.js.
 */
.bbt-carousel {
  position: relative;
  margin-block-start: var(--bbt-section-gap);
}

.bbt-carousel__head {
  margin-block-end: var(--bbt-block-gap);
}

.bbt-carousel__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--bbt-tracking-head);
  text-transform: uppercase;
  color: var(--color-white);
}

.bbt-carousel__track {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0 0 0.5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Полосу прокрутки прячем: лента листается стрелками и пальцем, а
     системная полоса под карточками выглядит как недоделка. */
  scrollbar-width: none;
}

.bbt-carousel__track::-webkit-scrollbar {
  display: none;
}

/*
 * Ширину задаёт СЛАЙД, а не карточка внутри. При `flex-basis: auto`
 * ширина бралась не из содержимого, а из раскладки списка — слайд
 * выходил 736px при карточке в 980, и карточки наезжали друг на друга.
 */
.bbt-carousel__slide {
  flex: 0 0 min(86vw, 980px);
  margin: 0;
  scroll-snap-align: start;
}

/* Стрелки — круги по бокам, как у образца. */
.bbt-carousel__arrow {
  position: absolute;
  inset-block-start: 58%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 4vw, 56px);
  height: clamp(44px, 4vw, 56px);
  padding: 0;
  border: 1px solid var(--bbt-hairline);
  border-radius: 50%;
  background: var(--color-body-bg);
  color: var(--color-white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.bbt-carousel__arrow:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.bbt-carousel__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.bbt-carousel__arrow--prev {
  inset-inline-start: clamp(-10px, -1vw, 0px);
}

.bbt-carousel__arrow--next {
  inset-inline-end: clamp(-10px, -1vw, 0px);
}

/* Стрелка смотрит по направлению чтения: на иврите — в другую сторону. */
.bbt-carousel__arrow--prev::before {
  content: "←";
}

.bbt-carousel__arrow--next::before {
  content: "→";
}

[dir="rtl"] .bbt-carousel__arrow--prev::before {
  content: "→";
}

[dir="rtl"] .bbt-carousel__arrow--next::before {
  content: "←";
}

/* ── карточка локации: фото + панель с текстом, как у образца ── */

.bbt-locality {
  display: grid;
  width: 100%;
  height: 100%;
  background: var(--bbt-surface);
}

/*
 * min-width: 0 обязателен. По умолчанию элемент грида не ужимается
 * меньше своего содержимого (min-width: auto), и колонка с текстом
 * раздувалась под самую длинную строку — карточка вылезала за свою
 * ширину и наезжала на соседнюю в ленте.
 */
.bbt-locality > * {
  min-width: 0;
}

@media (min-width: 48rem) {
  .bbt-locality {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.bbt-locality__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(220px, 28vw, 420px);
  object-fit: cover;
}

.bbt-locality__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: clamp(24px, 3vw, 54px);
}

.bbt-locality__kicker {
  color: var(--color-muted);
  font-size: clamp(11px, 1vw, 12px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bbt-locality__title {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-head);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: var(--bbt-tracking-head);
  text-transform: uppercase;
}

.bbt-locality__text {
  margin: 0;
  /* Меру строки здесь не ограничиваем: колонка карточки и так узкая,
     а лишний max-width заставлял текст вылезать за её край. */
  color: var(--color-text);
}

/* Ссылка «подробнее» с кружком-стрелкой — приём образца. */
.bbt-locality__more {
  /* inline-flex, а не flex: иначе ссылка растягивается на всю колонку
     и подчёркивание тянется линией через всю карточку. Плюс гасим
     подчёркивание — его роль здесь играет кружок со стрелкой. */
  display: inline-flex;
  align-self: flex-start;
  text-decoration: none;
  align-items: center;
  gap: 0.8rem;
  margin-block-start: 0.4rem;
  color: var(--color-text);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.bbt-locality__more::after {
  content: "›";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--bbt-hairline);
  border-radius: 50%;
  font-size: 15px;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.bbt-locality__more:hover {
  color: var(--color-primary);
}

.bbt-locality__more:hover::after {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ── карточка статьи в карусели (образец «INSIGHTS») ── */

.bbt-carousel__slide--article {
  flex-basis: min(80vw, 360px);
}

.bbt-article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--color-text);
}

.bbt-article-card__media {
  display: block;
  overflow: hidden;
  margin-block-end: 1.1rem;
}

.bbt-article-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.bbt-article-card:hover .bbt-article-card__media img {
  transform: scale(1.04);
}

/* Категория над названием — мелкий капс с разрядкой, как у образца. */
.bbt-article-card__category {
  display: block;
  margin-block-end: 0.5rem;
  color: var(--color-primary);
  font-size: clamp(10px, 0.95vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.bbt-article-card__title {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-white);
}

.bbt-article-card__more {
  display: inline-block;
  margin-block-start: auto;
  padding-block-start: 1rem;
  color: var(--color-muted);
  font-size: clamp(10px, 0.95vw, 12px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Подчёркивание только под словом, а не под всей колонкой: ссылка
     занимает всю карточку, и линия иначе тянулась бы через неё. */
  border-block-end: 1px solid var(--bbt-hairline);
}

.bbt-article-card:hover .bbt-article-card__more {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Ссылка на весь список под каруселью. */
.bbt-carousel__footer {
  margin: var(--bbt-block-gap) 0 0;
  text-align: end;
}

.bbt-carousel__all {
  color: var(--color-text);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-block-end: 1px solid var(--bbt-hairline);
}

.bbt-carousel__all:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ── карточка ролика в карусели ── */

.bbt-carousel__slide--video {
  flex-basis: min(80vw, 400px);
}

/*
 * Карточка — это <button> (фасад ролика), поэтому сбрасываем всё, что
 * браузер даёт кнопкам по умолчанию: рамку, фон, выравнивание текста.
 */
.bbt-video-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  text-align: start;
  cursor: pointer;
}

.bbt-video-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  margin-block-end: 1.1rem;
}

.bbt-video-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.bbt-video-card:hover .bbt-video-card__media img {
  transform: scale(1.04);
}

.bbt-video-card__category {
  display: block;
  margin-block-end: 0.5rem;
  color: var(--color-primary);
  font-size: clamp(10px, 0.95vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.bbt-video-card__title {
  display: block;
  padding: 0;
  font-family: var(--font-head);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-white);
}

/*
 * Маркеры у слайдов. Трек — это <ul>, и list-style: none на нём
 * недостаточно: Olivero рисует маркер отдельным ::before на самом <li>,
 * и между карточками висели точки.
 */
.bbt-carousel__track > li::before,
.bbt-carousel__track > li::marker {
  content: none;
  display: none;
}

.bbt-carousel__track > li {
  padding-inline-start: 0;
}

/* ── карточка отзыва в карусели ── */

/*
 * Клиент 26.09.2026: «один отзыв очень длинный, а рядом очень короткий,
 * плохо смотрится — это регулируется как-то?». В сетке разнобой высот
 * неизбежен: отзывы пишут люди, и длину им не задашь. В карусели
 * карточки одной ширины и одной высоты, а текст уже подрезан анонсом в
 * 220 знаков — разнобоя не остаётся.
 */
.bbt-carousel__slide--review {
  flex-basis: min(82vw, 420px);
}

.bbt-carousel--reviews .bbt-review {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
  margin: 0;
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--bbt-surface);
}

.bbt-carousel--reviews .bbt-review__stars {
  color: var(--color-primary);
  font-size: 15px;
  letter-spacing: 0.1em;
}

.bbt-carousel--reviews .bbt-review__text {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-text);
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.6;
  font-style: normal;
}

.bbt-carousel--reviews .bbt-review__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--bbt-hairline);
  color: var(--color-muted);
  font-size: clamp(10px, 0.95vw, 12px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bbt-carousel--reviews .bbt-review__author {
  color: var(--color-white);
}

/*
 * ФОНОВАЯ ГРАФИКА (линейный кайтсёрфер) — ОТКЛЮЧЕНА 15.10.2026.
 *
 * Задумка была как у образца: пальму в их SEO-секциях заменить
 * кайтсёрфером, нарисованным одной линией. Файл написан и лежит в
 * images/art/kitesurfer.svg, правило — в истории git.
 *
 * Отключено по результату: в рисунке кайт читается как линза, а
 * райдер — как палочный человечек. Рядом с настоящими фотографиями
 * заката и обучения это выглядит слабее, чем просто пустое место.
 *
 * Нормальных путей два: заказать линейную иллюстрацию отдельно либо
 * обвести контур с нашей же фотографии заката — силуэт там готовый и
 * узнаваемый. До тех пор блок «О нас» живёт без подложки.
 */

**
 * Премиальный слой — приёмы studiotakaya.fr на нашей тёмной палитре.
 *
 * Решение Павла 15.10.2026: «делаем как у Takaya, но с контентом Оли,
 * только в тёмном цвете — и меню, и всё по максимуму». Оле показали
 * Takaya голосом, ей понравилось; фон при этом остаётся наш (#11252D) —
 * это цвет старого сайта и узнаваемость школы.
 *
 * Премиальность у образца держится не на светлом фоне, а на четырёх
 * вещах, и все четыре переносимы на тёмное:
 *
 *   1. ВОЗДУХ. Между секциями 120–160px. У нас блоки шли сплошной
 *      лентой, отчего страница читалась как документ, а не как сайт.
 *   2. НАДЗАГОЛОВОК (eyebrow): короткая черта и мелкий капс с большой
 *      разрядкой над заголовком. Самый дешёвый приём «дорогого» вида.
 *   3. МЕРА СТРОКИ. Текст в 34 символа, а не во всю ширину экрана: на
 *      1700px строка нечитаема, глаз теряет начало следующей.
 *   4. ЕДИНЫЙ РИТМ. Все секции собраны одинаково — отсюда ощущение, что
 *      сайт делал один человек, а не трое по очереди.
 *
 * Файл подключается ПОСЛЕДНИМ в takaya_theme.libraries.yml: при равной
 * специфичности побеждает тот, кто ниже, и премиальный слой должен
 * перекрывать более ранние правила, а не воевать с ними через !important.
 */

:root {
  /* Вертикальный ритм. Один шаг — одна «полоса» страницы. */
  --bbt-section-gap: clamp(64px, 8vw, 150px);
  --bbt-block-gap: clamp(28px, 3.4vw, 56px);

  /* Разрядка капса — то, на чём держится «дорогое» ощущение. */
  --bbt-tracking-eyebrow: 0.22em;
  --bbt-tracking-head: 0.06em;
  --bbt-tracking-button: 0.14em;

  /* Полупрозрачные плоскости поверх тёмного фона: на тёмном «светлее на
     N%» работает лучше, чем отдельный цвет, — плоскости остаются одной
     семьёй при любой подложке, включая фотографию. */
  --bbt-surface: rgb(255 255 255 / 0.04);
  --bbt-surface-strong: rgb(255 255 255 / 0.07);
  --bbt-hairline: rgb(255 255 255 / 0.14);

}

/* ─────────────────────────── надзаголовок ─────────────────────────── */

.bbt-eyebrow {
  display: block;
  margin-block-end: 1.1rem;
  color: var(--color-primary);
  font-family: var(--font-text);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 400;
  letter-spacing: var(--bbt-tracking-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
}

/* Короткая черта над надзаголовком — как у образца. */
.bbt-eyebrow::before {
  content: "";
  display: block;
  width: 52px;
  height: 1px;
  margin-block-end: 1rem;
  background: var(--color-primary);
}

/* В центрированных секциях черта тоже по центру. */
.bbt-section--centered .bbt-eyebrow::before {
  margin-inline: auto;
}

/* Акцентное слово внутри заголовка — приём образца. */
.bbt-accent {
  color: var(--color-primary);
}

/* ───────────────────────── первый экран ───────────────────────── */

/*
 * Разворот: слева тёмная панель с текстом, справа фотография.
 * На узком экране панель уходит под фотографию — текст поверх кадра на
 * телефоне нечитаем, а панель отдельной плоскостью читается всегда.
 */
/*
 * Первый экран — во всю ширину окна, как у образца: тёмная половина
 * начинается от самого края, а не от сетки содержимого.
 *
 * Olivero смещает .main-content на ~90px слева под свою сетку, и в этой
 * полосе просвечивал фон страницы — разворот выглядел «приклеенным» не
 * к краю. Приём full-bleed: ширина в вьюпорт и отрицательный отступ на
 * половину разницы.
 *
 * ⚠️ Обычная формула full-bleed `margin-left: calc(50% - 50vw)` здесь
 * НЕ подходит и даёт горизонтальную прокрутку: она предполагает, что
 * контейнер центрирован, а Olivero смещает .main-content только слева
 * (левый отступ ~90px, правый край уже совпадает с краем окна).
 * Половина разницы увела бы блок на 45px влево и настолько же вывела
 * за правый край — проверено, появилась прокрутка в 45px.
 *
 * Поэтому сдвигаем на ПОЛНУЮ разницу ширин: столько и составляет левый
 * отступ контейнера.
 */
.bbt-hero--front {
  width: 100vw;
  width: 100dvw;
  margin-inline-start: calc(100% - 100vw);
  margin-inline-start: calc(100% - 100dvw);
}

@media (min-width: 62rem) {
  .bbt-hero--front {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: stretch;
    /*
     * Высота задана жёстко, а не min-height: js/hero-slider.js считает
     * высоту слайда как «экран минус шапка» и пишет её инлайн-стилем.
     * На широком мониторе это давало 1352px — панель с текстом честно
     * центрировалась в этой высоте и уезжала ниже видимой части экрана,
     * человек открывал сайт и видел пустую тёмную плоскость.
     */
    height: min(78vh, 760px);
  }

  /*
   * !important обязателен: JS пишет --hero-slide-height инлайном на
   * самом элементе, и обычное правило через var() его не перебьёт.
   * Тот же приём уже применён для шапки внутренних страниц, см.
   * blocks.css.
   */
  .bbt-hero--front .takaya-hero-slider__track .field__item,
  .bbt-hero--front .takaya-hero-slider,
  .bbt-hero--front .region--hero > * {
    height: 100% !important;
  }

  /* Панель — первой колонкой, хотя в разметке идёт после обложки:
     обложку оставили первой, чтобы без CSS страница начиналась с
     фотографии, а не с висящего текста. */
  .bbt-hero--front .bbt-hero-split {
    grid-column: 1;
    grid-row: 1;
  }

  .bbt-hero--front > :not(.bbt-hero-split) {
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
  }

  /* Обложка заполняет свою половину целиком. */
  .bbt-hero--front > :not(.bbt-hero-split) img,
  .bbt-hero--front > :not(.bbt-hero-split) .takaya-hero-slider__track .field__item {
    height: 100% !important;
  }

  .bbt-hero--front > :not(.bbt-hero-split) img {
    width: 100%;
    object-fit: cover;
  }
}

.bbt-hero-split {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 86px) clamp(20px, 4vw, 72px);
  background: var(--color-body-bg);
}

/*
 * Отступы между строками панели задаёт именно __panel, а не .bbt-hero-split:
 * текст лежит внутри панели, и gap у внешнего контейнера на него не влияет —
 * у того единственный ребёнок. Без этого подписи под цифрами налезали на
 * кнопку.
 */
.bbt-hero-split__panel {
  display: flex;
  flex-direction: column;
  gap: var(--bbt-block-gap);
}

.bbt-hero-split__title {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-head);
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--bbt-tracking-head);
  text-transform: uppercase;
  text-wrap: balance;
}

/* Цифры под заголовком — три коротких факта, как у образца. */
.bbt-hero-split__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 54px);
  margin: 0;
  padding-block-start: var(--bbt-block-gap);
  padding-inline: 0;
  border-block-start: 1px solid var(--bbt-hairline);
  list-style: none;
}

.bbt-hero-split__stats li {
  margin: 0;
}

.bbt-hero-split__stat-value {
  display: block;
  color: var(--color-white);
  font-family: var(--font-head);
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.bbt-hero-split__stat-label {
  display: block;
  margin-block-start: 0.35rem;
  max-width: 14em;
  color: var(--color-muted);
  font-size: clamp(11px, 1vw, 12px);
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
}

.bbt-hero-split__cta {
  align-self: flex-start;
  padding: 17px 40px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: clamp(14px, 1.3vw, 16px);
  letter-spacing: var(--bbt-tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.bbt-hero-split__cta:hover,
.bbt-hero-split__cta:focus-visible {
  background: var(--color-white);
  color: var(--color-body-bg);
}

/* ───────────────────────── ритм страницы ───────────────────────── */

/*
 * Воздух между секциями. Задаём отступом сверху у каждой секции, а не
 * gap у родителя: секции приходят из разных мест (параграфы, блоки,
 * views), общего грид-контейнера у них нет.
 */
.takaya-messaging,
.takaya-articles-preview,
.bbt-videos,
.takaya-section {
  margin-block-start: var(--bbt-section-gap);
}

/*
 * Первая секция после обложки прижата к ней — там воздух уже есть.
 * :first-child недостаточно: первым ребёнком контейнера идут хлебные
 * крошки, и отступ доставался секции, которая шла второй — между
 * крошками и текстом зияла дыра в полтора экрана.
 */
.main-content__container > *:first-child,
/*
 * Первая секция страницы. Секции приходят внутри поля field_sections,
 * каждая в своём .field__item, поэтому «первый ребёнок контейнера» их
 * не ловит: между контейнером и секцией лежат блок, поле и обёртка
 * элемента поля. Без этого правила между хлебными крошками и первым
 * текстом зияло полтора экрана пустоты.
 */
.field--name-field-sections > .field__item:first-child > * {
  margin-block-start: 0;
}

/* Заголовки секций — единый вид на всей странице. Было: «Блог» слева,
   «Видео» и «Отзывы» по центру, разного размера. */
.takaya-section-heading {
  margin-block-end: var(--bbt-block-gap);
  font-family: var(--font-head);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 400;
  letter-spacing: var(--bbt-tracking-head);
  text-transform: uppercase;
  color: var(--color-white);
}

/* Мера строки: длинная строка утомляет. Ограничиваем текст, а не блок —
   иначе развалится сетка соседних элементов. */
.takaya-messaging__text p,
.takaya-messaging__text li {
  max-width: 46em;
}

/* ─────────────────────── блок «О нас» ─────────────────────── */

/*
 * Текст слева, фотография справа, внизу строка мест через разделители —
 * приём «ABOUT US» с studiotakaya.fr.
 *
 * Разметку кладёт scripts/home_about_block.php прямо в текст параграфа:
 * так блок остаётся переводимым обычными средствами Drupal, и Оля
 * правит его через админку как любой другой текст.
 */
.bbt-about {
  display: grid;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

@media (min-width: 62rem) {
  .bbt-about {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.bbt-about__heading {
  margin: 0 0 1.4rem;
  font-family: var(--font-head);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--bbt-tracking-head);
  text-transform: uppercase;
  color: var(--color-white);
}

/* Мера строки: ограничиваем сам текст, а не колонку — иначе поедет
   сетка и фотография перестанет быть ровно вполовину. */
.bbt-about__body p {
  max-width: 34em;
  margin: 0 0 1.1rem;
}

.bbt-about__body p:last-child {
  margin-bottom: 0;
}

/* Строка мест — как города у образца: тонкие линии сверху и снизу,
   мелкий капс с разрядкой. */
.bbt-about__places {
  display: flex;
  flex-wrap: wrap;
  /* Контейнер текста уже сужен мерой строки, и пять мест в него не
     помещались в одну строку — разрешаем полосе мест занять всю
     ширину колонки. */
  width: 100%;
  gap: clamp(14px, 2vw, 38px);
  margin: clamp(26px, 3vw, 44px) 0 0;
  padding: 1.1rem 0;
  border-block: 1px solid var(--bbt-hairline);
  list-style: none;
}

.bbt-about__place {
  margin: 0;
  /* Olivero рисует маркер списка псевдоэлементом, и list-style: none у
     родителя его не убирает — точки оставались перед каждым местом. */
  padding-inline-start: 0;
  color: var(--color-muted);
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bbt-about__media img {
  display: block;
  width: 100%;
  /* Вертикальная пропорция, как у образца: фотография выше текста и
     держит блок, не давая ему расплыться в ленту. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 61.9rem) {
  .bbt-about__media img {
    aspect-ratio: 3 / 2;
  }
}

/* ─────────────────────── светлая шапка ───────────────────────
 *
 * Решение Павла 15.10.2026: «меню может светлым сделаем? и стили самого
 * меню как у Takaya, у неё там стрелочки и шрифт как-то красивее».
 *
 * У образца белая шапка стоит над тёмной половиной первого экрана —
 * контраст работает на оба: шапка не спорит с фотографией, а тёмная
 * половина под ней читается как отдельная плоскость.
 *
 * Сам цвет шапки живёт в НАСТРОЙКАХ темы (takaya_header_bg) и
 * инжектится в <head> с !important — см. takaya_theme_preprocess_html().
 * Поэтому здесь только то, что лежит поверх: цвет текста, стрелки,
 * разделители. Поменять фон одним CSS не вышло бы.
 */
.site-header,
.site-header .site-header__inner,
.site-header .site-header__initial {
  border-bottom: 1px solid rgb(17 37 45 / 0.1);
}

/* Текст меню на светлом — основной тёмный цвет сайта. */
.site-header .primary-nav__menu-link,
.site-header .primary-nav__menu-link--level-1 {
  color: var(--color-body-bg);
}

.site-header .primary-nav__menu-link:hover,
.site-header .primary-nav__menu-link:focus-visible {
  color: var(--color-primary);
}

/*
 * Стрелка у пунктов с подменю. Olivero рисует свою иконку фоновой
 * картинкой в цвете шапки (см. takaya_theme_preprocess_html) — на белом
 * она исчезала. Рисуем свою: чистый шеврон из двух линий, как у
 * образца, и он поворачивается при раскрытии.
 */
.site-header .primary-nav__button-toggle {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 0;
  background: none;
}

.site-header .primary-nav__button-toggle .icon--menu-toggle {
  display: none;
}

.site-header .primary-nav__button-toggle::after {
  content: "";
  position: absolute;
  inset-block-start: 38%;
  inset-inline-start: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--color-body-bg);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.25s ease, color 0.25s ease;
}

.site-header .primary-nav__menu-item:hover .primary-nav__button-toggle::after,
.site-header .primary-nav__button-toggle[aria-expanded="true"]::after {
  color: var(--color-primary);
}

/* Раскрытое подменю — стрелка смотрит вверх. */
.site-header .primary-nav__button-toggle[aria-expanded="true"]::after {
  transform: translate(-50%, -20%) rotate(-135deg);
}

/* Выпадающее меню на белом. */
@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-header .primary-nav__menu--level-2 {
    border: 1px solid rgb(17 37 45 / 0.12);
    box-shadow: 0 18px 40px rgb(17 37 45 / 0.14);
  }

  body:not(.is-always-mobile-nav) .site-header .primary-nav__menu-link--level-2,
  body:not(.is-always-mobile-nav) .site-header .primary-nav__menu-link--level-3 {
    color: var(--color-body-bg);
  }

  body:not(.is-always-mobile-nav) .site-header .primary-nav__menu-link--level-3 {
    color: rgb(17 37 45 / 0.6);
  }

  body:not(.is-always-mobile-nav) .site-header .primary-nav__menu-link--level-2:hover,
  body:not(.is-always-mobile-nav) .site-header .primary-nav__menu-link--level-3:hover {
    color: var(--color-primary);
  }
}

/*
 * Логотип. На тёмной шапке он сидел на белой плашке, чтобы не пропасть;
 * на белой шапке плашка стала заплаткой — убираем её.
 */
.site-header .site-branding img {
  background: none;
  padding: 0;
}

/* Переключатель языков — как у образца: простые подчёркнутые коды,
   без рамки-кнопки. */
.site-header .bbt-langswitch__toggle {
  border-color: rgb(17 37 45 / 0.25);
  color: var(--color-body-bg);
}

.site-header .bbt-langswitch__toggle:hover,
.site-header .bbt-langswitch__toggle:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.site-header .bbt-langswitch--js .bbt-langswitch__list {
  background: var(--color-white);
  border-color: rgb(17 37 45 / 0.12);
  box-shadow: 0 18px 40px rgb(17 37 45 / 0.16);
}

.site-header .bbt-langswitch__link {
  color: var(--color-body-bg);
}

.site-header .bbt-langswitch__link:hover,
.site-header .bbt-langswitch__link:focus-visible {
  background: rgb(17 37 45 / 0.06);
  color: var(--color-primary);
}

/*
 * Здесь стоял `.main-content { overflow-x: clip }` — он срезал лишнее у
 * подложки светлой полосы. Полосы отменены, а clip остался и срезал
 * ровно те ~90px, на которые первый экран сдвинут влево ради full-bleed:
 * заголовок визуально начинался с «АЙТСЁРФИНГ».
 *
 * Коварство в том, что через JS всё выглядело правильно —
 * getBoundingClientRect() возвращает полный прямоугольник, clip меняет
 * только отрисовку. Видно было лишь глазами на снимке экрана.
 */

/* Маркеры списка мест: Olivero вешает их через ::before на li. */
.bbt-about__places li::before,
.bbt-about__places li::marker {
  content: none;
  display: none;
}

.bbt-about__places {
  padding-inline-start: 0;
}

/* ──────────────── полоса под первым экраном ──────────────── */

/*
 * Акцентная лента во всю ширину с одной строкой о школе — ровно как у
 * образца под его первым экраном. Она закрывает разворот снизу: без
 * неё фотография обрывалась в пустоту и первый экран не читался как
 * законченный.
 */
.bbt-hero-strip {
  width: 100vw;
  width: 100dvw;
  margin-inline-start: calc(100% - 100vw);
  margin-inline-start: calc(100% - 100dvw);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 4vw, 72px);
  background: var(--color-primary);
}

.bbt-hero-strip__text {
  max-width: 62em;
  margin: 0;
  /* Тёмный текст на бирюзовой заливке: белый по ней даёт 2.1:1 и на
     солнце с телефона не читается, тёмный — 7.4:1. */
  color: var(--color-body-bg);
  font-size: clamp(12px, 1.15vw, 14px);
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ──────────────── правки шапки по образцу ──────────────── */

/*
 * Левая полоса отступа вдоль всего сайта.
 *
 * Olivero держит .main-content в своей сетке со смещением ~90px слева,
 * а справа контейнер уже упирается в край — получалась асимметричная
 * полоса вдоль всей страницы. Выравниваем контейнер по центру и даём
 * ему одинаковые поля с обеих сторон.
 */
/*
 * Olivero кладёт .main-content в свою сетку со смещением: слева ~90px,
 * справа край в край. Вдоль всей страницы шла светлая полоса, а контент
 * выглядел сдвинутым. margin-inline: auto тут бессилен — элемент стоит
 * в grid-колонке, и его положение задаёт именно она.
 */
.main-content {
  grid-column: 1 / -1;
  width: 100%;
  margin-inline: 0;
}

/* Содержимое держим по центру в своей мере ширины. */
.main-content__container.container {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 72px);
}

/*
 * Обложка внутренних страниц — тоже во всю ширину. Коллаж «лето и зима»
 * нарисован панорамой, и в 1620px из 1710 он смотрелся как вставка, а не
 * как шапка раздела.
 */
.bbt-hero {
  width: 100%;
}

/*
 * Меню прижато вправо, как у образца: логотип слева, пункты и языки
 * справа одной строкой.
 */
@media (min-width: 75rem) {
  .site-header__inner__container {
    gap: clamp(16px, 2vw, 42px);
  }

  body:not(.is-always-mobile-nav) .header-nav {
    margin-inline-start: auto;
  }

  body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
    justify-content: flex-end;
  }
}

/*
 * Стрелка у пунктов с подменю «улетала вверх»: Olivero кладёт кнопку
 * отдельным блоком рядом со ссылкой, и наш абсолютный шеврон считал
 * верх от неё, а не от строки меню. Ставим кнопку в одну линию со
 * ссылкой и выравниваем по центру — шеврон встаёт на базовую линию
 * текста.
 */
@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
    display: flex;
    align-items: center;
    gap: 0.15rem;
  }

  body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
    position: relative;
    inset: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
     * align-self обязателен: Olivero задаёт кнопке `align-self: stretch`,
     * а это свойство САМОГО элемента — оно перебивает `align-items:
     * center` родителя. Пункт меню высотой 99px, кнопка 18px — и она
     * прижималась к верхнему краю, отчего стрелки висели над строкой
     * меню, а не рядом с текстом.
     */
    align-self: center;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    transform: none;
  }

  body:not(.is-always-mobile-nav) .primary-nav__button-toggle::after {
    inset-block-start: 45%;
  }
}

/*
 * Языки в строку на большом экране — как EN | FR | RU у образца.
 * Выпадающий список остаётся для телефона: шесть кодов в строку там не
 * помещаются.
 */
@media (min-width: 75rem) {
  .site-header .bbt-langswitch--js .bbt-langswitch__toggle {
    display: none;
  }

  .site-header .bbt-langswitch--js .bbt-langswitch__list {
    position: static;
    display: flex;
    gap: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .site-header .bbt-langswitch__item + .bbt-langswitch__item {
    border-inline-start: 1px solid rgb(17 37 45 / 0.25);
  }

  .site-header .bbt-langswitch__link {
    gap: 0;
    padding: 0.1rem 0.5rem;
    border-radius: 0;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .site-header .bbt-langswitch__link:hover {
    background: none;
  }

  /* В строке оставляем только код языка: названия («Українська»,
     «Deutsch») заняли бы пол-шапки. */
  .site-header .bbt-langswitch__name {
    display: none;
  }

  /* Текущий язык подчёркнут — так у образца. */
  .site-header .bbt-langswitch__link.is-current {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/*
 * Пункты меню: крупнее и обычным начертанием.
 *
 * Было 18px полужирным — в одну величину с кодами языков рядом, отчего
 * меню и переключатель читались как один ряд равнозначных ссылок. У
 * образца пункты заметно крупнее языков и набраны обычным весом:
 * жирный капс читается как вывеска, обычный — как навигация.
 */
.site-header .primary-nav__menu-link--level-1 {
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Коды языков наоборот мельче — они вторичны. */
@media (min-width: 75rem) {
  .site-header .bbt-langswitch__link {
    font-size: 12px;
  }
}

/* ─────────────────────────── карусель ───────────────────────────
 *
 * Один компонент на три применения: локации, блог, отзывы. Приём с
 * образца — лента карточек, соседняя подглядывает из-за края, стрелки
 * в кругах. Подглядывающий край важнее, чем кажется: он единственный
 * честно говорит, что лента продолжается.
 *
 * Прокручивает браузер (overflow + scroll-snap), скрипт только жмёт
 * стрелки — см. js/carousel.js.
 */
.bbt-carousel {
  position: relative;
  margin-block-start: var(--bbt-section-gap);
}

.bbt-carousel__head {
  margin-block-end: var(--bbt-block-gap);
}

.bbt-carousel__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--bbt-tracking-head);
  text-transform: uppercase;
  color: var(--color-white);
}

.bbt-carousel__track {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0 0 0.5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Полосу прокрутки прячем: лента листается стрелками и пальцем, а
     системная полоса под карточками выглядит как недоделка. */
  scrollbar-width: none;
}

.bbt-carousel__track::-webkit-scrollbar {
  display: none;
}

/*
 * Ширину задаёт СЛАЙД, а не карточка внутри. При `flex-basis: auto`
 * ширина бралась не из содержимого, а из раскладки списка — слайд
 * выходил 736px при карточке в 980, и карточки наезжали друг на друга.
 */
.bbt-carousel__slide {
  flex: 0 0 min(86vw, 980px);
  margin: 0;
  scroll-snap-align: start;
}

/* Стрелки — круги по бокам, как у образца. */
.bbt-carousel__arrow {
  position: absolute;
  inset-block-start: 58%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 4vw, 56px);
  height: clamp(44px, 4vw, 56px);
  padding: 0;
  border: 1px solid var(--bbt-hairline);
  border-radius: 50%;
  background: var(--color-body-bg);
  color: var(--color-white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.bbt-carousel__arrow:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.bbt-carousel__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.bbt-carousel__arrow--prev {
  inset-inline-start: clamp(-10px, -1vw, 0px);
}

.bbt-carousel__arrow--next {
  inset-inline-end: clamp(-10px, -1vw, 0px);
}

/* Стрелка смотрит по направлению чтения: на иврите — в другую сторону. */
.bbt-carousel__arrow--prev::before {
  content: "←";
}

.bbt-carousel__arrow--next::before {
  content: "→";
}

[dir="rtl"] .bbt-carousel__arrow--prev::before {
  content: "→";
}

[dir="rtl"] .bbt-carousel__arrow--next::before {
  content: "←";
}

/* ── карточка локации: фото + панель с текстом, как у образца ── */

.bbt-locality {
  display: grid;
  width: 100%;
  height: 100%;
  background: var(--bbt-surface);
}

/*
 * min-width: 0 обязателен. По умолчанию элемент грида не ужимается
 * меньше своего содержимого (min-width: auto), и колонка с текстом
 * раздувалась под самую длинную строку — карточка вылезала за свою
 * ширину и наезжала на соседнюю в ленте.
 */
.bbt-locality > * {
  min-width: 0;
}

@media (min-width: 48rem) {
  .bbt-locality {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.bbt-locality__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(220px, 28vw, 420px);
  object-fit: cover;
}

.bbt-locality__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: clamp(24px, 3vw, 54px);
}

.bbt-locality__kicker {
  color: var(--color-muted);
  font-size: clamp(11px, 1vw, 12px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bbt-locality__title {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-head);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: var(--bbt-tracking-head);
  text-transform: uppercase;
}

.bbt-locality__text {
  margin: 0;
  /* Меру строки здесь не ограничиваем: колонка карточки и так узкая,
     а лишний max-width заставлял текст вылезать за её край. */
  color: var(--color-text);
}

/* Ссылка «подробнее» с кружком-стрелкой — приём образца. */
.bbt-locality__more {
  /* inline-flex, а не flex: иначе ссылка растягивается на всю колонку
     и подчёркивание тянется линией через всю карточку. Плюс гасим
     подчёркивание — его роль здесь играет кружок со стрелкой. */
  display: inline-flex;
  align-self: flex-start;
  text-decoration: none;
  align-items: center;
  gap: 0.8rem;
  margin-block-start: 0.4rem;
  color: var(--color-text);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.bbt-locality__more::after {
  content: "›";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--bbt-hairline);
  border-radius: 50%;
  font-size: 15px;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.bbt-locality__more:hover {
  color: var(--color-primary);
}

.bbt-locality__more:hover::after {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ── карточка статьи в карусели (образец «INSIGHTS») ── */

.bbt-carousel__slide--article {
  flex-basis: min(80vw, 360px);
}

.bbt-article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--color-text);
}

.bbt-article-card__media {
  display: block;
  overflow: hidden;
  margin-block-end: 1.1rem;
}

.bbt-article-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.bbt-article-card:hover .bbt-article-card__media img {
  transform: scale(1.04);
}

/* Категория над названием — мелкий капс с разрядкой, как у образца. */
.bbt-article-card__category {
  display: block;
  margin-block-end: 0.5rem;
  color: var(--color-primary);
  font-size: clamp(10px, 0.95vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.bbt-article-card__title {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-white);
}

.bbt-article-card__more {
  display: inline-block;
  margin-block-start: auto;
  padding-block-start: 1rem;
  color: var(--color-muted);
  font-size: clamp(10px, 0.95vw, 12px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Подчёркивание только под словом, а не под всей колонкой: ссылка
     занимает всю карточку, и линия иначе тянулась бы через неё. */
  border-block-end: 1px solid var(--bbt-hairline);
}

.bbt-article-card:hover .bbt-article-card__more {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Ссылка на весь список под каруселью. */
.bbt-carousel__footer {
  margin: var(--bbt-block-gap) 0 0;
  text-align: end;
}

.bbt-carousel__all {
  color: var(--color-text);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-block-end: 1px solid var(--bbt-hairline);
}

.bbt-carousel__all:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ── карточка ролика в карусели ── */

.bbt-carousel__slide--video {
  flex-basis: min(80vw, 400px);
}

/*
 * Карточка — это <button> (фасад ролика), поэтому сбрасываем всё, что
 * браузер даёт кнопкам по умолчанию: рамку, фон, выравнивание текста.
 */
.bbt-video-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  text-align: start;
  cursor: pointer;
}

.bbt-video-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  margin-block-end: 1.1rem;
}

.bbt-video-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.bbt-video-card:hover .bbt-video-card__media img {
  transform: scale(1.04);
}

.bbt-video-card__category {
  display: block;
  margin-block-end: 0.5rem;
  color: var(--color-primary);
  font-size: clamp(10px, 0.95vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.bbt-video-card__title {
  display: block;
  padding: 0;
  font-family: var(--font-head);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-white);
}

/*
 * Маркеры у слайдов. Трек — это <ul>, и list-style: none на нём
 * недостаточно: Olivero рисует маркер отдельным ::before на самом <li>,
 * и между карточками висели точки.
 */
.bbt-carousel__track > li::before,
.bbt-carousel__track > li::marker {
  content: none;
  display: none;
}

.bbt-carousel__track > li {
  padding-inline-start: 0;
}

/* ── карточка отзыва в карусели ── */

/*
 * Клиент 26.09.2026: «один отзыв очень длинный, а рядом очень короткий,
 * плохо смотрится — это регулируется как-то?». В сетке разнобой высот
 * неизбежен: отзывы пишут люди, и длину им не задашь. В карусели
 * карточки одной ширины и одной высоты, а текст уже подрезан анонсом в
 * 220 знаков — разнобоя не остаётся.
 */
.bbt-carousel__slide--review {
  flex-basis: min(82vw, 420px);
}

.bbt-carousel--reviews .bbt-review {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
  margin: 0;
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--bbt-surface);
}

.bbt-carousel--reviews .bbt-review__stars {
  color: var(--color-primary);
  font-size: 15px;
  letter-spacing: 0.1em;
}

.bbt-carousel--reviews .bbt-review__text {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-text);
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.6;
  font-style: normal;
}

.bbt-carousel--reviews .bbt-review__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--bbt-hairline);
  color: var(--color-muted);
  font-size: clamp(10px, 0.95vw, 12px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bbt-carousel--reviews .bbt-review__author {
  color: var(--color-white);
}

/* ── фоновая графика: линейный кайтсёрфер ──
 *
 * Аналог пальмы в SEO-секциях образца. Рисунок лежит подложкой справа
 * от текста блока «О нас»: заполняет пустоту рядом с колонкой и держит
 * композицию, не отвлекая на себя.
 *
 * Прячем на узких экранах: там колонки складываются в одну, и рисунок
 * оказался бы прямо под текстом.
 */
@media (min-width: 62rem) {
  .bbt-about {
    position: relative;
  }

  .bbt-about::after {
    content: "";
    position: absolute;
    z-index: -1;
    /*
     * Место выбрано по реальной пустоте, а не «как у образца»: у них
     * пальма стоит справа от заголовка, потому что там пустая половина
     * полосы. У нас правую половину занимает фотография, и рисунок в
     * середине просто уезжал под неё — видно было пол-кайта.
     * Пустота здесь одна: под строкой мест в левой колонке.
     */
    inset-block-end: 6px;
    inset-inline-start: 0;
    width: clamp(140px, 12vw, 190px);
    aspect-ratio: 420 / 620;
    /*
     * Файл подключён фоном, а не <img>: фоновая картинка не наследует
     * currentColor, поэтому цвет линии задан прямо в самом SVG, а
     * здесь регулируется только прозрачность.
     */
    background: url("../images/art/kitesurfer.svg") center / contain no-repeat;
    /*
     * На тёмном фоне тонкая линия теряется быстрее, чем на светлом: у
     * образца пальма нарисована по белому и ей хватает еле заметного
     * голубого. При 0.16 рисунка не было видно вовсе — подняли втрое.
     */
    opacity: 0.5;
    color: var(--color-primary);
    pointer-events: none;
  }
}

/*
 * Трек слайдера на первом экране — обрезаем по своей половине.
 *
 * Слайды лежат в ряд, каждый шириной с экран, и до того как отработает
 * js/hero-slider.js, лента торчит за правый край страницы: на бою это
 * дало горизонтальную прокрутку в тысячу пикселей. Локально не
 * воспроизводилось — скрипт успевал раньше отрисовки.
 *
 * Прячем на самом треке, а не на родителе: родитель уже обрезан, но
 * трек внутри него позиционируется своим механизмом.
 */
.bbt-hero--front .takaya-hero-slider,
.bbt-hero--front .takaya-hero-slider__track,
.bbt-hero--front .region--hero {
  overflow: hidden;
  max-width: 100%;
}

/*
 * Элементы сетки секций не должны раздуваться под содержимое.
 *
 * Карусели лежат внутри .takaya-messaging__grid, и его элемент по
 * умолчанию имеет min-width: auto — то есть не ужимается меньше своего
 * содержимого. Лента из восьми отзывов растянула элемент до 2560px, и
 * страница получила горизонтальную прокрутку: сама-то лента обрезана
 * своим overflow, но коробка вокруг неё — нет.
 *
 * Та же грабля, что и с карточкой локации внутри карусели; в гриде она
 * вылезает каждый раз, когда внутрь кладут что-то широкое.
 */
.takaya-messaging__grid .field--name-field-items > .field__item,
.takaya-messaging__grid .takaya-messaging__item {
  min-width: 0;
}