/* =============================================================================
   Послуги — секція 04.

   Ритм за art-direction §7: циферблат (світла поверхня), «стіна шрифту» —
   13 позицій у 3 колонках великим кеглем. Проти сусідів це працює двічі:
   03 темна зі sticky-заголовком і дрібними рядками, 04 світла з трьома
   колонками великого шрифту. Поверхня і геометрія різні, тож ритм не
   повторюється навіть здалеку.

   Групу підписує моно-ярлик і гліф 48px з іконічної мови (§10): сітка 24,
   штрих --icon-stroke, торець прямий, кути 0/45/90, одна поділка бурштином.
   ============================================================================= */

.services__wall {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

.services__group {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}

/* Групу підписує гліф і назва, в один рядок. Номер каналу прибрано: разом із
   іконкою це були дві мітки одного й того самого, і цифра вибивалася.
   Моно-капслок теж прибрано — найпомітніший слід іншого проєкту. */

.services__group-title {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  align-items: center;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  padding-block-end: var(--space-2xs);
  border-block-end: var(--border-width-hair) solid var(--surface-hairline-strong);
}

/* 48px за §10: це підпис групи на циферблаті, а не іконка в рядку. На 32px
   гліф читався як маркер списку й губився поруч із назвою групи. */
.services__group-title .glyph {
  inline-size: var(--icon-size-lg);
  block-size: var(--icon-size-lg);
  color: var(--accent-ink);
}

/* ---- перелік -----------------------------------------------------------------
   Кегль знижено з --fs-h3 до --fs-lead: тринадцять позицій великим шрифтом
   розганяли секцію на два екрани і читалися як заголовки, а не як перелік.

   Пункт стає посиланням тільки за наявності сторінки (.is-linked ставить
   card/service-group.php). Решта лишається текстом: підкреслення, яке нікуди
   не веде, гірше за його відсутність. */

.service {
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

/* Та сама мова посилання, що в тексті сторінок (.prose a): підкреслення
   бурштином завтовшки у волосину. Воно стоїть ОДРАЗУ, а не з'являється при
   наведенні — інакше відвідувач не знає, що пункт клікабельний, поки випадково
   не проведе по ньому мишею, а на сенсорному екрані не дізнається ніколи.

   Амбер тут --accent-ink, а не --accent: секція світла, і лампова заливка на
   ній дає 1.57:1. Правило те саме, що для .tint у base.css. */
.service.is-linked a {
  /* Рядок 17px дає ціль 22px заввишки — на два пікселі нижче порога WCAG 2.2.
     Кегль не чіпаємо, площу добирає відступ. */
  display: inline-block;
  padding-block: var(--space-3xs);
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent-ink);
  text-decoration-thickness: var(--border-width-hair);
  text-underline-offset: var(--space-3xs);
  transition: color var(--dur-fast) var(--ease-out);
}

.service.is-linked a:hover,
.service.is-linked a:focus-visible {
  color: var(--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
  .service.is-linked a {
    transition: none;
  }
}

.services__list {
  display: grid;
  gap: var(--space-3xs);
}

/* Три групи стовпчиком розділяє --space-2xl, і саме на телефоні цей проміжок
   найбільший за всю сторінку: від 48rem він уже --space-xl. Вирівнюємо. */
@media not all and (min-width: 48rem) {
  .services__wall { gap: var(--space-xl); }
}

@media (min-width: 48rem) {
  .services__wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

@media (min-width: 64rem) {
  /* Середня група має шість позицій проти чотирьох і трьох, тому вона ширша:
     колонки рівної ширини дали б у ній переноси, а в третій — порожнечу. */
  /* Колонки більше не тягнуться одна за одною. Це трималося на схемі, яку
     треба було притиснути до низу третьої колонки; схеми немає, а stretch зі
     space-between розганяв третю колонку до 675px і лишав під першими двома
     прямокутник 870×400 порожнього циферблата. */
  .services__wall {
    grid-template-columns: 1fr 1.15fr 0.95fr;
    gap: var(--space-2xl);
    align-items: start;
  }

  .services__col {
    display: grid;
    gap: var(--space-lg);
    align-content: start;
  }
}