/* Статические страницы (статьи), контур v2.

   Текст статьи приходит из админки готовым HTML: там встречаются h2-h4,
   абзацы, списки, таблицы и картинки. Стили задаются по тегам внутри
   .vp-article — размечать чужой HTML классами нечем. */

/* Крошки и H1 у обычной статьи стояли слишком далеко друг от друга: 66px
   против 51px в макете. Верхний отступ секции урезан, потому что над ней
   уже стоит блок крошек со своим отступом. Отбивка H1 → текст не трогалась:
   она и так 62px против 70px в макете (Files/page.png). */
.vp-page { padding-top: var(--vp-space-6); }

.vp-page__title {
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h1);
    line-height: var(--vp-lh-h1);
    text-transform: uppercase;
    margin-bottom: var(--vp-space-12);
}

.vp-article {
    font-size: var(--vp-fs-md);
    line-height: 24px;
    color: var(--vp-text);
}

/* ---- Заголовки внутри текста ---- */

.vp-article h2,
.vp-article h3,
.vp-article h4 {
    font-family: var(--vp-font-head);
    font-weight: var(--vp-fw-normal);
    margin: var(--vp-space-10) 0 var(--vp-space-5);
}
.vp-article > :first-child { margin-top: 0; }

.vp-article h2 { font-size: var(--vp-fs-lg); line-height: 28px; }
.vp-article h3 { font-size: var(--vp-fs-h4); line-height: 26px; }
.vp-article h4 { font-size: var(--vp-fs-md); line-height: 24px; font-weight: var(--vp-fw-medium); }

/* ---- Текст ---- */

.vp-article p { margin-bottom: var(--vp-space-5); }
.vp-article p:last-child { margin-bottom: 0; }

.vp-article a { color: var(--vp-brand); text-decoration: underline; }
.vp-article a:hover { color: var(--vp-brand-hover); }

.vp-article b, .vp-article strong { font-weight: var(--vp-fw-medium); }

.vp-article ul,
.vp-article ol {
    margin: 0 0 var(--vp-space-5) var(--vp-space-6);
    padding: 0;
}
.vp-article ul { list-style: disc; }
.vp-article ol { list-style: decimal; }
.vp-article li { margin-bottom: var(--vp-space-2); }

.vp-article hr {
    margin: var(--vp-space-8) 0;
    border: 0;
    border-top: 1px solid var(--vp-border);
}

.vp-article blockquote {
    margin: var(--vp-space-6) 0;
    padding-left: var(--vp-space-6);
    border-left: 3px solid var(--vp-brand);
    color: var(--vp-text-soft);
}

/* ---- Картинки и таблицы из админки ----
   Ширины в старом HTML заданы в пикселях и на узком экране выпирают
   за экран, поэтому переопределяются. */

.vp-article img {
    max-width: 100%;
    height: auto;
    border-radius: var(--vp-radius-sm);
}

/* Таблица не сжимается ниже содержимого — прокручиваем её саму,
   а не всю страницу */
.vp-article table {
    display: block;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--vp-space-6);
    border-collapse: collapse;
}
.vp-article th,
.vp-article td {
    padding: var(--vp-space-3) var(--vp-space-4);
    border: 1px solid var(--vp-border);
    text-align: left;
    vertical-align: top;
}
.vp-article th { font-weight: var(--vp-fw-medium); background: var(--vp-bg-cream); }

.vp-article iframe { max-width: 100%; }

.vp-page__edit { margin-top: var(--vp-space-8); font-size: var(--vp-fs-sm); }

@media (max-width: 767px) {
    .vp-page__title { margin-bottom: var(--vp-space-8); }
}

/* ============ 404 ============
   Полоса во всю ширину экрана. Фон — сам снимок из макета: слева
   фотография уходит в ровный бежевый, на нём и лежит текст.
   Цвет-подложка совпадает с левым краем снимка, чтобы на очень широких
   экранах и до загрузки картинки не было видно шва. */

.vp-404 {
    background: #F1DFD1 url("/images/v2/404-hero.jpg") right center / cover no-repeat;
}

.vp-404__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 560px;
    padding-block: var(--vp-space-16);
    /* Текст занимает левую половину — правее начинается коробка на снимке */
    max-width: calc(var(--vp-container) + var(--vp-gutter) * 2);
}

