/* ==========================================================================
   INOSSI — Services Hub (services.html)
   Catalog page: intro header + category pill tabs that filter a grid of
   large treatment cards. Progressive enhancement: without JS (no tabs,
   .is-enhanced not added) every category renders as its own labelled
   section one after another, so all 11 treatment links stay visible and
   crawlable; with JS, the pills show/hide one category's grid at a time.
   The card grid itself is identical in both modes. Loaded after
   tokens.css / navigation.css / main.css.
   ========================================================================== */

.services-hub {
    width: var(--width-band, min(100% - 40px, 1700px));
    margin: clamp(20px, 4vw, 40px) auto 0;
}

.services-hub__heading {
    margin: 0 0 1rem;
    text-align: center;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: var(--line-height-heading, 1.2);
    color: var(--color-ink, #000);
}

.services-hub__intro {
    max-width: 52rem;
    margin: 0 auto;
    text-align: center;
    color: var(--color-text-muted, #6b6b6b);
}

/* ===== CATEGORY SELECTOR ===== */
.radial {
    margin-top: clamp(2rem, 5vw, 3.5rem);
}

/* Category pill tabs — hidden until JS enhances (they do nothing without it). */
.radial__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.75rem, 0.9vw, 1.75rem) clamp(1rem, 1.1vw, 2.25rem);
    margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.radial__cat {
    min-height: 44px;
    padding: clamp(0.5rem, 0.35vw, 0.8rem) clamp(1.35rem, 1.1vw, 2rem);
    border: 1px solid var(--color-accent-soft, #ddcdbc);
    border-radius: 999px;
    background-color: var(--color-bg, #fff);
    cursor: pointer;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1rem;
    color: var(--color-text-muted, #6b6b6b);
    transition: background-color var(--duration-base, 0.25s) var(--ease-standard, ease),
        border-color var(--duration-base, 0.25s) var(--ease-standard, ease),
        color var(--duration-base, 0.25s) var(--ease-standard, ease);
}

.radial__cat:hover {
    border-color: var(--color-accent, #d2ab66);
    color: var(--color-ink, #000);
}

.radial__cat[aria-selected="true"] {
    background-color: var(--color-ink, #000);
    border-color: var(--color-ink, #000);
    color: var(--color-bg, #fff);
}

/* ===== CATEGORY PANEL + GRID (identical with or without JS) ===== */
.radial__panel {
    margin-top: clamp(2.5rem, 6vw, 4rem);
}

.radial__panel:first-child {
    margin-top: 0;
}

.radial.is-enhanced .radial__panel[hidden] {
    display: none;
}

/* Sticky within its own panel only: .radial__panel-heading is the first
   child of .radial__panel (heading + card grid), and position:sticky
   constrains itself to its containing block's box — so the heading and its
   underline stay pinned below the site header while the cards inside that
   category scroll past, then release naturally the moment you scroll past
   this panel's own bottom edge (the next category's own heading takes
   over). --header-h is measured live in main.js so this sits flush under
   the real header height at every breakpoint, not a guessed constant. */
.radial__panel-heading {
    position: sticky;
    top: var(--header-h, 96px);
    z-index: 5;
    margin: 0 0 1.75rem;
    padding-bottom: 0.75rem;
    background-color: var(--color-bg, #fff);
    border-bottom: 1px solid var(--color-accent-soft, #ddcdbc);
    text-align: center;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 400;
    color: var(--color-ink, #000);
}

.radial__ring {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.radial__item {
    display: flex;
    margin: 0;
    width: clamp(280px, 28vw, 420px);
}

/* ===== TREATMENT CARD ===== */
.radial__card {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    border-radius: var(--radius-sm, 5px);
    overflow: hidden;
    background-color: var(--color-bg, #fff);
    border: 1px solid var(--color-accent-soft, #ddcdbc);
    transition: transform var(--duration-base, 0.25s) var(--ease-standard, ease),
        box-shadow var(--duration-base, 0.25s) var(--ease-standard, ease);
}

.radial__card:hover,
.radial__card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
}

.radial__card-badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 2;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background-color: var(--color-ink, #000);
    color: var(--color-bg, #fff);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.radial__card-media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
    background: linear-gradient(155deg, var(--color-accent-soft, #ddcdbc), var(--color-band, #f8f4ee));
}

/* Real-photo variant — all 12 services as of 08.08.2026 (see
   FACIAL_MASSAGE_REDESIGN_PLAN.md for the sourcing rule). */
.radial__card-media--photo {
    background-color: var(--color-ink, #000);
}

/* Fallback visual: tinted media background (above) + the existing brand
   line-art icon, centred. Not currently used by any service — kept for a
   future 13th treatment that doesn't yet have an approved photo. */
.radial__card-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.radial__card-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.82;
}

.radial__card-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.radial__card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.35rem 1.5rem 1.5rem;
    flex: 1 1 auto;
}

.radial__card-name {
    margin: 0;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-ink, #000);
}

.radial__card-meta {
    margin: 0;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background-color: var(--color-band, #f8f4ee);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text, #111);
}

.radial__card-desc {
    margin: 0;
    color: var(--color-text-muted, #6b6b6b);
    font-size: 1rem;
    line-height: 1.55;
    flex: 1 1 auto;
}

.radial__card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.1rem;
    margin-top: 0.35rem;
}

.radial__card-learn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-ink, #000);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Wide / 4K, scoped to .service-page on <main> ----
   Same band-capping idea as about.css's wide-screen block, but every size
   below is still a clamp() with a vw term, not a fixed value — a fixed
   value stops growing the instant this breakpoint starts, which is exactly
   why the page still looked "frozen mid-screen" on a 4K monitor even after
   the band got a width cap. These clamps keep growing smoothly and only
   top out close to true 4K (~3800-4000px), and the band cap itself is
   raised well past that so it doesn't visibly stop growing before the type
   does. */
@media (min-width: 1600px) {
    .service-page .services-hub {
        width: min(100% - 120px, 3400px);
    }

    .service-page .services-hub__heading {
        font-size: clamp(3.2rem, 2.4vw, 5rem);
    }

    .service-page .services-hub__intro {
        font-size: clamp(1.15rem, 0.7vw, 1.6rem);
        max-width: 60rem;
    }

    .service-page .radial__panel-heading {
        font-size: clamp(1.8rem, 1.1vw, 2.8rem);
    }

    .service-page .radial__cat {
        font-size: clamp(1rem, 0.55vw, 1.4rem);
    }

    .service-page .radial__item {
        width: clamp(300px, 17vw, 480px);
    }

    .service-page .radial__card-name {
        font-size: clamp(1.25rem, 0.7vw, 1.6rem);
    }

    .service-page .radial__card-meta,
    .service-page .radial__card-learn {
        font-size: clamp(0.9rem, 0.4vw, 1.1rem);
    }

    .service-page .radial__card-desc {
        font-size: clamp(1rem, 0.45vw, 1.15rem);
    }

    .service-page .promo__heading {
        font-size: clamp(2.2rem, 1.4vw, 3.4rem);
    }

    .service-page .promo__text {
        font-size: clamp(1.15rem, 0.7vw, 1.6rem);
        max-width: 52rem;
    }
}

@media (max-width: 650px) {
    .services-hub {
        width: var(--width-container-mobile, min(100% - 30px, 1200px));
    }

    .radial__item {
        width: 100%;
        max-width: 24rem;
    }
}