/* Контентные страницы: услуги, новости, акции, вакансии, сертификаты,
 * доставка, помощь, обратная связь и произвольные страницы.
 *
 * Экраны из макета: 884:158 (услуга), 1051:2734 (доставка), 1060:3036
 * (сертификаты), 1060:3221 (новости), 1060:3405 (акции), 1097:3922 (вакансии),
 * 1105:4281 (помощь).
 */

/* --- Общее для всех контентных страниц ---------------------------------- */

.page-head {
  margin-bottom: var(--sp-7);
}

.page-head h1 {
  margin-bottom: var(--sp-3);
}

/* Мера строки: в ch, а не в пикселях, — при другом кегле предел едет вместе
   с текстом и абзац не разъезжается на полтораста знаков. */
.page-head__lead {
  max-width: 68ch;
  color: var(--c-ink-70);
  font-size: var(--fs-sm);
}

/* --- Плавные появления --------------------------------------------------- */
/* Классы вешает Alpine через x-transition:enter / x-transition:leave.
   Длительность взята из токенов — значит, при prefers-reduced-motion
   переход обнуляется вместе со всеми остальными, отдельного правила
   для этого не нужно. */

.fade { transition: opacity var(--t-base), transform var(--t-base); }
.fade-off { opacity: 0; }
.fade-on { opacity: 1; transform: none; }
/* Появление «снизу вверх»: содержимое вкладки въезжает, а не проступает. */
.fade-under { opacity: 0; transform: translateY(8px); }

/* --- Герой-блок посадочных страниц --------------------------------------- */
/* Экраны 1105:4281 («Помощь»), 1100:4080 («Организациям»), «Поставщикам».
   Устройство одно на три страницы: слева широкая плашка с заголовком, лидом
   и снимком, справа — карточка действия либо сетка коротких доводов. */

.chero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: var(--sp-6);
  align-items: stretch;
}
/* Под сетку 2×2 правая колонка шире: две карточки по 250 с зазором. */
.chero--facts { grid-template-columns: minmax(0, 1fr) 560px; }

.chero__plate {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: var(--sp-7);
  border-radius: var(--r-xl);
  /* Фотографий от заказчика ещё нет. Пока их не прислали, плашка работает
     сама по себе — ровная заливка, а не «пустое место» в полоску. */
  background: var(--c-surface);
  overflow: hidden;
}

.chero__plate h1 { position: relative; z-index: 1; max-width: 58%; }
.chero__lead {
  position: relative;
  z-index: 1;
  max-width: 52%;
  margin-top: var(--sp-4);
  color: var(--c-ink-70);
  font-size: var(--fs-sm);
}
.chero__action { position: relative; z-index: 1; margin-top: auto; padding-top: var(--sp-6); }

/* Снимок выпущен в правый нижний угол плашки — так собран экран «Помощь». */
.chero__photo { position: absolute; right: 0; bottom: 0; width: 52%; max-height: 84%; }
.chero__photo img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }

.chero__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-7);
  border: 1px solid var(--c-brand-tint-border);
  border-radius: var(--r-xl);
  background: var(--c-bg);
  text-align: center;
}
.chero__aside h2 { font-size: var(--fs-h3); }
.chero__aside p { color: var(--c-ink-70); font-size: var(--fs-sm); }
.chero__aside .btn { width: 100%; }
.chero__sep { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-muted); }
.chero__sep b { display: block; color: var(--c-ink); }

.chero__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }

.chero__fact {
  padding: var(--sp-5);
  border: 1px solid var(--c-brand-tint-border);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.chero__fact:hover { transform: var(--hover-lift); box-shadow: var(--shadow-hover); }
.chero__fact h3 { margin-bottom: var(--sp-2); font-size: var(--fs-h3); }
.chero__fact p { font-size: var(--fs-sm); color: var(--c-ink-70); }

/* Нумерованные доводы посадочной («Поставщикам»): индиговая шапка с номером
   в круге и подложка на тон светлее под текстом. Оттенки взяты смешением
   бренда с фоном, чтобы палитра осталась в токенах. */
.phl-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); counter-reset: phl; }
.phl { display: flex; flex-direction: column; }

.phl__head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 116px;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: color-mix(in srgb, var(--c-brand) 80%, var(--c-bg));
  color: var(--c-bg);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.phl__num {
  counter-increment: phl;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border: 3px solid var(--c-brand-active);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-brand-active);
  font-size: var(--fs-h2);
}
.phl__num::before { content: counter(phl); }

