/* ============================================================================
   CDS-OTRASLI · раздел отраслевых лендингов /otrasli/ (ADR-0005)
   ----------------------------------------------------------------------------
   ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ <style> В ШАБЛОНЕ:
   стили жили инлайном в двух шаблонах (список + детальная) и уже начали расходиться.
   Файл подключается <link> прямо в разметке шаблона: ассеты, добавленные через AddCSS
   внутри компонента, не переживают кэш-хит (класс дефектов QA-58).

   УСТРОЙСТВО ЛЕНДИНГА. Компонент рендерится вне .container, поэтому полосы (.otrl-band)
   занимают всю ширину, а колонка контента задаётся .container внутри каждой полосы.
   Ритм страницы держат чередование фона (белый / --ds-tint-soft) и один вертикальный
   шаг: полоса дышит clamp(48px…88px), заголовок отбивается 0 → 28px до подзаголовка.

   ТИПОГРАФИКА ТЕЛА не описывается здесь: разбор отрасли идёт в общей обёртке .cds-prose
   (css/cds-prose.css) — SSOT лонгрида по сайту.

   Только токены --ds-* (хук lint-ds-tokens); fallback'и сверены с docs/design-system/tokens.css.
   ============================================================================ */

/* ── Полосы и общая ритмика ──────────────────────────────────────────────── */

