/* Public Company Website -- one offering's own page.
   ============================================================
   OWNS: everything StoreContractHtmlRenderer::renderOfferingDetail()
   draws at /c/{slug}/store/item/{uuid} -- the breadcrumb (.cp-crumbs),
   the detail card and its gallery, the fact row, the actions, the
   description, and the related-offerings rail (.cp-related).

   Moved here from 15_category_browser.css, where .cp-offering began as a
   handful of rules for a placeholder page. It is now a page in its own
   right and does not belong in the browser's stylesheet.

   DO NOT put here:
     - the category browser -- 15_category_browser.css;
     - the page shell, header, footer -- 03_shell.css / 05_header.css;
     - anything reusable by other pages. The price line inside a card is
       14_store.css's .cp-store-price, reused unchanged.

   THEME: every accent resolves through --cp-primary / --cp-accent, which
   company_public_layout.php sets inline per company. Nothing here
   hard-codes a brand colour: this page serves clinics, salons, spas and
   barbers alike, and the mockup's blue belongs to one clinic. Tints use
   color-mix() with a literal fallback declared first, the pattern
   05_header.css already uses.

   GENERIC BY DESIGN: no rule here assumes what is being sold. Facts,
   pictures, description and actions are all optional and the layout
   closes up around whichever are missing. */

/* ------------------------------------------------------------------
   Breadcrumb
   ------------------------------------------------------------------
   Secondary on purpose: it orients, it does not compete with the title
   below it. */
.cp-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    /* Clear of the site header. The trail sat directly beneath it and
       read as part of the bar rather than as the start of the page. */
    margin-top: 18px;
    margin-bottom: 14px;
    font-size: .8125rem;
    line-height: 1.4;
}

.cp-crumbs__step {
    color: var(--cp-text-muted);
    text-decoration: none;
}

a.cp-crumbs__step:hover,
a.cp-crumbs__step:focus-visible {
    color: var(--cp-heading);
    text-decoration: underline;
}

/* The page you are on is not a link, and says so to assistive tech via
   aria-current in the markup rather than by colour alone. */
.cp-crumbs__step--current {
    color: var(--cp-heading);
    font-weight: 600;
}

.cp-crumbs__sep {
    color: var(--cp-text-faint);
}

/* ------------------------------------------------------------------
   The detail card
   ------------------------------------------------------------------
   Pictures left, words right, at roughly 43/57 -- the words carry more,
   so they get more. One surface, not a stack of nested cards. */
.cp-offering__card {
    display: grid;
    grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
    gap: 32px;
    align-items: start;
    padding: 24px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    background: var(--cp-surface);
    box-shadow: 0 1px 3px rgba(16, 21, 29, .04);
}

/* ------------------------------------------------------------------
   Gallery
   ------------------------------------------------------------------ */
.cp-offering__media {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* A button, because it opens the picture larger. Square so that a
   portrait and a landscape photograph occupy the same space and the
   words beside them do not move between offerings. */
.cp-offering__stage {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background: var(--cp-surface-soft);
    cursor: zoom-in;
}

.cp-offering__stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cp-offering__stage:focus-visible {
    outline: 2px solid var(--cp-accent, var(--cp-primary));
    outline-offset: 2px;
}

/* No picture at all: a drawn mark, never a broken image element. */
.cp-offering__stage--blank {
    display: grid;
    place-items: center;
    cursor: default;
}

.cp-offering__stage--blank svg {
    width: 48px;
    height: 48px;
    color: var(--cp-text-faint);
}

.cp-offering__zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cp-surface);
    box-shadow: 0 1px 4px rgba(16, 21, 29, .18);
    color: var(--cp-text-muted);
}

.cp-offering__zoom svg {
    width: 16px;
    height: 16px;
}

/* Five across, matching the reference's four pictures plus an overflow
   tile. The strip is only rendered from the second picture onwards. */
.cp-offering__thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.cp-offering__thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    background: var(--cp-surface-soft);
    cursor: pointer;
    transition: border-color var(--cp-transition);
}

.cp-offering__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cp-offering__thumb:hover {
    border-color: var(--cp-text-faint);
}

.cp-offering__thumb:focus-visible {
    outline: 2px solid var(--cp-accent, var(--cp-primary));
    outline-offset: 2px;
}

