/* ========================================================================== */
/* БТС / DESIGN TOKENS                                                        */
/* Канонические значения этого слоя получены из BTS_site_structure_v3_clean.  */
/* ========================================================================== */

/* Локальный Onest Variable исключает расхождение гарнитуры при недоступности внешнего CDN. */
@font-face {
  font-family: "Onest Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/onest-cyrillic-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Onest Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Onest Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Типографическая гарнитура и разрешённые насыщенности. */
  --font-family-primary: "Onest Variable", "Onest", Arial, Helvetica, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Цветовая система. */
  --color-bg: #eef1f5;
  --color-paper: #f8f9fa;
  --color-white: #ffffff;
  --color-ink: #0d0e10;
  --color-muted: #6e7680;
  --color-metal: #747d87;
  --color-copy-secondary: #515860;
  --color-wet-asphalt: #4b5157;
  --color-wet-asphalt-strong: #383d42;
  --color-dark: #0b0d10;
  --color-dark-2: #14171b;
  --color-accent: #a8cde8;
  --color-accent-strong: #659fc9;
  --color-line-light: rgba(13, 14, 16, 0.15);
  --color-line-dark: rgba(255, 255, 255, 0.16);

  /* Сетка и поля страницы. */
  --container-max: 1440px;
  --grid-columns: 12;
  --grid-gap: 24px;
  --page-side-padding: max(24px, 4vw);
  --section-padding-y-desktop: 96px;
  --section-padding-y-tablet: 72px;
  --section-padding-y-mobile: 56px;

  /* Каноническая шкала отступов. Префикс ds исключает конфликт с переходными стилями. */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;
  --ds-space-9: 80px;
  --ds-space-10: 96px;
  --ds-space-11: 128px;

  /* Типографические роли. */
  --type-eyebrow-size: clamp(11px, 0.72vw, 12px);
  --type-eyebrow-line: 1.2;
  --type-eyebrow-tracking: 0.14em;

  --type-display-xl-size: clamp(72px, 6.2vw, 112px);
  --type-display-xl-line: 0.94;
  --type-display-xl-tracking: -0.045em;

  --type-display-l-size: clamp(60px, 5vw, 88px);
  --type-display-l-line: 0.97;
  --type-display-l-tracking: -0.04em;

  --type-display-m-size: clamp(44px, 4vw, 68px);
  --type-display-m-line: 1;
  --type-display-m-tracking: -0.03em;

  --type-h3-size: clamp(28px, 2.25vw, 36px);
  --type-h3-line: 1.1;
  --type-h3-tracking: -0.02em;

  --type-lead-size: clamp(24px, 2vw, 32px);
  --type-lead-line: 1.28;
  --type-lead-tracking: -0.02em;

  --type-body-size: clamp(17px, 1.15vw, 18px);
  --type-body-line: 1.6;

  --type-body-s-size: clamp(14px, 0.96vw, 15px);
  --type-body-s-line: 1.55;

  --type-note-size: clamp(12px, 0.82vw, 13px);
  --type-note-line: 1.5;

  --type-metric-size: clamp(72px, 9vw, 160px);
  --type-metric-line: 0.9;
  --type-metric-tracking: -0.045em;

  /* Управляющие элементы. */
  --control-height: 48px;
  --control-width: fit-content;
  --control-padding-x: 18px;
  --control-icon-gap: 11px;
  --control-font-size: 13px;
  --control-font-weight: 700;

  /* Стыкуемые карточки и медиа не создают серых полос между поверхностями.
     Карточки сохраняют светлую поверхность и тонкую техническую рамку. */
  --component-gap-contiguous: 0px;
  --component-divider-width: 1px;
  --component-card-background: var(--color-paper);
  --component-card-border-color: var(--color-line-light);

  /* Соотношения сторон медиа. */
  --media-ratio-wide: 16 / 9;
  --media-ratio-standard: 4 / 3;
  --media-ratio-square: 1 / 1;

  /* Общие параметры компоновки, используемые primitives и patterns. */
  --section-padding-y: var(--section-padding-y-desktop);
  --stack-gap: var(--ds-space-5);
  --split-gap: var(--ds-space-7);
  --media-fit: contain;
  --media-position: center;

  /* Совместимость текущей реализации с новым словарём токенов. */
  --bg: var(--color-bg);
  --paper: var(--color-paper);
  --white: var(--color-white);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --metal: var(--color-metal);
  --copy-secondary: var(--color-copy-secondary);
  --wet-asphalt: var(--color-wet-asphalt);
  --line: var(--color-line-light);
  --line-dark: var(--color-line-dark);
  --dark: var(--color-dark);
  --dark-2: var(--color-dark-2);
  --accent: var(--color-accent);
  --accent-strong: var(--color-accent-strong);
}

