/* ============================================================
   desktop.css — ДЕСКТОП (ТЗ-14 + ТЗ-15 выравнивание/ритм).
   ВСЁ под @media (min-width: 761px). Мобильная ≤760 не тронута —
   приёмка ТЗ-12 не может регрессировать.
   Брейкпоинты: 761–1023 планшет · 1024–1439 контейнер 1120 · ≥1440 контейнер 1200.
   ВЕРТИКАЛЬНАЯ ШКАЛА (ТЗ-15 §6): 8 · 16 · 24 · 32 · 40 · 56 · 80. Только эти значения.
   ============================================================ */

/* ===================================================================
   1. ТОКЕНЫ: ширины + типографика (ТЗ-15 §3) + шкала отступов
   =================================================================== */
@media (min-width: 761px) {
  :root {
    --side: 32px;
    --content: min(720px, 100% - 64px);
    --fs-h1: 3rem;        /* 48 */
    --fs-h2: 2.25rem;     /* 36 */
    --fs-sub: 1.25rem;    /* 20 */
    --fs-h3: 1.375rem;    /* 22 */
    --fs-lead: 1.125rem;  /* 18 */
    --fs-note: 1.125rem;  /* 18 */
    --fs-card-d: 1.125rem;/* 18 */
    --fs-yes: 3.5rem;     /* 56 */
    --sp-sec: 56px;       /* вертикальные поля секции (планшет) */
  }
}
@media (min-width: 1024px) {
  :root {
    --side: 40px;
    --content: min(1120px, 100% - 80px);
    --fs-h1: 3.5rem;      /* 56 */
    --fs-h2: 2.5rem;      /* 40 */
    --fs-sub: 1.375rem;   /* 22 */
    --fs-card-d: 1rem;    /* 16 (4 колонки) */
    --fs-yes: 4.5rem;     /* 72 */
    --fs-eyebrow: 0.8125rem; /* 13 (ТЗ-15 §3) */
    --sp-sec: 80px;       /* вертикальные поля секции (десктоп) */
  }
}
@media (min-width: 1440px) {
  :root { --content: min(1200px, 100% - 80px); }
}

/* Блок сравнения масштабируется целиком (§5): его абсолютная геометрия рассчитана
   на мобильные кегли. Возвращаем cmp'у мобильные --fs-h2 и --fs-eyebrow. */
@media (min-width: 761px) { .cmp { --fs-h2: 1.875rem; --fs-eyebrow: 0.75rem; } }

/* ===================================================================
   2. АРХИТЕКТУРА: контейнер по центру, фон во всю ширину, поля секции из шкалы
   =================================================================== */
@media (min-width: 761px) {
  #page { width: 100%; max-width: 100%; flex: 1 1 100%; }
  .sec, .hero, .promo, .head, .foot { width: 100%; }

  .promo, .head, .hero, .idea, .occ, .nut, .val, .rev, .abt, .ord, .faq, .foot {
    padding-inline: max(var(--side), calc((100% - var(--content)) / 2));
  }
  /* вертикальные поля секций — 80 (десктоп) / 56 (планшет), §6 */
  .hero, .idea, .occ, .nut, .val, .rev, .abt, .ord, .faq {
    padding-block: var(--sp-sec);
  }

  .cta { width: auto; min-width: 280px; padding: 16px 40px; }
}

/* ===================================================================
   3. ЗАГОЛОВКИ: снять <br> через CSS (ТЗ-15 §2). cmp__h2 НЕ трогаем — см. отчёт:
   при 30px текст 431 > бокс 390 (реальный CSS, не масштаб) → одна строка невозможна.
   =================================================================== */
@media (min-width: 761px) {
  /* Перенос убираем. В разметке перед каждым <br> добавлен ПРОБЕЛ (CSS не может
     вставить пробел вместо скрытого <br>, иначе слова склеиваются: "CRAVINGHITS").
     На мобильном этот пробел схлопывается в конце строки — вёрстка не меняется. */
  .hero__h1 br, .idea__h2 br, .val__h2 br { display: none; }
}

/* ===================================================================
   4. ШАПКА: липкая + горизонтальное меню (§3)
   =================================================================== */
.head__nav { display: none; }

