/* =========================================================
   ZIPTEH — страница «О компании» (/o-nas/), 15.09.2026.

   Всё, что над модулем «Как мы работаем»: первый экран, «Мы гарантируем
   нашим клиентам», «4 причины», склад. Разметка — about-page.php,
   тексты — about-page.config.php.

   Язык оформления взят у модулей сайта, а не придуман заново:
   поверхность первого экрана — как у «Как мы работаем» и карты
   «О компании» на главной (градиент #fff → #fbfcfd, рамка #eef1f5,
   радиус 30, мягкая тень); надзаголовки и заголовки секций — те же
   роли, что у «Как мы работаем»; карточки причин — как карточки
   этапов; факты с жёлтой чертой слева — как на «Доставке».

   Идентификатор в селекторах — не для красоты. Общие правила сайта
   раздают гарнитуры с !important (`body *:not(i)… { Tektur }`,
   h1…h6 — Russo One, классы с «eyebrow» / «badge» — Manrope),
   а reset.css правилом `*` ставит каждому элементу 16 px, вес 400,
   line-height 1 и свой цвет. Поэтому у каждого элемента модуля размер,
   межстрочный и цвет заданы явно.

   Ширина — от .zt-page-content-area > .container (сетка шапки,
   site-shell.css). Своих боковых полей у модуля нет.
   ========================================================= */

#ztAboutPage {
    --za-yellow: #ffb800;
    --za-ink: #333a43;
    --za-text: #4d5966;
    --za-muted: #6b7480;
    --za-line: #e3e7eb;
    --za-surface-line: #eef1f5;
    --za-on-yellow: #1a1a1a;
    /* Между секциями — как отступ «Как мы работаем» над своей карточкой:
       80 / 64 / 48 px. Модуль идёт следом, и ритм страницы не рвётся. */
    --za-gap: 80px;

    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    color: var(--za-ink);
}

#ztAboutPage,
#ztAboutPage *,
#ztAboutPage *::before,
#ztAboutPage *::after {
    box-sizing: border-box;
}

/* Шаблонный H1 «О компании» печатает header.php. У страницы свой H1
   на первом экране — два H1 не нужны. Тот же приём, что на «Доставке»
   и «Презентации». Без поддержки :has останется лишний заголовок,
   но вёрстка не развалится. */
body:has(#ztAboutPage) .zt-page-heading--content {
    display: none;
}

/* Просвет до CTA внизу страницы — один отступ самого CTA
   (80 / 64 / 48 px по ширинам), как в каталоге, «Сертификатах»
   и «Избранном». Шаблонные 50 px нижнего поля области контента
   складывались с ним в лишнюю пустоту. */
.zt-page-content-area:has(#ztAboutPage) {
    padding-bottom: 0;
}

/* Жёлтая приписка в заголовках наследует всё от заголовка:
   сама по себе она получила бы от reset.css 16 px, а от общего
   правила — Tektur вместо Russo One. */
#ztAboutPage :where(.zt-about__title, .zt-about__h2) span {
    color: var(--za-yellow);
    font-family: inherit !important;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

/* Кольцо фокуса — фирменное жёлтое. Общесайтовое правило доступности
   ставит синее с !important, поэтому и здесь. */
#ztAboutPage a:focus-visible {
    outline: 2px solid var(--za-yellow) !important;
    outline-offset: 3px;
}

/* Старые правила контентных страниц рисуют маркеры и поля у списков
   внутри .content-area — у списков модуля их быть не должно. */
#ztAboutPage ul,
#ztAboutPage li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#ztAboutPage li::before,
#ztAboutPage li::marker {
    content: none;
}

#ztAboutPage img {
    max-width: 100%;
}

#ztAboutPage > section + section {
    margin-top: var(--za-gap);
}


/* ---------------------------------------------------------
   Общие роли текста
   --------------------------------------------------------- */

/* Надзаголовок секции — как «О процессе» у «Как мы работаем». */
#ztAboutPage .zt-about__eyebrow {
    display: inline-flex;
    width: fit-content;
    min-height: 31px;
    margin: 0 0 18px;
    padding: 7px 11px;
    align-items: center;
    border: 1.5px solid var(--za-yellow);
    border-radius: 8px;
    color: var(--za-yellow);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

#ztAboutPage .zt-about__eyebrow::before {
    width: 7px;
    height: 7px;
    margin-right: 8px;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-radius: 50%;
    content: "";
}

/* Заголовок секции — кегль, межстрочный и трекинг «КАК МЫ РАБОТАЕМ». */
#ztAboutPage .zt-about__h2 {
    margin: 0;
    color: var(--za-ink);
    font-size: clamp(28px, 2.15vw, 42px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    text-transform: uppercase;
    text-wrap: balance;
}