/* ========================================================================== */
/* БТС / TYPOGRAPHY ROLES                                                     */
/* ========================================================================== */

:where(html, body, button, input, textarea, select) {
  font-family: var(--font-family-primary);
}

/* Служебный пробел проявляется только когда предпочтительный [BR] скрыт. */
.responsive-break-space {
  display: none;
}

:is([data-block-id], [data-component]) [data-type="T-EYEBROW"],
[data-type="T-EYEBROW"],
.t-eyebrow {
  font-size: var(--type-eyebrow-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--type-eyebrow-line);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

:is([data-block-id], [data-component]) [data-type="T-DISPLAY-XL"],
[data-type="T-DISPLAY-XL"],
.t-display-xl {
  font-size: var(--type-display-xl-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--type-display-xl-line);
  letter-spacing: var(--type-display-xl-tracking);
  text-wrap: balance;
}

:is([data-block-id], [data-component]) [data-type="T-DISPLAY-L"],
[data-type="T-DISPLAY-L"],
.t-display-l {
  font-size: var(--type-display-l-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--type-display-l-line);
  letter-spacing: var(--type-display-l-tracking);
  text-wrap: balance;
}

:is([data-block-id], [data-component]) [data-type="T-DISPLAY-M"],
[data-type="T-DISPLAY-M"],
.t-display-m {
  font-size: var(--type-display-m-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--type-display-m-line);
  letter-spacing: var(--type-display-m-tracking);
  text-wrap: balance;
}

:is([data-block-id], [data-component]) [data-type="T-H3"],
[data-type="T-H3"],
.t-h3 {
  font-size: var(--type-h3-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--type-h3-line);
  letter-spacing: var(--type-h3-tracking);
  text-wrap: balance;
}

:is([data-block-id], [data-component]) [data-type="T-LEAD"],
[data-type="T-LEAD"],
.t-lead {
  font-size: var(--type-lead-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-lead-line);
  letter-spacing: var(--type-lead-tracking);
}

:is([data-block-id], [data-component]) [data-type="T-BODY"],
[data-type="T-BODY"],
.t-body {
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-body-line);
}

:is([data-block-id], [data-component]) [data-type="T-BODY-S"],
[data-type="T-BODY-S"],
.t-body-s {
  font-size: var(--type-body-s-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-body-s-line);
}

:is([data-block-id], [data-component]) [data-type="T-NOTE"],
[data-type="T-NOTE"],
.t-note {
  font-size: var(--type-note-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-note-line);
}

:is([data-block-id], [data-component]) [data-type="T-METRIC"],
[data-type="T-METRIC"],
.t-metric {
  font-size: var(--type-metric-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-metric-line);
  letter-spacing: var(--type-metric-tracking);
}

:where([data-tone="metal"], .t-metal) {
  color: var(--color-metal);
}

/* Русский текст переносится только при реальной нехватке ширины и не пересекает соседние колонки. */
:is([data-block-id], [data-component]) :is(h1, h2, h3, p, li, summary, a, span) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Display-роли масштабируются по собственной колонке, поэтому заголовки не
   нуждаются в аварийном разрыве слова посередине. */
:is([data-block-id], [data-component]) :is(h1, h2, h3),
:is([data-block-id], [data-component]) :is(h1, h2, h3) :is(span, a) {
  overflow-wrap: normal;
  hyphens: manual;
}

/* Тональная часть заголовка получает собственную доступную ширину: она может
   переноситься по пробелам, но не расталкивает колонку max-content шириной. */
