/* 1114 — /shiny-i-diski/ (1121) по замечаниям владельца 19.09. Отдаётся напрямую (inc/wheels-1121.php), dist не пересобирается.
   Токены — дизайн-система 1078/1096 (--line, --caption, --gt-red, радиусы 8/16, Montserrat).
   v2 (1122): §5 хвосты DEFECTS_1121 (1121-4, -6, -7, -9, -11), визуальная высота знаков полосы (§2), карточка триптиха «Другие направления» (§6).
   v3 (1127): §2 — полоса производителей стала лентой логотипов (CSS marquee по образцу 21st Logo Marquee 18221 / Logo Loop 26151), §4 — статичный ряд при reduced-motion.
   v4 (1124): блок Mercari — общий компонент отзывов (.gt-review-section--mercari, стили главной + src/frontend/reviews-1124.css); §3 снят, 1121-6/1121-7 в §5 — на новый класс.
   v5 (D13, 20260925): §2 — ручной ряд целых знаков вместо ленты и паузы, §4 — без анимации при reduced-motion. */

/* 1. Карточки 01–03 «Что прислать»: R57 снимает боковой отступ у первой/последней (padding-left/right: 0 для полосы без фона),
   а фон-бумага и красная линия карточки приходят из contact-city-layouts.css — номер и заголовок 01 упирались в край карточки.
   Один отступ у всех трёх; сетка 3 → 1 колонка ≤700 уже задана layout-c2.css (AH). */
.page-id-1121 .gt-wheel-brief .gtyres-landing-reading > ol.gt-wheel-brief__steps > li,
.page-id-1121 .gt-wheel-brief .gtyres-landing-reading > ol.gt-wheel-brief__steps > li:first-child,
.page-id-1121 .gt-wheel-brief .gtyres-landing-reading > ol.gt-wheel-brief__steps > li:last-child { padding: 22px; }
@media (max-width: 700px) {
  .page-id-1121 .gt-wheel-brief .gtyres-landing-reading > ol.gt-wheel-brief__steps > li,
  .page-id-1121 .gt-wheel-brief .gtyres-landing-reading > ol.gt-wheel-brief__steps > li:first-child,
  .page-id-1121 .gt-wheel-brief .gtyres-landing-reading > ol.gt-wheel-brief__steps > li:last-child { padding: 20px 18px; border-bottom: 0; }
}

/* 2. Полоса производителей — ручной ряд (v5, решение root D13, 20260925). Ленты, копии ряда, маски краёв и кнопки паузы больше нет:
   движение только по действию человека. Ряд — 15 равных слотов (--brand-slots на экран: 2 на телефоне, 3 на планшете, 4 с 900 px),
   общий помощник manual-carousel (owner-ui.js) листает по одному слоту, поэтому на каждой остановке видны только целые знаки — кромка
   viewport не режет слово марки (прежнее замечание root к 1122, Falken). Знак сохраняет бокс по «чернилам» из PHP (--bw/--bh,
   gtyres_wheel_brand_box: ровный визуальный вес букв, замечание root к 1127) и лишь уменьшается пропорционально, если бокс шире слота
   (max-width: 100%, height: auto по width/height атрибутам — пропорция известна до загрузки кадра, CLS 0). Без JS viewport — обычная
   горизонтальная прокрутка с привязкой к слотам (касание, клавиатура через tabindex, трекпад); после монтирования (.is-manual-carousel)
   прокрутку ведёт Embla, overflow скрыт. Полосы прокрутки нет в обоих состояниях — высота ряда не меняется при монтировании.
   Стрелки и позиция стоят в строке заголовка справа (absolute над верхней линией полосы) и появляются только со скриптом: пустого ряда
   под управлением нет, высота секции со скриптом и без одинакова. */
