/* Блоки кейсу. Кожен тип — окрема секція.
   Додати новий тип = дописати правило тут і шаблон у CLAUDE.md. Наявні кейси не чіпаються. */

/* Відступ від хедера до першого блоку кейсу. На десктопі intro в усіх кейсах
   починається рівно посередині висоти екрана, хоч яке вікно; хедер стоїть у
   потоці, тому його висоту віднімаємо. Мобільний — з макета: контент на 176
   при хедері 59. */
main.stack { padding-top: calc(50svh - var(--header-h)); }

@media (max-width: 1023px) {
  main.stack { padding-top: 117px; }
}

/* Два медіа-блоки поспіль у макеті утворюють один блок з відступом 24 між ними */
.stack > [class*="b-media"] + [class*="b-media"] { margin-top: var(--gutter); }

/* ...але не всюди: подекуди сусідні медіа-блоки мають лишатись окремими, і тоді
   між ними звичайний крок секції. Селектор навмисне тієї ж ваги, що й правило
   вище, і стоїть після нього — інакше не переважив би. */
.stack > [class*="b-media"] + .is-apart { margin-top: var(--section-gap); }

/* ...і навпаки: блок, що не є медіа (карусель, плитка в рамці), теж може
   стояти впритул до сусідів групи — тоді крок 24, як між медіа */
.stack > .is-tight { margin-top: var(--gutter); }

/* Підпис під медіа належить тому, що над ним, тож тулиться до нього ґатером.
   Зворотний бік — від підпису до наступного медіа — лишається звичайним кроком
   секції, інакше блоки злилися б в одну суцільну стрічку. */
.stack > [class*="b-media"] + .b-text { margin-top: var(--gutter); }
/* ...або стоїть окремо, коли так вирішено для кейсу: тоді звичайний крок секції */
.stack > [class*="b-media"] + .b-text.is-apart { margin-top: var(--section-gap); }

.media {
  border-radius: var(--radius);
  overflow: hidden;
}

/* Сірий фон — лише поки в кадрі порожньо: у шаблоні він показує форму блоку.
   Щойно контент є, фон має бути прозорим, інакше крізь прозорі місця картинки
   видно заглушку, а не те, що під нею. */
.media:empty { background: var(--c-placeholder); }
.media > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- tiles: мозаїка плиток 5 в ряд на всю ширину макета.
   Порожні клітинки лишаються порожніми — позиція плитки задана її номером. --- */
.b-tiles__grid {
  /* у межах контентної колонки, як решта медіа, а не на всю ширину макета */
  grid-column: 3 / span 8;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gutter);
}

.b-tiles__grid img {
  grid-column: var(--c);
  grid-row: var(--r);
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: calc(var(--radius) * 3); /* утричі більше за контентні блоки */
}

/* --- intro: назва + підзаголовок зліва, опис справа. Один на кейс, містить h1 --- */
.b-intro__title { grid-column: 3 / span 3; }
.b-intro__body  { grid-column: 7 / span 4; }
.b-intro__sub { margin-top: 4px; color: var(--c-text-muted); } /* 4 — з макета */

/* --- media-wide: одне медіа 840 по центру --- */
.b-media-wide > .media { grid-column: 3 / span 8; aspect-ratio: var(--ar, 840 / 472); }

/* Кадр, у якого для мобільного є окремий ролик.
   Горизонтальний кадр на телефоні дрібніє до нечитабельного, тому там своя
   вертикальна версія — і своя пропорція рамки. Прихований ролик не качається:
   у display:none немає рамки, тож спостерігач появи в кадрі його не бачить. */
.media--dual > .media__mob { display: none; }

/* Кадр, який на мобільному замінюють кілька окремих — наприклад, широка
   картинка з двох половин, що на телефоні стають двома вертикальними одна
   під одною. Обидва набори лежать у тій самій секції, показується один. */
.media--mob-only { display: none; }

/* Коли десктопна й мобільна версії — не один файл, а набір кадрів
   (слайдшоу чи горталка), кожен набір лежить у власній обгортці на весь кадр. */
.media--dual > div.media__desk,
.media--dual > div.media__mob {
  width: 100%;
  height: 100%;
}
.media--slides > img,
.media--glide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- glide: кадри самі виїжджають убік, як від свайпу, і йдуть по колу.
   Після останнього знову перший — скрипт дописує його копію в кінець і
   непомітно перестрибує на початок, тож шва немає. Рух — лише transform. --- */
