/* ==========================================================
   PUBLIC COMPANY WEBSITE -- STORE (.cp-store-*)
   ----------------------------------------------------------
   What is left after the Store was moved onto the shared Public Website
   presentation system: the page's own Hero band, and the price line on
   an offering card. Everything else a Store page draws -- the section
   shell, grid/carousel/blocks/list layouts, alignment, full width,
   background, per-device visibility, and the offering cards themselves --
   is the SHARED Website implementation (07_homepage.css,
   09_layout_alignment.css, 10_custom_sections.css), rendered from the
   same partials a Homepage custom section uses.

   This file previously carried a parallel layout system
   (.cp-store-collection / .cp-store-items--grid|carousel|list|blocks /
   .cp-store-item / .cp-store-row / .cp-store-break, ~230 lines) that
   re-derived those same behaviours with different class names. It was
   removed rather than renamed: two implementations of "carousel" meant
   every responsive fix had to be made twice, and they had already
   drifted (the Store's carousel used a fixed card basis where the shared
   one grows to fill the row).

   Do NOT add layout, alignment, spacing or responsive rules here. If a
   Store page needs a new arrangement, it belongs in the shared Website
   layout vocabulary so every consumer gets it -- that is the whole point
   of the consolidation. Only genuinely offering-specific visual content
   belongs in this file.

   Do NOT place general capability-page chrome here (page heading, site
   header/nav) -- that's Company::public.capability_page's own shared
   shell.
========================================================== */

/* ==========================================================
   STORE HERO
   ----------------------------------------------------------
   The page's own identity band -- company data, always platform-supplied
   (an app cannot contribute a hero; see StoreContractBuilder). Kept as
   its own component rather than the shared section shell because it is a
   full-bleed image band with a gradient overlay, not a titled content
   section -- exactly the same reason the Homepage's own hero is excluded
   from full-width/title-visibility handling.

   Deliberately not a reuse of .cp-hero (06_hero.css, the native homepage
   Hero) or .cp-panel-hero (11_panel_hero.css): same word, different data
   shape and a different owner, so coupling their CSS would make this
   page's evolution hostage to either of those.
========================================================== */

.cp-store-hero {
    position: relative;
    overflow: hidden;

    /* The same 20px rhythm, and now stated the same WAY .cp-home-section
       states it: margin-top.
       It was margin-bottom at first, to keep the first band flush under
       the header. That worked in one direction only -- a section's own
       margin-top pushes it off a hero above it, but nothing pushed a
       hero off a section above it, so a collection followed by a custom
       hero had no gap at all. Marginated from the top like everything
       else, every pairing gets exactly one 20px gap (adjacent margins
       collapse), and the flush-to-header case is handled where it
       actually belongs -- by the rule below, on the first band only. */
    margin-top: 20px;
    background: var(--cp-surface-soft) center / cover no-repeat;
    min-height: 220px;
    display: flex;
    align-items: flex-end;
}

.cp-store-hero__overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 24px;
    /* Strong enough for the worst case, not the average one: a clinic
       photo is brightly lit and mostly white, and a scrim that fades from
       fully transparent leaves a heading sitting on bare highlights. The
       --plain variant below switches this off entirely, since with no
       picture behind it there is nothing to scrim. */
    background: linear-gradient(180deg, rgba(8, 20, 35, .32), rgba(8, 20, 35, .78));
    color: var(--cp-inverse);
}

.cp-store-hero__heading {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 800;
}

.cp-store-hero__text {
    margin: 0;
    font-size: 14px;
    opacity: .92;
    max-width: 60ch;
}

/* ==========================================================
   OFFERING PRICE
   ----------------------------------------------------------
   The one genuinely Store-specific thing on a card. It sits inside the
   shared .cp-custom-card__body, after the shared title/text, so it
   inherits every layout the shared card already supports rather than
   needing a variant per arrangement.
========================================================== */

.cp-store-price {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--cp-primary, #137A5A);
}

/* A list row puts the price at the end of the row rather than under the
   text, so it reads as a price column down the list. */
.cp-home-section--layout-list .cp-store-price {
    margin-top: 2px;
}

@media (max-width: 560px) {
    .cp-store-hero {
        border-radius: 0;

        /* NO NEGATIVE MARGINS HERE.
           This used to pull the band out by 20px a side to escape the
           shell's gutter. At this same breakpoint 03_shell.css already
           removes that gutter from .cp-shell--home / --sections, so the
           two compounded: the shell was 390px wide with no padding and
           the hero became 430px starting at x=-20, overflowing the
           viewport by 20px on each side and clipping the picture at both
           edges.

           Measured, not reasoned: documentElement scrollWidth 410 against
           clientWidth 390. The shell is already edge to edge on the pages
           a hero appears on, so the band needs nothing but to fill it. */
    }

}