.phl__body {
  flex: 1;
  padding: var(--sp-5) var(--sp-6);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: color-mix(in srgb, var(--c-brand) 65%, var(--c-bg));
  color: var(--c-bg);
  font-size: var(--fs-sm);
}

/* Призыв в конце посадочной: «Начать сотрудничество прямо сейчас!» */
.cstart { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--sp-8); align-items: start; }
/* Колонка тут шире тысячи пикселей — без предела строка уходит за сотню знаков
   и глаз теряет начало следующей. */
.cstart__lead { max-width: 68ch; margin-top: var(--sp-4); color: var(--c-ink-70); }
.cstart__action { display: grid; gap: var(--sp-4); }

/* Текст из визуального редактора. Ни одного класса внутри — размечаем по тегам. */
/* Вкладки страниц «Акции» и «Помощь» */
.ctabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid var(--c-border);
}

.ctab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  position: relative;
  padding-bottom: var(--sp-3);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}

.ctab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: var(--r-pill);
  background: transparent;
  transition: background var(--t-base);
}

.ctab:hover { color: var(--c-ink); }
.ctab.is-active { color: var(--c-brand); font-weight: var(--fw-semibold); }
.ctab.is-active::after { background: var(--c-brand); }
.ctab__count { color: var(--c-muted-light); }

/* Кнопка «Показать ещё» под сетками новостей и акций */
.load-more { display: flex; justify-content: center; margin-top: var(--sp-7); }
.pagination-wrap { margin-top: var(--sp-7); }

/* --- Услуги: список ------------------------------------------------------ */

.svc-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }

.svc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.svc-card:hover { transform: var(--hover-lift); box-shadow: var(--shadow-hover); border-color: transparent; }

.svc-card__media { aspect-ratio: 3 / 2; min-height: 0; overflow: hidden; background: var(--c-surface); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; }

.svc-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); }
.svc-card__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.svc-card__text { font-size: var(--fs-xs); color: var(--c-muted); }
.svc-card__more { margin-top: auto; padding-top: var(--sp-3); color: var(--c-brand); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }

/* --- Услуга: обложка и блоки -------------------------------------------- */

.svc-hero-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--sp-4);
  align-items: stretch;
}

/* Обложка занимает левую колонку и две строки — так собран экран 884:158.
   Изображение выпущено в правый нижний угол карточки поверх текста. */
.svc-hero {
  position: relative;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: var(--sp-7);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  overflow: hidden;
}

.svc-hero h1 { position: relative; z-index: 1; margin-bottom: var(--sp-4); max-width: 55%; }
.svc-hero__intro { position: relative; z-index: 1; max-width: 42%; color: var(--c-ink-70); font-size: var(--fs-sm); }

.svc-hero__img { position: absolute; right: 0; bottom: 0; width: 54%; max-height: 72%; }
.svc-hero__img img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }

/* Обложка без карточек справа занимает всю ширину */
.svc-hero-grid--solo { grid-template-columns: 1fr; }
.svc-hero-grid--solo .svc-hero { grid-row: auto; }
.svc-hero-grid--solo .svc-hero__img { width: 46%; }

.svc-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }

.svc-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-brand-tint-border);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.svc-note:hover { transform: var(--hover-lift); box-shadow: var(--shadow-hover); }
.svc-note__body { flex: 1; }
.svc-note__title { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.svc-note__text { font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--c-ink-70); text-align: justify; }

.svc-note__icon {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface);
}
.svc-note__icon img { width: 100%; height: 100%; object-fit: cover; }

/* Нумерованные шаги */
.svc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); counter-reset: step; }

.svc-step {
  position: relative;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.svc-step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.svc-step__title { display: block; margin-bottom: var(--sp-2); font-weight: var(--fw-semibold); }
.svc-step__text { font-size: var(--fs-sm); color: var(--c-ink-70); }

/* Блок «изображение и текст» */
.svc-media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}
.svc-media-row + .svc-media-row { margin-top: var(--sp-7); }
.svc-media-row:nth-child(even) .svc-media-row__media { order: 2; }
.svc-media-row__media { border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); }
.svc-media-row__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Слайдер проектов (фрейм «ТЗ» 1160:6886) ----------------------------- */