.media--glide {
  display: flex;
  overflow: hidden;
  /* Safari під час руху кадру губить закруглені кути рамки — власний шар
     змушує його обрізати правильно */
  isolation: isolate;
  transform: translateZ(0);
}
.media--glide > img {
  flex: 0 0 100%;
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.media--glide.is-jump > img { transition: none; }

/* Крапки під горталкою: скільки кадрів і який зараз. Лише показують
   позицію, не клікаються. Ще не показані — напівпрозорі з розмиттям фону,
   щоб читались на будь-якому кадрі. */
.media--glide { position: relative; }
.glide__dots,
.swipe__dots {
  position: absolute;
  left: 50%;
  bottom: var(--dot-bottom);
  transform: translateX(-50%);
  display: flex;
  gap: var(--dot-gap);
  pointer-events: none;
}
.glide__dots > span,
.swipe__dots > span {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--c-dot-idle);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.glide__dots > .is-on,
.swipe__dots > .is-on { background: var(--c-dot); }

/* Клік по лівій половині гортає назад, по правій — вперед (app.js) */
.media--glide.is-prev,
.media--swipe.is-prev { cursor: var(--cursor-prev); }
.media--glide.is-next,
.media--swipe.is-next { cursor: var(--cursor-next); }

/* --- media-pair: два по 408. На мобільному — стек --- */
/* Пропорцію кадру можна перебити через --ar: у слот тієї самої ширини іноді
   лягає контент іншого формату, наприклад вертикальний 9:16. */
.b-media-pair > .media:first-child { grid-column: 3 / span 4; aspect-ratio: var(--ar, 408 / 544); }
.b-media-pair > .media:last-child  { grid-column: 7 / span 4; aspect-ratio: var(--ar, 408 / 544); }

/* --- media-duo: високий кадр ліворуч, два горизонтальні стосом праворуч.
   Ліва половина тягнеться на обидва рядки правої, тож її висоту задають саме
   вони — окрема пропорція їй не потрібна. На мобільному все стає одне під
   одним, і там висоту лівого кадру вже треба задати. --- */
.b-media-duo > .media--tall {
  grid-column: 3 / span 4;
  grid-row: span 2;
}

.b-media-duo > .media--wide {
  grid-column: 7 / span 4;
  aspect-ratio: 408 / 272;
}

/* --- media-full: від краю до краю --- */
.b-media-full > .media {
  grid-column: 1 / -1;
  /* виходить за поля сторінки, але лишається в межах макета 1512, не на все вікно */
  margin-inline: calc(-1 * var(--margin));
  aspect-ratio: var(--ar, 1512 / 844);
}

/* --- media-cols: дві колонки по 408, у кожній стос кадрів різної форми.
   Несиметрична мозаїка: наприклад, ліворуч квадрат над широким, праворуч
   широкий над квадратом — висоти колонок збігаються самі. Пропорцію кожного
   кадру задає --ar. На мобільному колонки стають одним стосом. --- */
.b-media-cols__col {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}
.b-media-cols__col:first-child { grid-column: 3 / span 4; }
.b-media-cols__col:last-child  { grid-column: 7 / span 4; }
.b-media-cols__col > .media { aspect-ratio: var(--ar, 1); }

/* --- carousel: горизонтальна стрічка, вилазить за поля. На мобільному — сітка плиток --- */
.b-carousel__track {
  grid-column: 3 / span 8;
  aspect-ratio: 840 / 472;
  border-radius: var(--radius);
  background: var(--c-carousel);

  /* смуга плиток ширша за рамку і обрізається нею — як у макеті */
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.b-carousel__track::-webkit-scrollbar { display: none; }
.b-carousel__track > .media {
  flex: 0 0 192px;
  aspect-ratio: 192 / 256;
  background: var(--c-surface);
}

/* Модифікатор .b-carousel--still: кілька кадрів у тій самій сірій рамці, але
   нерухомо й по центру — як три постери в ряд. Кадри вужчі за рамку, тож
   стрічці нікуди їхати, і скрипт її не зсуває. Пропорцію кадру задає --ar.
   На телефоні лишаються в одному ряду, а не стають сіткою. */
.b-carousel--still .b-carousel__track { justify-content: center; }
.b-carousel--still .b-carousel__track > .media { flex: 0 0 23.5%; aspect-ratio: var(--ar, 192 / 256); }

/* Модифікатор .b-carousel--tiles: плитка кадрів у сірій рамці, 3 в ряд
   (на телефоні 2). Нерухомо, пропорцію задає --ar. */
.b-carousel--tiles .b-carousel__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  aspect-ratio: auto;
  padding: calc(var(--gutter) * 2);
}
.b-carousel--tiles .b-carousel__track > .media { flex: none; aspect-ratio: var(--ar, 4 / 5); }

/* Стрічку гортає прокрутка сторінки (app.js). Поки скрипт веде зсув, ручна
   прокрутка вбік вимкнена, щоб одне не билось з іншим. Без скрипта
   лишається звичайна стрічка, яку гортають пальцем. */
.b-carousel__track.is-scrubbing { overflow: hidden; }
.b-carousel__track.is-scrubbing > .media { will-change: transform; }

/* --- statement: великий текст по центру + абзац під ним --- */
.b-statement { text-align: center; }
.b-statement__lead {
  grid-column: 1 / -1;
  max-width: 722px;
  margin-inline: auto;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
}
.b-statement__body {
  grid-column: 1 / -1;
  max-width: 638px;
  margin-inline: auto;
  /* Крок до заголовка дає row-gap сітки — у макеті це рівно 24. Власний
     відступ додавався б згори й давав подвійний. */
  line-height: var(--lh-tight); /* у макеті 120% */
  color: var(--c-text-muted);   /* бодітекст завжди приглушений, як усюди на сайті */
}

/* --- text-block: абзац справа + опціональний підпис зліва --- */
.b-text__label { grid-column: 3 / span 3; }
.b-text__body  { grid-column: 7 / span 4; color: var(--c-text-muted); }

/* --- impact: стрічка карток, як у Collins. Перша картка стоїть на колонці 3,
   рівно під заголовком, решта йде за правий край; гортається трекпадом чи
   перетягуванням мишею (app.js) і прилипає по картках. Стрічка на всю ширину
   макета: поля сторінки прибираємо відʼємним полем, відступ до колонки 3
   повертаємо падінгом. Колонку рахуємо від ширини секції контейнерними
   одиницями — відсотки всередині стрічки рахувались би від неї самої. --- */
.b-impact { container-type: inline-size; }
.b-impact__grid {
  --col: calc((100cqw - 11 * var(--gutter)) / 12);
  --to-col3: calc(var(--margin) + 2 * (var(--col) + var(--gutter)));
  grid-column: 1 / -1;
  display: flex;
  gap: var(--gutter);
  margin-inline: calc(-1 * var(--margin));
  padding-inline: var(--to-col3);
  scroll-padding-inline: var(--to-col3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.b-impact__grid::-webkit-scrollbar { display: none; }
.b-impact__grid.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.b-impact__grid > .b-impact__card {
  flex: 0 0 calc(3 * var(--col) + 2 * var(--gutter)); /* три колонки — 300 на макеті */
  scroll-snap-align: start;
}

.b-impact__card {
  aspect-ratio: 300 / 400;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--c-surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* --- credits --- */
/* Стрілка в картці — малюнок, а не символ «→»: у шматку Inter, який віддає
   Google Fonts, цього знака немає, і браузер брав його з іншого шрифту —
   на різних компʼютерах стрілка виглядала по-різному. */
.b-impact__arrow { display: block; width: 1em; height: 1em; }

.b-credits__label { grid-column: 3 / span 3; }
.b-credits__list  { grid-column: 7 / span 4; }
/* Подяка першим рядком списку, від людей її відбиває рівно один порожній рядок */
.b-credits__thanks { margin-bottom: calc(var(--lh-body) * 1em); }

/* Заголовки цих блоків стоять на тій самій вісі, що й текст і медіа вище —
   колонка 3, а не від краю полів */
/* Заголовки блоків того ж кегля, що h1 і великі тексти — 36 на десктопі,
   30 на мобільному. Не бодітекст. */
.b-impact > h2,
.b-more > h2 {
  grid-column: 3 / span 8;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
}

/* У макеті від заголовка до вмісту 24 в обох блоках */

/* --- swipe: повнокадрова горталка. Кадр займає всю рамку, гортається вбік
   пальцем чи трекпадом і прилипає до країв — як фото в галереї телефона.
   Усе на нативній прокрутці, без скрипта: так інерція й прилипання поводяться
   рідно для системи, а не імітуються. --- */
.media--swipe {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.media--swipe::-webkit-scrollbar { display: none; }

.media--swipe > img,
.media--swipe > video {
  flex: 0 0 100%;
  scroll-snap-align: start;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Щоб під горталкою стояли крапки, скрипт переносить кадри у внутрішню
   стрічку: крапки лежать на рамці й не їдуть разом із прокруткою. */
.media--swipe.has-dots {
  display: block;
  position: relative;
  overflow: hidden;
}
.swipe__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.swipe__track::-webkit-scrollbar { display: none; }
.swipe__track > img,
.swipe__track > video {
  flex: 0 0 100%;
  scroll-snap-align: start;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Світла смуга за групою блоків.
   По центру відтінок, до верху й низу тане у фон сторінки — тому країв смуги
   не видно й вона не потребує точних меж. Фон кладемо на саму обгортку, без
   псевдоелемента: так він гарантовано лежить під вмістом і не залежить від
   контексту накладання. Обгортка несе ще й клас stack, щоб усередині діяли ті
   самі правила кроку між блоками, що й у головній колонці. --- */
.band {
  --band-tint: var(--c-band);
  /* Наскільки смуга вилазить за свої блоки згори й знизу. Саме в цей запас
     ідуть розтяжки, тому весь контент лежить на суцільному відтінку, а не на
     переході. Відступ компенсуємо полями, щоб крок між секціями не змінився. */
  --band-reach: 200px;
  padding-block: var(--band-reach);
  margin-top: calc(var(--section-gap) - var(--band-reach));
  margin-bottom: calc(-1 * var(--band-reach));
  background: linear-gradient(to bottom,
    var(--c-bg) 0,
    var(--band-tint) var(--band-reach),
    var(--band-tint) calc(100% - var(--band-reach)),
    var(--c-bg) 100%);
}

/* Крок до смуги задає вона сама, тож власний крок першого блоку прибираємо.
   Але коли блок компенсує свій внутрішній відступ від'ємним полем — як блок
   екранів на мобільному, — компенсацію треба лишити, інакше цей відступ
   додасться згори. На десктопі змінної немає, запасне значення дає нуль. */
.band > :first-child { margin-top: 0; }
.band > .b-screens:first-child { margin-top: calc(-1 * var(--screens-pad, 0px)); }

/* --- more-projects: 4 прев'ю ---
   Поводяться як картки на головній: де для кейсу є другий кадр, він
   проявляється на наведенні; де немає — обкладинка злегка темніє. --- */
.b-more__grid {
  grid-column: 3 / span 8;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
.b-more__grid .media { aspect-ratio: 192 / 256; }

.b-more__grid .media { position: relative; }

.b-more__hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

/* Затемнення тільки там, де другого кадру немає — інакше його заміняє сам кадр */
.b-more__grid .media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 10%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.b-more__grid .media:has(.b-more__hover)::after { content: none; }

@media (hover: hover) {
  .b-more__grid .media:hover .b-more__hover { opacity: 1; }
  .b-more__grid .media:hover::after { opacity: 1; }
}

/* ---------- Мобільні правила ---------- */
@media (max-width: 1023px) {
  .b-intro__title,
  .b-intro__body,
  .b-media-wide > .media,
  .b-media-duo > .media--tall,
  .b-media-duo > .media--wide,
  .b-media-pair > .media:first-child,
  .b-media-pair > .media:last-child,
  .b-media-cols__col:first-child,
  .b-media-cols__col:last-child,
  .b-text__label,
  .b-text__body,
  .b-credits__label,
  .b-credits__list,
  .b-more__grid { grid-column: 1 / -1; }

  /* Відступ між кадрами пари дає row-gap самої сітки. Власний margin тут колись
     стояв додатково — і всередині пари виходило вдвічі більше, ніж між парами. */

  /* карусель стає сіткою плиток 2×N на всю ширину контенту, без сірої рамки */
  .b-carousel__track {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    aspect-ratio: auto;
    padding: 0;
    background: none;
    border-radius: 0;
    overflow: visible;
  }
  .b-carousel__track > .media { flex: none; }
  /* непарна плитка лишила б останній ряд напівпорожнім — ховаємо її */
  .b-carousel__track > .media:last-child:nth-child(odd) { display: none; }
  .b-carousel--tiles .b-carousel__track {
    grid-template-columns: repeat(2, 1fr);
    padding: var(--gutter);
    background: var(--c-carousel);
    border-radius: var(--radius);
  }
  .b-carousel--still .b-carousel__track {
    display: flex;
    aspect-ratio: 840 / 472;
    padding: var(--gutter);
    background: var(--c-carousel);
    border-radius: var(--radius);
  }
  .b-carousel--still .b-carousel__track > .media { flex: 0 0 28%; }
  .b-carousel--still .b-carousel__track > .media:last-child:nth-child(odd) { display: block; }

  /* на мобільному мозаїка по три в ряд, позиції з --mc / --mr */
  .b-tiles__grid { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .b-tiles__grid img { grid-column: var(--mc); grid-row: var(--mr); }

  /* Impact на телефоні — не стос, а стрічка карток на всю ширину екрана:
     гортається пальцем і прилипає по картках, наступна визирає справа —
     підказка, що далі ще є. Як у Collins. */
  .b-impact__grid {
    display: flex;
    gap: var(--gutter);
    margin-inline: calc(-1 * var(--margin));
    padding-inline: var(--margin);
    scroll-padding-inline: var(--margin);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .b-impact__grid::-webkit-scrollbar { display: none; }
  /* Пропорція — нижня межа: довший текст картку розтягне, а не переповнить */
  .b-impact__grid > .b-impact__card {
    flex: 0 0 calc(100% - var(--card-peek));
    aspect-ratio: 3 / 2;
    scroll-snap-align: start;
  }
  .b-impact__grid { cursor: auto; }
  .b-impact > h2, .b-more > h2 { grid-column: 1 / -1; }
  .b-more__grid { grid-template-columns: repeat(2, 1fr); }

  /* стос по черзі: рядки більше не спарені, тож лівому кадру потрібна пропорція */
  .b-media-duo > .media--tall { grid-row: auto; aspect-ratio: 3 / 4; }

  /* Повноширинний кадр буває з власною вертикальною версією під мобільний —
     тоді в неї й пропорція своя */
  .b-media-full > .media { aspect-ratio: var(--ar-mob, var(--ar, 1512 / 844)); }

  /* Кроки заголовок → текст із мобільного макета. Сітка дає 16, решту
     добираємо відступом: у макеті 32 майже скрізь, 24 у кредитах, 8 у підзаголовку. */
  .b-intro__body { margin-top: 16px; }
  .b-statement__body { margin-top: 16px; }
  .b-impact > h2, .b-more > h2 { margin-bottom: 16px; }
  .b-credits__list { margin-top: 8px; }

  /* на телефоні цей кадр вертикальний і показує власний ролик */
  .b-media-wide > .media--dual { aspect-ratio: var(--ar-mob, 1080 / 1440); }
  .media--dual > .media__desk { display: none; }
  .media--dual > .media__mob { display: block; }
  /* мобільна горталка лишається рядком кадрів, а не стосом */
  .media--dual > .media__mob.media--glide { display: flex; }
  .media--desk-only { display: none; }
  .media--mob-only { display: block; }
}

/* --- Слайдшоу всередині медіа-кадру.
   Кадри лежать стопкою й перемикаються один за одним. Крок задає спільний
   таймер у app.js: швидкість у всіх рамок однакова, але гортає він їх по
   черзі, тож два слайдшоу на одному екрані ніколи не клацають разом. --- */
.media--slides { position: relative; }

/* Кадр вмикається одразу, без розчинення. Ховаємо видимістю, а не display:
   при display:none браузер не вважає картинку намальованою й відкладає
   завантаження до самого перемикання — перше коло йшло б з порожніми кадрами. */
.media--slides > img,
.media--slides > video {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.media--slides > .is-on { visibility: visible; }



/* --- screens: три екрани в ряд у контентній колонці 336…1176.
   Тінь не малюємо стилями: у файлах вона вже запечена разом із прозорим полем
   навколо. Інакше drop-shadow ішов би по прямокутнику картинки, а не по силуету
   телефона, і будь-який overflow різав би її навпіл.
   Через це картинка ширша за свій кадр рівно на це поле, і від'ємні поля
   повертають її назад — видима частина сідає точно в межі сітки. --- */
.b-screens__track {
  grid-column: 3 / span 8;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.b-screens__item { will-change: transform; }

/* 1000 / 680 — полотно файлу проти видимої частини; 160 / 680 — саме поле.
   Відсоткові поля, зокрема верхнє й нижнє, рахуються від ширини, тому
   пропорція тримається на будь-якому розмірі. */
.b-screens__item img {
  display: block;
  width: 147.06%;
  /* базовий ресет тримає картинки в межах батька — тут це зайве: полотно
     навмисне ширше за кадр, і без цього воно обрізалось би до ширини кадру,
     а від'ємні поля зсували б видиму частину повз сітку */
  max-width: none;
  margin: -23.53%;
}

@media (max-width: 1023px) {
  /* Стрічка стає горизонтальною: перший екран стоїть рівно на лівій межі сітки,
     решта чекають за правим краєм і заїжджають на прокрутці. Кадр — три
     колонки з чотирьох, зменшені на 15%. */
  .b-screens {
    overflow: hidden; /* стрічка не має розтягувати сторінку вбік */
    /* запас під поле з тінню, щоб клип не зрізав її зверху й знизу;
       верхній відступ добираємо до звичайного кроку секцій */
    --screens-pad: 56px;
    padding-block: var(--screens-pad);
    margin-top: calc(var(--section-gap) - var(--screens-pad));
    margin-bottom: calc(-1 * var(--screens-pad));
  }

  .b-screens__track {
    /* на мобільному сітка на чотири колонки, тож контентну колонку десктопа
       скидаємо — стрічка починається рівно на лівій межі полів */
    grid-column: 1 / -1;
    --screens-col: calc((100vw - 2 * var(--margin) - 3 * var(--gutter)) / 4);
    display: flex;
    width: max-content;
    will-change: transform;
  }

  .b-screens__item {
    flex: 0 0 auto;
    width: calc((var(--screens-col) * 3 + var(--gutter) * 2) * 0.85);
    will-change: auto;
  }
}

/* Планшет вертикально (700–1023): пари й двоколонкова мозаїка лишаються
   поруч, як на десктопі, — стосом кожен кадр був би майже на весь екран */
@media (min-width: 700px) and (max-width: 1023px) {
  .b-media-pair > .media:first-child,
  .b-media-cols__col:first-child { grid-column: 1 / span 2; }
  .b-media-pair > .media:last-child,
  .b-media-cols__col:last-child { grid-column: 3 / span 2; }
}

/* Посилання всередині абзаців (імена людей, адреса каналу) підкреслені тонкою
   лінією — інакше в приглушеному тексті їх не відрізнити від слів поруч.
   У кредитах посилання без підкреслення: там увесь рядок — перелік людей. */
.b-intro__body a,
.b-text__body a,
.b-statement__body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Телефон: без рамки — кадри стосом один під одним на всю ширину сітки,
   у ряд вони ставали завдрібними. Планшет лишається з рядом у рамці. */
@media (max-width: 699px) {
  .b-carousel--still .b-carousel__track {
    flex-direction: column;
    aspect-ratio: auto;
    padding: 0;
    background: none;
    border-radius: 0;
  }
  .b-carousel--still .b-carousel__track > .media { flex: none; width: 100%; }
}

/* Телефон, модифікатор .b-carousel--swipe-mob: нерухомі кадри стають стрічкою,
   яку гортають пальцем, як impact — кадр майже на весь екран, наступний
   визирає справа, без рамки. Модифікатор плитки .b-carousel--tiles на
   телефоні — звичайна плитка 2 в ряд без рамки. */
@media (max-width: 699px) {
  .b-carousel--swipe-mob .b-carousel__track {
    flex-direction: row;
    justify-content: flex-start; /* центрування з десктопа зсувало першу картку за лівий край */
    gap: var(--gutter);
    margin-inline: calc(-1 * var(--margin));
    padding-inline: var(--margin);
    scroll-padding-inline: var(--margin);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .b-carousel--swipe-mob .b-carousel__track::-webkit-scrollbar { display: none; }
  .b-carousel--swipe-mob .b-carousel__track > .media {
    flex: 0 0 calc(100% - var(--card-peek));
    width: auto;
    scroll-snap-align: start;
  }
  .b-carousel--tiles .b-carousel__track {
    padding: 0;
    background: none;
    border-radius: 0;
  }
}