/* Услуги (агент pubcat): список по категориям, категория, карточка услуги. Цвет раздела — сине-зелёный
   (--tone на <main>): заголовки категорий, ссылки, h1 списков. Строки услуг — датированный список v10
   (волосяные линии, название 18/500, серое описание), вместо даты — цена справа.
   Раскладка карточки (крошки, фото | сведения, секции, просмотр фото) — общая с продуктом, pages/catalog.css. */

/* ---------- строка услуги ---------- */
.service-list--lined { border-bottom: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0; border-top: 1px solid var(--line); }
.service-row__title { font-size: var(--fs-h3); font-weight: 500; line-height: 1.35; }
.service-row__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.service-row__title--category { color: var(--tone); } /* направление — переход внутри раздела, цветом раздела */
.service-row__text { margin-top: 6px; max-width: 72ch; font-size: 15px; color: var(--muted); }
.service-row__price { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .service-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gutter); align-items: baseline; padding: 24px 0; }
  .service-row__price { text-align: right; white-space: nowrap; }
}

/* ---------- /services/: категория слева (3 колонки из 12), её услуги справа (9) ---------- */
.service-groups { border-bottom: 1px solid var(--line); }
.service-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 24px; border-top: 1px solid var(--line); }
.service-group__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; color: var(--tone); }
.service-group__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.service-group .service-row + .service-row { border-top: 1px solid var(--line); }
.service-group .service-row:first-child { border-top: 0; }
@media (min-width: 1024px) {
  .service-group { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gutter); padding-top: 0; }
  .service-group__title { grid-column: 1 / span 3; padding: 24px 0; }
  .service-group .service-list { grid-column: 4 / -1; }
}

.service-others { margin-top: var(--section); }

/* ---------- карточка услуги ---------- */
.service-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface); }
.service-media picture { display: contents; }
.service-media img { width: 100%; height: 100%; object-fit: cover; }

/* фотографии: сетка кадров 3:2, по клику — полноэкранный просмотр */
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.photo-grid__item { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface); cursor: zoom-in; }
.photo-grid__item picture { display: contents; }
.photo-grid__item img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}