.vp-404__code {
    font-family: var(--vp-font-head);
    font-size: 180px;
    line-height: 1;
    color: var(--vp-brand);
}

.vp-404__title {
    margin-top: var(--vp-space-4);
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h1);
    line-height: var(--vp-lh-h1);
}

.vp-404__text {
    margin: var(--vp-space-4) 0 var(--vp-space-10);
    max-width: 420px;
}

@media (max-width: 1023px) {
    .vp-404 { background-position: 70% center; }
    .vp-404__code { font-size: 120px; }
    .vp-404__title { font-size: var(--vp-fs-h2); line-height: var(--vp-lh-h2); }
}

@media (max-width: 767px) {
    /* На узком экране коробка со снимка перекрывает текст, поэтому
       фотография уходит вниз отдельной полосой, а текст — на ровный фон */
    .vp-404 {
        background-image: none;
        background-color: #F7EBE2;
    }
    .vp-404__inner { min-height: 0; padding-block: var(--vp-space-12); }
    .vp-404__code { font-size: 96px; }
}

/* ============ Контакты ============ */

/* Заголовок и первый блок стоят вплотную — как в макете. У обычной статьи
   под H1 идёт текст, там отбивка больше. */
.vp-pagehead--tight { padding-bottom: 0; }
.vp-pagehead .vp-page__title { margin-bottom: 0; }

.vp-contacts__top {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    align-items: start;
    gap: var(--vp-space-6);
}

.vp-contacts__cards { display: grid; gap: var(--vp-space-4); }

.vp-infocard {
    padding: var(--vp-space-6);
    background: var(--vp-bg-cream);
    border: 1px solid var(--vp-border);
}

.vp-infocard__title {
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-lg);
    line-height: var(--vp-lh-lg);
    margin-bottom: var(--vp-space-4);
}
.vp-infocard__title--gap { margin-top: var(--vp-space-6); }

.vp-infocard__list { list-style: none; }
.vp-infocard__list li { margin-bottom: var(--vp-space-3); }
.vp-infocard__text { line-height: 24px; }

.vp-infocard__social { display: inline-block; margin-top: var(--vp-space-3); }

/* Вариант CTA-плашки со страницы контактов: текст и кнопки слева,
   фото справа. У общей плашки фото слева, а кнопки в отдельной колонке. */
.vp-cta__plate--aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    align-items: stretch;
    gap: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
}
.vp-cta__plate--aside .vp-cta__body {
    padding: var(--vp-space-10);
    align-self: center;
}
.vp-cta__plate--aside .vp-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--vp-space-4);
    margin-top: var(--vp-space-8);
    max-width: 320px;
    padding: 0;
}
/* Фото не должно задавать высоту плашки: иначе плашка вытягивается по
   пропорции картинки и свисает ниже колонки с карточками, а в макете их
   нижние края совпадают. Абсолютное позиционирование убирает вклад
   картинки в высоту — плашка тянется по колонке карточек. */
.vp-cta__aside-media { display: block; position: relative; }
.vp-cta__aside-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}

/* ---- Как с нами связаться ---- */

.vp-ways__title { text-align: center; margin-bottom: var(--vp-space-8); }

.vp-ways__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--vp-space-5);
    list-style: none;
}

/* Кегли и отступы сняты с макета contacts-desktop: карточка 283px высотой,
   круг под иконкой 76px, заголовок Forum ~22px, текст 16/22. До приёмки
   стояли 18px и 14px — карточки выходили заметно ниже макета. */
.vp-way {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vp-space-5);
    padding: var(--vp-space-10) var(--vp-space-6);
    text-align: center;
    background: var(--vp-bg-card);   /* Карточки «Як з нами зв'язатися» в макете белые */
}

/* Иконка в бледно-розовом круге — круг рисует CSS, в файле его нет */
.vp-way__icon {
    display: grid;
    place-items: center;
    width: 76px; height: 76px;
    border-radius: var(--vp-radius-pill);
    /* Клиент: «фон розовий не нужен». Розовый оставлен только там,
       где он есть в макете — активная вкладка и выбранная карточка. */
    background: var(--vp-bg-cream);
}
/* В макете рисунок занимает почти весь круг: 48px из 76px. У наших иконок
   штрих не доходит до края viewBox, поэтому бокс шире самого рисунка. */
