/* ============================================================
   SOUPRRR — главная (страница-заглушка)
   Макеты: 1920 (58:3), 1440 (60:107), 768 (60:336), 375 (76:702)

   <1024 — обычный поток: логотип → герой → витрина → чёрная полоса.
   ≥1024 — абсолютная композиция во весь экран, шапка сверху.
   ============================================================ */

/* --- Фон-мазки во всю страницу (только 1440 / 1920) -------- */
.backdrop { display: none; }

/* --- Герой (58:17 / 60:109 / 60:338 / 76:704) -------------- */
.hero {
  position: relative;
  z-index: 2;
  flex: none;
  width: calc(100% - var(--gutter) * 2);
  margin-top: 20.84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.hero__badge {
  /* В макете обводка внутренняя, в CSS она добавляет 2px — компенсируем
     паддингом: 12/16 из макета минус 1px на бордюр. */
  padding: 11px 15px;
  border: 1px solid var(--color-teal);
  border-radius: 100px;
  background: rgba(37, 192, 185, .06);
  color: var(--color-teal);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.hero__title {
  margin: 0;
  width: 100%;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* На 768 и 1440 в макете стоит жёсткий перенос после «супы»,
   на 375 и 1920 строка ломается сама. */
.hero__break { display: none; }

@media (min-width: 768px) and (max-width: 1440px) {
  .hero__break { display: revert; }
}

.hero__subtitle {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

/* --- Витрина упаковок --------------------------------------
   .showcase — габаритный прямоугольник композиции из макета.
   Упаковки внутри спозиционированы в процентах, поэтому вся
   витрина масштабируется вместе с шириной экрана.             */
.showcase {
  position: relative;
  flex: none;
  align-self: flex-start;
  margin-top: 28.5px;
  margin-bottom: 28.5px;
  margin-left: -3.5339%;
  width: 107.0957%;
  aspect-ratio: 401.6087 / 307.0228;
}

/* Фон-мазки под витриной (768 / 375): повёрнуты и растворяются сверху */
.showcase__brush {
  position: absolute;
  left: -15.593%;
  top: -18.407%;
  width: 138.132%;
  height: 125.777%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* В макете у мазков режим «Затемнение», но фон картинки — тот же кремовый
   #F7F2EB, что и у страницы, поэтому darken ничего не меняет визуально.
   Без него не возникает группы наложения, из-за которой браузер иногда
   не отрисовывал пачки поверх лотков. */

.showcase__brush-inner {
  position: relative;
  flex: none;
  width: 90.772%;
  height: 65.199%;
  transform: rotate(-16.741deg);
}

.showcase__brush-inner img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase__brush-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(181.164deg, #F7F2EB 4.6043%, rgba(247, 242, 235, 0) 21.25%);
}

.packs {
  position: absolute;
  inset: 0;
  z-index: 1;                     /* строго поверх фона-мазков */
}

/* --- Упаковка ----------------------------------------------
   Лоток — кадр из общего спрайта-фотографии, поверх него
   картинка самой пачки (выгружена из макета как изображение:
   в Figma это векторный фрейм из сотен узлов).              */
.pack {
  position: absolute;
}

.pack__tray {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.pack__tray img {
  position: absolute;
  display: block;
  max-width: none;
}

.pack--1 .pack__tray img { width: 202.634%; height: 198.118%; left:    0.425%; top:    2.626%; }
.pack--2 .pack__tray img { width: 202.634%; height: 198.118%; left:  -99.502%; top:    2.626%; }
.pack--3 .pack__tray img { width: 202.634%; height: 198.118%; left:    1.224%; top:  -99.235%; }
.pack--4 .pack__tray img { width: 204.029%; height: 199.482%; left: -100.750%; top: -100.748%; }

/* Лицевая сторона пачки.
   display: block перебивает глобальное picture { display: contents } */
.pack__front {
  display: block;
  position: absolute;
  pointer-events: none;
}

.pack__front img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Позиция берётся по absoluteRenderBounds: у фреймов пачек в макете
   пять теней вверх, и Figma экспортирует картинку вместе с ними. */
.pack--1 .pack__front { left: 14.030%; top: -2.427%; width: 74.101%; height: 99.695%; }
.pack--2 .pack__front { left: 11.332%; top: -2.427%; width: 75.548%; height: 99.770%; }
.pack--3 .pack__front { left: 14.772%; top: -2.437%; width: 73.938%; height: 99.944%; }
.pack--4 .pack__front { left: 10.946%; top: -2.690%; width: 75.991%; height: 100.033%; }

/* Расстановка упаковок — макеты 375 и 768: шахматно 2 + 2,
   нижняя пара поверх верхней, в паре левая поверх правой. */
.pack--1 { left:  0;       top:  0;       width: 39.487%; height: 52.243%; z-index: 2; }
.pack--2 { left: 34.409%;  top:  0;       width: 39.667%; height: 52.243%; z-index: 1; }
.pack--3 { left: 25.988%;  top: 47.757%;  width: 39.577%; height: 52.243%; z-index: 4; }
.pack--4 { left: 60.694%;  top: 47.757%;  width: 39.306%; height: 52.243%; z-index: 3; }

/* ============================================================
   ≥768 — макет 768
   ============================================================ */
@media (min-width: 768px) {
  .hero {
    margin-top: 25px;
    gap: 12px;
  }

  .hero__badge    { padding: 13px 15px; font-size: 18px; }
  .hero__title    { font-size: 48px; }
  .hero__subtitle { font-size: 18px; }

  .showcase {
    margin-top: 20px;
    margin-bottom: 9px;
    margin-left: -2.3438%;
    width: 102.7120%;
    aspect-ratio: 788.8283 / 603.0468;
  }
}

/* ============================================================
   ≥1024 — макет 1440 (60:107): композиция во весь экран
   ============================================================ */
@media (min-width: 1024px) {
  .page--home {
    display: block;
    height: max(100vh, 840px);
    height: max(100dvh, 840px);
    overflow: hidden;
  }

  .backdrop {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .backdrop img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: darken;   /* «Затемнение», как в макете */
  }

  .hero {
    position: absolute;
    top: 185px;
    left: 0;
    right: 0;
    width: 879px;
    max-width: calc(100% - var(--gutter) * 2);
    margin: 0 auto;
    gap: 16px;
  }

  .hero__badge    { padding: 15px 19px; font-size: 20px; }
  .hero__title    { font-size: 54px; }
  .hero__subtitle { font-size: 20px; }

  /* Витрина отцентрована по горизонтали (поля 40.3 / 40.0 px в макете),
     поэтому центрируем и ограничиваем ширину — иначе на сверхшироких
     экранах она вырастает и наезжает на заголовок. */
  /* Центрируем полями, а не transform: у трансформа дробное смещение,
     из-за которого браузер пересэмплирует картинки и они мылятся. */
  .showcase {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    width: 94.4215%;
    max-width: 1359.67px;
    margin: 0 auto;
    aspect-ratio: 1359.67 / 383.6465;
  }

  .showcase__brush { display: none; }

  /* Ряд из четырёх упаковок внахлёст: левая поверх соседней справа */
  .pack--1 { left:  0;       top: 0; width: 27.897%; height: 100%; z-index: 4; }
  .pack--2 { left: 24.310%;  top: 0; width: 28.025%; height: 100%; z-index: 3; }
  .pack--3 { left: 47.711%;  top: 0; width: 27.961%; height: 100%; z-index: 2; }
  .pack--4 { left: 72.231%;  top: 0; width: 27.769%; height: 100%; z-index: 1; }

  .pack--1 .pack__front { height: 99.391%; }
  .pack--2 .pack__front { height: 99.391%; }
  .pack--3 .pack__front { height: 99.401%; }
  .pack--4 .pack__front { height: 99.654%; }
}

/* ============================================================
   ≥1441 — макет 1920 (58:3)
   ============================================================ */
@media (min-width: 1441px) {
  .page--home {
    height: max(100vh, 900px);
    height: max(100dvh, 900px);
  }

  .hero {
    top: 170px;
    gap: 16px;
  }

  .hero__badge    { padding: 15px 19px; font-size: 24px; }
  .hero__title    { font-size: 64px; }
  .hero__subtitle { font-size: 24px; }

  .showcase {
    bottom: -14px;
    width: 86.5761%;
    max-width: 1662.2618px;   /* размер композиции из макета 1920 */
    aspect-ratio: 1662.2618 / 469.0262;
  }

  .pack--1 .pack__front { height: 99.436%; }
  .pack--2 .pack__front { height: 99.436%; }
  .pack--3 .pack__front { left: 14.987%; height: 99.446%; }
  .pack--4 .pack__front { height: 99.699%; }
}