/* GREY'S — страница «Все услуги» (services.html), продолжение мобильного лендинга.
   Подключается ПОСЛЕ mobile.css и опирается на его переменные и общие блоки
   (topbar, menu, spark, cta-wrap, footer). Фон — плоский чёрный: владелец
   отказался от фото справа из референса, поэтому и хиро-градиент не нужен. */

body { background-image: none; }

/* ---------- шапка страницы ---------- */

.shead { padding: 24px 27px 0; }
.shead__wordmark { width: 206px; height: auto; pointer-events: none; }
.shead__sub {
  margin-top: 14px;
  font-size: 14.5px; line-height: 1.45;
  color: #cfcfcd;
}

.filters { display: flex; gap: 10px; margin-top: 22px; }
.fbtn {
  height: 42px; padding: 0 22px;
  border-radius: 10px;
  border: 1px solid rgba(245, 245, 242, 0.38);
  background: transparent; color: var(--ink);
  font: 600 13px var(--font-body);
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
}
.fbtn--on { background: var(--acid); border-color: var(--acid); color: #101110; }
.fbtn:active { filter: brightness(0.92); }

/* ---------- прейскурант ---------- */

.plist { margin-top: 30px; padding: 0 20px; }
.plist h2 {
  display: flex; align-items: center; gap: 12px;
  margin-left: 8px; /* заголовок на общей вертикали 28px, строки шире (20px) */
  font: 400 22px var(--font-marker);
  letter-spacing: 0.03em; text-transform: uppercase;
  white-space: nowrap;
}
.plist h2 .spark { width: 28px; height: 28px; transform: rotate(-8deg); }
.plist ul { margin-top: 13px; display: grid; gap: 3px; }
.plist li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10.5px 15px;
  border-radius: 3px;
}
.plist li:nth-child(odd) { background: rgba(255, 255, 255, 0.055); }
.plist li:nth-child(even) { background: rgba(255, 255, 255, 0.022); }
.plist__name { font-size: 15px; color: #e6e6e3; }
.plist__price {
  /* ₽ возьмётся из Manrope, если его нет в google-версии PT Mono */
  font: 400 16.5px 'PT Mono', 'Manrope', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--acid); white-space: nowrap;
}

/* ---------- три рваные карточки-условия ---------- */

/* auto-fit, а не жёсткие три колонки: число плашек задаётся из админки
   (2–4), и при двух они раньше растягивались бы на треть ширины каждая. */
