/* ==========================================================================
   Services page – catalogue grouped by section (barbershop / beauty centre) and category.
   Colours come from luxe-theme.css only.
   ========================================================================== */
.svc-catalog { background: var(--lx-paper); padding: 72px 20px 96px; }
.svc-wrap { max-width: 1240px; margin: 0 auto; }

/* ---- section (barbershop / beauty centre) -------------------------------- */
.svc-section { scroll-margin-top: 110px; }
.svc-section + .svc-section { margin-top: 88px; }
.svc-section-title { position: relative; margin: 0 0 36px; padding-bottom: 18px; font: 400 clamp(32px, 4vw, 48px)/1.1 var(--lx-serif);
  letter-spacing: -.01em; color: var(--lx-ink); }
.svc-section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 2px; background: var(--lx-gold); }

/* ---- category group ------------------------------------------------------- */
.svc-group { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0; scroll-margin-top: 110px;
  background: var(--lx-white); border: 1px solid var(--lx-line); border-radius: 24px; overflow: hidden;
  transition: box-shadow .3s ease; }
.svc-group:hover { box-shadow: 0 18px 50px rgb(var(--lx-ink-rgb) / .08); }
.svc-group + .svc-group { margin-top: 24px; }

.svc-group-media { position: relative; display: block; min-height: 100%; background: var(--lx-cream); }
.svc-group-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-group-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(var(--lx-black-rgb) / .38), transparent 55%); }
.svc-count { position: absolute; left: 16px; bottom: 16px; z-index: 1; padding: 7px 14px; border-radius: 100px;
  background: rgb(var(--lx-white-rgb) / .94); color: var(--lx-ink); font: 500 13px/1 var(--lx-sans); }

.svc-group-body { padding: 28px 32px 32px; min-width: 0; }
.svc-group-head { margin: 0 0 22px; }
.svc-group-title { margin: 0 0 6px; font: 400 28px/1.15 var(--lx-serif); letter-spacing: -.005em; }
.svc-group-title a { color: var(--lx-ink); text-decoration: none; }
.svc-group-title a:hover { color: var(--lx-gold); }
.svc-group-tagline { margin: 0; max-width: 62ch; color: var(--lx-muted); font: 400 15px/1.55 var(--lx-sans); }

/* ---- responsive -------------------------------------------------------------- */
@media (max-width: 1099.98px) {
  .svc-group { grid-template-columns: 220px minmax(0, 1fr); }
  .svc-group-body { padding: 24px; }
}
@media (max-width: 809.98px) {
  .svc-catalog { padding: 48px 16px 64px; }
  .svc-group { grid-template-columns: 1fr; border-radius: 20px; }
  .svc-group-media { min-height: 0; height: 160px; }
  .svc-group-body { padding: 20px 16px 20px; }
  .svc-group-title { font-size: 24px; }
  .svc-section + .svc-section { margin-top: 64px; }
}