/* input(24,17): run-time error CSS1030: Expected identifier, found '
   '
input(25,4): run-time error CSS1031: Expected selector, found '='
input(25,4): run-time error CSS1025: Expected comma or open brace, found '=' */
/* ============================================================
   RoadRun — Catalog atom pages
   ============================================================
   The public SEO catalog pages rendered by
   Views/Public/CatalogService.cshtml:

       /service/{category}/{slug}              base atom
       /service/{category}/{slug}/{type}       per-type twin
       /package/{category}/{slug}              base package
       /package/{category}/{slug}/{type}       per-type package twin

   ...plus the SAME markup composed as a block on the bound
   category-variant page (/s/{slug} -> Views/Home/Index.cshtml ->
   _HomeCategoryHub.cshtml's .rr-variant-bound-service section).

   Every selector here is rendered by exactly those two views and by
   nothing else, so this sheet is pulled in from each view's `Styles`
   section rather than from _Layout — the same per-page gating
   public-discovery.css uses. It loads AFTER public-discovery.css so
   the hero can re-tune the shared share button for a light page.

   Tokens only (design-system.css) — no hard-coded brand colors, and
   no pre-minified twin: LigerShark.WebOptimizer minifies /css/**/*.css
   at serve time.
   ============================================================ */


/* -------------------------------------------------------
   1. Breadcrumbs
   -------------------------------------------------------
   Generic `.rr-breadcrumbs` component (an <ol> for correct document
   semantics). Without this the trail rendered as the browser default
   "1. 2. 3." numbering. It lives here because this is the only page
   family that renders the class today — the org and provider pages use
   the older `.rr-public-breadcrumb`, which is white-on-dark and belongs
   to their hero. If a second page family adopts `.rr-breadcrumbs`, move
   this block to a sheet both pages load rather than duplicating it. */

.rr-breadcrumbs {
    margin: 0 0 20px;
}

.rr-breadcrumbs ol {
    list-style: none;
    margin: 0;
    /* Bootstrap gives <ol> a 2rem inline-start padding — zero it or the
       trail hangs off the page grid. */
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 12.5px;
    line-height: 1.5;
}

.rr-breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--rr-mute);
}

/* Chevron separator, drawn between items only — never leading or trailing. */
.rr-breadcrumbs li + li::before {
    content: "\203A";
    color: var(--rr-line);
    font-size: 14px;
    line-height: 1;
}

.rr-breadcrumbs a {
    color: var(--rr-slate);
    font-weight: 500;
    text-decoration: none;
}

.rr-breadcrumbs a:hover,
.rr-breadcrumbs a:focus-visible {
    color: var(--rr-cyan-dark);
    text-decoration: underline;
}

/* Current page is not a link and reads as the anchored item. */
.rr-breadcrumbs [aria-current="page"] {
    color: var(--rr-ink);
    font-weight: 600;
}


/* -------------------------------------------------------
   2. Page shell
   ------------------------------------------------------- */

.rr-catalog-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 0 72px;
}

.rr-catalog-page > section + section {
    margin-top: 36px;
}


/* -------------------------------------------------------
   3. Hero card
   ------------------------------------------------------- */

.rr-catalog-hero {
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-card-xl);
    box-shadow: var(--rr-shadow-card);
    padding: 32px;
}

.rr-catalog-hero h1 {
    margin: 0;
    font-family: var(--rr-serif);
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.12;
    color: var(--rr-ink);
}

/* ~65ch measure — a catalog description is a full paragraph and goes
   unreadable across the whole 980px page width. */
.rr-catalog-hero__lede {
    margin: 14px 0 0;
    max-width: 65ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--rr-slate);
}

.rr-catalog-hero__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 22px 0 0;
    font-size: 14px;
    color: var(--rr-mute);
}

/* The money itself — the first span in the line, unclassed in the markup. */
.rr-catalog-hero__price > span:first-child {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--rr-ink);
    font-variant-numeric: tabular-nums;
}

.rr-catalog-hero__duration,
.rr-catalog-hero__count {
    font-size: 14px;
    font-weight: 600;
    color: var(--rr-mute);
    white-space: nowrap;
}

/* The duration span carries its own leading middot in the markup; the count
   never does, so it gets a decorative one here. */
.rr-catalog-hero__count::before {
    content: "\00B7";
    margin-right: 10px;
    color: var(--rr-line);
}

.rr-catalog-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}

/* Book CTA — the design system's primary button (the markup carries
   `rr-btn rr-btn-primary`); only the catalog-specific sizing lives here. */
.rr-catalog-hero__cta {
    padding: 13px 26px;
    font-size: 15px;
}

/* Share control — shared with the org and runner profile pages, where it sits
   on a DARK hero. On this light card its drop shadow and pill sizing read far
   too heavy, so match it to the CTA standing next to it. */
.rr-catalog-hero__actions .public-discovery-share__button {
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--rr-radius-btn);
    border: 1px solid var(--rr-line);
    background: var(--rr-paper);
    color: var(--rr-ink);
    box-shadow: none;
}

.rr-catalog-hero__actions .public-discovery-share__button:hover,
.rr-catalog-hero__actions .public-discovery-share__button:focus-visible {
    background: var(--rr-primary-light);
    border-color: var(--rr-cyan);
    color: var(--rr-ink);
}

.rr-catalog-hero__actions .public-discovery-share__button:focus-visible {
    outline: none;
    box-shadow: var(--rr-shadow-focus);
}