.otrl-band { padding: clamp(48px, 5.2vw, 88px) 0; background: var(--ds-paper, #ffffff); }
.otrl-band--tint { background: var(--ds-tint-soft, #f7fbfd); }
/* Вводная полоса примыкает к синей шапке с H1 — сверху отступ меньше, чтобы обещание
   страницы читалось как продолжение заголовка, а не как новый экран. */
.otrl-band--intro { padding-top: clamp(28px, 3vw, 44px); }
.otrl-band--other { padding-top: 0; }

.otrl-h2 {
    margin: 0 0 12px;
    font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15;
    font-weight: var(--ds-fw-semibold, 600);
    color: var(--ds-ink, #0a225e);
    letter-spacing: -.01em;
}
.otrl-h2--sm { font-size: var(--ds-fs-lg, 20px); }
p.otrl-sub {
    max-width: 62ch; margin: 0 0 30px;
    font-size: var(--ds-fs-md, 18px); line-height: 1.55;
    color: var(--ds-muted, #5a6470);
}
.otrl-h2 + .otrl-grid,
.otrl-h2 + .otrl-revs,
.otrl-h2 + .otrl-svc { margin-top: 28px; }

/* ── Кнопки полосы. Геометрия общая, отличаются только заливкой. ─────────── */

.otrl-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 0 30px;
    border-radius: var(--ds-r-md, 8px);
    font-size: var(--ds-fs-base, 16px);
    font-weight: var(--ds-fw-semibold, 600);
    text-decoration: none;
    transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.otrl-btn:focus-visible { outline: 3px solid var(--ds-cyan, #00bef3); outline-offset: 3px; }
.otrl-btn--primary { background: var(--ds-cyan, #00bef3); color: var(--ds-ink, #0a225e); }
.otrl-btn--primary:hover { background: var(--ds-ink, #0a225e); color: var(--ds-paper, #ffffff); transform: translateY(-2px); }
.otrl-btn--ghost {
    margin-top: 30px;
    background: transparent; color: var(--ds-ink, #0a225e);
    border: var(--ds-bw, 1px) solid var(--ds-line, #e3e3e3);
}
.otrl-btn--ghost:hover { border-color: var(--ds-cyan, #00bef3); color: var(--ds-cyan-deep, #0a87b8); }

/* ── Полоса 1: обещание + цифры ──────────────────────────────────────────── */

/* Ширину колонки задаём ТЕКСТУ, а не .container: max-width на самом контейнере
   вместе с его margin:0 auto сдвигал вступление на середину полосы. */
.otrl-intro--cover { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.otrl-intro--cover .otrl-intro__lead { max-width: 56ch; }
.otrl-intro__cover { overflow: hidden; border-radius: var(--ds-r-lg, 12px); aspect-ratio: 3 / 2; background: var(--ds-ink, #0a225e); }
.otrl-intro__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
p.otrl-intro__lead {
    margin: 0 0 26px; max-width: 72ch;
    font-size: clamp(19px, 1.55vw, 23px); line-height: 1.5;
    color: var(--ds-ink, #0a225e);
}

/* ── Полоса 2: разбор с вставками кейсов ─────────────────────────────────── */

.otrl-story { display: flex; flex-direction: column; }
/* Колонка текста уже полосы: строка длиной 60–75 знаков читается, строка на 1200px — нет. */
.otrl-story__text { max-width: 78ch; }
.otrl-story__text + .otrl-case { margin-top: clamp(32px, 3.4vw, 52px); }
.otrl-case + .otrl-story__text { margin-top: clamp(32px, 3.4vw, 52px); }

/* Кейс-вставка: фото и разбор рядом. Вторая вставка зеркалится — страница перестаёт
   быть колонкой одинаковых блоков, при этом порядок в DOM (сначала фото) не меняется.
   Кликабелен весь блок — приём stretched link (та же механика, что в карточке проекта):
   ссылка одна на весь кейс, поэтому и фото, и заголовок ведут на кейс, а скринридер
   слышит одну ссылку с внятным текстом, а не три одинаковых. Текст при этом остаётся
   выделяемым, а карточка не превращается в <a> с блоками внутри (это невалидно). */
.otrl-case {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 40px); align-items: center;
    padding: clamp(18px, 1.8vw, 26px);
    background: var(--ds-paper, #ffffff);
    border: var(--ds-bw, 1px) solid var(--ds-line-cyan, #d4e9f5);
    border-radius: var(--ds-r-lg, 12px);
    box-shadow: var(--ds-sh-card, 0 2px 12px rgba(10,34,94,.05));
}
.otrl-case:nth-of-type(even) .otrl-case__media { order: 2; }
.otrl-case__media {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--ds-r-md, 8px);
    background: var(--ds-ink, #0a225e);
}
.otrl-case__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.otrl-case__yr {
    position: absolute; left: 0; top: 16px;
    padding: 6px 14px;
    background: var(--ds-cyan, #00bef3); color: var(--ds-ink, #0a225e);
    font-size: var(--ds-fs-xs, 12px); font-weight: var(--ds-fw-bold, 700); letter-spacing: .02em;
}
.otrl-case__body { display: flex; flex-direction: column; gap: 12px; }
.otrl-case__svc {
    font-size: var(--ds-fs-xs, 12px); font-weight: var(--ds-fw-medium, 500);
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--ds-cyan-deep, #0a87b8);
}
.otrl-case__name {
    margin: 0;
    font-size: clamp(19px, 1.5vw, 24px); line-height: 1.25;
    font-weight: var(--ds-fw-semibold, 600);
    color: var(--ds-ink, #0a225e);
}
.otrl-case__nda {
    display: inline-block; margin-left: 8px; padding: 3px 8px; vertical-align: middle;
    background: var(--ds-tint, #e6f0f8); color: var(--ds-ink, #0a225e);
    font-size: var(--ds-fs-xs, 12px); font-weight: var(--ds-fw-bold, 700); letter-spacing: .12em;
    border-radius: var(--ds-r-sm, 4px);
}
p.otrl-case__lead { margin: 0; font-size: var(--ds-fs-base, 16px); line-height: 1.6; color: var(--ds-text, #212529); }
.otrl-case__link {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; margin-top: 2px;
    color: var(--ds-cyan-deep, #0a87b8);
    font-weight: var(--ds-fw-semibold, 600);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    align-self: flex-start;
}
.otrl-case__link svg { width: 18px; height: 18px; transition: transform .25s; }
.otrl-case__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
/* Наведение на любую часть кейса ведёт себя как наведение на ссылку. */
.otrl-case:hover { border-color: var(--ds-cyan, #00bef3); box-shadow: var(--ds-sh-card-hover, 0 8px 24px rgba(0,190,243,.12)); }
.otrl-case:hover .otrl-case__link { color: var(--ds-ink, #0a225e); border-bottom-color: var(--ds-cyan, #00bef3); }
.otrl-case:hover .otrl-case__link svg { transform: translateX(4px); }
.otrl-case:hover .otrl-case__media img { transform: scale(1.04); }
.otrl-case:focus-within { border-color: var(--ds-cyan, #00bef3); }
.otrl-case__media img { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.otrl-case__link:hover { color: var(--ds-ink, #0a225e); border-bottom-color: var(--ds-cyan, #00bef3); }
.otrl-case__link:hover svg { transform: translateX(4px); }
.otrl-case__link:focus-visible { outline: 3px solid var(--ds-cyan, #00bef3); outline-offset: 3px; }

/* ── Полоса 3: услуги отрасли ────────────────────────────────────────────── */

.otrl-svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.otrl-svc__i {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    min-height: 64px; padding: 14px 20px;
    background: var(--ds-paper, #ffffff);
    border: var(--ds-bw, 1px) solid var(--ds-line, #e3e3e3);
    border-radius: var(--ds-r-md, 8px);
    color: var(--ds-ink, #0a225e);
    font-weight: var(--ds-fw-medium, 500);
    text-decoration: none;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
.otrl-svc__i svg { width: 18px; height: 18px; flex: none; color: var(--ds-cyan-deep, #0a87b8); transition: transform .25s; }
.otrl-svc__i:hover { border-color: var(--ds-cyan, #00bef3); box-shadow: var(--ds-sh-card-hover, 0 8px 24px rgba(0,190,243,.12)); transform: translateY(-2px); }
.otrl-svc__i:hover svg { transform: translateX(4px); }
.otrl-svc__i:focus-visible { outline: 3px solid var(--ds-cyan, #00bef3); outline-offset: 3px; }

/* ── Полосы 4-5: сетки карточек (сами карточки — общие инклюды) ──────────── */

.otrl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.otrl-revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 24px; }

/* ── Отзыв: карточка + ссылка в архив ────────────────────────────────────
   Ссылка живёт СНАРУЖИ карточки (карточка — общий инклюд на четырёх страницах),
   поэтому обёртка выравнивает их в одну колонку и держит ссылку у нижнего края. */

.otrl-rev { display: flex; flex-direction: column; }
.otrl-rev__more {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; margin-top: 6px; padding: 0 4px;
    align-self: flex-start;
    font-size: var(--ds-fs-sm, 14px); font-weight: var(--ds-fw-semibold, 600);
    color: var(--ds-cyan-deep, #0a87b8);
    text-decoration: none;
}
.otrl-rev__more svg { width: 16px; height: 16px; transition: transform .25s; }
.otrl-rev__more:hover { color: var(--ds-ink, #0a225e); }
.otrl-rev__more:hover svg { transform: translateX(4px); }
.otrl-rev__more:focus-visible { outline: 3px solid var(--ds-cyan, #00bef3); outline-offset: 3px; }

/* ── Полоса 7: соседние отрасли ──────────────────────────────────────────── */

.otrl-other { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.otrl-other a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 18px;
    background: var(--ds-tint-soft, #f7fbfd);
    border: var(--ds-bw, 1px) solid var(--ds-line-cyan, #d4e9f5);
    border-radius: var(--ds-r-pill, 999px);
    color: var(--ds-ink, #0a225e);
    font-size: var(--ds-fs-sm, 14px);
    text-decoration: none;
    transition: background .25s, border-color .25s;
}
.otrl-other a:hover { background: var(--ds-tint, #e6f0f8); border-color: var(--ds-cyan, #00bef3); }
.otrl-other a:focus-visible { outline: 3px solid var(--ds-cyan, #00bef3); outline-offset: 2px; }

/* ── Адаптив ─────────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
    .otrl-intro--cover { grid-template-columns: 1fr; }
    .otrl-case { grid-template-columns: 1fr; }
    .otrl-case:nth-of-type(even) .otrl-case__media { order: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .otrl-btn, .otrl-svc__i, .otrl-case__link svg, .otrl-svc__i svg, .otrl-case__media img { transition: none; }
    .otrl-case:hover .otrl-case__media img { transform: none; }
    .otrl-btn--primary:hover, .otrl-svc__i:hover { transform: none; }
}

/* ── Витрина раздела /otrasli/ ───────────────────────────────────────────
   Карточка ведёт себя как кейс на /proyekty/: кадр сверху, подпись снизу, при наведении
   кадр приближается, а карточка приподнимается. Одинаковая механика в двух разделах —
   пользователю не нужно заново учиться, что здесь кликабельно. */

/* p.otr-intro, а не .otr-intro: глобальные стили сайта задают абзацу line-height 40px,
   и правило из одного класса их не перебивает — строки расходились почти вдвое. */
p.otr-intro {
    max-width: 68ch; margin: 4px 0 30px;
    font-size: var(--ds-fs-md, 18px); line-height: 1.55;
    color: var(--ds-muted, #5a6470);
}
.otr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 26px;
    margin: 0 0 12px;
}
.otr-card {
    display: flex; flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    background: var(--ds-paper, #ffffff);
    border: var(--ds-bw, 1px) solid var(--ds-line, #e3e3e3);
    border-radius: var(--ds-r-lg, 12px);
    box-shadow: var(--ds-sh-card, 0 2px 12px rgba(10,34,94,.05));
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;
}
.otr-card:hover { transform: translateY(-4px); box-shadow: var(--ds-sh-lift, 0 16px 38px rgba(10,34,94,.14)); border-color: transparent; }
.otr-card:focus-visible { outline: 3px solid var(--ds-cyan, #00bef3); outline-offset: 3px; }

.otr-card__cover {
    display: block; position: relative; overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--ds-ink, #0a225e);
    border-bottom: var(--ds-bw-accent, 3px) solid var(--ds-cyan, #00bef3);
}
.otr-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.otr-card:hover .otr-card__cover img { transform: scale(1.05); }

.otr-card__b { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 22px 24px 24px; }
.otr-card__name {
    font-size: var(--ds-fs-lg, 20px); line-height: 1.25;
    font-weight: var(--ds-fw-semibold, 600);
    color: var(--ds-ink, #0a225e);
}
.otr-card__lead { font-size: var(--ds-fs-base, 16px); line-height: 1.55; color: var(--ds-text, #212529); }
/* Подпись-действие: не кнопка (вся карточка кликабельна), но глазу нужен якорь, куда ведёт. */
.otr-card__go {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: auto; padding-top: 14px;
    border-top: var(--ds-bw, 1px) solid var(--ds-line, #e3e3e3);
    font-size: var(--ds-fs-sm, 14px); font-weight: var(--ds-fw-semibold, 600);
    color: var(--ds-cyan-deep, #0a87b8);
}
.otr-card__go svg { width: 16px; height: 16px; transition: transform .25s; }
.otr-card:hover .otr-card__go svg { transform: translateX(4px); }

.otr-empty { color: var(--ds-muted, #5a6470); font-size: var(--ds-fs-base, 16px); }

@media (prefers-reduced-motion: reduce) {
    .otr-card, .otr-card__cover img, .otr-card__go svg { transition: none; }
    .otr-card:hover { transform: none; }
    .otr-card:hover .otr-card__cover img { transform: none; }
}