/* ==========================================================
   CUSTOM HERO
   ----------------------------------------------------------
   An app-configured promotional statement. Shares the identity hero's
   image-band treatment so a page reads consistently, but unlike the
   identity hero it is an ordinary section an owner arranges -- so it
   participates in full width via the shared modifier rather than a
   Store-specific rule.
========================================================== */

/* THE custom hero's height -- one number, tweak it here.
   Floor and ceiling together, so the band is exactly this tall. The split,
   full-width and mobile rules further down all read this same property
   (each with the fallback the identity hero keeps), so no other rule can
   quietly win over it -- three separate min-heights used to, and raising
   this alone would have changed nothing. .cp-store-hero is overflow:
   hidden, so copy taller than this is cut rather than spilling. */
.cp-store-hero--custom {
    --cp-hero-height: 400px;

    min-height: var(--cp-hero-height);
    max-height: var(--cp-hero-height);
}

.cp-store-hero.cp-home-section--full-width {
    border-radius: 0;

    /* Room to be a banner. A contained hero keeps the smaller frame,
       because it sits in the column alongside everything else. A custom
       hero brings its own height (--cp-hero-height); the identity hero
       has none and gets the fallback. */
    min-height: var(--cp-hero-height, 400px);
}

/* Display type, but only where there is width to carry it. */
.cp-store-hero.cp-home-section--full-width .cp-store-hero__heading {
    font-size: clamp(28px, 3.2vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 18ch;
}

.cp-store-hero.cp-home-section--full-width .cp-store-hero__text {
    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.5;
    max-width: 46ch;
}

/* Only the padding here -- the scrim itself is now on the base overlay,
   because a contained hero puts text over the same kind of photograph. */
.cp-store-hero.cp-home-section--full-width .cp-store-hero__overlay {
    padding: 40px 24px;
}

/* Right- and centre-aligned blocks read better with the text tracking
   the same edge as the block itself. */
.cp-store-hero.cp-home-section--align-right .cp-store-hero__heading,
.cp-store-hero.cp-home-section--align-right .cp-store-hero__text {
    text-align: right;
}

.cp-store-hero.cp-home-section--align-center .cp-store-hero__heading,
.cp-store-hero.cp-home-section--align-center .cp-store-hero__text {
    text-align: center;
}

/* ==========================================================
   HERO OVERLAY BLOCK
   ----------------------------------------------------------
   Shared by both heroes: the identity band and the custom one. The
   band's BACKGROUND is what full width stretches; its WORDS are not.
   Edge-to-edge text would run to the corners of a wide monitor and stop
   lining up with every section underneath it, so the inner block stays
   on the page's own measure -- the same split .cp-home-section__inner
   makes for an ordinary full-width section.
========================================================== */

.cp-store-hero__inner {
    /* The overlay already insets its content by 24px a side. Subtracting
       that here is what keeps the words in the SAME place whether full
       width is on or off -- cap the inner at the bare content width and
       switching the toggle would visibly shift the heading sideways. */
    max-width: calc(var(--cp-content-width) - 48px);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Alignment moves the whole block -- heading, copy and button together.
   .cp-home-section--align-* already supplies the text-align half
   globally (09_layout_alignment.css); this is the half that positions
   the block itself, which text-align cannot do once the copy carries a
   max-width of its own (.cp-store-hero__text is capped at 60ch, so a
   right-aligned hero would otherwise keep sitting on the left). */
.cp-store-hero.cp-home-section--align-center .cp-store-hero__inner {
    align-items: center;
}

.cp-store-hero.cp-home-section--align-right .cp-store-hero__inner {
    align-items: flex-end;
}

/* The custom hero's button. Same pill treatment as a custom card's CTA
   (.cp-custom-card__cta) so the two read as the same control, sized up
   for a hero and spaced off the copy above it. */
.cp-store-hero__cta {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 22px;

    background: var(--cp-primary, #137A5A);
    border-radius: var(--cp-radius-pill);
    color: var(--cp-inverse);

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.cp-store-hero__cta:hover {
    opacity: .92;
}

.cp-store-hero__cta:focus-visible {
    outline: 2px solid var(--cp-inverse);
    outline-offset: 2px;
}

/* The page's FIRST band sits flush under the site header --
   .cp-shell--sections deliberately zeroes the shell's top padding for
   exactly this. Positional rather than a flag, so it stays true however
   an owner reorders the page. The panel column gets the same treatment:
   .cp-home-columns__panel-inner already carries the 20px itself, and a
   hero adding its own on top would push the sidebar out of line with
   the main column beside it. */
.cp-shell--sections > :first-child .cp-store-hero,
.cp-home-columns__panel-inner > :first-child .cp-store-hero {
    margin-top: 0;
}

/* ==========================================================
   SPLIT HERO  (text one side, picture the other)
   ----------------------------------------------------------
   What the alignment control MEANS on a hero that has a picture.

   Centred keeps the full-bleed treatment: one photograph, words laid
   over the middle of it, a scrim top-to-bottom to keep them readable.

   Left or right is a different thing entirely -- it says the words
   belong on their own side, so the band becomes two columns. The
   picture holds one side, the words sit on a panel on the other, and a
   HORIZONTAL gradient makes the join instead of a dark curtain drawn
   over the whole photograph. A vertical scrim in a two-column band
   dims the picture it is supposed to be showing off.

   The panel is the section's own background colour when one is set
   (--cp-hero-panel, written by the renderer) and the page surface
   otherwise, so the same control that colours a section colours this.
========================================================== */

.cp-store-hero--custom.cp-home-section--align-left,
.cp-store-hero--custom.cp-home-section--align-right {
    /* The panel has to run the FULL height of the band -- it is a column,
       not a caption. Centring the overlay instead leaves the photograph
       showing above and below it as a stripe. So the overlay stretches
       and centres its own contents. */
    align-items: stretch;
    min-height: var(--cp-hero-height, 360px);
}

.cp-store-hero--custom.cp-home-section--align-left .cp-store-hero__overlay,
.cp-store-hero--custom.cp-home-section--align-right .cp-store-hero__overlay {
    display: flex;
    align-items: center;

    /* The BAND may bleed to the window edges; its WORDS may not. Without
       this a full-width split puts the heading hard against the window,
       out of line with every section below it -- the wider the monitor,
       the further out it drifts. The classic full-bleed-background,
       content-measure-content trick: pad by half the overspill, or by
       the ordinary gutter when the band is already inside the shell. */
    padding-inline: max(24px, calc((100% - var(--cp-content-width)) / 2));
}

.cp-store-hero--custom.cp-home-section--align-left .cp-store-hero__overlay {
    justify-content: flex-start;
}

.cp-store-hero--custom.cp-home-section--align-right .cp-store-hero__overlay {
    justify-content: flex-end;
}

/* The inner IS the column here, rather than a full-width box with its
   children shoved to one edge. That difference is what lets the button
   start on the same edge as the heading above it -- pushed individually,
   a short button lands under the END of the text instead of its start. */
.cp-store-hero--custom.cp-home-section--align-left .cp-store-hero__inner,
.cp-store-hero--custom.cp-home-section--align-right .cp-store-hero__inner {
    width: 42%;
    max-width: 520px;
    margin: 0;

    align-items: flex-start;
    text-align: left;
}

/* The subject moves to the side the panel is NOT on, so the fade never
   crosses a face. */
.cp-store-hero--custom.cp-home-section--align-left {
    background-position: right center;
}

.cp-store-hero--custom.cp-home-section--align-right {
    background-position: left center;
}

.cp-store-hero--custom.cp-home-section--align-left .cp-store-hero__overlay {
    background: linear-gradient(
        to right,
        var(--cp-hero-panel, var(--cp-surface)) 0%,
        var(--cp-hero-panel, var(--cp-surface)) 34%,
        transparent 64%
    );
}

.cp-store-hero--custom.cp-home-section--align-right .cp-store-hero__overlay {
    background: linear-gradient(
        to left,
        var(--cp-hero-panel, var(--cp-surface)) 0%,
        var(--cp-hero-panel, var(--cp-surface)) 34%,
        transparent 64%
    );
}

/* On a panel rather than on a photograph, so ordinary page ink. */
.cp-store-hero--custom.cp-home-section--align-left .cp-store-hero__overlay,
.cp-store-hero--custom.cp-home-section--align-right .cp-store-hero__overlay {
    color: var(--cp-text);
}

.cp-store-hero--custom.cp-home-section--align-left .cp-store-hero__heading,
.cp-store-hero--custom.cp-home-section--align-right .cp-store-hero__heading {
    color: var(--cp-heading);
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.cp-store-hero--custom.cp-home-section--align-left .cp-store-hero__text,
.cp-store-hero--custom.cp-home-section--align-right .cp-store-hero__text {
    color: var(--cp-text-muted);
    opacity: 1;
}

/* The words take a column, not the width of the band -- without this the
   heading runs across the photograph and the split stops reading. */
/* Alignment moves the COLUMN, not the ragged edge inside it: a panel
   whose lines are also right-aligned gives every line a different
   starting point, which is the one thing a reader's eye keeps returning
   to. So the block goes right; the words in it still start on one edge. */
.cp-store-hero--custom.cp-home-section--align-left .cp-store-hero__heading,
.cp-store-hero--custom.cp-home-section--align-left .cp-store-hero__text,
.cp-store-hero--custom.cp-home-section--align-right .cp-store-hero__heading,
.cp-store-hero--custom.cp-home-section--align-right .cp-store-hero__text {
    max-width: 100%;
    text-align: left;
}

/* A dark panel inverts its own ink, same luminance rule the section
   heading and the flat cards already use. */
.cp-store-hero--custom.cp-store-hero--on-dark .cp-store-hero__overlay {
    color: var(--cp-inverse);
}

.cp-store-hero--custom.cp-store-hero--on-dark .cp-store-hero__heading {
    color: var(--cp-inverse);
}

.cp-store-hero--custom.cp-store-hero--on-dark .cp-store-hero__text {
    color: var(--cp-inverse);
    opacity: .88;
}

/* Below the split's comfortable width there is no room for two columns,
   so it stacks: photograph on top, words on the panel underneath. */
/* The in-flow copy of the hero picture. Drawn only on a phone -- see the
   720px block below -- so on every wider screen it must take up no room
   at all, not merely be invisible. */
.cp-store-hero__img {
    display: none;
}

@media (max-width: 720px) {
    /* ------------------------------------------------------------------
       The hero stops being a band with words on it
       ------------------------------------------------------------------
       It was a fixed-height box with the picture as a cover background and
       the words over a gradient. Cover always fills the box and crops the
       rest, so a 1600x525 banner in a 412x400 box showed 412 of its 1219
       scaled pixels -- about a third of the image, taken from the middle.

       Height is the only lever cover offers, and the height that shows a
       3:1 banner whole is 135px, which is far less than the words need. So
       the phone stops overlaying: the picture is a real element at its own
       aspect ratio, and the words sit underneath it in normal flow.

       Nothing is cropped and nothing is scaled past its own size. The band
       is as tall as the picture plus the words, rather than a number
       chosen in advance. */
    /* EVERY RULE BELOW CARRIES THE ALIGNMENT CLASS.
       Not for elegance -- for specificity. The split layout is written as
       `.cp-store-hero--custom.cp-home-section--align-left .cp-store-hero__inner`
       (three classes). A media query changes nothing about specificity, so
       a two-class override inside one loses to it, silently: the first
       version of this block left the text column at width:42% on a phone
       and the button wrapping inside it, while every rule here looked
       correct in isolation. Match the shape of what you are overriding. */
    .cp-store-hero--custom.cp-home-section--align-left,
    .cp-store-hero--custom.cp-home-section--align-right,
    .cp-store-hero--custom.cp-home-section--align-center {
        display: block;
        /* The fixed height was the whole problem. */
        min-height: 0;
        max-height: none;
        /* The background copy would otherwise sit behind the real one and
           show through wherever the picture does not reach. */
        background-image: none !important;
    }

    /* The picture fills a band of its own, cropped left and right rather
       than fitted whole.
       ------------------------------------------------------------------
       Fitting the WIDTH showed the entire file, which sounds better until
       you see it: a 3:1 banner becomes a 128px strip, and whatever dead
       space the file carries -- this one has 219px of white down its left,
       13.7% of the image -- is shown faithfully along with it.

       Covering the HEIGHT instead gives the band a height worth having and
       takes the crop off the sides, where a centred subject can least
       afford to lose anything and a margin can most. One number decides
       it, below.

       Change the height and nothing else moves: the overlay beneath is in
       normal flow, so the band grows and shrinks on its own. */
    .cp-store-hero--custom .cp-store-hero__img {
        display: block;
        width: 100%;
        height: var(--cp-hero-img-height, 200px);
        object-fit: cover;
        object-position: center;
    }

    /* No gradient. It existed to keep white text legible over a
       photograph, and nothing is over the photograph any more -- so the
       words take ordinary page ink on the section's own surface. */
    .cp-store-hero--custom.cp-home-section--align-left .cp-store-hero__overlay,
    .cp-store-hero--custom.cp-home-section--align-right .cp-store-hero__overlay,
    .cp-store-hero--custom.cp-home-section--align-center .cp-store-hero__overlay {
        display: block;
        background: var(--cp-hero-panel, var(--cp-surface));
        color: var(--cp-text);
        padding: 12px 20px 16px;
        padding-inline: 20px;
    }

    /* COMPACT: the words are an introduction, not the page.
       ------------------------------------------------------------------
       At desktop sizes this block ran 192px on a phone -- a 27px heading,
       three lines of 14px copy and a 42px pill, plus 36px of padding.
       Below a 200px picture that is 392px of hero before a single service
       is visible.

       Now it is about three lines: the heading, two lines of copy, and a
       button sized to sit with them. The copy is CLAMPED rather than
       shortened -- the full sentence is an owner's to write, and cutting
       it in the renderer would make the phone disagree with every other
       client about what the page says. */
    /* Three classes, because the split layout sets this heading with
       three (`--custom` + alignment + element) and a two-class rule loses
       to it inside a media query just as it does outside one. The first
       version of this rule set margin-bottom successfully and font-size
       not at all, which is what that failure looks like: partially
       applied, so it reads as a value being ignored rather than a rule
       being outranked. */
    .cp-store-hero--custom.cp-home-section--align-left .cp-store-hero__heading,
    .cp-store-hero--custom.cp-home-section--align-right .cp-store-hero__heading,
    .cp-store-hero--custom.cp-home-section--align-center .cp-store-hero__heading {
        color: var(--cp-heading);
        margin-bottom: 4px;
        font-size: 18px;
        line-height: 1.2;
    }

    .cp-store-hero--custom .cp-store-hero__text {
        color: var(--cp-text-muted);
        opacity: 1;
        /* The 60ch cap is a reading measure for a wide column; on a phone
           the column is already narrower than that and the cap only ever
           makes it narrower still. */
        max-width: none;
        font-size: 13px;
        line-height: 1.4;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .cp-store-hero--custom .cp-store-hero__cta {
        margin-top: 10px;
        padding: 9px 16px;
        font-size: 13px;
    }

    .cp-store-hero--custom.cp-home-section--align-left .cp-store-hero__inner,
    .cp-store-hero--custom.cp-home-section--align-right .cp-store-hero__inner,
    .cp-store-hero--custom.cp-home-section--align-center .cp-store-hero__inner {
        width: 100%;
        max-width: none;
        margin: 0;
        align-items: flex-start;
        text-align: left;
    }

    /* An owner who set a dark panel colour still gets inverted ink, the
       same as at every other width. */
    .cp-store-hero--custom.cp-store-hero--on-dark .cp-store-hero__overlay,
    .cp-store-hero--custom.cp-store-hero--on-dark .cp-store-hero__heading,
    .cp-store-hero--custom.cp-store-hero--on-dark .cp-store-hero__text {
        color: var(--cp-inverse);
    }
}

/* Inside the side panel column a hero has far less width, so its type
   scales down rather than overflowing the narrower column. */
.cp-home-columns__panel .cp-store-hero {
    min-height: 160px;
    margin-bottom: 16px;
}

.cp-home-columns__panel .cp-store-hero__heading {
    font-size: 18px;
}

/* A hero with no picture behind it.
   ----------------------------------------------------------
   The default treatment is white text over a dark gradient, which only
   works because a photograph is behind it. An owner can now deliberately
   choose "no picture" for a page's hero, so that band has to stand on its
   own: no gradient, ordinary page text, and a shorter box, because 220px
   of empty panel is a hole rather than a hero.

   Flutter's StoreHero has always branched this way. This is the web side
   catching up, not a new idea. */

.cp-store-hero--plain {
    min-height: 0;
    background-image: none !important;
    background-color: var(--cp-surface-soft);
}

.cp-store-hero--plain .cp-store-hero__overlay {
    background: none;
    color: var(--cp-text);
}

.cp-store-hero--plain .cp-store-hero__heading {
    color: var(--cp-heading);
}

.cp-store-hero--plain .cp-store-hero__text {
    color: var(--cp-text-muted);
    opacity: 1;
}

/* ==========================================================
   MOBILE GUTTER  (last, deliberately)
   ----------------------------------------------------------
   The 560px rule near the top of this file bleeds the hero 20px past
   the shell on each side, which eats most of the overlay's own inset
   and leaves the heading almost touching the screen edge. The padding
   below covers the bleed AND the gutter, hence the sum.

   It lives at the END of the file because a media query adds no
   specificity: .cp-home-section--full-width's own 40px 24px padding is
   declared later than the 560px block, so an override placed up there
   loses on source order and silently does nothing. It did, once.
========================================================== */

@media (max-width: 560px) {
    .cp-store-hero .cp-store-hero__overlay,
    .cp-store-hero.cp-home-section--full-width .cp-store-hero__overlay {
        padding: 28px calc(20px + 20px);
    }
}