/* -------------------------------------------------------
   4. Section chrome (Service Type / Includes / Often booked with / Who offers)
   ------------------------------------------------------- */

.rr-catalog-types > h2,
.rr-catalog-includes > h2,
.rr-catalog-related > h2,
.rr-catalog-providers > h2 {
    margin: 0 0 4px;
    font-family: var(--rr-font);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--rr-ink);
}

.rr-catalog-types__help {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--rr-mute);
}


/* -------------------------------------------------------
   5. Service Type pills (and the "Often booked with" strip)
   -------------------------------------------------------
   `.rr-neighborhoods__pill` is already styled by homepage-v2.css; only the
   layout changes here. The shared grid is a rigid 6-column one built for a
   long neighbourhood list — with one or two pills it renders a lone sliver,
   so these two sections lay their pills out as a wrapping flex row. */

.rr-catalog-types .rr-neighborhoods__grid,
.rr-catalog-related .rr-neighborhoods__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.rr-catalog-types .rr-neighborhoods__pill,
.rr-catalog-related .rr-neighborhoods__pill {
    padding: 10px 20px;
    border-radius: var(--rr-radius-pill);
    font-size: 13.5px;
}

/* The page's own type. A <span>, not a link — no hover, no lift. */
.rr-catalog-types .rr-neighborhoods__pill--current {
    background: var(--rr-primary-light);
    border-color: var(--rr-cyan);
    color: var(--rr-ink);
    cursor: default;
}


/* -------------------------------------------------------
   6. Includes checklist
   -------------------------------------------------------
   No captions and no money — just what the price covers, one ticked line
   each. Two columns once there is room for them. */

.rr-catalog-includes {
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-card-lg);
    padding: 24px 26px;
}

.rr-catalog-includes > h2 {
    margin-bottom: 16px;
}

.rr-catalog-includes__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 32px;
}

.rr-catalog-includes__list > li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--rr-ink);
}

.rr-catalog-includes__list > li > .bi {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1.45;
    color: var(--rr-success);
}


/* -------------------------------------------------------
   7. "Who offers ..." — provider cards
   -------------------------------------------------------
   The same card language as the category hub's `.rr-org-item` (48px logo
   tile, bold name, whole card clickable), with the org's price for THIS
   atom on the trailing edge. No rating or service-area line: the catalog
   roster view model is title + logo + price only. */

.rr-catalog-providers__list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.rr-catalog-providers__item {
    margin: 0;
}

.rr-catalog-providers__item > a {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 14px 16px;
    background: var(--rr-paper);
    border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-card);
    text-decoration: none;
    transition: border-color var(--rr-transition), box-shadow var(--rr-transition), transform var(--rr-transition);
}

.rr-catalog-providers__item > a:hover {
    border-color: var(--rr-cyan);
    box-shadow: var(--rr-shadow-card);
    transform: translateY(-2px);
}

.rr-catalog-providers__item > a:focus-visible {
    outline: none;
    border-color: var(--rr-cyan);
    box-shadow: var(--rr-shadow-focus);
}

.rr-catalog-providers__item img {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 11px;
    object-fit: contain;
    background: var(--rr-primary-light);
    border: 1px solid var(--rr-line);
}

.rr-catalog-providers__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--rr-ink);
    overflow-wrap: anywhere;
}

.rr-catalog-providers__price {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 15px;
    font-weight: 800;
    color: var(--rr-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rr-catalog-providers__price-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--rr-mute);
}


/* -------------------------------------------------------
   8. Bound catalog atom on the category-variant page (/s/{slug})
   -------------------------------------------------------
   _HomeCategoryHub.cshtml composes the same blocks as one card between the
   hub's full-bleed sections, so it needs the page gutter the standalone page
   gets from `.rr-catalog-page`. */

.rr-variant-bound-service {
    max-width: var(--rr-page-max);
    margin: 40px auto;
}

.rr-variant-bound-service .rr-neighborhoods__inner {
    max-width: none;
}

.rr-variant-bound-service .rr-catalog-includes {
    margin-top: 24px;
    padding: 0;
    border: none;
    background: transparent;
}

.rr-variant-bound-service .rr-catalog-includes > h3 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--rr-ink);
}

.rr-variant-bound-service .rr-catalog-hero__cta {
    margin-top: 24px;
}


/* -------------------------------------------------------
   9. Responsive
   ------------------------------------------------------- */

@media (min-width: 720px) {
    .rr-catalog-includes__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 860px) {
    .rr-catalog-providers__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 719px) {
    .rr-catalog-page {
        padding: 20px 0 56px;
    }

    .rr-catalog-page > section + section {
        margin-top: 28px;
    }

    .rr-catalog-hero {
        padding: 24px 20px;
        border-radius: var(--rr-radius-card-lg);
    }

    .rr-catalog-hero h1 {
        font-size: 30px;
        letter-spacing: -0.6px;
    }

    .rr-catalog-hero__price > span:first-child {
        font-size: 24px;
    }

    .rr-catalog-hero__actions .rr-catalog-hero__cta,
    .rr-catalog-hero__actions .public-discovery-share__button {
        flex: 1 1 auto;
        justify-content: center;
    }

    .rr-catalog-types > h2,
    .rr-catalog-includes > h2,
    .rr-catalog-related > h2,
    .rr-catalog-providers > h2 {
        font-size: 19px;
    }

    .rr-catalog-includes {
        padding: 20px;
    }

    .rr-variant-bound-service {
        margin: 28px auto;
    }
}