/* public/css/service-category.css
   ---------------------------------------------------------------------------
   Service Category page — premium landing + dynamic marketplace.

   Same navy / white / restrained-gold language as the Jurisdictions and Country
   pages (tokens mirror jurisdictions.css so the two pages read as one product).
   Everything is namespaced under .page-service so it cannot leak into tl.css or
   the other new sheets, and nothing here assumes a section exists — empty
   sections are simply not rendered by the template.
   --------------------------------------------------------------------------- */

.page-service {
    --svc-navy:  #0B1626;
    --svc-navy2: #16243B;
    --svc-gold:  #C9A227;
    --svc-line:  #E3E7EE;
    --svc-muted: #6B7688;
    --svc-ink:   #1B2534;
    --svc-soft:  #F7F8FA;
    --svc-font:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, sans-serif;

    background: var(--svc-soft);
    font-family: var(--svc-font);
    color: var(--svc-ink);
    -webkit-font-smoothing: antialiased;
}

.page-service .svc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
.page-service .svc-eyebrow {
    font: 700 .74rem/1 var(--svc-font); letter-spacing: .18em; text-transform: uppercase;
    color: var(--svc-gold); margin: 0 0 .9rem;
}

/* ---- breadcrumbs ---------------------------------------------------------- */
.page-service .svc-crumbs { font-size: .82rem; color: var(--svc-muted); padding: 1rem 0 0; }
.page-service .svc-crumbs a { color: var(--svc-muted); text-decoration: none; }
.page-service .svc-crumbs a:hover { color: var(--svc-navy); text-decoration: underline; }
.page-service .svc-crumbs span[aria-current] { color: var(--svc-navy); }

/* ---- hero ----------------------------------------------------------------- */
.page-service .svc-hero {
    position: relative; overflow: hidden; border-radius: 16px;
    margin: 1rem 0 clamp(1.6rem, 3vw, 2.4rem);
    background:
        radial-gradient(1200px 600px at 50% -20%, #1B2E4A 0%, transparent 70%),
        var(--svc-navy);
    color: #fff;
    isolation: isolate;
}
.page-service .svc-hero-media { position: absolute; inset: 0; z-index: -2; }
.page-service .svc-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.page-service .svc-hero::after {           /* controlled dark overlay for legible text */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(11,22,38,.92) 0%, rgba(11,22,38,.72) 46%, rgba(11,22,38,.42) 100%);
}
.page-service .svc-hero-inner { padding: clamp(2.2rem, 5vw, 4rem) clamp(1.4rem, 4vw, 3.2rem); max-width: 760px; }
.page-service .svc-hero h1 {
    font: 800 clamp(2rem, 4.4vw, 3.1rem)/1.06 var(--svc-font);
    letter-spacing: -.028em; margin: 0 0 .9rem;
}
.page-service .svc-hero-strap {
    font: 600 clamp(1.02rem, 1.8vw, 1.28rem)/1.35 var(--svc-font);
    color: var(--svc-gold); margin: 0 0 1rem;
}
.page-service .svc-hero-lead {
    font: 400 clamp(.98rem, 1.4vw, 1.08rem)/1.6 var(--svc-font);
    color: rgba(255,255,255,.82); max-width: 58ch; margin: 0 0 1.6rem;
}
/* stat line — the capability, not a search count */
.page-service .svc-stats { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2.4rem); }
.page-service .svc-stat { display: flex; flex-direction: column; gap: .15rem; }
.page-service .svc-stat b {
    font: 800 clamp(1.5rem, 3vw, 2rem)/1 var(--svc-font); color: #fff;
    font-variant-numeric: tabular-nums;
}
.page-service .svc-stat span {
    font: 700 .68rem/1 var(--svc-font); letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.62);
}
.page-service .svc-stat + .svc-stat { padding-left: clamp(1.2rem, 3vw, 2.4rem); border-left: 1px solid rgba(255,255,255,.14); }

/* ---- generic section furniture ------------------------------------------- */
.page-service .svc-section { padding: clamp(1.8rem, 3.5vw, 2.8rem) 0; }
.page-service .svc-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1.2rem; flex-wrap: wrap; }
.page-service .svc-section-head h2 {
    font: 800 clamp(1.3rem, 2.4vw, 1.7rem)/1.1 var(--svc-font);
    letter-spacing: -.02em; color: var(--svc-navy); margin: 0;
}
.page-service .svc-section-head .svc-count { font-size: .84rem; color: var(--svc-muted); }

/* ---- overview ------------------------------------------------------------- */
.page-service .svc-overview {
    background: #fff; border: 1px solid var(--svc-line); border-radius: 14px;
    padding: clamp(1.4rem, 3vw, 2rem);
    font: 400 1.02rem/1.7 var(--svc-font); color: var(--svc-ink); max-width: 78ch;
}
.page-service .svc-overview :where(p):last-child { margin-bottom: 0; }

