/* ============================================================
   СТРАНИЧНЫЕ БЛОКИ
   Только то, что живёт на конкретных страницах и не является
   переиспользуемым компонентом.
   ============================================================ */

/* ------------------------------------------------------------
   ГЛАВНАЯ: первый экран
   Тёмная заливка не выходит за сетку: границы блока совпадают
   с контентной колонкой контейнера (CLAUDE.md §6).
   ------------------------------------------------------------ */
.hero { padding-top: var(--sp-5); }

.hero__inner {
  display: grid;
  /* Колонка фото — та его часть, что попадает внутрь полей блока.
     Остальное фото занимает правое поле и выходит к краю блока, поэтому
     трек = (ширина блока × 9/20) − правое поле. В сумме фото = 45% ширины
     блока: 594px на Desktop L и пропорционально меньше на узких экранах.
     Шире не делаем: текстовой колонке нужно остаться при своих 620px. */
  grid-template-columns: minmax(0, 1fr) calc((450% - var(--sp-8)) / 10);
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-9) var(--sp-8);
  /* Высоту блока раньше задавало фото в потоке (колонка 400px в 3:4);
     после растяжения фото она зафиксирована явно. −100px — подобранная
     заказчиком высота: масштаб кадра держит ширина колонки, поэтому
     фото не уменьшается, у него срезается низ. */
  min-height: calc(400px / 3 * 4 + var(--sp-9) * 2 - 100px);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-md);
  overflow: hidden;
}

.hero__content { display: grid; gap: var(--sp-5); justify-items: start; max-width: 620px; }
.hero__title { color: var(--white); }
.hero__lead { color: rgba(255, 255, 255, .78); max-width: 520px; }
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); }

/* Фото выходит из полей блока: касается его верхнего и правого края и
   растянуто на всю высоту. Низ кадра уходит за нижнюю границу блока и
   срезается его overflow. Отрицательные поля — ровно те, что у блока. */
.hero__media {
  position: relative;
  align-self: stretch;
  margin: calc(var(--sp-9) * -1) calc(var(--sp-8) * -1) calc(var(--sp-9) * -1) 0;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
}

/* Фото абсолютное намеренно. В потоке `height: 100%` при авто-высоте
   родителя считается за `auto`, кадр разворачивается в свою пропорцию
   и сам задаёт высоту блока — тогда `min-height` ниже этой высоты
   ничего не делает и кадр не режется. Абсолютное фото в расчёте высоты
   не участвует: высоту диктует блок, лишнее уходит под `overflow`. */
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Ниже Desktop L поля блока меньше — пересчитываем трек и вылет фото
   под них. Доля фото та же (45% ширины блока), вид блока сохраняется. */
@media (max-width: 1439px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) calc((450% - var(--sp-6)) / 10);
    padding: var(--sp-8) var(--sp-6);
    min-height: calc(320px / 3 * 4 + var(--sp-8) * 2 - 100px);
  }
  .hero__media { margin: calc(var(--sp-8) * -1) calc(var(--sp-6) * -1) calc(var(--sp-8) * -1) 0; }
}

/* Телефон и планшет — одна колонка: фото уходит под текст, но остаётся
   тем же приёмом, что на десктопе. Оно распахнуто во всю ширину блока,
   выходит в его боковые поля и касается нижнего края; кадр берётся
   сверху, низ срезается. Отрицательные поля — ровно те, что у блока,
   скругление нижних углов даёт сам блок своим overflow.
   Пропорция 1:1, а не 4:3: кадр портретный, более плоская коробка
   срезала бы изделие. */
@media (max-width: 991px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    padding: var(--sp-8) var(--sp-6);
    min-height: 0;
  }
  .hero__media {
    align-self: auto;
    /* Нижнее поле на 40px больше вылета: на столько коробка фото уходит
       за нижнюю границу блока и срезается его overflow. Так подрезка
       не трогает масштаб кадра — он остаётся при своей ширине. */
    margin: 0 calc(var(--sp-6) * -1) calc(var(--sp-8) * -1 - 40px);
    max-width: none;
    aspect-ratio: 1 / 1;
    border-radius: 0;
  }

  /* Кнопки одной ширины на всю мобильную раскладку. Колонка, а не две
     в строку: у .btn стоит `white-space: nowrap`, и на узком экране
     подпись «Перейти в каталог» вылезла бы за половину строки.
     justify-self перебивает `justify-items: start` у .hero__content,
     width на самих кнопках — их собственный inline-flex, иначе они
     остаются по содержимому и ширины снова разъезжаются. */
  .hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-self: stretch;
  }
  .hero__actions .btn { width: 100%; }
}