.gt-brand-strip { --brand-height: 60px; --brand-slots: 2; position: relative; margin: 0 0 8px; }
@media (min-width: 560px) { .gt-brand-strip { --brand-slots: 3; } }
@media (min-width: 900px) { .gt-brand-strip { --brand-slots: 4; } }
.gt-brand-strip__viewport { position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gt-brand-strip__viewport::-webkit-scrollbar { display: none; }
.gt-brand-strip__viewport:focus-visible { outline: 2px solid var(--gt-red, #dc0100); outline-offset: 4px; }
.gt-brand-strip.is-manual-carousel .gt-brand-strip__viewport { overflow: hidden; scroll-snap-type: none; }
.gt-brand-strip__track { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.gt-brand-strip__item { box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex: 0 0 calc(100% / var(--brand-slots)); min-width: 0; height: var(--brand-height); margin: 0; padding: 0 12px; scroll-snap-align: start; }
/* Сверхширокий знак (PHP ставит его первым) занимает два слота: иначе contain сжимал бы его втрое ниже соседей. */
.gt-brand-strip__item[data-brand-span="2"] { flex-basis: calc(200% / var(--brand-slots)); }
/* Размер знака — бокс по «чернилам» из PHP (gtyres_wheel_brand_box: целевая высота букв/эмблемы 22–42 px по вытянутости знака, ширина
   ≤ 320) в --bw/--bh на самом img: известен до загрузки кадра (CLS 0). v2-правило «по форме бокса» (data-brand-shape) снято — у Yokohama
   буквы занимают 62 % файла, у Bridgestone 69 %, и равные боксы давали буквы вдвое ниже Dunlop (замечание root к 1122).
   v5: бокс шире слота уменьшается целиком, пропорционально; сверхширокому Sumitomo PHP даёт двойной слот (правило ниже). */
.gt-brand-strip__item img { display: block; width: var(--bw, auto); max-width: 100%; height: auto; max-height: var(--bh, 40px); object-fit: contain; }
.gt-brand-strip__controls { position: absolute; right: 0; bottom: calc(100% + 10px); display: flex; align-items: center; gap: 12px; z-index: 1; }
.gt-brand-strip__controls[hidden] { display: none; }
.gt-brand-strip__position { font: 600 12px/1.4 Montserrat, Arial, sans-serif; color: var(--caption, #4c4c4c); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 1138: ритм заголовка и полосы. Замер на 1440 до правки: предыдущая секция отступает на
   64 px, у h2 свои 33 px сверху и снизу, дальше пустой spacer 50 px и ещё 32 px внутреннего
   отступа самой полосы — между строкой заголовка и логотипами набегало 115 px пустоты.
   Разделение секций (64 px) не трогаем: убираем только пустоту внутри самого блока. */
.page-id-1121 .kadence-column1121_6e44f7-21 .wp-block-heading { margin-top: 0; margin-bottom: 18px; }
.page-id-1121 .kadence-column1121_6e44f7-21 + .wp-block-spacer { display: none; }
/* Внутренние 32 px у полосы не трогаем: ниже по файлу (§ 1121-11) они отбивают логотипы от
   верхней границы, которая заменяет скрытый hr под заголовком. Итог: 18 px до линии и 32 после
   неё вместо прежних 115 px пустоты. */

/* Остаток старой сетки. Заголовок лежит в wp-block-column шириной 480 px, рядом вторая
   колонка 720 px, пустая. Из-за этого «Производители шин и дисков» переносились на две
   строки (95 px высоты на 1265) при свободном ряде в 1200 px. Ряд распускаем в обычный
   блок, пустую колонку убираем из потока, а заголовку даём спокойный размер полосы —
   в одну строку он умещается и на 1024, и на 1265.
   Разметку не трогаем: колонки приходят из содержимого страницы. */
@media (min-width: 768px) {
  .page-id-1121 .kadence-column1121_6e44f7-21 .wp-block-columns { display: block; }
  .page-id-1121 .kadence-column1121_6e44f7-21 .wp-block-column:first-child { width: 100%; }
  .page-id-1121 .kadence-column1121_6e44f7-21 .wp-block-column + .wp-block-column { display: none; }
  /* Размер задаём через --h2-size, а не font-size: базовое правило
     .gtyres-refined .entry-content h2 в marketing.style.css стоит с !important и
     перебило бы обычное объявление. Токен оно же и читает. */
  .page-id-1121 .kadence-column1121_6e44f7-21 { --h2-size: 30px; }
  .page-id-1121 .kadence-column1121_6e44f7-21 .wp-block-heading { line-height: 1.25; }
}

/* Отбивка сверху: между предыдущей секцией и заголовком стояло 64 px, а от последней
   ссылки в ней — 88 px. Оставляем 44 px: это обычный интервал перед вспомогательной
   полосой, а не разрыв между главами. Ниже 768 перенос заголовка естественный —
   размер и раскладку там не трогаем. */
.page-id-1121 .gt-wheel-brief { margin-bottom: 44px; }

@media (max-width: 700px) {
  /* 390: слот 44 px высотой, знаки ×0,72 (как у прежней ленты); горизонтального скролла страницы нет — overflow у viewport */
  .page-id-1121 .gt-brand-strip { --brand-height: 44px; }
  .gt-brand-strip__item { padding: 0 8px; }
  .gt-brand-strip__item img { width: calc(var(--bw, 100px) * .72); max-height: calc(var(--bh, 40px) * .72); }
}
@media (max-width: 767px) {
  /* v5: пара стрелок стоит справа на строке заголовка — заголовок оставляет ей место (96 px пары + зазор), чтобы перенос строки
     не заходил под кнопки; позиция «01–02 / 15» на телефоне только для скринридера. */
  .page-id-1121 .kadence-column1121_6e44f7-21 .wp-block-heading { padding-right: 108px; }
  .gt-brand-strip__position { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* 3. Mercari (v4, 1124): блок печатает общий компонент отзывов главной (.gt-review-section--mercari) — сетка, пауза, стрелки, диалог приходят из
   creative-studio.css / final-polish.css и review-gallery.js; отличия записи Mercari — src/frontend/reviews-1124.css. Правил здесь нет. */

/* 4. prefers-reduced-motion (v5): автодвижения у полосы нет вовсе; ручной шаг помощник выполняет без анимации (duration 0,
   manual-carousel.js), прокрутка без JS — без плавности. Раскладка та же, что без ограничения движения: целые знаки в слотах.
   Mercari — reduced-motion обрабатывает review-gallery.js (duration 0, автотечение выключено). */
@media (prefers-reduced-motion: reduce) {
  .gt-brand-strip__viewport { scroll-behavior: auto; }
  .gt-brand-strip * { transition: none !important; }
}

/* 5. Хвосты DEFECTS_1121 (1122, v2 пина AO) */
/* 1121-4: лейбл «От подбора до отправки» на графите — --label-accent (#9a0100, для бумаги) давал ≈1,9:1; на графите по 1078 §5 — --label-accent-on-dark */
.gtyres-wheels-process .gtyres-section-label { color: var(--label-accent-on-dark, #f26d65); }

/* 1121-6: единый левый край секций на 1440. Замер трёх страниц услуг (985/2808/2814) и 1121: контент Kadence — x 120, ширина 1200; секции темы
   на 1121 (галерея, витрина, «Один комплект», Mercari) сидят в том же контейнере 1200, но берут min(calc(100% - 64px), 1200px) → 1136 при x 152.
   Контейнер 1200 — общий для всех страниц услуг (в 1078/1096 отдельной ширины контейнера нет), поэтому секции темы растягиваются до него. */
.page-id-1121 :is(.gtyres-wheel-gallery, .gt-wheel-store, .gtyres-wheels-process, .gt-review-section--mercari) { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }

/* 1121-7 (v4): у общего компонента шапка и контейнер ленты берут calc(100% - 48px) auto (final-polish.css / creative-studio.css) — на 1121 в контейнере 1200
   оба растягиваются до него (одна кромка с витриной и «Один комплект»), шапка и карточки на одной оси */
.page-id-1121 .gt-review-section--mercari > .gt-review-heading, .page-id-1121 .gt-review-section--mercari .gt-review-universe { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }

/* 1121-9: подпись-ссылка «Открыть полный кадр ↗» была 10px/#777 (ниже порога 11–12 из 1096, мала как цель касания) → роль tertiary 1078 §4
   в карточке: 12px/600, «↗» в разметке; высота цели ≥ 24 px. v3: галерея на 1121 светлая (frontend-r57.css:46 задаёт --wheel-ink #202124
   и белый фон; графит — только у общей галереи в experience-polish.css), поэтому цвет — чернила галереи, hover — --gt-red; v2-вариант
   rgba(255,255,255,.86) «на графите» был невидим (визуальная сверка root, ROOT_REVIEW_1122). */
.page-id-1121 .gtyres-wheel-gallery .wheel-original-link { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 0; font: 600 12px/1.4 Montserrat, Arial, sans-serif; color: var(--wheel-ink, #202124); text-decoration: none; }
.page-id-1121 .gtyres-wheel-gallery .wheel-original-link:hover, .page-id-1121 .gtyres-wheel-gallery .wheel-original-link:focus-visible { color: var(--gt-red, #dc0100); }

/* 1121-11: separator под заголовком «Производители» (hr.left-hr, палитра Gutenberg) стоит в колонке заголовка шириной 480 — растянуть его нельзя,
   колонка узкая. Соседние секции делят линейкой на всю ширину, поэтому hr прячем, а линию --line даёт верхняя граница полосы логотипов
   (ряд на всю ширину контейнера 1200). Контент 1121 в БД не меняется. */
.page-id-1121 hr.wp-block-separator.left-hr { display: none; }
.page-id-1121 .gt-brand-strip { border-top: 1px solid var(--line, #dedede); padding-top: 32px; }

/* 6. Триптих «Другие направления GTYRES» (1121-8): карточка текущей страницы заменяется другим направлением (inc/wheels-1121.php); на 390 у неё
   своя сцена (images/service-delivery-1536.webp) вместо трети общей — одиночный кадр целиком, а не полоса 100%/300% */
.gtyres-service-triptych > a.is-swapped .gt-service-mobile-scene { background-size: cover; background-position: center; }