/* Start:/local/templates/versta_desktop/assets/css/pages/brands.css?179172675910590*/
/*
 * Экран 19 «Продукция и коллекции» (/brands/, BES-72), детальная бренда (/brands/<ID>/)
 * и страницы размерных сеток /brands/table-N/ (BES-60).
 * Подключается Layout::pageCss('brands') из шаблона bitrix:news [.default] (news.php, detail.php)
 * и из ветки versta_desktop страниц table-N. Значения — макет screens/19-brands.html (артборд 1440).
 *
 * Содержание:
 *  1. Первый экран (.brands-hero) — news.list [vd_brand]
 *  2. «О продукции» (.brands-about) — parts/about.php
 *  3. Коллекции зигзагом (.brand-lines, .brand-line) — catalog.section.list [vd_lines]
 *  4. «Размерные сетки» (.size-tables) — parts/size-tables.php
 *  5. Детальная бренда (.brand-detail) — detail.php, news.detail [vd]
 *  6. Страница размерной сетки (.size-chart) — /brands/table-N/
 */

/* ========== 1. Первый экран ========== */
/*
 * Тёмный блок во всю ширину, шапка overlay лежит поверх его верха (news.php ставит header_mode).
 * Фото — во всю площадь (object-fit), сверху и снизу затемнение под белый текст; без фото — короче.
 */
.brands-hero {
    /* Затемнение фото под белым текстом: сверху (под шапкой), середина, низ (под названием) */
    --vd-brands-shade-top: rgba(10, 10, 10, .4);
    --vd-brands-shade-mid: rgba(10, 10, 10, .05);
    --vd-brands-shade-bottom: rgba(10, 10, 10, .55);

    position: relative;
    isolation: isolate;
    height: clamp(480px, 50vw, 860px);
    overflow: hidden;
    background: var(--vd-ink);
    color: var(--vd-white);
}

.brands-hero--plain {
    height: clamp(400px, 34vw, 560px);
}

.brands-hero__img {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.brands-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--vd-brands-shade-top), var(--vd-brands-shade-mid) 30%, var(--vd-brands-shade-bottom));
    pointer-events: none;
}