/* The showing picture. A ring AND a lifted opacity, so the state does
   not rest on colour alone. */
.cp-offering__thumb.is-active {
    border-color: var(--cp-primary, var(--cp-heading));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cp-primary, #137A5A) 35%, transparent);
}

.cp-offering__thumb:not(.is-active) img {
    opacity: .72;
}

.cp-offering__thumb--more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: var(--cp-text-muted);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.1;
}

.cp-offering__thumb-more {
    font-size: .6875rem;
    font-weight: 500;
}

/* ------------------------------------------------------------------
   The words
   ------------------------------------------------------------------ */
.cp-offering__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.cp-offering__eyebrow {
    margin: 0;
    color: var(--cp-primary, var(--cp-text-muted));
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* Long names wrap and balance rather than overflow. This is the one
   thing on the page that must always be readable in full. */
.cp-offering__title {
    margin: 0;
    color: var(--cp-heading);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

/* The price is 14_store.css's .cp-store-price; only its size and spacing
   change here, where it is a headline figure rather than a line in a
   list. */
.cp-offering__body > .cp-store-price {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
}

.cp-offering__lede {
    color: var(--cp-text-muted);
    font-size: .9375rem;
    line-height: 1.6;
    max-width: 62ch;
}

.cp-offering__lede p {
    margin: 0 0 .6em;
}

.cp-offering__lede p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Facts
   ------------------------------------------------------------------
   A bordered strip, not four cards: this is secondary to the name, the
   price and the buttons, and four cards would outweigh all three. Only
   the facts the app can answer truthfully are rendered, so the row may
   hold two, three, or not appear at all. */
/* One row, all four across, on a desktop. The panel sits in the summary
   COLUMN -- half the page -- so the type is stepped down here rather
   than everywhere: it is a row of short labelled values, not reading
   matter, and at this size four of them still hold their own line. A
   fixed four-column track rather than wrapping, so the row stays a row
   whatever an offering happens to have. The tablet and phone rules below
   take it to two across and then one, where four will not fit however
   small the type. */
.cp-offering__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 14px;
    margin-top: 6px;
    padding: 14px 8px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background: var(--cp-surface-soft);
    background: color-mix(in srgb, var(--cp-accent, var(--cp-primary, #137A5A)) 5%, transparent);
}

/* Top-aligned, not centred. An offering in two categories wraps its
   value onto a second or third line, and centring made every other
   fact in the row float to a different height off the back of it. From
   the top, the four labels sit on one line whatever the values do. */
.cp-offering__fact {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.cp-offering__fact-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--cp-radius-sm);
    background: var(--cp-surface);
    color: var(--cp-primary, var(--cp-text-muted));
}

.cp-offering__fact-icon svg {
    width: 15px;
    height: 15px;
}

/* An uploaded category icon, not a built-in glyph. Contained rather
   than cropped: these are marks drawn with their own margins, and cover
   would cut the edge off one drawn tight to its canvas. The tile drops
   its tint so a coloured icon is not sitting on a coloured ground. */
.cp-offering__fact-icon--art {
    background: transparent;
}

.cp-offering__fact-icon--art img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.cp-offering__fact-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cp-offering__fact-label {
    color: var(--cp-text-faint);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.3;
    text-transform: uppercase;
}

.cp-offering__fact-value {
    color: var(--cp-heading);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
}

/* ------------------------------------------------------------------
   Actions
   ------------------------------------------------------------------
   Its own block so an offering whose actions differ -- a physical
   product wanting "Add to cart" -- restyles here and nowhere else. */
.cp-offering__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.cp-offering__cta {
    display: inline-flex;
    flex: 1 1 200px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* 48px: this is the page's main action and is mostly pressed with a
       thumb. */
    min-height: 48px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: var(--cp-radius-md);
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--cp-transition), border-color var(--cp-transition);
}

.cp-offering__cta-icon {
    display: grid;
    place-items: center;
}

.cp-offering__cta-icon svg {
    width: 17px;
    height: 17px;
}

.cp-offering__cta--primary {
    background: var(--cp-primary, var(--cp-heading));
    border-color: var(--cp-primary, var(--cp-heading));
    color: var(--cp-inverse);
}

.cp-offering__cta--primary:hover,
.cp-offering__cta--primary:focus-visible {
    background: color-mix(in srgb, var(--cp-primary, #137A5A) 88%, #000);
}

.cp-offering__cta--secondary {
    background: var(--cp-surface);
    border-color: var(--cp-border);
    color: var(--cp-heading);
}

.cp-offering__cta--secondary:hover,
.cp-offering__cta--secondary:focus-visible {
    border-color: color-mix(in srgb, var(--cp-primary, #137A5A) 45%, var(--cp-border));
    background: var(--cp-surface-soft);
}

.cp-offering__cta:focus-visible {
    outline: 2px solid var(--cp-accent, var(--cp-primary));
    outline-offset: 2px;
}

.cp-offering__support {
    margin: 2px 0 0;
    color: var(--cp-text-faint);
    font-size: .8125rem;
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   Description
   ------------------------------------------------------------------
   One heading, not a tab strip -- there is exactly one thing to read
   here, and inactive tabs would promise sections nobody wrote. The
   heading keeps the reference's underlined-tab treatment because it is a
   good label, not because tabs exist. */
.cp-offering__about {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 20px;
    padding: 24px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    background: var(--cp-surface);
}

.cp-offering__about-title {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cp-primary, var(--cp-heading));
    color: var(--cp-heading);
    font-size: 1rem;
    font-weight: 700;
    display: inline-block;
}

.cp-offering__about-text {
    color: var(--cp-text);
    font-size: .9375rem;
    line-height: 1.7;
    max-width: 70ch;
}

.cp-offering__about-text p {
    margin: 0 0 .85em;
}

.cp-offering__about-text p:last-child {
    margin-bottom: 0;
}

/* The panel names the offering. No slogan and no testimonial: nothing on
   this page claims anything the business did not write itself. */
.cp-offering__feature {
    padding: 22px;
    border-radius: var(--cp-radius-md);
    background: var(--cp-surface-soft);
    background: color-mix(in srgb, var(--cp-accent, var(--cp-primary, #137A5A)) 8%, transparent);
}

.cp-offering__feature-mark {
    display: block;
    color: var(--cp-primary, var(--cp-text-faint));
    font-size: 2.5rem;
    font-weight: 700;
    line-height: .6;
    opacity: .5;
}

.cp-offering__feature-name {
    margin: 10px 0 0;
    color: var(--cp-heading);
    font-size: 1.125rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   Related offerings
   ------------------------------------------------------------------
   A scroller, not a slider: it scrolls natively, snaps, and works with a
   finger, a trackpad or a keyboard before any script loads. The arrows
   only nudge it, so losing the script costs the buttons and nothing
   else. */
.cp-related {
    margin-top: 24px;
}

.cp-related__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.cp-related__eyebrow {
    margin: 0 0 4px;
    color: var(--cp-text-faint);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cp-related__title-main {
    margin: 0;
    color: var(--cp-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.cp-related__lede {
    margin: 6px 0 0;
    color: var(--cp-text-muted);
    font-size: .875rem;
}

.cp-related__nav {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.cp-related__arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--cp-border);
    border-radius: 50%;
    background: var(--cp-surface);
    cursor: pointer;
    transition: border-color var(--cp-transition), background var(--cp-transition);
}

/* Chevrons drawn in CSS: pure affordance, already hidden from assistive
   tech, and the buttons carry real labels in the markup. */
.cp-related__arrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--cp-heading);
    border-right: 2px solid var(--cp-heading);
    transform: rotate(-135deg);
    margin-left: 3px;
}

.cp-related__arrow--next::before {
    transform: rotate(45deg);
    margin-left: -3px;
}

.cp-related__arrow:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--cp-primary, #137A5A) 45%, var(--cp-border));
    background: var(--cp-surface-soft);
}

.cp-related__arrow:focus-visible {
    outline: 2px solid var(--cp-accent, var(--cp-primary));
    outline-offset: 2px;
}

/* Dimmed at the ends, not hidden: a control that vanishes moves the one
   beside it. */
.cp-related__arrow:disabled {
    opacity: .4;
    cursor: default;
}

.cp-related__rail {
    display: grid;
    grid-auto-flow: column;
    /* A fixed track, NOT minmax(0, ...): a minimum of zero lets every
       card shrink to share the row, which is exactly what a scroller
       must not do -- eight of them collapsed to thumbnails instead of
       four filling the width and the rest waiting offscreen. */
    grid-auto-columns: calc(25% - 15px);
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Room for the cards' focus ring and shadow, pulled back so the row
       still lines up with the text above it. */
    margin: 0 -4px;
    padding: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.cp-related__rail::-webkit-scrollbar {
    display: none;
}

.cp-related__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background: var(--cp-surface);
    color: inherit;
    text-decoration: none;
    scroll-snap-align: start;
    transition: border-color var(--cp-transition), box-shadow var(--cp-transition);
}

a.cp-related__card:hover,
a.cp-related__card:focus-visible {
    border-color: color-mix(in srgb, var(--cp-primary, #137A5A) 40%, var(--cp-border));
    box-shadow: 0 2px 8px rgba(16, 21, 29, .08);
}

a.cp-related__card:focus-visible {
    outline: 2px solid var(--cp-accent, var(--cp-primary));
    outline-offset: 2px;
}

.cp-related__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--cp-surface-soft);
}

.cp-related__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cp-related__media--blank {
    display: grid;
    place-items: center;
    color: var(--cp-text-faint);
}

.cp-related__media--blank svg {
    width: 28px;
    height: 28px;
}

.cp-related__body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    padding: 14px 44px 14px 14px;
}

.cp-related__title {
    color: var(--cp-heading);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.cp-related__category {
    color: var(--cp-text-faint);
    font-size: .8125rem;
}

.cp-related__body .cp-store-price {
    margin: 4px 0 0;
}

.cp-related__go {
    position: absolute;
    right: 14px;
    bottom: 16px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cp-surface-soft);
    background: color-mix(in srgb, var(--cp-accent, var(--cp-primary, #137A5A)) 12%, transparent);
}

.cp-related__go::before {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid var(--cp-primary, var(--cp-heading));
    border-right: 2px solid var(--cp-primary, var(--cp-heading));
    transform: rotate(45deg);
    margin-left: -2px;
}

/* ------------------------------------------------------------------
   The larger viewer
   ------------------------------------------------------------------
   Opened by offering_detail.js; absent from the markup until then, so a
   page without script simply has no lightbox rather than a dead one. */
.cp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(10, 22, 40, .82);
}

.cp-lightbox[hidden] {
    display: none !important;
}

.cp-lightbox__image {
    max-width: min(1100px, 100%);
    max-height: 100%;
    border-radius: var(--cp-radius-md);
    object-fit: contain;
}

.cp-lightbox__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #0a1628;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.cp-lightbox__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Tablet
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
    .cp-offering__card {
        gap: 24px;
        padding: 20px;
    }

    .cp-offering__title {
        font-size: 1.5rem;
    }

    /* Two across: four will not fit on one line here however small the
       type gets, and shrinking it further to force them would cost more
       than the row is worth. The type goes back up with the room. */
    .cp-offering__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .cp-offering__fact-label {
        font-size: .6875rem;
    }

    .cp-offering__fact-value {
        font-size: .875rem;
    }

    .cp-offering__about {
        grid-template-columns: minmax(0, 1fr);
    }

    .cp-related__rail {
        grid-auto-columns: calc(50% - 10px);
    }
}

/* ------------------------------------------------------------------
   Phone
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .cp-offering__card {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 16px;
        border-radius: var(--cp-radius-md);
    }

    .cp-offering__title {
        font-size: 1.3125rem;
    }

    .cp-offering__about {
        margin-top: 16px;
        padding: 18px;
        border-radius: var(--cp-radius-md);
    }

    /* Naming the offering directly under its own description is saying
       the same thing twice on a screen this narrow. */
    .cp-offering__feature {
        display: none;
    }

    /* Full width each, stacked: two half-width buttons at this size are
       smaller than a thumb wants, and Book must stay dominant. */
    .cp-offering__cta {
        flex: 1 1 100%;
    }

    /* The arrows go with the finger that replaces them. */
    .cp-related__nav {
        display: none;
    }

    /* A sliver of the next card, so the row visibly continues. */
    .cp-related__rail {
        grid-auto-columns: 78%;
        gap: 14px;
    }

    .cp-related__head {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-offering__cta,
    .cp-offering__thumb,
    .cp-related__card,
    .cp-related__arrow {
        transition: none;
    }

    .cp-related__rail {
        scroll-behavior: auto;
    }
}