/* ---- subcategory chips ---------------------------------------------------- */
.page-service .svc-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.page-service .svc-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; border: 1px solid var(--svc-line); border-radius: 999px;
    padding: .55rem 1rem; font: 600 .9rem/1 var(--svc-font); color: var(--svc-navy);
    text-decoration: none; transition: border-color .18s, transform .18s, box-shadow .18s;
}
.page-service .svc-chip:hover { border-color: var(--svc-gold); transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(11,22,38,.06); }
.page-service .svc-chip b { color: var(--svc-muted); font-weight: 600; }

/* ---- availability / network ---------------------------------------------- */
.page-service .svc-network {
    background: var(--svc-navy); color: #fff; border-radius: 16px;
    padding: clamp(1.6rem, 3.5vw, 2.4rem);
}
.page-service .svc-network .svc-eyebrow { color: var(--svc-gold); }
.page-service .svc-network h2 { color: #fff; }
.page-service .svc-region { margin-top: 1.4rem; }
.page-service .svc-region h3 {
    font: 700 .72rem/1 var(--svc-font); letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.55); margin: 0 0 .8rem;
}
.page-service .svc-jgrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem;
}
.page-service .svc-jur {
    display: flex; align-items: center; gap: .65rem;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px; padding: .7rem .85rem; text-decoration: none; color: #fff;
    transition: background .18s, border-color .18s, transform .18s;
}
.page-service .svc-jur:hover { background: rgba(201,162,39,.14); border-color: var(--svc-gold); transform: translateY(-1px); }
.page-service .svc-jur .fi { border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.page-service .svc-jur-name { font: 600 .92rem/1.2 var(--svc-font); }
.page-service .svc-jur-count { margin-left: auto; font: 700 .74rem/1 var(--svc-font); color: rgba(255,255,255,.55); }

/* ---- filter bar ----------------------------------------------------------- */
.page-service .svc-filters {
    position: sticky; top: 0; z-index: 20;
    background: rgba(247,248,250,.92); backdrop-filter: blur(8px);
    border-top: 1px solid var(--svc-line); border-bottom: 1px solid var(--svc-line);
    padding: .8rem 0;
}
.page-service .svc-filter-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.page-service .svc-search { flex: 1 1 220px; position: relative; }
.page-service .svc-search input {
    width: 100%; border: 1px solid var(--svc-line); border-radius: 10px;
    padding: .62rem .9rem; font: 400 .92rem var(--svc-font); background: #fff;
}
.page-service .svc-filters select {
    border: 1px solid var(--svc-line); border-radius: 10px; background: #fff;
    padding: .62rem .8rem; font: 500 .9rem var(--svc-font); color: var(--svc-navy); cursor: pointer;
}
.page-service .svc-filters select:focus, .page-service .svc-search input:focus {
    outline: none; border-color: var(--svc-gold); box-shadow: 0 0 0 3px rgba(201,162,39,.16);
}
.page-service .svc-apply {
    border: none; background: var(--svc-navy); color: #fff; border-radius: 10px;
    padding: .62rem 1.1rem; font: 700 .88rem var(--svc-font); cursor: pointer;
}
.page-service .svc-apply:hover { background: var(--svc-navy2); }
.page-service .svc-clear { font-size: .84rem; color: var(--svc-muted); text-decoration: underline; background: none; border: none; cursor: pointer; }
.page-service .svc-chipsrow { display: flex; gap: .5rem; flex-wrap: wrap; }
.page-service .svc-togglechip { display: inline-flex; align-items: center; gap: .4rem; font: 600 .82rem var(--svc-font);
    border: 1px solid var(--svc-line); border-radius: 999px; padding: .35rem .8rem; background: #fff; color: var(--svc-navy); cursor: pointer; }
.page-service .svc-togglechip input { accent-color: var(--svc-gold); }

/* control block: inline row on desktop */
.page-service .svc-controls { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* the mobile trigger and drawer chrome are desktop-hidden by default */
.page-service .svc-filterbtn { display: none; }
.page-service .svc-drawer-head { display: none; }
.page-service .svc-drawer-backdrop { display: none; }

/* ---- listings grid + cards ------------------------------------------------ */
.page-service .svc-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}
.page-service .svc-card {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--svc-line); border-radius: 14px; overflow: hidden;
    text-decoration: none; color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.page-service .svc-card:hover { transform: translateY(-4px); border-color: #D9DEE7;
    box-shadow: 0 18px 40px rgba(11,22,38,.1); }
.page-service .svc-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--svc-navy2); }
.page-service .svc-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.page-service .svc-card:hover .svc-card-media img { transform: scale(1.05); }
.page-service .svc-card-flag { position: absolute; left: .8rem; top: .8rem; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.page-service .svc-card-badges { position: absolute; right: .7rem; top: .7rem; display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.page-service .svc-badge { font: 700 .64rem/1 var(--svc-font); letter-spacing: .04em; text-transform: uppercase;
    padding: .3rem .5rem; border-radius: 5px; background: rgba(11,22,38,.82); color: #fff; }
.page-service .svc-badge.is-gold { background: var(--svc-gold); color: var(--svc-navy); }
.page-service .svc-card-body { padding: 1.1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.page-service .svc-card-cat { font: 700 .66rem/1 var(--svc-font); letter-spacing: .1em; text-transform: uppercase; color: var(--svc-gold); }
.page-service .svc-card-title { font: 700 1.06rem/1.25 var(--svc-font); color: var(--svc-navy); letter-spacing: -.01em; margin: 0; }
.page-service .svc-card-meta { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--svc-muted); }
.page-service .svc-card-text { font: 400 .9rem/1.5 var(--svc-font); color: var(--svc-ink); margin: 0; }
.page-service .svc-card-foot { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.page-service .svc-card-price { font: 700 .95rem/1 var(--svc-font); color: var(--svc-navy); }
.page-service .svc-card-price.is-poa { font-weight: 600; color: var(--svc-muted); font-size: .82rem; }
.page-service .svc-card-cta { font: 700 .84rem/1 var(--svc-font); color: var(--svc-gold); display: inline-flex; align-items: center; gap: .35rem; }
.page-service .svc-card:hover .svc-card-cta { gap: .55rem; }

/* single-listing featured presentation (small result sets stay premium) */
.page-service .svc-grid.is-single { grid-template-columns: 1fr; }
.page-service .svc-grid.is-single .svc-card { flex-direction: row; }
.page-service .svc-grid.is-single .svc-card-media { flex: 0 0 46%; aspect-ratio: auto; min-height: 300px; }
.page-service .svc-grid.is-single .svc-card-body { justify-content: center; padding: clamp(1.4rem, 3vw, 2.4rem); }
.page-service .svc-grid.is-single .svc-card-title { font-size: 1.5rem; }

/* empty state */
.page-service .svc-empty { background: #fff; border: 1px dashed var(--svc-line); border-radius: 14px;
    padding: clamp(2rem, 5vw, 3.4rem); text-align: center; }
.page-service .svc-empty h3 { font: 700 1.2rem var(--svc-font); color: var(--svc-navy); margin: 0 0 .5rem; }
.page-service .svc-empty p { color: var(--svc-muted); margin: 0 0 1.2rem; }

/* pagination */
.page-service .svc-pager { margin-top: 1.6rem; display: flex; justify-content: center; }
.page-service .svc-pager .pagination { display: flex; gap: .3rem; list-style: none; padding: 0; }
.page-service .svc-pager .page-link { display: inline-block; padding: .5rem .8rem; border: 1px solid var(--svc-line);
    border-radius: 8px; color: var(--svc-navy); text-decoration: none; font: 600 .88rem var(--svc-font); }
.page-service .svc-pager .active .page-link { background: var(--svc-navy); color: #fff; border-color: var(--svc-navy); }
.page-service .svc-pager .disabled .page-link { color: #C4CBD6; }

/* ---- related services ----------------------------------------------------- */
.page-service .svc-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.page-service .svc-related-card { background: #fff; border: 1px solid var(--svc-line); border-radius: 12px;
    padding: 1.2rem; text-decoration: none; color: var(--svc-navy); transition: border-color .18s, transform .18s, box-shadow .18s; }
.page-service .svc-related-card:hover { border-color: var(--svc-gold); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11,22,38,.07); }
.page-service .svc-related-card h3 { font: 700 1.02rem var(--svc-font); margin: 0 0 .3rem; }
.page-service .svc-related-card span { font-size: .82rem; color: var(--svc-muted); }
.page-service .svc-related-card .svc-card-cta { margin-top: .7rem; }

/* ---- knowledge strip ------------------------------------------------------ */
.page-service .svc-know-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.page-service .svc-know-card { background: #fff; border: 1px solid var(--svc-line); border-radius: 12px;
    padding: 1.2rem 1.3rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .5rem;
    transition: border-color .18s, transform .18s, box-shadow .18s; }
.page-service .svc-know-card:hover { border-color: var(--svc-gold); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11,22,38,.07); }
.page-service .svc-know-kicker { font: 700 .64rem/1 var(--svc-font); letter-spacing: .1em; text-transform: uppercase; color: var(--svc-gold); }
.page-service .svc-know-card h3 { font: 700 1.02rem/1.3 var(--svc-font); color: var(--svc-navy); margin: 0; }
.page-service .svc-know-card p { font: 400 .88rem/1.5 var(--svc-font); color: var(--svc-muted); margin: 0; }

/* ---- download banner ------------------------------------------------------ */
.page-service .svc-download {
    display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--svc-navy) 0%, var(--svc-navy2) 100%);
    border-radius: 16px; padding: clamp(1.4rem, 3vw, 2rem); color: #fff;
    border: 1px solid rgba(201,162,39,.28);
}
.page-service .svc-download .svc-eyebrow { color: var(--svc-gold); }
.page-service .svc-download h3 { font: 800 1.3rem var(--svc-font); margin: .2rem 0 .3rem; }
.page-service .svc-download p { color: rgba(255,255,255,.75); margin: 0; max-width: 52ch; }
.page-service .svc-download-cta { margin-left: auto; }

/* ---- adviser CTA ---------------------------------------------------------- */
.page-service .svc-cta {
    text-align: center; background:
        radial-gradient(900px 400px at 50% 120%, #1B2E4A 0%, transparent 70%), var(--svc-navy);
    color: #fff; border-radius: 18px; padding: clamp(2.2rem, 5vw, 3.6rem) 1.4rem;
}
.page-service .svc-cta h2 { font: 800 clamp(1.5rem, 3vw, 2.1rem)/1.1 var(--svc-font); letter-spacing: -.02em; margin: 0 0 .8rem; }
.page-service .svc-cta p { color: rgba(255,255,255,.78); max-width: 54ch; margin: 0 auto 1.6rem; font-size: 1.02rem; line-height: 1.6; }

/* ---- buttons -------------------------------------------------------------- */
.page-service .svc-btn-gold {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--svc-gold); color: var(--svc-navy); border: none; border-radius: 10px;
    padding: .8rem 1.5rem; font: 700 .92rem var(--svc-font); text-decoration: none; cursor: pointer;
    transition: transform .18s, box-shadow .18s;
}
.page-service .svc-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(201,162,39,.3); }
.page-service .svc-btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem; background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,.35); border-radius: 10px; padding: .8rem 1.4rem;
    font: 700 .9rem var(--svc-font); text-decoration: none;
}
.page-service .svc-btn-ghost:hover { border-color: var(--svc-gold); color: var(--svc-gold); }