@media (min-width: 761px) {
  .burger, .menu { display: none; }
  .head {
    position: sticky; top: 0; z-index: 50;
    background: var(--c-ivory); min-height: 64px;
  }
  .logo { white-space: nowrap; }
  .head__nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
  .head__nav a:not(.cta) {
    font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-cap);
    text-transform: uppercase; letter-spacing: .3px; color: var(--c-ink);
    min-height: 44px; min-width: 44px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  }
  @media (hover: hover) { .head__nav a:not(.cta):hover { color: var(--c-cta); } }
  .head__cta {
    width: auto; min-width: 0; min-height: 44px; padding: 10px 22px;
    margin-inline: 0; margin-left: 8px; font-size: var(--fs-cap); white-space: nowrap;
  }
  @media (max-width: 1023px) { .head__cta { display: none; } }
  [id] { scroll-margin-top: 72px; }
}

/* ===================================================================
   5. HERO (ТЗ-16 §1) — ОДНА КОЛОНКА, порядок как на мобильном, шире и крупнее.
   Двухколоночный герой ТЗ-14/15 отменён заказчиком. Обычный вертикальный стек
   по центру (align-items/text-align:center уже в мобильном base), grid-areas сняты.
   Порядок: eyebrow → H1 → подзаголовок → пачка → название → тэглайн → КБЖУ →
   ссылка → селектор → кнопка → доставка. Блок 800px, пачка 420, шаги из шкалы §6.
   H1 при 56px = 690px < 800 → одна строка (в 2 колонки было 572, потому и рвался).
   =================================================================== */
@media (min-width: 761px) {
  /* все блоки шириной 800 по центру → ОДИН левый край (иначе центрированные блоки
     разной ширины дают рваные края — брак §1, как было в idea). Кнопка — исключение. */
  .hero > * { width: 100%; max-width: 800px; }
  .fsel { overflow: visible; }           /* пять плиток в ряд без прокрутки */
  .fsel__t { flex: 1 1 0; }

  .hero__eyebrow { margin: 0; }
  .hero__h1 { margin-top: 16px; }        /* eyebrow → H1 */
  .hero__sub { margin-top: 16px; }       /* H1 → подзаголовок */
  .hero__pack { margin: 32px 0 0; }      /* подзаголовок → пачка (0 снизу: чистый шаг к названию) */
  /* §1.3: пачка целиком в первом экране 1440×900. При 420 низ пачки 941 > 900 (фолд),
     при 400 — 917, при 380 — 890 < 900. Уменьшено 420→380 шагами по 20 (замер). */
  .hero__pack img { width: 380px; max-width: 100%; height: auto; }
  .hero__name { margin-top: 24px; }      /* пачка → название */
  .hero__tag { margin-top: 8px; }        /* название → тэглайн */
  .mstrip { margin-top: 32px; }          /* тэглайн → КБЖУ */
  .hero__link { margin-top: 16px; }      /* КБЖУ → ссылка */
  .fsel { margin-top: 24px; }            /* ссылка → селектор */
  .hero__cta { width: auto; margin-top: 32px; }   /* авто-ширина, min-width 280 из .cta */
  .hero__ships { margin-top: 16px; }     /* кнопка → доставка */
}

/* ===================================================================
   6. IDEA (§4.5) — единая внутренняя ширина 720 у ВСЕХ блоков → один левый край
   =================================================================== */
@media (min-width: 761px) {
  /* единая ширина 720 у всех блоков (width:100% — иначе flex align-center сжимает
     каждый по контенту и края становятся рваными: 360/540/542/549/634 → брак) */
  .idea > * { width: 100%; max-width: 720px; margin-inline: auto; }
  .idea__h2 { margin-top: 16px; }
  .idea__body { margin-top: 16px; }
  .idea__arts { margin-top: 40px; }
  .idea__labs { margin-top: 16px; }
  .idea__pills { margin-top: 24px; }
  .idea__yes { margin-top: 40px; }
  .idea__art--l img { height: 200px; }
  .idea__art--c img { height: 224px; }
  .idea__art--r img { height: 170px; }
}
@media (min-width: 1024px) {
  .idea__art--l img { height: 240px; }
  .idea__art--c img { height: 268px; }
  .idea__art--r img { height: 205px; }
}

/* ===================================================================
   7. COMPARISON — масштабирование целиком (§5)
   =================================================================== */
@media (min-width: 761px) and (max-width: 1023px) {
  .cmp-wrap { background: var(--c-cmp-outer); display: flex; justify-content: center; height: 878px; overflow: hidden; }
  .cmp { transform: scale(1.15); transform-origin: top center; }
}
@media (min-width: 1024px) {
  .cmp-wrap { background: var(--c-cmp-outer); display: flex; justify-content: center; height: 992px; overflow: hidden; }
  .cmp { transform: scale(1.3); transform-origin: top center; }
}

/* ===================================================================
   8. OCCASIONS (§4.4/§4.7) — 2 в ряд планшет, 4 в ряд десктоп; шапка по центру
   =================================================================== */