.vp-way__icon img { width: 64px; height: 64px; }

.vp-way__name {
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h3);
    line-height: var(--vp-lh-h3);
}
/* Клиент отметил, что текст в этом блоке мелкий: 16/22 против 17/24 в макете */
.vp-way__text { font-size: 17px; line-height: 24px; color: var(--vp-text-soft); }

/* ---- Где нас найти ---- */

.vp-where__grid {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    background: var(--vp-bg-cream);
    border-radius: var(--vp-radius-sm);
    overflow: hidden;
}

/* Колонка ниже карты: без выравнивания текст жмётся к верхнему краю,
   а под ним остаётся пустая половина — клиент просил выровнять по вертикали. */
.vp-where__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--vp-space-10) var(--vp-space-8);
}

.vp-where__title {
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h3);
    line-height: var(--vp-lh-h3);
    text-transform: uppercase;
    margin-bottom: var(--vp-space-6);
}

.vp-where__address {
    display: flex;
    gap: var(--vp-space-3);
    margin-bottom: var(--vp-space-6);
    line-height: 22px;
}
.vp-where__address img { flex: none; }

.vp-where__text { color: var(--vp-text-soft); line-height: 22px; }

.vp-where__map { min-height: 380px; }
.vp-where__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ============ Доставка и оплата ============ */

.vp-delivery-hero {
    background: #F6F4F4 url("/images/v2/delivery-hero.jpg") right center / auto 100% no-repeat;
}

.vp-delivery-hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Полоса в макете почти в две трети экрана — без минимальной высоты
       она схлопывается по тексту и фотография обрезается сверху и снизу.
       640px — высота полосы в макете (73…713 при контенте 1440). */
    min-height: 600px;
    padding-top: var(--vp-space-6);
    padding-bottom: var(--vp-space-12);
    /* Текст держится левой половины: правее начинается фотография */
    max-width: calc(var(--vp-container) + var(--vp-gutter) * 2);
}

.vp-delivery-hero .vp-crumbs { padding-bottom: 0; }

/* В макете заголовок стоит в две строки: «ДОСТАВКА» и «І ОПЛАТА».
   При 520px «ДОСТАВКА І ОПЛАТА» (444px) укладывается в одну строку,
   поэтому ширина обрезана: «ДОСТАВКА» — 232px, «ДОСТАВКА І» — 255px,
   значение между ними и даёт нужный перенос. */
.vp-delivery-hero__title {
    max-width: 240px;
    margin-top: var(--vp-space-8);
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h1);
    line-height: var(--vp-lh-h1);
    text-transform: uppercase;
}

.vp-delivery-hero__text {
    max-width: 460px;
    margin-top: var(--vp-space-5);
    font-size: var(--vp-fs-lg);
    line-height: 30px;
}

.vp-delivery-hero__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vp-space-8);
    margin-top: var(--vp-space-10);
    list-style: none;
}
.vp-delivery-hero__list li {
    display: flex;
    align-items: center;
    gap: var(--vp-space-3);
    font-size: var(--vp-fs-md);
    line-height: 20px;
}
.vp-delivery-hero__list img { flex: none; }

/* На десктопе фото — фон секции; картинка в потоке нужна только мобильным */
.vp-delivery-hero__photo { display: none; }

/* ---- Условия ---- */

.vp-terms__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    background: var(--vp-bg-cream);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-sm);
}

.vp-terms__item {
    display: flex;
    gap: var(--vp-space-4);
    padding: var(--vp-space-8);
}
.vp-terms__item + .vp-terms__item { border-left: 1px solid var(--vp-border); }
/* В макете иконка условий 56px, а не 40px */
.vp-terms__item img { flex: none; width: 56px; height: 56px; }

.vp-terms__name {
    font-size: var(--vp-fs-lg);
    line-height: var(--vp-lh-lg);
    font-weight: var(--vp-fw-medium);
}
.vp-terms__value {
    margin-top: var(--vp-space-2);
    color: var(--vp-brand-alt);
    font-weight: var(--vp-fw-medium);
}
.vp-terms__text {
    margin-top: var(--vp-space-2);
    font-size: var(--vp-fs-md);
    line-height: 22px;
    color: var(--vp-text-soft);
}

/* ---- Страница «Міста» ---- */