/* ---- reveal-on-scroll (CSS only, reduced-motion safe) --------------------- */
.page-service .svc-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.page-service .svc-reveal.is-in { opacity: 1; transform: none; }

/* screen-reader-only utility (labels) */
.page-service .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
    .page-service .svc-grid.is-single .svc-card { flex-direction: column; }
    .page-service .svc-grid.is-single .svc-card-media { flex: none; aspect-ratio: 16/10; min-height: 0; }
    .page-service .svc-download-cta { margin-left: 0; }
}
@media (max-width: 720px) {
    .page-service .svc-hero { border-radius: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
    .page-service .svc-hero::after { background: linear-gradient(180deg, rgba(11,22,38,.7) 0%, rgba(11,22,38,.92) 100%); }
    .page-service .svc-stat + .svc-stat { padding-left: 0; border-left: none; }
    .page-service .svc-stats { gap: 1.4rem; }

    /* the selects move to a drawer; the row keeps just search + a Filters trigger */
    .page-service .svc-filterbtn { display: inline-block; border: 1px solid var(--svc-line); background: #fff; border-radius: 10px;
        padding: .62rem 1rem; font: 700 .88rem var(--svc-font); color: var(--svc-navy); cursor: pointer; white-space: nowrap; }
    .page-service .svc-apply-desktop, .page-service .svc-clear { display: none; }
    .page-service .svc-search { flex: 1 1 auto; }

    .page-service .svc-controls {
        position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px); z-index: 60;
        background: #fff; box-shadow: -12px 0 40px rgba(11,22,38,.2);
        transform: translateX(100%); transition: transform .28s ease; overflow-y: auto;
        padding: 1.4rem; flex-direction: column; gap: 1rem; align-items: stretch;
    }
    .page-service .svc-controls.is-open { transform: none; }
    .page-service .svc-controls select, .page-service .svc-controls .svc-apply { width: 100%; }
    .page-service .svc-drawer-head { display: flex; align-items: center; justify-content: space-between; }
    .page-service .svc-drawer-close { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--svc-muted); cursor: pointer; }
    .page-service .svc-drawer-backdrop.is-open { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(11,22,38,.4); }
}

@media (prefers-reduced-motion: reduce) {
    .page-service * { animation: none !important; }
    .page-service .svc-reveal { opacity: 1; transform: none; transition: none; }
    .page-service .svc-card, .page-service .svc-card-media img { transition: none; }
}