/* ==========================================================================
   Page: services  (site/services/index + show)
   --------------------------------------------------------------------------
   Index
     .svc-jump      path chips in the page header (accent dot + name)
     .svc-path      one band per path: sticky arch window + name + text on
                    the start side, a 2-column grid of service cards
   Show
     .svc-detail    description + "who it's for" beside the sticky booking
                    card (.svc-book, rings in the path's accent)
   Shared
     .svc-grid      card grid (related / uncategorised) 3 → 2 → 1
   ========================================================================== */

/* ── Jump chips ──────────────────────────────────────────────────────────── */
.svc-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.svc-jump__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0.5em 1.2em;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.svc-jump__chip:hover { color: var(--ink); border-color: var(--ink); }

/* ── A path ──────────────────────────────────────────────────────────────── */
.svc-path { scroll-margin-top: var(--header-h); }
.svc-path__grid {
    display: grid;
    grid-template-columns: clamp(240px, 26vw, 340px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.svc-path__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-8));
    display: grid;
    justify-items: start;
    gap: var(--space-3);
}
.svc-path__window { width: min(100%, 280px); justify-self: center; margin-top: var(--space-12); }
.svc-path__title { margin-top: var(--space-6); font-size: var(--fs-2xl); }
.svc-path__text { color: var(--ink-soft); }
.svc-path__count { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-faint); font-size: var(--fs-sm); }

.svc-path__list,
.svc-grid { display: grid; gap: var(--space-4); }
.svc-path__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Detail ──────────────────────────────────────────────────────────────── */
.svc-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
}
/* Session facts (D15): price from · length · in person / remote */
.svc-facts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.svc-facts__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--space-3);
    min-width: 180px;
    padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--card);
}
.svc-facts__icon { grid-row: span 2; width: 1.4em; height: 1.4em; color: var(--second-text); }
.svc-facts dt { color: var(--ink-faint); font-size: var(--fs-xs); }
.svc-facts dd { margin: 0; font-weight: 600; }
.svc-detail__includes { display: grid; gap: var(--space-2); }
.svc-detail__includes li { display: flex; align-items: flex-start; gap: var(--space-3); line-height: 1.8; }
.svc-detail__includes .icon { flex-shrink: 0; margin-top: 0.35em; color: var(--second-text); }
.svc-book__price { margin-inline-start: var(--space-1); padding-inline-start: var(--space-2); border-inline-start: 1px solid var(--line); color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 600; }
.svc-detail__heading { margin-bottom: var(--space-4); font-size: var(--fs-2xl); }.svc-detail__heading:not(:first-child) { margin-top: var(--space-12); }
.svc-detail__prose { display: grid; gap: var(--space-4); max-width: 44rem; font-size: var(--fs-lg); line-height: 2; }
.svc-detail__audience { display: grid; gap: var(--space-3); }
.svc-detail__audience li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-weight: 500;
}

/* Booking card — rings in the path's accent peek from the corner */
.svc-book {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    display: grid;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xl);
    background: var(--card);
}
.svc-book__rings { position: absolute; inset-inline-end: -70px; top: -70px; width: 180px; height: 180px; pointer-events: none; }
.svc-book__rings i {
    position: absolute;
    inset: calc(var(--k, 0) * 18px);
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    opacity: calc(1 - var(--k, 0) * 0.3);
}
.svc-book__rings i:nth-child(2) { --k: 1; }
.svc-book__rings i:nth-child(3) { --k: 2; }
.svc-book__title { position: relative; font-family: var(--font-display); font-size: var(--fs-xl); }
.svc-book__note { position: relative; color: var(--ink-soft); font-size: var(--fs-sm); }
.svc-book__call { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--ink); font-weight: 500; text-decoration: none; }
.svc-book__call:hover { color: var(--second-text); }
.svc-book__label { margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--ink-faint); font-size: var(--fs-xs); }
.svc-book__branches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.svc-book__branches a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35em 0.9em;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--ink);
    font-size: var(--fs-sm);
    text-decoration: none;
}
.svc-book__branches a:hover { border-color: var(--ink); color: var(--ink); }
.svc-book__branches .dot { --dot-size: 8px; }
.svc-book__lock { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-faint); font-size: var(--fs-xs); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .svc-path__list { grid-template-columns: 1fr; }
    .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .svc-path__grid, .svc-detail { grid-template-columns: 1fr; }
    .svc-path__aside { position: static; }
    .svc-book { position: relative; top: auto; }   /* stays the containing block, so its rings stay clipped */
    .svc-path__aside { justify-items: stretch; }
    .svc-path__window { width: min(62%, 230px); margin-top: var(--space-10); }
    .svc-path__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .svc-path__list, .svc-grid { grid-template-columns: 1fr; }
    .svc-jump { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
    .svc-jump__chip { flex-shrink: 0; }
}