:is([data-block-id], [data-component]) :is(h1, h2, h3) > span:not(.responsive-break-space) {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

/* Служебный заголовок остаётся в дереве доступности без визуального габарита. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ========================================================================== */
/* БТС / LAYOUT PRIMITIVES                                                    */
/* ========================================================================== */

:where(.l-container, .c-container) {
  width: min(calc(100vw - var(--page-side-padding) - var(--page-side-padding)), var(--container-max));
  margin-inline: auto;
}

:where(.l-section, .c-section) {
  position: relative;
  padding-block: var(--section-padding-y);
}

:where(.l-grid, .c-grid) {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

:where(.l-split, .c-split) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--split-gap);
  align-items: start;
}

:where(.l-stack, .c-stack) {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  min-width: 0;
}

:where(.l-media, .c-media) {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
}

:where(.l-media, .c-media) > :where(img, video, picture) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--media-fit);
  object-position: var(--media-position);
}

:where(.l-media, .c-media)[data-media-crop="deny"] {
  overflow: visible;
}

/* ========================================================================== */
/* БТС / REUSABLE COMPONENTS                                                  */
/* ========================================================================== */

.c-section-header {
  display: grid;
  gap: var(--ds-space-5);
  min-width: 0;
}

.c-feature-list {
  display: grid;
  gap: var(--ds-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-feature-item {
  min-width: 0;
  padding-block: var(--ds-space-5);
  border-top: 1px solid var(--color-line-light);
}

:where(.c-metric-card, .c-info-card) {
  min-width: 0;
  padding: var(--ds-space-6);
  border: var(--component-divider-width) solid var(--component-card-border-color);
  background: var(--component-card-background);
}

.c-button {
  box-sizing: border-box;
  width: var(--control-width);
  max-width: 100%;
  height: var(--control-height);
  min-height: var(--control-height);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-icon-gap);
  padding: 0 var(--control-padding-x);
  border: 1px solid currentColor;
  border-radius: var(--radius, 3px);
  cursor: pointer;
  font-size: var(--control-font-size);
  font-weight: var(--control-font-weight);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.c-button--primary {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

.c-button--secondary {
  border-color: var(--color-wet-asphalt);
  background: var(--color-wet-asphalt);
  color: var(--color-white);
}

/* Все стандартные кнопки используют одну высоту и два тёмных состояния.
   Белая заливка не появляется ни в обычном, ни в hover-состоянии. */
.c-button--primary:hover,
.c-button--secondary:hover {
  border-color: var(--color-wet-asphalt-strong);
  background: var(--color-wet-asphalt-strong);
  color: var(--color-white);
}

/* Круглая служебная кнопка остаётся вариантом общего Button-компонента. */
.c-button--icon {
  width: var(--control-height);
  min-width: var(--control-height);
  padding: 0;
  border-radius: 50%;
}

.c-button--wide {
  width: 100%;
}

/* Служебные кнопки мобильной навигации остаются скрытыми на desktop. */
.menu-toggle.c-button,
.menu-close.c-button {
  display: none;
}

.c-text-link {
  width: fit-content;
  height: var(--control-height);
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-icon-gap);
  padding-inline: var(--control-padding-x);
  border: 1px solid var(--color-wet-asphalt);
  border-radius: var(--radius, 3px);
  background: var(--color-wet-asphalt);
  color: var(--color-white);
  font-size: var(--control-font-size);
  font-weight: var(--control-font-weight);
  line-height: 1;
  white-space: nowrap;
}

.c-text-link:hover {
  border-color: var(--color-wet-asphalt-strong);
  background: var(--color-wet-asphalt-strong);
  color: var(--color-white);
}

.c-gallery {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
  gap: var(--component-gap-contiguous);
  background: transparent;
}

.c-faq-item {
  border-bottom: 1px solid var(--color-line-light);
}

.c-media--wide { aspect-ratio: var(--media-ratio-wide); }
.c-media--standard { aspect-ratio: var(--media-ratio-standard); }
.c-media--square { aspect-ratio: var(--media-ratio-square); }
.c-media--native { aspect-ratio: auto; }
.c-media--contain { --media-fit: contain; }
.c-media--cover { --media-fit: cover; }

/* C-MEDIA читает fit и ratio из MEDIA-реестра через data-атрибуты. */
:is(
  [data-component~="C-MEDIA"][data-media-crop="deny"] > img,
  [data-component~="C-MEDIA"][data-media-crop="deny"] > video,
  img[data-media-crop="deny"],
  video[data-media-crop="deny"]
) {
  object-fit: contain;
}

:is(
  [data-component~="C-MEDIA"][data-media-crop="allow"] > img,
  [data-component~="C-MEDIA"][data-media-crop="cover"] > video
) {
  object-fit: cover;
}

:is([data-media-role="M-WIDE"], [data-media-role="M-WIDE"] > video) {
  aspect-ratio: var(--media-ratio-wide);
}

:is([data-media-role="M-STANDARD"], [data-media-role="M-STANDARD"] > video) {
  aspect-ratio: var(--media-ratio-standard);
}

/* ========================================================================== */
/* БТС / SECTION PATTERNS                                                     */
/* Паттерны задают только композицию слотов. Содержание хранится в PAGE.       */
/* ========================================================================== */

:where(.p-section, [data-pattern]) {
  position: relative;
  min-width: 0;
  container-type: inline-size;
}

:where(.p-hero, [data-pattern~="S-HERO"]) [data-slot="layout"] {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--grid-gap);
  align-items: center;
}

:where(.p-statement, [data-pattern~="S-STATEMENT"]) [data-slot="statement"] {
  width: 100%;
}

[data-variants~="statement-offset"] [data-slot="statement"] {
  width: auto;
  max-width: 70%;
}

:where(.p-editorial, [data-pattern~="S-EDITORIAL"]) [data-slot="body"],
:where(.p-editorial-media, [data-pattern~="S-EDITORIAL-MEDIA"]) [data-slot="body"] {
  max-width: 68ch;
}

:where(.p-editorial-media, [data-pattern~="S-EDITORIAL-MEDIA"]) [data-slot="layout"],
:where(.p-media-copy, [data-pattern~="S-MEDIA-COPY"]) [data-slot="layout"],
:where(.p-split, [data-pattern~="S-SPLIT"]) [data-slot="layout"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--split-gap);
  align-items: center;
}