.vp-city__lead {
    max-width: 720px;
    margin-top: var(--vp-space-4);
    font-size: var(--vp-fs-lg);
    line-height: 28px;
    color: var(--vp-text-soft);
}

.vp-city-facts .vp-terms__name { font-weight: 700; }

/* ---- Города ---- */

.vp-geo__plate {
    padding: var(--vp-space-12) var(--vp-space-10);
    background: var(--vp-bg-card);   /* Плашка городов в макете белая */
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-md);
    text-align: center;
}

.vp-geo__title { text-transform: uppercase; }

.vp-geo__text {
    max-width: 720px;
    margin: var(--vp-space-6) auto 0;
    line-height: 24px;
}

/* Города через точку-разделитель — как в макете. Точка рисуется
   псевдоэлементом, чтобы не попадать в текст ссылки. */
.vp-geo__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--vp-space-3) var(--vp-space-6);
    margin-top: var(--vp-space-8);
    list-style: none;
}
.vp-geo__list li { position: relative; }
.vp-geo__list li + li::before {
    content: "";
    position: absolute;
    left: calc(var(--vp-space-6) / -2 - 3px);
    top: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--vp-brand);
    transform: translateY(-50%);
}
.vp-geo__list a { transition: color var(--vp-transition); }
.vp-geo__list a:hover { color: var(--vp-brand); }

/* Клиент: «жирность ключевых надписей» — на странице городов
   названия городов и есть главное содержимое. */
.vp-geo__list--strong a { font-weight: 700; }

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

@media (max-width: 1279px) {
    .vp-contacts__top { grid-template-columns: 1fr; }
    .vp-ways__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vp-delivery-hero { background-position: 75% center; }
}

@media (max-width: 1023px) {
    .vp-where__grid { grid-template-columns: 1fr; }
    .vp-terms__grid { grid-template-columns: 1fr; }
    .vp-terms__item + .vp-terms__item { border-left: 0; border-top: 1px solid var(--vp-border); }
}

@media (max-width: 767px) {
    .vp-ways__grid { grid-template-columns: 1fr; }
    .vp-geo__plate { padding: var(--vp-space-8) var(--vp-space-5); }
    .vp-terms__item { padding: var(--vp-space-5); }

    /* Плашка CTA: фото уходит вниз, как в мобильном макете */
    .vp-cta__plate--aside { grid-template-columns: 1fr; }
    .vp-cta__plate--aside .vp-cta__body { padding: var(--vp-space-6); }
    .vp-cta__plate--aside .vp-cta__actions { max-width: none; }
    /* На одной колонке фото задаёт высоту само — возвращаем его в поток */
    .vp-cta__aside-media { height: 260px; }

    /* Фотография курьера перекрывала бы текст — убираем её из фона
       и показываем отдельной полосой под текстом, как в макете */
    .vp-delivery-hero { background-image: none; }
    .vp-delivery-hero__inner { min-height: 0; padding-bottom: var(--vp-space-8); }
    .vp-delivery-hero__title { font-size: var(--vp-fs-h2); line-height: var(--vp-lh-h2); }
    .vp-delivery-hero__text { font-size: var(--vp-fs-md); line-height: 24px; }
    .vp-delivery-hero__list { flex-direction: column; gap: var(--vp-space-5); }
    .vp-delivery-hero__photo {
        display: block;
        width: 100%;
        height: 260px;
        object-fit: cover;
        object-position: center;
    }
}

/* ============ О компании ============ */

.vp-about-hero {
    background: #F7F6F6 url("/images/v2/about-hero.jpg") right center / auto 100% no-repeat;
}

.vp-about-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* Полоса героя в макете 640px (73…713 при контенте 1440) — при 540px
       она выходила заметно ниже макета, а фотография сужалась. */
    min-height: 600px;
    padding-top: var(--vp-space-6);
    padding-bottom: var(--vp-space-12);
}
.vp-about-hero .vp-crumbs { padding-bottom: 0; }

.vp-about-hero__title {
    margin-top: var(--vp-space-8);
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h1);
    line-height: var(--vp-lh-h1);
    text-transform: uppercase;
}

.vp-about-hero__text {
    max-width: 460px;
    margin-top: var(--vp-space-5);
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h3);
    line-height: 34px;
}

.vp-about-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vp-space-4);
    margin-top: var(--vp-space-10);
}

