/* ============================================================
   ПК-ВЕРСИЯ ЗАФИКСИРОВАНА. 02.09.2026

   Ростислав выбрал набор и сказал: «зафиксируй это в пк версии
   и оно больше не меняется при вариантах».

   Как это устроено. Все правила переключателей завёрнуты
   в @media (max-width: 899px) - на широком экране они молчат.
   Здесь же выбранный набор вшит безусловно, внутри
   @media (min-width: 900px). Переключатели в панели остаются
   рабочими, но действуют только на телефоне.

   Набор от 02.09.2026:
   цвет усреднённый · наклейки поменьше · шрифт клубный ·
   палитра наша · шапка цвета первого экрана · четыре канала ·
   текст первого экрана белым · снимки заходят на следующий блок ·
   наклейки поверх · светлые секции с линиями · кадры сеткой
   по три, без тени и рамки · текст в Стандарте белый · подложка
   Стандарта оранжевая · цены и точки оранжевые · столбец
   Стандарта рамкой · таблица таблицей · стили своими блоками ·
   гарантия оранжевая с белым заголовком · цифры сроков оранжевые.

   Чтобы что-то поменять на ПК - правится этот файл, а не панель.
   ============================================================ */

@media (min-width: 900px) {

  /* ---------- палитра наша: переключатель наборов на ПК молчит ---------- */
  body {
    --or:         #ff3300;
    --on-or:      #0f1113;
    --deep:       #0f1113;
    --graph:      #4a5058;
    --white:      #ffffff;
    --soft:       #e9ecef;
    --text:       #0f1113;
    --edge:       #0f1113;
    --acc-sm:     #ff3300;
    --on-acc-sm:  #0f1113;
    --sh-dark:    #ff3300;
    --dim:        #5c6470;
    --line:       #dfe3e8;
  }

  /* ---------- шрифт клубный: переключатель шрифта на ПК молчит ---------- */
  body {
    --disp: "Unbounded", "Open Sans", "Segoe UI", system-ui, sans-serif;
    --body: "Manrope", "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  }

  /* ---------- сколько цвета: усреднённый ----------
     «Четыре стиля» гаснут в белый, «Сроки» - в светло-серый */
  .c2-s--ink[data-block="Четыре стиля"] {
    --sec-bg: var(--white); --sec-ink: var(--text);
    --sec-acc: var(--or); --sec-acc-ink: var(--on-or); --sh: var(--edge);
  }
  .c2-s--graph[data-block="Сроки и гарантия"] {
    --sec-bg: var(--soft); --sec-ink: var(--text);
    --sec-acc: var(--or); --sec-acc-ink: var(--on-or); --sh: var(--edge);
  }

  /* ---------- наклейки поменьше ---------- */
  .c2-burst,
  .c2-st--c { display: none; }

  /* ---------- шапка цвета первого экрана, логотип белый ---------- */
  .c2-h { background: var(--or); color: var(--on-or); }
  .c2-h__img--or { display: none; }
  .c2-h__img--wh { display: block; }
  .c2-h__tg { background: transparent; color: currentColor; border: 2px solid currentColor; }

  /* ---------- четыре канала связи, основной Макс ---------- */
  .c2-h__more { display: none; }
  .c2-h__ch { display: inline-flex; }
  .c2-h__ch--max { background: var(--deep); color: #fff; border-color: var(--deep); }

  /* ---------- первый экран: текст белым ---------- */
  .c2-hero h1,
  .c2-hero .c2-lead { color: #fff; }

  /* снимки лежат справа поверх фона, поэтому текст держим слева:
     иначе кадр ложится на заголовок и на лид. Заголовку нужно чуть
     больше места, чем лиду - внутри него теперь стоит наклейка */
  /* 78 процентов: при 66 наклейка не влезала в строку со словом
     и переносилась вниз - а она должна стоять внутри фразы.
     Правый край текста при этом всё равно левее снимков */
  .c2-hero .c2-lead { max-width: 36ch; }


  /* ---------- снимки заходят на следующий блок ---------- */
  .c2-hero { padding-bottom: 60px; overflow: visible; }
  .c2-float--a { width: 300px; right: 40px; left: auto; top: auto; bottom: -120px; z-index: 5; }
  .c2-float--b { width: 250px; right: 300px; left: auto; top: auto; bottom: -180px; z-index: 4; }

  /* ---------- наклейки поверх блоков ---------- */
  .c2-st { position: relative; z-index: 6; margin-bottom: -6px; }
  .c2-tiles, .c2-plans, .c2-table, .c2-shots { position: relative; z-index: 1; }

  /* ---------- светлые секции заметнее, с линиями ---------- */
  .c2-s--soft {
    --sec-bg: #d3dae1;
    border-top: 2px solid var(--edge); border-bottom: 2px solid var(--edge);
  }

  /* ---------- кадры съёмок: сетка по три, без тени и рамки ---------- */
  .c2-shots--tall {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible; width: 100%; margin-left: 0; padding: 4px 0 0; gap: 8px;
  }
  .c2-shots--tall > * { flex: none; width: 100%; }
  .c2-shots img { box-shadow: none; border: 0; }

  /* ---------- Стандарт: оранжевая подложка, белый текст,
       тёмная плашка «выбирают чаще всего» ---------- */
  .c2-card--or { color: #fff; --card-ink: #ffffff; --card-dim: #ffffff; }
  .c2-card--or .c2-tag { background: var(--deep); color: #fff; }

  /* ---------- цены и точки на белом оранжевые ---------- */
  .c2-card--white .c2-plan__top b { color: var(--or); }
  .c2-card--white li::before { background: var(--or); opacity: 1; }

  /* ---------- столбец Стандарта обведён рамкой ---------- */
  .c2-table .hit { box-shadow: inset 2px 0 0 var(--or), inset -2px 0 0 var(--or); }
  .c2-table thead .hit {
    border-radius: 16px 16px 0 0;
    box-shadow: inset 2px 2px 0 var(--or), inset -2px 0 0 var(--or);
  }
  .c2-table tbody tr:last-child .hit {
    border-radius: 0 0 16px 16px;
    box-shadow: inset 2px -2px 0 var(--or), inset -2px 0 0 var(--or);
  }

  /* ---------- таблица остаётся таблицей ---------- */
  .c2-tcards, .c2-tacc, .c2-tpick, .c2-tmini { display: none; }

  /* ---------- четыре стиля: каждый своим блоком ---------- */
  .c2-s[data-block="Четыре стиля"] .c2-shots {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
    overflow: visible; width: 100%; margin-left: 0; padding: 4px 0 0;
  }
  .c2-s[data-block="Четыре стиля"] .c2-shots > * { flex: none; width: 100%; }
  .c2-s[data-block="Четыре стиля"] figure {
    background: var(--white); color: var(--text);
    border: 2.5px solid var(--edge); border-radius: var(--r);
    box-shadow: 5px 5px 0 var(--sh); padding: 14px; cursor: pointer;
  }
  .c2-s[data-block="Четыре стиля"] figure img { border: 0; box-shadow: none; }
  .c2-s[data-block="Четыре стиля"] figcaption {
    margin-top: 12px; font-family: var(--disp); font-size: 20px; font-weight: 800;
    letter-spacing: -.03em; color: var(--text);
  }
  .c2-styleinfo { display: block; color: var(--dim); }
  .c2-styleprice { display: none; }
  .c2-styleopen {
    display: inline-block; margin-top: 10px;
    padding: 6px 13px; border-radius: 90px;
    background: var(--acc-sm); color: var(--on-acc-sm);
    font-size: 12px; font-weight: 800; cursor: pointer;
  }

  /* ---------- гарантия оранжевая, заголовок белый ---------- */
  .c2-guard {
    background: var(--or); color: var(--on-or);
    --card-ink: var(--on-or); --card-dim: var(--on-or);
  }
  .c2-guard h3 { color: #fff; }

  /* ---------- цифры сроков оранжевые ---------- */
  .c2-s[data-block="Сроки и гарантия"] .c2-card--white .c2-num { color: var(--or); }

  /* ---------- ничего из «только телефон» на ПК не появляется ---------- */
  .c2-break, .c2-herofacts { display: none; }

  /* ---------- наклейки разложены руками, 02.09.2026 ----------
     Ростислав разложил их в режиме «Наклейки» и прислал сдвиги.
     Сдвиг по горизонтали записан в cqw - это процент ширины колонки
     текста, а не пиксели. На широком мониторе колонка 1180, на
     ноутбуке 1080: в пикселях наклейка уезжала относительно текста,
     в долях ширины - держится места.
     По вертикали пиксели: высота блоков от ширины окна почти не зависит.
     Значения только для ПК: на телефоне наклейки стоят как были. */
  .c2-s[data-block="Первый экран"] .c2-badge { translate: 6.95cqw 124px; rotate: -18deg; }
  /* значок стоит у правого края колонки, и на узком ПК-экране
     сдвиг вправо выносил его за окно: там оставляем только
     вертикальную часть раскладки */
  @media (max-width: 1199px) {
    .c2-s[data-block="Первый экран"] .c2-badge { translate: 0 124px; }
  }
}

/* ============================================================
   УЗКИЙ ПК: снимки меньше. 02.09.2026

   На ноутбуке колонка ужимается, и кадры прежнего размера
   заходили на текст. Раскладка та же, просто кадры компактнее.
   ============================================================ */
@media (min-width: 900px) and (max-width: 1199px) {
  .c2-hero .c2-float--a { width: 228px; right: 24px; bottom: -80px; }
  .c2-hero .c2-float--b { width: 188px; right: 224px; bottom: -130px; }
  .c2-hero h1 { max-width: 62%; }
}

/* ============================================================
   ШАГИ «КАК МЫ РАБОТАЕМ»: РОВНЫЙ РЯД НА ПК. 03.09.2026

   Было три одинаковые карточки со стрелками между ними. Стало:
   первая сжалась в узкую полосу, вторая растянулась на пол-экрана,
   третья ушла за правый край.

   Раскладка была сеткой из пяти колонок - карточка, стрелка,
   карточка, стрелка, карточка. Сетка раздаёт места по счёту:
   стоит появиться внутри блока лишнему элементу, и всё съезжает
   на ячейку - карточка попадает в узкую колонку под стрелку,
   а последняя выталкивается за край. Именно так и выглядит снимок.

   Поэтому уходим от счёта ячеек к гибкому ряду: карточки делят
   свободное место поровну (flex: 1 1 0), стрелки берут ровно свои
   56 точек, а любой лишний элемент просто встаёт в ряд и ничего
   не смещает.
   ============================================================ */
@media (min-width: 900px) {
  .c2-steps {
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px;
    grid-template-columns: none;
  }
  .c2-steps > .c2-card { flex: 1 1 0; min-width: 0; }
  .c2-steps > .c2-arr,
  .c2-steps > svg { flex: 0 0 56px; align-self: center; }
}