.proj { position: relative; }
.proj__viewport { position: relative; }

.proj__slide { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); }

.proj__main {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
  cursor: zoom-in;
}

.proj__main img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-base); }
.proj__main:hover img { transform: var(--hover-zoom); }

.proj__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-8) var(--sp-6) var(--sp-5);
  background: linear-gradient(to top, color-mix(in srgb, var(--c-ink) 80%, transparent), transparent);
  color: #fff;
}
.proj__caption strong { display: block; font-size: var(--fs-h3); }
.proj__caption span { font-size: var(--fs-sm); }

.proj__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--sp-2); }

/* Пропорция миниатюр подобрана так, чтобы правая сетка 2×2 совпала
   по высоте с большим фото слева — как на экране 884:158. */
.proj__thumb {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface);
  cursor: zoom-in;
}
.proj__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-base); }
.proj__thumb:hover img { transform: var(--hover-zoom); }

.proj__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-ink-70);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-fast), color var(--t-fast);
}
.proj__arrow:hover { color: var(--c-brand); transform: translateY(-50%) scale(1.08); }
.proj__arrow--prev { left: calc(var(--sp-5) * -1); }
.proj__arrow--next { right: calc(var(--sp-5) * -1); }
.proj__arrow svg { width: 18px; height: 18px; }
.proj__arrow--prev svg { transform: rotate(180deg); }

.proj__bar {
  width: min(460px, 60%);
  height: 6px;
  margin: var(--sp-7) auto 0;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  overflow: hidden;
}
.proj__bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c-brand); transition: margin-left var(--t-slide), width var(--t-slide); }

/* Увеличенное фото проекта */
.lightbox {
  width: min(1100px, 100%);
  max-height: calc(100dvh - 80px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-bg);
}
.lightbox img { width: 100%; max-height: calc(100dvh - 80px); object-fit: contain; }
.lightbox__close {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-ink);
}

/* --- Форма консультации --------------------------------------------------- */

.consult {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-8);
  padding: var(--sp-9);
  border-radius: var(--r-xl);
  background: var(--c-brand);
  color: #fff;
}

.consult h2 { margin-bottom: var(--sp-4); }
.consult__lead { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.82); }
.consult__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.consult__field { display: flex; flex-direction: column; gap: var(--sp-2); }
.consult__field > span { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.75); }

.consult__field input {
  height: 46px;
  padding: 0 var(--sp-4);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.consult__field input::placeholder { color: rgba(255, 255, 255, 0.55); }
.consult__field input:focus { outline: 0; border-color: #fff; background: rgba(255, 255, 255, 0.16); }

.consult__submit { grid-column: 1 / -1; margin-top: var(--sp-1); }
.consult__consent { grid-column: 1 / -1; color: rgba(255, 255, 255, 0.8); }
.consult__consent a { color: #fff; }
.consult__consent .box { background: transparent; border-color: rgba(255, 255, 255, 0.5); }
/* На индиговой подложке галочка белая на белом фоне не видна, поэтому
   отмеченный чекбокс инвертирован: белая коробка и «птичка» цвета бренда.
   Форму берём маской, чтобы цвет остался токеном, а не хексом внутри data-URI. */
.consult__consent input:checked + .box { background: #fff; border-color: #fff; }
.consult__consent input:checked + .box::after {
  background: var(--c-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.consult__state {
  grid-column: 1 / -1;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.14);
  font-size: var(--fs-sm);
}

/* --- Новости и акции ------------------------------------------------------ */

.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }

/* Карточки ленты проступают, а не возникают: «Показать ещё» дописывает их
   прямо в сетку, и без этого следующая дюжина выпрыгивает разом. Только
   прозрачность — размеры не трогаем, иначе поедет соседний ряд. */
@keyframes card-in { from { opacity: 0; } to { opacity: 1; } }
.card-grid > .post-card { animation: card-in var(--t-base) backwards; }

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.post-card:hover { transform: var(--hover-lift); box-shadow: var(--shadow-hover); border-color: transparent; }

.post-card__media { position: relative; aspect-ratio: 3 / 2; min-height: 0; overflow: hidden; background: var(--c-surface); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__badge { position: absolute; left: var(--sp-3); top: var(--sp-3); }

.post-card__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); flex: 1; }
.post-card__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: 1.4; }
.post-card__date { margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-2xs); color: var(--c-muted); }

.post-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.post-cover { margin-bottom: var(--sp-7); border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); }
.post-cover img { width: 100%; max-height: 460px; object-fit: cover; }
.post-body { max-width: 860px; }