:where([data-direction="reverse"], .is-reverse) [data-slot="media"] {
  order: 2;
}

:where(.p-metrics, [data-pattern~="S-METRICS"]) [data-slot="items"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--component-gap-contiguous);
  border: var(--component-divider-width) solid var(--component-card-border-color);
  background: transparent;
}

:where(.p-metrics, [data-pattern~="S-METRICS"]) [data-slot="items"] > * {
  border: 0;
  background: var(--component-card-background);
}

:where(.p-metrics, [data-pattern~="S-METRICS"]) [data-slot="items"] > * + * {
  border-inline-start: var(--component-divider-width) solid var(--component-card-border-color);
}

:where(.p-gallery, [data-pattern~="S-GALLERY"]) [data-slot="items"] {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
  gap: var(--component-gap-contiguous);
  border: 0;
  background: transparent;
}

:where(.p-specs, [data-pattern~="S-SPECS"]) [data-slot="specs"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

:where(.p-faq, [data-pattern~="S-FAQ"]) [data-slot="items"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--color-line-light);
}

:where(.p-cta, [data-pattern~="S-CTA"]) [data-slot="layout"] {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--split-gap);
  align-items: end;
}

/* Колонки с текстом получают собственный контекст, а не ориентируются на ширину viewport. */
:where(
  .split-copy__body,
  .split-copy > div,
  .system-copy,
  .production-copy,
  .production-layout > div,
  .media-copy-grid > div,
  .hero__copy,
  .product-hero__copy,
  .start-layout__body,
  .start-layout > div,
  .prototype-copy,
  .pickup-copy,
  .section-intro,
  .contact-page__layout > div,
  .contact-page__body,
  .about-hero__layout > *,
  .contact-dialog__shell
) {
  container-type: inline-size;
}

@container (max-width: 560px) {
  :is([data-block-id], [data-component]) [data-type="T-DISPLAY-XL"] {
    font-size: clamp(44px, 10cqi, 60px);
    line-height: var(--type-display-l-line);
    letter-spacing: var(--type-display-l-tracking);
  }

  :is([data-block-id], [data-component]) [data-type="T-DISPLAY-L"] {
    font-size: clamp(34px, 10cqi, 54px);
    line-height: var(--type-display-l-line);
    letter-spacing: var(--type-display-l-tracking);
  }

  :is([data-block-id], [data-component]) [data-type="T-DISPLAY-M"] {
    font-size: clamp(26px, 8.45cqi, 42px);
    line-height: var(--type-display-m-line);
    letter-spacing: var(--type-display-m-tracking);
  }

  :is([data-block-id], [data-component]) [data-type="T-LEAD"] {
    font-size: clamp(20px, 6cqi, 24px);
  }
}