@media (max-width: 599px) {
  .hero { padding-top: var(--sp-4); }
  .hero__inner { padding: var(--sp-6) var(--sp-5); }
  /* поля блока здесь другие — вылет фото пересчитан под них, подрезка та же */
  .hero__media { margin: 0 calc(var(--sp-5) * -1) calc(var(--sp-6) * -1 - 40px); }
}

/* ------------------------------------------------------------
   ГЛАВНАЯ: карточка категории
   ------------------------------------------------------------ */
.cat-card {
  display: grid;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cat-card:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }

.cat-card__media { aspect-ratio: 4 / 3; background: var(--bg); overflow: hidden; }

/* --cover-lift поднимает кадр и срезает лишнее сверху — задаётся полем
   `coverLift` в CATEGORIES для тех обложек, где товар уходит вниз кадра.
   Вычитается, потому что положительная длина в object-position двигает
   изображение вниз. */
.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center calc(22% - var(--cover-lift, 0px));
  transition: transform var(--dur-slow) var(--ease);
}

.cat-card:hover .cat-card__media img { transform: scale(1.03); }

.cat-card__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
}

.cat-card__title {
  font-family: var(--font-head);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  font-weight: 600;
  color: var(--navy);
}

.cat-card__count { color: var(--text-weak); font-size: var(--t-caption-size); }

/* Направление заведено под будущие модели: товаров, а значит и кадра для
   обложки, ещё нет. Вместо чужого фото — нейтральная подложка со знаком
   часов; плитка остаётся кликабельной и ведёт в свою (пока пустую) выдачу. */
.cat-card__media--soon {
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}

.cat-card__media--soon svg { width: 48px; height: 48px; }

.cat-card--soon .cat-card__count { color: var(--accent); }

/* ------------------------------------------------------------
   ГЛАВНАЯ: блок «преимущества → качество пошива»
   Приём подсмотрен у docsuniform: соседние секции сцеплены,
   верхняя заходит на нижнюю. Даёт динамику без разнобоя сетки.
   ------------------------------------------------------------ */
.overlap { position: relative; padding-bottom: 0; }

.overlap__cards { position: relative; z-index: 1; margin-bottom: calc(var(--sp-9) * -1); }

.overlap-target { padding-top: calc(var(--section-y) + var(--sp-9)); }

@media (max-width: 767px) {
  .overlap__cards { margin-bottom: calc(var(--sp-7) * -1); }
  .overlap-target { padding-top: calc(var(--section-y) + var(--sp-7)); }
}

/* Раскладка «текст + картинка» для блока о пошиве */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
}

.split__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg);
}

.split__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.split__content { display: grid; gap: var(--sp-5); align-content: start; }
/* Шаг между пунктами — --sp-5 (было --sp-4) */
.split__list { display: grid; gap: var(--sp-5); }

.split__item { display: flex; gap: var(--sp-4); align-items: flex-start; }

.split__item-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.split__item-icon svg { width: 22px; height: 22px; }
.split__item b { display: block; font-family: var(--font-head); color: var(--navy); margin-bottom: 2px; }
.split__item span { color: var(--text-muted); font-size: var(--t-body-s-size); line-height: var(--t-body-s-lh); }

@media (max-width: 991px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .split__media { order: -1; max-width: 560px; }
}

/* ------------------------------------------------------------
   СТРАНИЦА «ДОСТАВКА И ОПЛАТА»: шаги
   ------------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }

.steps__item { position: relative; display: grid; gap: var(--sp-3); align-content: start; }

.steps__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-head);
  font-weight: 600;
}

.steps__item::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 56px;
  right: calc(var(--gutter) * -1 + 8px);
  height: 1px;
  background: var(--border);
}

.steps__item:last-child::after { display: none; }

@media (max-width: 991px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-6); }
  .steps__item:nth-child(2n)::after { display: none; }
}

@media (max-width: 599px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps__item::after { display: none; }
}

/* ------------------------------------------------------------
   СТРАНИЦА «КОНТАКТЫ»
   ------------------------------------------------------------ */