/* --- Вакансии -------------------------------------------------------------- */

.vac-list { display: flex; flex-direction: column; gap: var(--sp-4); }

.vac-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.vac-card:hover { transform: var(--hover-lift); box-shadow: var(--shadow-hover); border-color: transparent; }

.vac-card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.vac-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0; }
.vac-card__text { font-size: var(--fs-sm); color: var(--c-ink-70); max-width: 70ch; }
.vac-card__salary { font-size: var(--fs-base); font-weight: var(--fw-bold); white-space: nowrap; }
.vac-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); }

.vac-detail { display: grid; grid-template-columns: 1fr 420px; gap: var(--sp-8); align-items: start; }
.vac-detail__block { margin-top: var(--sp-7); }
.vac-detail__block h2 { margin-bottom: var(--sp-3); font-size: var(--fs-h3); }

.form-card {
  position: sticky;
  top: var(--sp-5);
  padding: var(--sp-7);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  box-shadow: var(--shadow-card);
}
.form-card h2 { margin-bottom: var(--sp-5); font-size: var(--fs-h3); }
.form-card__actions { margin-top: var(--sp-5); }
.form-grid { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Поле файла: нативный input скрыт, кликабельна вся полоса */
.file-field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  color: var(--c-ink-70);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.file-field:hover { border-color: var(--c-brand); color: var(--c-brand); }
.file-field input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-field__name { color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.form-state {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-tint-border);
  font-size: var(--fs-sm);
  color: var(--c-ink);
}
.form-state strong { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-base); }

/* --- Сертификаты ----------------------------------------------------------- */

.cert-group + .cert-group { margin-top: var(--sp-8); }
.cert-group__title { margin-bottom: var(--sp-5); font-size: var(--fs-h3); font-weight: var(--fw-bold); }
/* Сертификат — вертикальный лист, поэтому карточек в ряду больше, чем в новостях. */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--grid-gap); }

.cert-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.cert-card:hover { transform: var(--hover-lift); box-shadow: var(--shadow-hover); border-color: transparent; }

.cert-card__media { aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); }
.cert-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cert-card__title { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.cert-card__date { font-size: var(--fs-2xs); color: var(--c-muted); }
.cert-card__btn { margin-top: auto; }

/* --- Доставка --------------------------------------------------------------- */

/* Первый экран 1051:2734: слева карточка с текстом, справа — перевозчики. */
.dlv-top { display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: var(--sp-6); }
/* Обе карточки одной высоты, поэтому текст в левой стоит по центру, а не
   висит под верхним краем с пустотой внизу. */
.dlv-top__text { display: flex; align-items: center; }


.dlv-partners__title { margin-bottom: var(--sp-5); font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.dlv-partners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }

.dlv-partner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.dlv-partner:hover { transform: var(--hover-lift); box-shadow: var(--shadow-hover); }
.dlv-partner__logo { height: 48px; }
.dlv-partner__logo img { height: 100%; width: auto; object-fit: contain; }
.dlv-partner__name { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
/* В макете это не кнопки, а два текстовых пункта столбиком. */
.dlv-partner__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); margin-top: auto; }
.dlv-partner__links a { font-size: var(--fs-sm); color: var(--c-ink-70); transition: color var(--t-fast); }
.dlv-partner__links a:hover { color: var(--c-brand); }

/* Условия по Москве — четыре колонки в одну строку, как на экране макета. */
.dlv-terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
.dlv-terms dt { margin-bottom: var(--sp-3); font-size: var(--fs-base); font-weight: var(--fw-bold); }
.dlv-terms dd { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-70); }

/* Пункты выдачи: слева выбор пункта, справа место под карту. */
.dlv-pickup {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  align-items: stretch;
}
.dlv-points { display: flex; flex-direction: column; gap: var(--sp-3); }