/* Варианты темы передают палитру паттернам без создания CSS по BLOCK_ID. */
:where([data-theme="light"], .theme-light) {
  --section-background: var(--color-bg);
  --section-foreground: var(--color-ink);
}

:where([data-theme="paper"], .theme-paper) {
  --section-background: var(--color-paper);
  --section-foreground: var(--color-ink);
}

:where([data-theme="contrast-light"], .theme-contrast-light) {
  --section-background: #e1e6eb;
  --section-foreground: var(--color-ink);
}

:where([data-theme="dark"], .theme-dark) {
  --section-background: var(--color-dark);
  --section-foreground: var(--color-white);
}

:where([data-theme="accent-light"], .theme-accent-light) {
  --section-background: var(--color-accent);
  --section-foreground: var(--color-ink);
}

:where([data-theme="light-gradient"], .theme-light-gradient) {
  --section-background: var(--color-bg);
  --section-foreground: var(--color-ink);
}

:where([data-theme="dark-background-photo"], .theme-dark-background-photo) {
  --section-background: var(--color-dark);
  --section-foreground: var(--color-white);
}

/* PAGE CONTENT применяет тему через переменные; фоновые изображения секций сохраняются. */
[data-theme] {
  background-color: var(--section-background);
  color: var(--section-foreground);
}

[data-theme="light"] .contact-details__grid p:not(.eyebrow) {
  color: var(--color-muted);
}

/* ========================================================================== */
/* БТС / PATTERN VARIANTS                                                     */
/* Варианты сохраняют разные композиции страниц без CSS, привязанного к ID.   */
/* ========================================================================== */

:where(.p-hero[data-slot="layout"], [data-pattern~="S-HERO"][data-slot="layout"]) {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--grid-gap);
  align-items: center;
}

[data-variants~="copy-right"] [data-slot="layout"],
[data-variants~="copy-right"][data-slot="layout"] {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
}

[data-pattern~="S-CTA"][data-variants~="copy-right"] [data-slot="layout"] {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}

