/* 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; 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;
  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; }
}