/* На десктопе фото — фон полосы; картинка в потоке нужна мобильным */
.vp-about-hero__photo { display: none; }

/* ---- Цифры ---- */

.vp-facts__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--vp-space-4);
    list-style: none;
}

.vp-fact {
    display: flex;
    flex-direction: column;
    gap: var(--vp-space-2);
    padding: var(--vp-space-6);
    background: var(--vp-bg-cream);
}

/* Иконка в макете 64px и стоит слева от всего блока подписи, а не только
   от цифры: «15+» и «років досвіду» выровнены по одному краю. */
.vp-fact__head { display: flex; align-items: center; gap: var(--vp-space-4); }
.vp-fact__head img { flex: none; width: 80px; height: 80px; }
.vp-fact__lines { display: flex; flex-direction: column; gap: var(--vp-space-1); }

/* В макете цифра и подпись набраны основным шрифтом жирным, а не
   заголовочным Forum, и одним цветом с остальным текстом. Клиент
   отметил, что преимущества нужно выделить жирнее и крупнее. */
.vp-fact__value {
    font-size: 30px;
    line-height: 34px;
    font-weight: 700;
    color: var(--vp-text);
}

.vp-fact__name { font-size: 19px; line-height: 24px; font-weight: 700; }
.vp-fact__name--wide { font-size: 17px; line-height: 22px; }

.vp-fact__text { font-size: var(--vp-fs-md); line-height: 20px; color: var(--vp-text-soft); }

/* ---- Кто мы ---- */

/* В макете фотография занимает ровно половину полосы (649 из 1312),
   текстовая колонка — 569px справа от неё. */
.vp-whois__grid {
    display: grid;
    grid-template-columns: minmax(0, 649fr) minmax(0, 635fr);
    align-items: center;
    gap: 28px;
}

.vp-whois__photo { width: 100%; height: auto; border-radius: var(--vp-radius-sm); }

.vp-whois__title {
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h2);
    line-height: var(--vp-lh-h2);
    text-transform: uppercase;
}

.vp-whois__text { margin-top: var(--vp-space-5); line-height: 24px; }

.vp-whois__list { margin-top: var(--vp-space-8); list-style: none; }
.vp-whois__list li {
    display: flex;
    align-items: center;
    gap: var(--vp-space-4);
    line-height: 22px;
}
.vp-whois__list li + li { margin-top: var(--vp-space-8); }
.vp-whois__list img { flex: none; width: 56px; height: 56px; }

/* ---- Почему выбирают нас ---- */

.vp-adv__title { text-align: center; text-transform: uppercase; margin-bottom: var(--vp-space-8); }

.vp-adv__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--vp-space-5);
    list-style: none;
}

/* Колонка иконки равна её ширине, иначе рисунок наезжает на текст.
   Заголовок жирный: клиент отметил, что сегменты выглядят узкими,
   а шрифт недостаточно плотным. */
.vp-adv__item {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: start;
    gap: var(--vp-space-2) var(--vp-space-5);
    padding: var(--vp-space-8) var(--vp-space-6);
    background: var(--vp-bg-cream);
}
.vp-adv__item img { grid-row: span 2; width: 60px; height: 60px; }
.vp-adv__item h3 { font-size: var(--vp-fs-lg); line-height: 26px; font-weight: 700; }
.vp-adv__item p { font-size: var(--vp-fs-md); line-height: 22px; color: var(--vp-text-soft); }

@media (max-width: 1279px) {
    .vp-about-hero { background-position: 78% center; }
    .vp-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vp-whois__grid { grid-template-columns: 1fr; gap: var(--vp-space-8); }
    .vp-adv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    /* Фото перекрывало бы текст — уводим его вниз отдельной полосой */
    .vp-about-hero { background-image: none; }
    .vp-about-hero__inner { min-height: 0; padding-bottom: var(--vp-space-8); }
    .vp-about-hero__title { font-size: var(--vp-fs-h2); line-height: var(--vp-lh-h2); }
    .vp-about-hero__text { font-size: var(--vp-fs-lg); line-height: 26px; }
    .vp-about-hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
    .vp-about-hero__photo {
        display: block;
        width: 100%;
        height: 260px;
        object-fit: cover;
    }
    .vp-facts__grid, .vp-adv__grid { grid-template-columns: 1fr; }
}