[data-variants~="media-left"] [data-slot="layout"],
[data-variants~="media-left"][data-slot="layout"] {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

[data-variants~="reverse"] [data-slot="layout"],
[data-variants~="reverse"][data-slot="layout"] {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

[data-variants~="two-cards"] [data-slot="items"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-variants~="three-cards"] [data-slot="items"],
[data-variants~="three-columns"] [data-slot="items"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-variants~="four-media"] [data-slot="items"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Три части модуля слоёв стыкуются без фоновой полосы между поверхностями. */
[data-pattern~="S-GALLERY"][data-variants~="two-layers"] [data-slot="items"] {
  gap: var(--component-gap-contiguous);
}

/* Размер технической метрики зависит от собственной карточки, а не от
   viewport. Это сохраняет акцент и исключает выход единицы измерения наружу. */
[data-pattern~="S-GALLERY"][data-variants~="thickness-feature"] .thickness-feature > div {
  container-type: inline-size;
}

[data-pattern~="S-GALLERY"][data-variants~="thickness-feature"] .thickness-feature strong {
  max-width: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-2);
  font-size: clamp(64px, 30cqi, 144px);
}

[data-variants~="contact-data"] [data-slot="items"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-variants~="logo-primary"] [data-slot="media"] {
  --media-fit: contain;
  --media-position: left center;
}

/*
 * Последовательный split с медиа после текста остаётся одним S-SPLIT, но его
 * два верхнеуровневых Container располагаются по вертикали. Без этого variant
 * наследовал flex-row от существующего .tech-section и сжимал текст до узкой
 * полосы, потому что оба полноширинных Container конкурировали за одну строку.
 */
:where(.p-split, [data-pattern~="S-SPLIT"])[data-variants~="video-after-copy"],
:where(.p-split, [data-pattern~="S-SPLIT"])[data-variants~="technical-visual-after"] {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

:where(.p-split, [data-pattern~="S-SPLIT"])[data-variants~="video-after-copy"] > .l-container,
:where(.p-split, [data-pattern~="S-SPLIT"])[data-variants~="technical-visual-after"] > .l-container {
  flex: 0 0 auto;
}

/*
 * Четыре открываемых изображения образуют компактную техническую матрицу.
 * Единый ratio нужен не ради декоративного crop: исходники разной ориентации
 * остаются целиком доступны в PhotoSwipe, а превью сохраняют общий ритм блока.
 */
[data-variants~="four-media"] [data-slot="items"] > [data-slot="media"] {
  min-height: 0;
  aspect-ratio: var(--media-ratio-standard);
}

/* Multi-media pickup использует двенадцать колонок базовой сетки: копия,
   предметная съёмка и деталь получают независимые, но связанные области. */
[data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="pickup"] [data-slot="layout"] {
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--grid-gap);
  row-gap: var(--ds-space-7);
  align-items: start;
}

/* В pickup-композиции обе фотографии центрируются по общей высоте текстовых
   рядов. Основной объект занимает почти всю высоту копии, деталь остаётся
   компактнее, но следует той же вертикальной оси. */
@media (min-width: 1024px) {
  [data-pattern~="S-GALLERY"][data-variants~="two-layers"] > .l-container {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: var(--component-gap-contiguous);
  }

  [data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="pickup"] .pickup-copy {
    grid-column: 1 / 7;
  }

  [data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="pickup"] .pickup-object {
    grid-column: 7 / 11;
    align-self: center;
    height: calc(100% - var(--ds-space-7));
    max-height: 720px;
  }

  [data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="pickup"] .pickup-object img {
    height: 100%;
    max-height: none;
    object-fit: contain;
  }

  [data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="pickup"] .pickup-detail {
    align-self: center;
    height: calc(100% - var(--ds-space-9));
    max-height: 560px;
  }
}

/* В mockup-варианте текст и два равноправных медиа образуют технический триптих. */
[data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="mockup"] [data-slot="layout"] {
  grid-template-columns: minmax(0, 0.8fr) repeat(2, minmax(0, 0.6fr));
  gap: var(--component-gap-contiguous);
  align-items: stretch;
  background: transparent;
}

/* HOME-05 остаётся экземпляром S-EDITORIAL-MEDIA: FeatureList расположен
   над двухкадровой Gallery, а не превращается в уникальный block-компонент. */
[data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="cards-above-media"] [data-slot="layout"] {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-7);
}

[data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="cards-above-media"] .production-copy {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--component-gap-contiguous);
}

[data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="cards-above-media"] .production-copy > .c-feature-item {
  padding: var(--ds-space-6);
  border: 0;
}

[data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="cards-above-media"] .production-copy > .c-feature-item:nth-child(odd) {
  border-right: var(--component-divider-width) solid var(--color-line-light);
}

[data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="cards-above-media"] .production-copy > .c-feature-item:nth-child(-n + 2) {
  border-bottom: var(--component-divider-width) solid var(--color-line-light);
}

[data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="two-media-centered"] .production-media {
  width: min(100%, 1080px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--component-gap-contiguous);
  justify-self: center;
  margin-inline: auto;
  background: transparent;
}

[data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="two-media-centered"] .production-media > .image-card {
  height: auto;
  min-height: 0;
  aspect-ratio: var(--media-ratio-standard);
}

@media (max-width: 1023px) {
  :root {
    --section-padding-y: var(--section-padding-y-tablet);
  }

  .menu-toggle.c-button,
  .menu-close.c-button {
    display: inline-flex;
  }

  [data-pattern] [data-slot="layout"],
  [data-pattern][data-slot="layout"] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Pattern variants имеют более высокую специфичность, чем базовый
     responsive-селектор. Явно переводим любой variant layout в один поток,
     чтобы desktop-сетки CTA/pickup не сжимали текст на tablet и mobile. */
  [data-pattern][data-variants] [data-slot="layout"],
  [data-pattern][data-variants][data-slot="layout"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: row;
  }

  /* На tablet текст mockup занимает верхнюю строку, а два медиа сравниваются
     рядом. Ниже mobile breakpoint эта композиция штатно станет одноколоночной. */
  [data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="mockup"] [data-slot="layout"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-variants~="four-media"] [data-slot="items"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-variants~="statement-offset"] [data-slot="statement"] {
    width: auto;
    max-width: none;
  }
}