.dlv-point {
  width: 100%;
  padding: var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  text-align: left;
  transition: border-color var(--t-base), background var(--t-base);
}
.dlv-point:hover { border-color: var(--c-brand-tint-border); }
.dlv-point.is-active { border-color: var(--c-brand-outline); background: var(--c-brand-tint); }
.dlv-point__name { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.dlv-point__row { display: block; font-size: var(--fs-sm); color: var(--c-ink-70); }

.dlv-contacts { display: grid; gap: var(--sp-4); margin-top: auto; padding-top: var(--sp-5); }
.dlv-contact span { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); }
.dlv-contact b { font-size: var(--fs-base); }
.dlv-contact a:hover { color: var(--c-brand); }

/* Слот карты. Провайдер ещё не выбран, поэтому внутри — только подпись:
   когда его выберут, содержимое слота заменяется одной вставкой, а сетка
   и размеры вокруг остаются прежними. */
.dlv-map {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
}

/* Подписи всех пунктов лежат друг на друге: только так смена пункта проходит
   перекрёстным затуханием, а не сдвигом соседа вбок на время перехода. */
.dlv-map__note {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6);
  text-align: center;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.dlv-map__note > * { max-width: 42ch; }
.dlv-map__note svg { width: 28px; height: 28px; color: var(--c-brand); }
.dlv-map__note b { color: var(--c-ink); font-size: var(--fs-lg); }

/* --- Помощь ------------------------------------------------------------------ */

/* Вкладки-плашки экрана 1105:4281. Раньше это была строка ссылок, которая
   на телефоне уезжала за экран вместе с двумя последними разделами. */
.htabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-7); }

.htab {
  position: relative;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-ink-70);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  text-align: left;
  transition: color var(--t-base), border-color var(--t-base), background var(--t-base), transform var(--t-base), opacity var(--t-base);
}
.htab:hover { color: var(--c-brand); }
.htab.is-active { border-color: var(--c-brand-outline); background: var(--c-bg); color: var(--c-brand); font-weight: var(--fw-semibold); }

/* «Носик» активной вкладки, указывающий на панель с ответами. Нарисован
   у каждой вкладки и только показывается у активной: появись он вместе
   с классом — выскакивал бы готовым, без перехода. */
.htab::after {
  content: '';
  position: absolute;
  left: var(--sp-6);
  bottom: -7px;
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: rotate(45deg) scale(0.4);
  border: 1px solid var(--c-brand-outline);
  border-top: 0;
  border-left: 0;
  background: var(--c-bg);
  transition: opacity var(--t-fast), transform var(--t-base);
}
.htab.is-active::after { opacity: 1; transform: rotate(45deg) scale(1); }

.help-panel {
  padding: var(--sp-7);
  border: 1px solid var(--c-brand-tint-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.acc { border-top: 1px solid var(--c-border); }
.acc__item { border-bottom: 1px solid var(--c-border); }

.acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-5) 0;
  text-align: left;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  transition: color var(--t-fast);
}
.acc__q:hover { color: var(--c-brand); }
/* Значок «шеврон» в наборе смотрит вправо: закрытый пункт — вниз, открытый — вверх. */
.acc__q svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--c-muted); transform: rotate(90deg); transition: transform var(--t-base), color var(--t-base); }
.acc__item.is-open .acc__q { color: var(--c-brand); font-weight: var(--fw-semibold); }
.acc__item.is-open .acc__q svg { transform: rotate(-90deg); color: var(--c-brand); }

/* Ответ раскрывается по высоте, а не проступает рывком на полный рост.
   Строка сетки растёт от 0fr до 1fr — единственный способ довести анимацию
   до «высоты содержимого», не замеряя её скриптом. Вложенный overflow:hidden
   обнуляет минимальный размер строки, без него 0fr не сработает.
   Через visibility закрытый ответ выпадает из порядка обхода с клавиатуры;
   в шорткате это длительность, поэтому свойство переключается в конце. */
.acc__a {
  display: grid;
  grid-template-rows: 0fr;
  /* Отступ снизу тоже растёт: оставь его на внутреннем блоке — и закрытый
     ответ будет держать пустую полосу в двадцать пикселей. */
  padding-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--t-base),
    padding-bottom var(--t-base),
    opacity var(--t-fast),
    visibility var(--t-base);
}
.acc__a-inner { overflow: hidden; }
.acc__item.is-open .acc__a {
  grid-template-rows: 1fr;
  padding-bottom: var(--sp-5);
  opacity: 1;
  visibility: visible;
}

/* Без min-width:0 колонка растягивается под непереносимую строку и вся
   страница получает горизонтальную прокрутку. */