@media (min-width: 761px) {
  /* шапка и текст — во всю ширину контейнера (края совпадают с сеткой карточек) */
  .occ__eyebrow, .occ__h2, .occ__sub, .occ__close { width: 100%; }
  .occ__h2 { margin-top: 16px; }
  .occ__sub { margin-top: 16px; }
  .occ__grid { gap: 20px; margin-top: 40px; }
  .occ__close { margin-top: 40px; }
  .occ__cta { margin-top: 24px; }
}
@media (min-width: 1024px) { .occ__grid { grid-template-columns: repeat(4, 1fr); } }

/* ===================================================================
   9. NUTRITION (§4.5) — пачка слева, КБЖУ/пиллы/панель справа
   =================================================================== */
@media (min-width: 761px) and (max-width: 1023px) {
  .nut__h2 { margin-top: 16px; }
  .nut__sub { margin-top: 16px; }
  .nut__row { align-items: flex-start; margin-top: 40px; }
  .nut__pack { flex: 0 0 240px; }
  .nut__pack img { max-height: none; }
  .nut__pills { overflow: visible; flex-wrap: wrap; margin-top: 24px; }
  .nut__panel { margin-top: 24px; }
}
@media (min-width: 1024px) {
  .nut {
    display: grid;
    grid-template-columns: 360px 1fr;
    column-gap: 56px; row-gap: 0;   /* верт. шаги — margin'ами из шкалы */
    grid-template-areas:
      "ey    ey"
      "h2    h2"
      "sub   sub"
      "pack  cards"
      "pack  pills"
      "pack  panel";
    align-items: start;
  }
  .nut__eyebrow { grid-area: ey; }
  .nut__h2 { grid-area: h2; margin: 16px 0 0; }        /* ey → h2 */
  .nut__sub { grid-area: sub; margin: 16px 0 0; }      /* h2 → sub */
  .nut__row { display: contents; }
  .nut__pack { grid-area: pack; align-self: start; margin: 40px 0 0; }   /* шапка → контент */
  .nut__pack img { max-height: none; width: 100%; }
  .nut__cards { grid-area: cards; grid-template-columns: repeat(4, 1fr); margin: 40px 0 0; }
  .nut__pills { grid-area: pills; overflow: visible; flex-wrap: wrap; margin: 24px 0 0; }
  .nut__panel { grid-area: panel; margin: 24px 0 0; }
}

/* ===================================================================
   10. TASTE FIRST (§4.6) — 3 в ряд; фото и текст с ОДНИМ левым краем
   =================================================================== */
@media (min-width: 761px) {
  .val__h2 { margin-top: 16px; }
}
@media (min-width: 1024px) {
  .val {
    display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px;
    align-items: start; row-gap: 0;   /* верт. шаги задаём margin'ами из шкалы */
  }
  .val__eyebrow, .val__h2 { grid-column: 1 / -1; }
  .val__h2 { margin: 16px 0 0; }       /* eyebrow → h2 = 16 */
  /* карточка: h2→карточки 40; фото сверху, номер+заголовок, описание — один левый край (padding 16) */
  .val__card { margin: 40px 0 0; display: flex; flex-direction: column; padding: 0 0 16px; overflow: hidden; }
  .val__row { display: contents; }
  .val__ph { order: 0; flex: none; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-card) var(--r-card) 0 0; }
  .val__head { order: 1; margin: 16px 16px 0; }
  .val__d { order: 2; margin: 8px 16px 0; }
  .val__t { white-space: normal; }
}

/* ===================================================================
   11. REVIEWS (§5) — 3 в кадре + СТРЕЛКИ; шапка по центру
   =================================================================== */