#ztAboutPage .zt-about__text {
    margin: 14px 0 0;
    color: var(--za-muted);
    font-size: 15px;
    line-height: 1.7;
}

#ztAboutPage .zt-about__section-head {
    max-width: 1240px;
    margin: 0 0 32px;
}


/* ---------------------------------------------------------
   Первый экран
   --------------------------------------------------------- */

#ztAboutPage .zt-about__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    grid-template-areas:
        "copy media"
        "note note";
    column-gap: clamp(32px, 4vw, 80px);
    row-gap: 32px;
    align-items: center;
    padding: clamp(34px, 3.3vw, 64px);
    overflow: hidden;
    border: 1px solid var(--za-surface-line);
    border-radius: 30px;
    background: linear-gradient(135deg, #fff 0%, #fbfcfd 100%);
    box-shadow: 0 20px 50px rgba(29, 34, 40, .08);
}

#ztAboutPage .zt-about__hero-copy {
    grid-area: copy;
    min-width: 0;
}

#ztAboutPage .zt-about__title {
    margin: 0;
    color: var(--za-ink);
    font-size: clamp(28px, 2.6vw, 50px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.08;
    text-transform: uppercase;
    text-wrap: balance;
}

#ztAboutPage .zt-about__lead {
    margin: 24px 0 0;
    color: var(--za-text);
    font-size: 17px;
    line-height: 1.65;
}

/* Факты: жёлтая черта слева, как у фактов первого экрана «Доставки». */
#ztAboutPage .zt-about__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 24px;
    margin: 32px 0 0;
}

#ztAboutPage .zt-about__fact {
    display: flex;
    min-width: 0;
    padding: 3px 0 3px 14px;
    flex-direction: column;
    gap: 7px;
    border-left: 3px solid var(--za-yellow);
}

#ztAboutPage .zt-about__fact-value {
    color: var(--za-ink);
    font-size: clamp(19px, 1.35vw, 25px);
    font-weight: 700;
    line-height: 1.1;
}

#ztAboutPage .zt-about__fact-label {
    color: var(--za-muted);
    font-size: 13px;
    line-height: 1.4;
}

/* Фото — в родной пропорции 3:2, по центру колонки, без обрезки.
   На фото команда во всю ширину кадра (прислано 15.09.2026): растяжка
   по высоте текста, которая стояла здесь раньше, на 1280 делала кадр
   почти квадратным и отрезала людей по краям.

   aspect-ratio безопасен именно без растяжки: ширину даёт колонка,
   высоту — пропорция. Вместе с align-self: stretch пропорция
   пересчитывала высоту строки в минимальную ширину — на 1440 рамка
   становилась 864 px при колонке 599 и вылезала за поле карточки. */
#ztAboutPage .zt-about__hero-media {
    position: relative;
    grid-area: media;
    align-self: center;
    min-width: 0;
    margin: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 24px;
    background: var(--za-surface-line);
    box-shadow: 0 16px 36px rgba(29, 34, 40, .12);
}

#ztAboutPage .zt-about__hero-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Отметка года на фото — жёлтая плашка, как «Бесплатная доставка»
   на первом экране «Доставки». */
#ztAboutPage .zt-about__stamp {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    margin: 0;
    padding: 14px 18px 15px;
    flex-direction: column;
    gap: 5px;
    border-radius: 16px;
    background: var(--za-yellow);
    box-shadow: 0 12px 26px rgba(29, 34, 40, .22);
}

#ztAboutPage .zt-about__stamp-value {
    color: var(--za-on-yellow);
    font-size: clamp(28px, 2.1vw, 40px);
    font-weight: 700;
    line-height: 1;
}

#ztAboutPage .zt-about__stamp-label {
    color: var(--za-on-yellow);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

/* Сноска про Caterpillar: юридически значимый текст, мелко, но не мельче
   нижней границы сайта (12 px). */
#ztAboutPage .zt-about__note {
    grid-area: note;
    margin: 0;
    padding-top: 22px;
    border-top: 1px solid var(--za-line);
    color: var(--za-muted);
    font-size: 12px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   «Мы гарантируем нашим клиентам»
   --------------------------------------------------------- */

#ztAboutPage .zt-about__service {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(32px, 4vw, 80px);
    align-items: center;
}

#ztAboutPage .zt-about__service-media {
    min-width: 0;
    margin: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 24px;
    background: var(--za-surface-line);
    box-shadow: 0 16px 36px rgba(29, 34, 40, .12);
}

#ztAboutPage .zt-about__service-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#ztAboutPage .zt-about__service-copy {
    min-width: 0;
}

#ztAboutPage .zt-about__service-copy .zt-about__h2 {
    margin-bottom: 6px;
}

#ztAboutPage .zt-about__promises {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