.vac-detail > *, .feedback-layout > * { min-width: 0; }

/* --- Обратная связь ------------------------------------------------------------ */

.feedback-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }
.feedback-note { padding: var(--sp-7); border-radius: var(--r-lg); background: var(--c-surface); }
.feedback-note__row + .feedback-note__row { margin-top: var(--sp-5); }
.feedback-note__row span { display: block; font-size: var(--fs-xs); color: var(--c-muted); }
.feedback-note__row b { font-size: var(--fs-lg); }

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

@media (max-width: 1200px) {
  .svc-list, .card-grid { grid-template-columns: repeat(3, 1fr); }
  .cert-grid { grid-template-columns: repeat(4, 1fr); }
  /* Узкая колонка обложки: текст во всю ширину, изображение под ним. */
  .svc-hero h1, .svc-hero__intro { max-width: 100%; }
  .svc-hero__img { position: static; width: 62%; max-height: none; margin: var(--sp-6) 0 0 auto; }
  .svc-steps { grid-template-columns: repeat(2, 1fr); }
  .vac-detail { grid-template-columns: 1fr 340px; }
  .chero { grid-template-columns: minmax(0, 1fr) 380px; }
  .chero--facts { grid-template-columns: minmax(0, 1fr) 440px; }
  .dlv-top { grid-template-columns: minmax(0, 1fr) 480px; }
  .dlv-pickup { grid-template-columns: 300px minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .consult { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-7); }
  .vac-detail, .feedback-layout, .cstart { grid-template-columns: 1fr; }
  .form-card { position: static; }
  .proj__arrow--prev { left: var(--sp-2); }
  .proj__arrow--next { right: var(--sp-2); }
  .dlv-top, .dlv-pickup { grid-template-columns: 1fr; }
  .prose-2col { columns: 1; }
  .dlv-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlv-map { min-height: 320px; }
  /* Вкладки помощи в два ряда: четвёртая по счёту всё равно видна. */
  .htabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  /* С переносом «носик» указывал бы на соседнюю вкладку, а не на панель. */
  .htab::after { display: none; }
}

@media (max-width: 900px) {
  .svc-hero-grid { grid-template-columns: 1fr; }
  .chero, .chero--facts { grid-template-columns: 1fr; }
  .chero__plate { min-height: 200px; }
  .chero__plate h1, .chero__lead { max-width: 100%; }
  /* В одну колонку снимок встаёт под текстом, а не поверх него. */
  .chero__photo { position: static; width: 62%; max-height: none; margin: var(--sp-6) 0 0 auto; }
  .svc-hero { grid-row: auto; min-height: 240px; }
  .svc-hero h1, .svc-hero__intro { max-width: 100%; }
  .svc-hero__img { position: static; width: 70%; max-height: none; margin: var(--sp-6) 0 0 auto; }
  .svc-list, .card-grid, .cert-grid, .phl-list { grid-template-columns: repeat(2, 1fr); }
  .proj__slide { grid-template-columns: 1fr; gap: var(--sp-3); }
  .proj__grid { grid-template-rows: auto; }
  /* В одну колонку стрелки должны остаться на большом фото, а не на миниатюрах. */
  .proj__arrow { top: 33%; }
  .svc-media-row { grid-template-columns: 1fr; }
  .svc-media-row:nth-child(even) .svc-media-row__media { order: 0; }
  .vac-card { grid-template-columns: 1fr; }
  .vac-card__side { align-items: flex-start; }
}

@media (max-width: 640px) {
  .svc-list, .cert-grid, .card-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-steps, .dlv-partners, .phl-list { grid-template-columns: 1fr; }
  .chero__grid { grid-template-columns: 1fr; }
  .consult__fields { grid-template-columns: 1fr; }
  .svc-note { flex-direction: column-reverse; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5); }
  .svc-note__text { text-align: left; }
  /* Вкладки на телефоне прокручиваются вбок, а не переносятся на три строки. */
  .ctabs {
    gap: var(--sp-4);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
  .ctabs::-webkit-scrollbar { display: none; }
  .dlv-terms { grid-template-columns: 1fr; gap: var(--sp-5); }
  .dlv-pickup { padding: var(--sp-4); gap: var(--sp-4); }
  .chero__plate, .chero__aside, .help-panel { padding: var(--sp-5); }
  .post-card__title { font-size: var(--fs-xs); }
}