/* =====================================================================
   Страница «Услуги» — стили поверх style.css
   Figma: MEDO-Clinic / Услуги (1440px)
   ===================================================================== */


/* ---------- Hero ---------- */
.shero { position: relative; height: 764px; margin: 0 20px; color: var(--white); }
.shero__bg { position: absolute; inset: 0; }
.shero__bg img { width: 1400px; height: 764px; }
.crumbs {
  position: absolute;
  left: 945px;
  top: 0;
  display: flex;
  gap: 10px;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: rgba(12, 14, 17, .37);
}
.crumbs a { transition: color .2s; }
.crumbs a:hover { color: var(--dark); }
.crumbs span, .crumbs b { color: var(--red); font-weight: 400; }
.shero__title {
  position: absolute;
  left: 44px;
  top: 43px;
  width: 816px;
  font-size: 74px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -0.03em;
}
.shero__title b { color: var(--red); font-weight: 600; }
.shero__text { position: absolute; left: 44px; top: 205px; width: 410px; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; }
.shero__btn { position: absolute; left: 44px; top: 669px; width: 362px; }
.shero__card {
  position: absolute;
  left: 847px;
  top: 379px;
  width: 521px;
  height: 354px;
  border-radius: 20px;
  background: #16171a;
}
.shero__avatars { position: absolute; left: 31px; top: 38px; display: flex; }
.shero__avatars img { width: 85px; height: 85px; }
.shero__avatars img + img { margin-left: -21px; }
.shero__place {
  position: absolute;
  right: 33px;
  top: 41px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--red);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.shero__place img { width: 16px; height: 19px; }
.shero__lead { position: absolute; left: 34px; top: 163px; width: 447px; font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.shero__note { position: absolute; left: 34px; top: 269px; width: 385px; font-size: 16px; line-height: 1.1; letter-spacing: -0.02em; }

/* ---------- Услуги клиники: плитки направлений + группы ---------- */
.cat { padding: 64px 20px 0; }
.cat__lead { width: 640px; margin-top: 18px; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; color: rgba(12, 14, 17, .6); }
.cat__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.ctile { display: flex; flex-direction: column; gap: 12px; min-height: 160px; padding: 22px 24px 24px; border-radius: var(--r-card); background: var(--gray); color: var(--dark); transition: background .2s; }
.ctile:hover { background: #eceeef; }
.ctile__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ctile__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--white); }
.ctile__icon img { width: 18px; height: 18px; object-fit: contain; }
.ctile__count { font-size: 14px; letter-spacing: -0.02em; color: rgba(12, 14, 17, .5); }
.ctile__name { font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.ctile__text { font-size: 15px; line-height: 1.25; letter-spacing: -0.01em; color: rgba(12, 14, 17, .6); }
.cgroup { margin-top: 72px; scroll-margin-top: 24px; }
.cgroup__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid rgba(12, 14, 17, .1); }
.cgroup__title { display: flex; align-items: baseline; gap: 12px; font-size: 36px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.cgroup__title em { font-style: normal; font-size: 16px; font-weight: 400; color: rgba(12, 14, 17, .45); }
.cgroup__text { margin-top: 8px; font-size: 16px; letter-spacing: -0.02em; color: rgba(12, 14, 17, .6); }
.cgroup__head .btn { flex: none; }
.cgroup__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
.scat { display: flex; flex-direction: column; min-height: 224px; padding: 22px 22px 20px; border-radius: var(--r-card); background: var(--gray); color: var(--dark); transition: background .2s; }
.scat:hover { background: #eceeef; }
.scat__title { font-size: 19px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.scat__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; color: rgba(12, 14, 17, .6); }
.scat__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; }
.scat__price { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--red); white-space: nowrap; }
.scat__price--ask { font-weight: 500; color: rgba(12, 14, 17, .5); }
.scat__more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.scat__more .chev { margin: 0; }
.cgroup:not(.is-open) .scat:nth-child(n+9) { display: none; }
.cgroup__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--dark); transition: color .2s; }
.cgroup__more:hover { color: var(--red); }
.cgroup__more .chev { transform: none; transition: transform .2s; margin: 0; }
.cgroup.is-open .cgroup__more .chev { transform: rotate(180deg); }
.cgroup__more[hidden] { display: none; }