/* Форма слева — она главное действие страницы; контакты узкой колонкой справа */
.contacts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--sp-8);
  align-items: start;
}

.contacts-list { display: grid; gap: var(--sp-5); }

.contacts-item { display: flex; gap: var(--sp-4); align-items: flex-start; }

.contacts-item__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.contacts-item__icon svg { width: 22px; height: 22px; }
.contacts-item__label { color: var(--text-muted); font-size: var(--t-caption-size); display: block; margin-bottom: 2px; }
/* Два телефона в одном пункте — каждый на своей строке */
.contacts-item__values { display: grid; justify-items: start; gap: 2px; }
.contacts-item__value { display: block; font-family: var(--font-head); font-size: var(--t-h4-size); line-height: var(--t-h4-lh); font-weight: 500; color: var(--navy); }
a.contacts-item__value:hover { color: var(--accent); }

/* Карта: виджет Яндекса в рамке того же формата, что была у заглушки —
   16/9, радиус --r-md. overflow: hidden — чтобы прямые углы iframe
   не вылезали за скруглённую рамку. Подложка --bg держит место, пока
   виджет грузится (loading="lazy"). */
.map {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg);
}

.map iframe { display: block; width: 100%; height: 100%; border: 0; }

.map__note { margin-top: var(--sp-3); color: var(--text-muted); }
.map__note a { color: var(--accent); }
.map__note a:hover { color: var(--accent-hover); }

@media (max-width: 991px) {
  .contacts-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

/* ------------------------------------------------------------
   СТРАНИЦА 404
   ------------------------------------------------------------ */
.page-404 {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-5);
  /* снизу 0 — зазор до подвала даёт сам подвал */
  padding-block: var(--sp-11) 0;
}

.page-404__code {
  font-family: var(--font-head);
  font-size: 120px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--accent-soft);
}

@media (max-width: 767px) {
  .page-404__code { font-size: 84px; }
  .page-404 { padding-block: var(--sp-9); }
}

/* ------------------------------------------------------------
   НАКЛАДНАЯ
   ------------------------------------------------------------ */
.invoice {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  display: grid;
  gap: var(--sp-6);
  max-width: 900px;
}

.invoice__head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding-bottom: var(--sp-5);
  border-bottom: 2px solid var(--navy);
}

.invoice__logo {
  font-family: var(--font-head);
  font-size: var(--t-logo-size);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--navy);
  margin-bottom: var(--sp-3);
}

.invoice__logo span { font-weight: 400; }
.invoice__meta { text-align: right; display: grid; gap: var(--sp-1); }

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

.invoice__table { min-width: 0; }
.invoice__totals { display: grid; gap: var(--sp-3); max-width: 360px; margin-left: auto; width: 100%; }

.invoice__sign {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-5);
}

.invoice__sign > div { display: grid; gap: var(--sp-4); }

.invoice__line {
  display: block;
  height: 1px;
  background: var(--border);
  margin-top: var(--sp-6);
}

.invoice__demo { color: var(--text-weak); border-top: 1px solid var(--line); padding-top: var(--sp-4); }

.invoice__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

@media (max-width: 767px) {
  .invoice { padding: var(--sp-5); }
  .invoice__parties, .invoice__sign { grid-template-columns: minmax(0, 1fr); }
  .invoice__meta { text-align: left; }
}

/* ---------- Печать ---------- */
@media print {
  .header, .footer, .breadcrumbs, .no-print, .toasts, .drawer, .modal { display: none !important; }

  body { background: #fff; }

  .invoice {
    border: 0;
    padding: 0;
    max-width: none;
    gap: 16px;
  }

  .table-wrap { border: 1px solid var(--print-border); overflow: visible; }
  .table { min-width: 0; }
  .table th, .table td { padding: 6px 8px; }
  .invoice__demo { color: var(--print-muted); }

  @page { margin: 14mm; }
}