/* ============================================================
   SCREEN 8 — «Консультации и диагностика»

   Экран во всю ширину: заголовок и лид, широкая карточка первичной
   консультации и три карточки профильных под ней. Размеры сняты с
   макета «Экран 8» при окне 1440: широкая карточка 1260x202, три
   карточки 404x262, зазоры 24, поля внутри 28.
   ============================================================ */

.s8-content {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.2vw, 38px);
  width: 100%;
}

.s8-head {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.3vw, 20px);
}

.s8-title {
  font-size: var(--fs-home-h2-wide);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.s8-lead {
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ---------- Общее для карточек ---------- */

.s8-card {
  padding: clamp(18px, 1.95vw, 34px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-20);
  background: var(--surface-15);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 24px);
}

/* У первичной консультации синий подсвет справа: в макете она
   заметно активнее трёх профильных.

   Раскладка сеткой: кнопка в макете стоит в правом верхнем углу, а на
   мобильном должна уехать под строки — внутри одного ряда так не
   сделать, order работает только между соседями. */
.s8-card-primary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'icon head btn'
    'rows rows rows';
  align-items: start;
  background:
    radial-gradient(90% 160% at 78% 50%, rgba(77, 107, 255, 0.20) 0%, transparent 70%),
    var(--surface-15);
}
.s8-card-primary .s8-card-icon { grid-area: icon; }
.s8-card-primary .s8-card-head { grid-area: head; }
.s8-card-primary .s8-primary-btn { grid-area: btn; }
.s8-card-primary .s8-card-rows { grid-area: rows; }

.s8-card-top {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.2vw, 20px);
}

.s8-card-icon {
  flex-shrink: 0;
  width: clamp(40px, 3.6vw, 62px);
  height: clamp(40px, 3.6vw, 62px);
  border-radius: 12px;
  background: var(--accent-15);
  border: 0.5px solid rgba(77, 107, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
/* Та же иконка, что на экране 2, но там она стоит крупнее (40 против
   33 здесь), и квадрат её viewBox подогнан под экран 2. Здесь эту
   разницу и добираем процентом: 76% плашки дают рисунок 33px при
   плашке 52, как в макете. Правило касается только этой иконки —
   на всех четырёх карточках экрана она одна. */
.s8-card-icon svg { height: 76%; width: auto; }

.s8-card-head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 0.8vw, 14px);
}

.s8-card-tag {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--surface-30);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
}

.s8-card-name {
  font-size: var(--fs-home-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Три строки «Формат / Результат / Стоимость»: подпись плотным, само
   значение — приглушённым, как в макете. */
.s8-card-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.s8-card-row {
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.s8-card-row b {
  font-weight: 600;
  color: var(--text);
}

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

.s8-primary-btn {
  flex-shrink: 0;
  gap: 8px;
  height: calc(var(--fs-btn) * 2.5);
  padding: 0 clamp(12px, 1.1vw, 18px);
  font-size: var(--fs-home-body);
}
.s8-primary-btn-arrow { display: inline-flex; width: 1em; height: 1em; }
.s8-primary-btn-arrow svg { width: 100%; height: 100%; }

/* ---------- Три профильные консультации ---------- */

.s8-studios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Ссылка выбора прижата к низу: у консультаций разной длины строка
   результата, без auto ссылки не встали бы на одну линию. */
.s8-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-home-body);
  font-weight: 500;
  line-height: 1.2;
  color: var(--accent);
  transition: filter 0.2s var(--ease);
}
.s8-card-link:hover { filter: brightness(1.25); }
.s8-card-link-arrow { display: inline-flex; width: 1em; height: 1em; }
.s8-card-link-arrow svg { width: 100%; height: 100%; }

/* ---------- Мобильная раскладка ---------- */
@media (max-width: 1024px) {
  .s8-card { padding: 20px; }
  /* Иконка и шапка одной строкой, ниже строки, кнопка последней. */
  .s8-card-primary {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'icon head'
      'rows rows'
      'btn  btn';
  }
  .s8-primary-btn { width: 100%; justify-content: center; }
  .s8-studios { grid-template-columns: 1fr; gap: 16px; }
}