/* ---------- Подберем маршрут (тёмный блок) ---------- */
.squiz {
  position: relative;
  height: 915px;
  margin: 93px 20px 0;
  border-radius: 28px;
  overflow: hidden;
  background: var(--dark);
  color: var(--white);
}
.squiz__bg { position: absolute; inset: 0; }
.squiz__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.squiz__title { position: absolute; left: 44px; right: 44px; top: 92px; text-align: left; font-size: 64px; font-weight: 400; line-height: .95; letter-spacing: -0.03em; }
.squiz__sub { position: absolute; left: 44px; top: 180px; width: 460px; margin-left: 0; text-align: left; font-size: 20px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.qpanel {
  position: absolute;
  left: 44px;
  right: 44px;
  top: 266px;
  height: 543px;
  border-radius: 28px;
  background: var(--gray);
  color: var(--dark);
}
.qpanel__head { position: absolute; left: 44px; top: 46px; font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.qpager {
  position: absolute;
  right: 39px;
  top: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 162px;
  height: 46px;
  padding: 0 14px 0 12px;
  border-radius: 33px;
  background: rgba(12, 14, 17, .06);
  color: #a1a2a3;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.qpager button { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; opacity: .35; transition: opacity .2s; }
.qpager button:not(:disabled) { opacity: 1; }
.qpager button img { width: 12.5px; height: 7.5px; }
.qpager__prev img { transform: rotate(90deg); }
.qpager__next img { transform: rotate(-90deg); }
.qstep { display: none; }
.qstep.is-active { display: block; }
.qpanel__list {
  position: absolute;
  left: 44px;
  top: 148px;
  display: grid;
  grid-template-columns: 408px 408px;
  row-gap: 37px;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, 29px);
}
.qopt { display: flex; align-items: center; gap: 19px; cursor: pointer; font-size: 20px; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.qopt input { position: absolute; opacity: 0; width: 0; height: 0; }
.qopt i { position: relative; width: 29px; height: 29px; flex: none; background: url(../img/svc-radio-off.svg) center / 29px 29px no-repeat; }
.qopt input:checked + i { background-image: url(../img/svc-radio-on.svg); }
.qopt input:focus-visible + i { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 50%; }
.qpanel__btn {
  position: absolute;
  left: 44px;
  right: 39px;
  top: 439px;
  height: 64px;
  border-radius: 32px;
  background: #e8e9e9;
  color: #a1a2a3;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: background .25s, color .25s;
}
.qpanel__btn.is-ready { background: var(--dark); color: var(--white); cursor: pointer; }
.qpanel__btn.is-ready:hover { background: #1c1f24; }

/* ---------- Уже получили результаты анализов? ---------- */
.lab { position: relative; display: flex; justify-content: space-between; min-height: 486px; margin: 108px 20px 0; }
.lab__text { width: 776px; flex: none; }
.lab__title { font-size: 64px; font-weight: 400; line-height: .95; letter-spacing: -0.03em; }
.lab__title b { color: var(--red); font-weight: 600; }
.lab__lead { width: 449px; margin-top: 48px; font-size: 20px; line-height: 1.1; letter-spacing: -0.02em; }
.lab__btn {
  display: inline-flex; align-items: center; justify-content: center; height: 56px; min-width: 314px; margin-top: 51px; padding: 0 34px;
  border-radius: 28px; background: var(--red); color: var(--white); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; transition: background .2s;
}
.lab__btn:hover { background: #d92b30; }
.lab__chat { position: absolute; left: 806px; top: -17px; width: 710px; height: auto; max-width: none; }

.cta--services { margin-top: 105px; }

.shero__head { display: contents; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .shero { display: flex; flex-direction: column; height: auto; margin: 8px var(--pad) 0; }
  .crumbs { position: static; order: -1; margin-bottom: 14px; padding: 0 4px; }
  .shero__bg { position: relative; height: 560px; border-radius: var(--radius); overflow: hidden; }
  .shero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
  .shero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 14, 17, .94) 0%, rgba(12, 14, 17, .6) 42%, rgba(12, 14, 17, 0) 70%); }
  .shero__head { display: block; position: absolute; left: 20px; right: 20px; top: 72px; z-index: 1; }
  .shero__title { position: static; width: 100%; font-size: min(40px, calc((100vw - 76px) / 8.1)); line-height: .95; }
  .shero__text { position: static; width: 100%; margin-top: 16px; font-size: 17px; line-height: 1.25; }
  .shero__btn { position: static; display: flex; width: 100%; margin-top: 12px; }
  .shero__card { position: relative; left: auto; top: auto; width: 100%; height: auto; margin-top: 12px; padding: 24px 20px 26px; border-radius: 20px; }
  .shero__avatars { position: static; }
  .shero__avatars img { width: 64px; height: 64px; }
  .shero__place { right: 20px; top: 32px; font-size: 15px; }
  .shero__lead { position: static; width: 100%; margin-top: 20px; font-size: 20px; line-height: 1.15; }
  .shero__note { position: static; width: 100%; margin-top: 14px; font-size: 15px; line-height: 1.25; }

  .cat { padding: 56px var(--pad) 0; }
  .cat__lead { width: 100%; margin-top: 12px; font-size: 16px; }
  .cat__tiles { display: flex; gap: 10px; margin: 22px calc(-1 * var(--pad)) 0; padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; }
  .cat__tiles::-webkit-scrollbar { display: none; }
  .ctile { flex: none; width: 230px; min-height: 0; padding: 16px 18px 18px; gap: 8px; }
  .ctile__name { font-size: 19px; }
  .ctile__text { font-size: 14px; }
  .cgroup { margin-top: 44px; scroll-margin-top: 76px; }
  .cgroup__head { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 16px; }
  .cgroup__title { font-size: 26px; }
  .cgroup__text { font-size: 15px; }
  .cgroup__grid { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
  .scat { min-height: 0; padding: 18px 18px 16px; }
  .scat__foot { padding-top: 16px; }
  .cgroup:not(.is-open) .scat:nth-child(n+9) { display: block; }
  .cgroup:not(.is-open) .scat:nth-child(n+4) { display: none; }
  .cgroup__more { margin-top: 16px; }

  .squiz { height: auto; margin: 56px var(--pad) 0; padding: 40px 12px 12px; border-radius: 24px; }
  .squiz__title { position: static; }
  .squiz__sub { position: static; width: 100%; margin: 14px auto 0; font-size: 16px; }
  .qpanel { position: relative; left: auto; right: auto; top: auto; width: 100%; height: auto; margin: 26px 0 0; padding: 24px 18px 18px; border-radius: 20px; }
  .qpanel__head { position: static; width: 100%; font-size: 24px; padding-right: 0; }
  .qpager { position: static; width: 140px; height: 40px; margin-top: 14px; }
  .qpanel__list { position: static; display: block; margin-top: 18px; }
  .qopt { padding: 12px 0; border-top: 1px solid rgba(12, 14, 17, .06); font-size: 16px; white-space: normal; }
  .qopt:first-child { border-top: 0; }
  .qopt i { width: 26px; height: 26px; background-size: 26px 26px; }
  .qpanel__btn { position: static; display: block; width: 100%; height: 56px; margin-top: 16px; font-size: 17px; }

  .lab { flex-direction: column; min-height: 0; margin: 56px var(--pad) 0; padding: 0; }
  .lab__text { width: 100%; }
  .lab__title { font-size: 36px; }
  .lab__lead { width: 100%; margin-top: 18px; font-size: 16px; line-height: 1.3; }
  .lab__btn { display: flex; min-width: 0; width: 100%; height: 56px; margin-top: 22px; font-size: 17px; }
  .lab__chat { position: static; width: 100%; margin-top: 28px; }

  .cta--services { margin-top: 40px; }
}

/* ссылка на полный прайс анализов под кнопкой в блоке «Уже получили результаты» */
.lab__more { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0 20px; font-size: 18px; letter-spacing: -0.02em; color: var(--dark); transition: color .2s; }
.lab__more:hover { color: var(--red); }
@media (max-width: 767px) { .lab__more { display: flex; margin: 16px 0 0; font-size: 15px; } }

/* квиз на /services: шаг контактов и результат внутри абсолютной панели */
.qpanel .qfields { position: absolute; left: 44px; top: 128px; width: 520px; margin: 0; }
.qpanel .qfield { height: 56px; background: var(--white); }
.qpanel .qagree { position: static; }
.qpanel .qresult { padding: 40px 39px 36px 44px; }
/* после отправки панель выходит из абсолютного позиционирования и растёт по контенту, секция — вместе с ней */
.squiz { height: auto; min-height: 915px; }
.qpanel.is-done { position: relative; left: auto; right: auto; top: auto; margin: 266px 44px 106px; height: auto; min-height: 543px; }
.qpanel.is-done .qpanel__head { display: none; }
.qpanel .qpager[hidden], .qpanel__btn[hidden] { display: none; }
.qpanel__btn[disabled], .qpanel__btn[aria-disabled="true"] { cursor: default; }
@media (max-width: 767px) {
  .qpanel .qfields { position: static; width: 100%; margin-top: 18px; }
  .qpanel .qresult { padding: 0; }
  .squiz { min-height: 0; }
  .qpanel.is-done { margin: 26px 0 0; min-height: 0; }
}