.perks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px;
  margin-top: 36px; padding: 0 20px;
}
.perk {
  display: flex; flex-direction: column;
  min-height: 132px;
  padding: 14px 10px 13px 13px;
  background-color: var(--bg-card);
  background-image: radial-gradient(120% 90% at 30% 0%, #232325 0%, transparent 55%), var(--noise);
  clip-path: polygon(
    2.5% 3%, 9% 0.5%, 28% 1.8%, 47% 0%, 68% 1.5%, 88% 0.5%, 97% 2.5%,
    99.5% 8%, 98.6% 26%, 100% 47%, 98.8% 68%, 99.6% 88%, 97% 97%,
    88% 99.4%, 66% 98.2%, 45% 100%, 24% 98.4%, 8% 99.6%, 2% 96.5%,
    0.4% 86%, 1.4% 64%, 0% 44%, 1.2% 22%, 0.6% 9%);
}
.perk__star { width: 23px; height: 23px; color: #e8e8e4; flex: none; }
.perk h3 {
  margin-top: 10px;
  font: 600 13.5px/1.3 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--acid);
}
.perk p { margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: #c2c2c4; }

/* ---------- важно знать ---------- */

.divider { display: grid; place-items: center; margin: 26px 0 20px; }
.divider .spark { width: 20px; height: 20px; transform: rotate(-8deg); }

.note {
  position: relative;
  margin: 0 20px;
  padding: 18px 58px 18px 14px;
  border: 1.5px solid var(--acid);
  border-radius: 18px;
  display: flex; align-items: center; gap: 13px;
}
.note__smile { width: 66px; height: auto; flex: none; mix-blend-mode: screen; pointer-events: none; }
.note__text h2 { font: 600 17px var(--font-body); color: var(--acid); letter-spacing: 0.02em; }
.note__text p { margin-top: 7px; font-size: 12.5px; line-height: 1.45; color: #c9c9c7; }
.spark--note { position: absolute; right: 74px; top: 13px; width: 17px; height: 17px; }
.note__spike {
  /* хвост уходит за правый край экрана — body режет его overflow-x: clip, как в референсе */
  position: absolute; right: -48px; top: 50%;
  width: 134px; height: auto;
  transform: translateY(-50%) rotate(8deg);
  pointer-events: none;
}

main > .cta-wrap--center { margin-top: 34px; }
.footer { margin-top: 32px; }

/* ---------- узкие экраны ---------- */

@media (max-width: 385px) {
  .shead { padding-inline: 20px; }
  .shead__wordmark { width: 186px; }
  .fbtn { height: 40px; padding: 0 16px; }
  .plist { padding-inline: 14px; }
  .plist h2 { margin-left: 6px; }
  .perks { padding-inline: 14px; gap: 8px; }
  .note { margin-inline: 14px; padding-right: 56px; }
  .note__smile { width: 64px; }
  .note__spike { width: 112px; right: -42px; }
}

/* ---------- десктоп ----------
   --gutter приходит из десктопного блока mobile.css (объявлен там на :root
   внутри min-width: 768px), этот файл подключается после. */

@media (min-width: 768px) {
  .shead { padding: 28px var(--gutter) 0; }
  /* 236px — родной размер растра; до 290 тянем ради широкого макета (×1.23,
     на глаз терпимо). Крупнее — нужен @2x-экспорт от владелицы. */
  .shead__wordmark { width: clamp(236px, 20vw, 290px); }
  .shead__sub { margin-top: 18px; font-size: 16px; max-width: 640px; }

  .filters { gap: 12px; margin-top: 28px; }
  .fbtn { height: 46px; padding: 0 26px; font-size: 14px; }

  .plist { margin-top: 44px; padding: 0 var(--gutter); }
  .plist h2 { margin-left: 10px; font-size: 26px; }
  .plist li { padding: 13px 18px; }
  .plist__name { font-size: 16px; }
  .plist__price { font-size: 17.5px; }

  /* Ширина трека ограничена сверху НАМЕРЕННО. Базовое minmax(0, 1fr)
     растянуло бы три плашки на весь контент: ~335x132 — это отношение 2.5
     против мобильных 0.96, а clip-path здесь задан теми же 24 точками
     В ПРОЦЕНТАХ, что и у .scard__in, и плывёт именно от смены пропорции.
     320/210 = 1.52 — верхняя граница коридора, проверенного продом.
     auto-fit сохраняем: число плашек задаётся из админки (2–4). */
  .perks {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 52px; padding: 0 var(--gutter);
  }
  /* высота идёт за шириной: на 1440 плашка ~400px, при 270px отношение 1.48 —
     в том же коридоре, что и мобильные 0.96 / 1.46 */
  .perk { min-height: 270px; padding: 22px 20px 20px 24px; }
  .perk__star { width: 28px; height: 28px; }
  .perk h3 { margin-top: 14px; font-size: 15px; }
  .perk p { margin-top: 10px; font-size: 13px; }

  .divider { margin: 44px 0 28px; }

  /* ВНИМАНИЕ: .note — прямой предок .note__smile, у которого
     mix-blend-mode: screen гасит чёрную подложку PNG. Здесь и на любом
     предке вплоть до <body> НЕЛЬЗЯ появляться filter, transform, opacity,
     isolation, will-change, backdrop-filter, contain: paint и второму
     mix-blend-mode: любое из них создаёт stacking context, и бленд молча
     вырождается в чёрный квадрат — без ошибки, только на глаз.
     (overflow: clip и position: relative с z-index: auto контекст не создают,
     поэтому существующая машинерия безопасна.) */
  .note {
    margin: 0 var(--gutter);
    padding: 26px 72px 26px 22px;
    gap: 18px;
  }
  .note__smile { width: 100px; }
  .note__text { max-width: 720px; }
  .note__text h2 { font-size: 20px; }
  .note__text p { margin-top: 9px; font-size: 14px; }
  .spark--note { right: 96px; top: 18px; width: 20px; height: 20px; }
  /* Шип обязан уходить ЗА край экрана и срезаться (как в макете), а поле теперь
     текучее — поэтому вылет считается от него, а не фиксированным числом.
     С прежними -120px на широком экране шип целиком помещался бы в поле и
     показал бы прямую кромку картинки. */
  .note__spike { width: 200px; right: calc(-1 * var(--gutter) - 60px); }

  main > .cta-wrap--center { margin-top: 48px; }
  /* перебивает .footer{margin-top:32px} выше в этом же файле — оно, в свою
     очередь, перебивает десктопное правило из mobile.css (файл подключён позже) */
  .footer { margin-top: 64px; }
}

@media (min-width: 1024px) {
  /* Прайс в две колонки. Именно multicol, а не grid-template-columns: 1fr 1fr:
     при колонках элементы текут ВНИЗ по первой, потом по второй, поэтому
     зебра :nth-child(odd/even) продолжает чередоваться построчно. В сетке же
     первая колонка стала бы сплошь «нечётной», вторая — сплошь «чётной»:
     вертикальная двухцветная полоса, читается как баг.
     Всё это переживает подмену прайса из API: buildSection() в pricelist.js
     воссоздаёт ровно эти узлы (section.plist > h2 + ul > li > span). */
  .plist ul { display: block; columns: 2; column-gap: 44px; margin-top: 18px; }
  .plist li { break-inside: avoid; margin-bottom: 3px; }
}