.brands-hero__body {
    position: absolute;
    left: var(--vd-gutter);
    right: var(--vd-gutter);
    bottom: clamp(32px, 3.9vw, 56px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.brands-hero__eyebrow {
    max-width: 640px;
    font: 600 var(--vd-fs-caption) / 1.4 var(--vd-font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* Слоган из включаемой области: абзацы редактора без своих отступов */
.brands-hero__eyebrow--area :is(p, div) {
    margin: 0;
}

.brands-hero__brand {
    /* 200 на 1440 */
    font: 700 clamp(88px, 13.9vw, 264px) / .8 var(--vd-font-display);
    letter-spacing: .2em;
    margin-right: -.2em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

/* Активного элемента бренда нет — вместо названия заголовок страницы (H1) */
.brands-hero__title {
    max-width: 100%;
    /* 100 на 1440 */
    font: 700 clamp(56px, 6.94vw, 132px) / .9 var(--vd-font-display);
    letter-spacing: .02em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ========== 2. «О продукции» ========== */
.brands-about {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 20px clamp(32px, 5vw, 72px);
    padding: clamp(64px, 7.78vw, 112px) var(--vd-gutter) 0;
}

/* Первого экрана нет (ни фото, ни бренда) — блок идёт сразу под заголовком страницы */
.page-head + :is(.brands-about, .brand-lines, .size-tables) {
    padding-top: 0;
}

.brands-about__label {
    font: 400 13px / 1.4 var(--vd-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vd-text-3);
}

.brands-about__text {
    min-width: 0;
    max-width: 920px;
    font-size: var(--vd-fs-lead);
    line-height: 1.65;
    color: var(--vd-text-2);
}

.brands-about__text > * {
    margin: 0;
}

.brands-about__text > * + * {
    margin-top: 1em;
}

/* Лид — 38 на 1440; первый абзац включаемой области — так же */
.brands-about__lead,
.brands-about__text--area > p:first-child {
    font: 400 clamp(24px, 2.64vw, 44px) / 1.3 var(--vd-font-text);
    letter-spacing: -.01em;
    color: var(--vd-ink);
    text-wrap: pretty;
}

.brands-about__text > .brands-about__lead + *,
.brands-about__text--area > p:first-child + * {
    margin-top: clamp(24px, 2.5vw, 36px);
}

/* ========== 3. Коллекции зигзагом ========== */
.brand-lines {
    display: flex;
    flex-direction: column;
    gap: clamp(56px, 6.67vw, 96px);
    padding: clamp(64px, 7.78vw, 112px) var(--vd-gutter) 0;
}

.brand-line {
    display: flex;
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.brand-line--reverse {
    flex-direction: row-reverse;
}

.brand-line__media {
    position: relative;
    display: block;
    flex: 0 0 58%;
    /* 620 на 1440 */
    height: clamp(380px, 43.06vw, 720px);
    overflow: hidden;
    border-radius: var(--vd-radius);
    background: var(--vd-surface);
}

.brand-line__media--ph {
    background: var(--vd-placeholder);
}

.brand-line__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    /* Студийные фото в рост: держим верх (лицо, куртку) */
    object-position: center 20%;
    transition: transform 600ms ease;
}

.brand-line__media:hover .brand-line__img {
    transform: scale(1.03);
}

.brand-line__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.brand-line__count {
    font: 400 var(--vd-fs-caption) / 1 var(--vd-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vd-text-3);
}

.brand-line__name {
    /* 80 на 1440 */
    font: 700 clamp(48px, 5.56vw, 96px) / .9 var(--vd-font-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.brand-line__text {
    max-width: 520px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--vd-text-2);
}

.brand-line__text > * {
    margin: 0;
}

.brand-line__text > * + * {
    margin-top: .8em;
}

.brand-line__text a {
    text-decoration: underline;
}

.brand-line__link {
    margin-top: 4px;
}

/* ========== 4. «Размерные сетки» ========== */
.size-tables {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: clamp(72px, 8.33vw, 120px) var(--vd-gutter);
}

.size-tables__title {
    /* 40 на 1440 */
    font: 700 clamp(30px, 2.78vw, 48px) / 1 var(--vd-font-display);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.size-tables__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.size-tables__item {
    min-width: 0;
}

.size-tables__card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    padding: 24px;
    border: 1px solid var(--vd-divider);
    border-radius: var(--vd-radius);
    font: 600 16px / 1.2 var(--vd-font-text);
    color: var(--vd-ink);
    transition: border-color var(--vd-transition);
}

.size-tables__card:hover {
    border-color: var(--vd-ink);
    color: var(--vd-ink);
}

.size-tables__name {
    min-width: 0;
    overflow-wrap: break-word;
}

.size-tables__arrow {
    flex: none;
    color: var(--vd-decor);
    transition: color var(--vd-transition), transform var(--vd-transition);
}

.size-tables__card:hover .size-tables__arrow {
    color: var(--vd-ink);
    transform: translateX(3px);
}

/* ========== 5. Детальная бренда ========== */
.brand-detail__photo {
    margin: 0 0 clamp(24px, 2.5vw, 36px);
}

.brand-detail__photo img {
    width: 100%;
    border-radius: var(--vd-radius);
}

.brand-detail__body:empty {
    display: none;
}

.brand-detail__back {
    margin: 0;
}

.brand-detail__body:not(:empty) + .brand-detail__back {
    margin-top: clamp(32px, 3.33vw, 48px);
}

/* ========== 6. Страница размерной сетки ========== */
/*
 * Таблицы — картинки ≈1170 px шириной с мелким текстом. Не ужимаем их уже 880 px: на узком экране
 * прокручивается сама таблица (фокус с клавиатуры — стрелками), а не страница.
 */
.size-chart__list {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 2.5vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.size-chart__item {
    margin: 0;
}

.size-chart__scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-radius: var(--vd-radius-s);
}

.size-chart__scroll:focus-visible {
    outline: 2px solid var(--vd-accent);
    outline-offset: 2px;
}

.size-chart__img {
    display: block;
    width: auto;
    max-width: 100%;
    min-width: 880px;
    height: auto;
    border-radius: 0;
}

.size-chart__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin: clamp(32px, 3.33vw, 48px) 0 0;
}

/* ========== Узкие экраны ========== */
@media (max-width: 1024px) {
    .brands-about {
        grid-template-columns: minmax(0, 1fr);
    }

    .brand-line__media {
        flex-basis: 50%;
    }

    .size-tables__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .brand-line,
    .brand-line--reverse {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .brand-line__media {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .brand-line__body {
        gap: 16px;
    }

    .size-tables__list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-line__media:hover .brand-line__img,
    .size-tables__card:hover .size-tables__arrow {
        transform: none;
    }
}

/* End */
/* /local/templates/versta_desktop/assets/css/pages/brands.css?179172675910590 */