#ztAboutPage .zt-about__promise {
    display: flex;
    min-width: 0;
    padding: 18px 20px;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid var(--za-line);
    border-radius: 16px;
    background: linear-gradient(145deg, #fff 30%, #fbfbfa 100%);
    box-shadow: 0 9px 20px rgba(29, 34, 40, .06);
}

#ztAboutPage .zt-about__promise-mark {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--za-yellow);
}

/* Цвет линий задан самой линии: reset.css красит каждый элемент,
   включая <path>, и currentColor у значка не срабатывает. */
#ztAboutPage .zt-about__promise-mark svg {
    display: block;
    width: 16px;
    height: 16px;
}

#ztAboutPage .zt-about__promise-mark path {
    fill: none;
    stroke: var(--za-on-yellow);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.6;
}

#ztAboutPage .zt-about__promise-text {
    padding-top: 4px;
    color: var(--za-ink);
    font-size: 15px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   «4 причины» — карточки как этапы «Как мы работаем»
   --------------------------------------------------------- */

#ztAboutPage .zt-about__reason-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 1.4vw, 24px);
}

#ztAboutPage .zt-about__reason {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 24px 24px 28px;
    flex-direction: column;
    border: 1px solid var(--za-line);
    border-radius: 18px;
    background: linear-gradient(145deg, #fff 30%, #fbfbfa 100%);
    box-shadow: 0 9px 20px rgba(29, 34, 40, .075);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#ztAboutPage .zt-about__reason:hover {
    border-color: rgba(255, 184, 0, .62);
    box-shadow: 0 12px 24px rgba(29, 34, 40, .10);
    transform: translateY(-3px);
}

#ztAboutPage .zt-about__reason-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#ztAboutPage .zt-about__reason-number {
    color: var(--za-yellow);
    font-size: clamp(26px, 1.7vw, 32px);
    font-weight: 700;
    line-height: 1;
}

/* У иконок прозрачные поля внутри холста 256 px, поэтому сам рисунок
   заметно меньше коробки — коробка крупнее, чем кажется нужным. */
#ztAboutPage .zt-about__reason-icon {
    display: block;
    width: clamp(100px, 7.4vw, 140px);
    height: auto;
    margin: -14px -12px -10px 0;
    filter: drop-shadow(0 8px 7px rgba(50, 55, 63, .09));
    transition: transform 180ms ease;
}

#ztAboutPage .zt-about__reason:hover .zt-about__reason-icon {
    transform: scale(1.04) rotate(-1deg);
}

#ztAboutPage .zt-about__reason-title {
    margin: 14px 0 10px;
    color: var(--za-ink);
    font-size: clamp(18px, 1.26vw, 22px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    text-transform: uppercase;
}

#ztAboutPage .zt-about__reason-text {
    margin: 0;
    color: var(--za-muted);
    font-size: 14px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   Склад: четыре фото, по клику — крупно
   --------------------------------------------------------- */

#ztAboutPage .zt-about__gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.2vw, 20px);
}

#ztAboutPage .zt-about__gallery-item {
    min-width: 0;
}

#ztAboutPage .zt-about__photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 18px;
    background: var(--za-surface-line);
    box-shadow: 0 9px 20px rgba(29, 34, 40, .075);
    text-decoration: none;
}

#ztAboutPage .zt-about__photo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

#ztAboutPage .zt-about__photo:hover .zt-about__photo-image {
    transform: scale(1.05);
}

#ztAboutPage .zt-about__photo-zoom {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 6px 16px rgba(29, 34, 40, .18);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease;
}

#ztAboutPage .zt-about__photo:hover .zt-about__photo-zoom,
#ztAboutPage .zt-about__photo:focus-visible .zt-about__photo-zoom {
    opacity: 1;
    transform: none;
}

#ztAboutPage .zt-about__photo-zoom svg {
    display: block;
    width: 20px;
    height: 20px;
}

#ztAboutPage .zt-about__photo-zoom circle,
#ztAboutPage .zt-about__photo-zoom path {
    fill: none;
    stroke: var(--za-ink);
    stroke-linecap: round;
    stroke-width: 2;
}

/* На сенсорных экранах наведения нет — значок лупы виден сразу,
   иначе непонятно, что фото открывается крупно. */
@media (hover: none) {
    #ztAboutPage .zt-about__photo-zoom {
        opacity: 1;
        transform: none;
    }
}


/* ---------------------------------------------------------
   Адаптив. Границы — те же, что у «Как мы работаем»: 1180 / 720.
   --------------------------------------------------------- */

@media (max-width: 1440px) {
    #ztAboutPage .zt-about__reason {
        padding: 22px 20px 24px;
    }
}