@media (min-width: 761px) {
  .rev__eyebrow, .rev__h2, .rev__sub { width: 100%; }
  .rev__h2 { margin-top: 16px; }
  .rev__sub { margin-top: 16px; }
  .rev__viewport { margin-top: 40px; }
  .rev__track { margin-top: 0; }
  .rev__dots { margin-top: 24px; }
  .rev__cta { margin-top: 40px; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .rev-card { flex: 0 0 calc((100% - 14px) / 2); }
}
@media (min-width: 1024px) {
  .rev-card { flex: 0 0 calc((100% - 28px) / 3); }
}
/* стрелки: обёртка .rev__viewport (позиционирование). На десктопе у обёртки жёлоба
   56px по бокам — трек уже, стрелки стоят В жёлобах, не над карточками.
   Показываются только на десктопе; на мобильном свайп, стрелки скрыты. */
.rev__viewport { position: relative; width: 100%; }
.rev__arrow { display: none; }
@media (min-width: 761px) {
  .rev__viewport { padding-inline: 56px; }
  .rev__arrow {
    position: absolute; top: 44%; transform: translateY(-50%); z-index: 3;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--r-pill);
    background: var(--c-white); color: var(--c-ink);
    box-shadow: var(--sh-card); border: 1px solid var(--c-border);
    transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .rev__arrow svg { width: 22px; height: 22px; }
  .rev__arrow--prev { left: 4px; }
  .rev__arrow--next { right: 4px; }
  .rev__arrow--next svg { transform: scaleX(-1); }
  @media (hover: hover) { .rev__arrow:hover { filter: brightness(.96); } }
  .rev__arrow:disabled { opacity: .35; cursor: default; }
}

/* ===================================================================
   12. ABOUT (§4.3) — коллаж СЛЕВА целиком (аспект файла 1400/788), текст справа
   =================================================================== */
@media (min-width: 761px) { .abt__h2 { margin-top: 16px; } }
@media (min-width: 1024px) {
  .abt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    align-items: center;
    text-align: left;
    grid-template-areas:
      "collage eyebrow"
      "collage h2"
      "collage b1"
      "collage b2";
    grid-template-rows: auto auto auto 1fr;   /* лишнее — в нижний спейсер под текстом */
  }
  .abt__collage { grid-area: collage; aspect-ratio: 1400 / 788; margin: 0; align-self: center; }
  .abt__collage img { object-fit: cover; }   /* соотношение бокса = файлу → без обрезки */
  .abt__eyebrow { grid-area: eyebrow; align-self: end; }
  .abt__h2 { grid-area: h2; margin: 16px 0 0; }
  .abt__b1 { grid-area: b1; max-width: 46ch; margin: 24px 0 0; justify-self: start; }
  .abt__b2 { grid-area: b2; max-width: 46ch; margin: 16px 0 0; justify-self: start; align-self: start; }
}

/* ===================================================================
   13. ORDER (ТЗ 11.09 §5) — одна колонка 560 по центру, как у конфигуратора
   YES YOU CAN. Секция остаётся flex-колонкой (grid с областями prev/receipt/tiles
   снят вместе с превью, названием и чеком). Шаги между блоками — из шкалы §6.
   =================================================================== */
@media (min-width: 761px) {
  .ord__h2 { margin-top: 16px; }
  .ord__sub { margin-top: 16px; }
  .ord__step, .packs, .ord__total, .ord__note, .ord__ships { width: 560px; max-width: 100%; }
  .ord__cta { width: 560px; max-width: 100%; min-width: 0; }
  .ord__step { margin-top: 32px; }     /* подзаголовок → шаг */
  .packs { margin-top: 16px; }         /* шаг → список */
  .ord__total { margin-top: 24px; }    /* список → итог */
  .ord__note { margin-top: 16px; }     /* итог → примечание */
  .ord__cta { margin-top: 16px; }      /* примечание → кнопка */
  .ord__ships { margin-top: 16px; }    /* кнопка → доставка */
}
@media (min-width: 1024px) {
  .prow__ph img { height: 56px; }
}

/* ===================================================================
   14. FAQ (§4.10) — одна колонка ≤820 по центру; ответы 17px (§3)
   =================================================================== */
@media (min-width: 761px) {
  /* шапка той же ширины, что список (820) → общий левый край */
  .faq__eyebrow, .faq__h2 { width: 100%; max-width: 820px; margin-inline: auto; }
  .faq__h2 { margin-top: 16px; }
  .faq__list { max-width: 820px; margin-inline: auto; margin-top: 40px; }
  .qa__a p { font-size: var(--fs-cap); }
}
@media (min-width: 1024px) { .qa__a p { font-size: 1.0625rem; } }   /* 17 */

/* ===================================================================
   15. FOOTER (§4.11) — бренд шире + ссылки без плюсиков; копирайт строкой
   =================================================================== */
@media (min-width: 761px) {
  .foot {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    column-gap: 32px; row-gap: 24px;
    align-items: start;
  }
  .foot__top { grid-column: 1; flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot__links {
    grid-column: 2 / -1; margin-top: 0;
    display: flex; flex-direction: row; gap: 32px; align-items: flex-start;
    justify-content: space-between;
  }
  .foot__row { border: 0; min-height: 44px; min-width: 44px; justify-content: flex-start; }
  .foot__pm { display: none; }
  .foot__copy { grid-column: 1 / -1; margin-top: 16px; }
}