@media (max-width: 767px) {
  :root {
    --section-padding-y: var(--section-padding-y-mobile);
    --type-display-xl-size: clamp(44px, 12vw, 60px);
    --type-display-l-size: clamp(40px, 10.5vw, 54px);
    --type-display-m-size: clamp(36px, 9vw, 48px);
    --type-h3-size: clamp(24px, 7vw, 30px);
    --type-lead-size: clamp(20px, 5.8vw, 24px);
    --type-body-size: 16px;
    --type-body-s-size: 14px;
    --type-note-size: 12px;
    --type-metric-size: clamp(56px, 18vw, 96px);
  }

  :where(.l-split, .c-split),
  :where(.p-hero, [data-pattern~="S-HERO"]) [data-slot="layout"],
  :where(.p-editorial-media, [data-pattern~="S-EDITORIAL-MEDIA"]) [data-slot="layout"],
  :where(.p-media-copy, [data-pattern~="S-MEDIA-COPY"]) [data-slot="layout"],
  :where(.p-split, [data-pattern~="S-SPLIT"]) [data-slot="layout"],
  :where(.p-metrics, [data-pattern~="S-METRICS"]) [data-slot="items"],
  :where(.p-specs, [data-pattern~="S-SPECS"]) [data-slot="items"],
  :where(.p-cta, [data-pattern~="S-CTA"]) [data-slot="layout"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-gallery,
  :where(.p-gallery, [data-pattern~="S-GALLERY"]) [data-slot="items"] {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-pattern] [data-slot="items"] {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.p-metrics, [data-pattern~="S-METRICS"]) [data-slot="items"] > * + * {
    border-inline-start: 0;
    border-top: var(--component-divider-width) solid var(--component-card-border-color);
  }

  [data-pattern] [data-slot="specs"] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* На телефоне четыре превью остаются читаемой матрицей 2x2 вместо ленты
     высотой в несколько экранов. Размер каждого элемента превышает tap-target. */
  [data-variants~="four-media"] [data-slot="items"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--component-gap-contiguous);
    background: transparent;
  }

  /* Трёхкадровая галерея использует разрешённый каноном swipe-вариант:
     прокрутка изолирована внутри компонента и не создаёт overflow страницы. */
  [data-pattern~="S-GALLERY"][data-variants~="three-columns"] [data-slot="items"] {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(82%, 1fr);
    gap: var(--component-gap-contiguous);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    background: transparent;
  }

  [data-pattern~="S-GALLERY"][data-variants~="three-columns"] [data-slot="items"]::-webkit-scrollbar {
    display: none;
  }

  [data-pattern~="S-GALLERY"][data-variants~="three-columns"] [data-slot="items"] > * {
    scroll-snap-align: start;
  }

  /* Tablet mockup сохраняет две колонки, но на телефоне также становится
     последовательным: вводный текст → медиа → детали. */
  [data-pattern][data-variants] [data-slot="layout"],
  [data-pattern][data-variants][data-slot="layout"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  [data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="cards-above-media"] .production-copy,
  [data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="two-media-centered"] .production-media {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="cards-above-media"] .production-copy > .c-feature-item:nth-child(odd) {
    border-right: 0;
  }

  [data-pattern~="S-EDITORIAL-MEDIA"][data-variants~="cards-above-media"] .production-copy > .c-feature-item:not(:last-child) {
    border-bottom: var(--component-divider-width) solid var(--color-line-light);
  }

  /* [BR] из канонического TXT — предпочтение desktop, а не жёсткий мобильный перенос. */
  [data-block-id] :is(h1, h2, h3)[data-type] {
    text-wrap: wrap;
  }

  [data-block-id] :is(h1, h2, h3) br {
    display: none;
  }

  [data-block-id] :is(h1, h2, h3) .responsive-break-space {
    display: inline-block;
    width: 0.24em;
    white-space: normal;
  }

  .c-button--wide-mobile {
    width: 100%;
  }
}