/* Планшет: одна колонка. Первый экран — заголовок и лид, затем фото,
   затем остальной текст: иначе на телефоне до первой картинки шло бы
   двадцать строк текста. Обёртка текста на это время растворяется
   (display: contents), и её дети встают в общую сетку по order. */
@media (max-width: 1180px) {
    #ztAboutPage {
        --za-gap: 64px;
    }

    #ztAboutPage .zt-about__hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
        row-gap: 0;
    }

    #ztAboutPage .zt-about__hero-copy {
        display: contents;
    }

    #ztAboutPage .zt-about__title { order: 1; }
    #ztAboutPage .zt-about__lead { order: 2; }
    #ztAboutPage .zt-about__hero-media { order: 3; }
    #ztAboutPage .zt-about__hero .zt-about__text { order: 4; }
    #ztAboutPage .zt-about__facts { order: 5; }
    #ztAboutPage .zt-about__note { order: 6; }

    #ztAboutPage .zt-about__hero-media {
        grid-area: auto;
        align-self: auto;
        margin-top: 28px;
    }

    #ztAboutPage .zt-about__hero .zt-about__hero-media + .zt-about__text {
        margin-top: 24px;
    }

    #ztAboutPage .zt-about__note {
        grid-area: auto;
        margin-top: 28px;
    }

    #ztAboutPage .zt-about__service {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    /* Во всю ширину родные 3:2 давали на 1024 кадр 914 × 609 — второй
       такой же крупный снимок подряд после фото команды. Здесь 16:9:
       у фургонов срезается только стена сверху и асфальт снизу. */
    #ztAboutPage .zt-about__service-media {
        aspect-ratio: 16 / 9;
    }

    #ztAboutPage .zt-about__reason-grid,
    #ztAboutPage .zt-about__gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    #ztAboutPage {
        --za-gap: 48px;
    }

    #ztAboutPage .zt-about__hero {
        padding: 26px 16px 22px;
        border-radius: 22px;
    }

    #ztAboutPage .zt-about__h2 {
        font-size: 22px;
    }

    #ztAboutPage .zt-about__lead {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.6;
    }

    #ztAboutPage .zt-about__text {
        font-size: 14px;
        line-height: 1.65;
    }

    #ztAboutPage .zt-about__hero-media,
    #ztAboutPage .zt-about__service-media {
        border-radius: 18px;
    }

    /* На фото команды двухстрочная плашка закрывала на телефоне почти
       половину низа кадра (130 × 62 на 328 × 218) — здесь она в одну
       строку и ложится только на ноги стоящих. */
    #ztAboutPage .zt-about__stamp {
        bottom: 10px;
        left: 10px;
        padding: 7px 11px;
        flex-direction: row;
        align-items: baseline;
        gap: 7px;
        border-radius: 10px;
    }

    #ztAboutPage .zt-about__stamp-value {
        font-size: 18px;
    }

    #ztAboutPage .zt-about__stamp-label {
        font-size: 12px;
        white-space: nowrap;
    }

    #ztAboutPage .zt-about__section-head {
        margin-bottom: 22px;
    }

    #ztAboutPage .zt-about__promises {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-top: 22px;
    }

    #ztAboutPage .zt-about__promise {
        padding: 14px 16px;
    }

    #ztAboutPage .zt-about__promise-text {
        font-size: 14px;
    }

    #ztAboutPage .zt-about__reason-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    #ztAboutPage .zt-about__reason {
        padding: 20px 18px 22px;
    }

    #ztAboutPage .zt-about__reason-icon {
        width: 96px;
    }

    #ztAboutPage .zt-about__reason-title {
        font-size: 18px;
    }

    #ztAboutPage .zt-about__gallery {
        gap: 10px;
    }

    #ztAboutPage .zt-about__photo {
        border-radius: 14px;
    }

    #ztAboutPage .zt-about__photo-zoom {
        right: 8px;
        bottom: 8px;
        width: 34px;
        height: 34px;
    }

    #ztAboutPage .zt-about__photo-zoom svg {
        width: 16px;
        height: 16px;
    }
}

/* Телефон: факты по одному в строку — «значение  подпись». В три
   колонки по ~100 px подписи рвались на три-четыре строки. */
@media (max-width: 560px) {
    #ztAboutPage .zt-about__facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 24px;
    }

    #ztAboutPage .zt-about__fact {
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
    }

    #ztAboutPage .zt-about__fact-value {
        flex: 0 0 auto;
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ztAboutPage *,
    #ztAboutPage *::before,
    #ztAboutPage *::after {
        transition-duration: .01ms !important;
    }

    #ztAboutPage .zt-about__reason:hover,
    #ztAboutPage .zt-about__reason:hover .zt-about__reason-icon,
    #ztAboutPage .zt-about__photo:hover .zt-about__photo-image {
        transform: none;
    }
}