/* Showcases surface (/uk/showcases + /uk/showcases/{slug}).
 *
 * The landing rules below are COPIED from calculator.css (the /uk/calculators landing) so the two landing
 * pages share a look, per the product requirement. calculator.css is NOT touched: this is a duplicate, not
 * a shared file, so a future calculator restyle can never silently move the showcases and vice versa. The
 * class names are renamed .calc-* -> .showcase-*; the shared chrome selectors (body.plain-page, .explore-*)
 * are kept verbatim because they override the layout classes that live in the shared app.css.
 *
 * The DETAIL page (/uk/showcases/{slug}) needs nothing here beyond the plain-page chrome: it reuses the
 * explore-* / showcase-badge card classes already present in the served client app.css.
 */

/* --- Landing header (copied from .calc-header / .calc-lede) --- */
.showcase-header {
    margin-bottom: 1.5rem;
}

.showcase-header h1 {
    margin: 0.5rem 0;
    font-size: 2.3rem;
    font-weight: 700;
    text-align: center;
}

.showcase-lede {
    color: #444;
    margin: 0 0 0.4rem;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: #ccc solid 1px;
}

/* --- Landing card grid (copied from .calc-index-cards / .calc-card / .calc-card-*) --- */

/* Card row uses flex so cards pack at fixed width and centre within available space (grid's
   auto-fill + 1fr would stretch instead of centring). On wide screens cards sit centred and close
   together; on narrow screens they wrap to the next row. */
.showcase-index-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.showcase-index-cards .showcase-card {
    flex: 0 1 320px;
}

.showcase-card {
    display: block;
    margin: 15px;
    padding: 2rem 1.3rem;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 6px;
    text-decoration: none;
    color: #222;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Hover: only border + shadow change. Title gets the underline cue, the card itself does not lift -
   blue + underline are reserved for actionable links, not for shifting layout. */
.showcase-card:hover {
    border-color: #2c5fa6;
    box-shadow: 0 2px 8px rgba(44, 95, 166, 0.1);
    text-decoration: none;
}

/* Pill row (the type badge) sits above the title, horizontally centered. */
/* wrap + centre because this row held exactly ONE child until the household pill joined it. Without
   flex-wrap a second pill overflows the card horizontally on a narrow viewport (the pills are
   white-space: nowrap and a flex item's default min-width: auto stops them shrinking out of it), and
   without align-items the default `stretch` pulls the shorter pill to the taller badge's height with its
   text pinned to the top. The other two render sites use .showcase-badge-row, which is text-align:center
   over inline-blocks and so already wraps and baselines correctly.

   No `gap` here, deliberately: the pills carry their own margin-left so they space correctly in BOTH
   contexts, and adding a gap on this one row would double the spacing on the listing card alone. */
.showcase-card-pillrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.4rem;
}

/* Title is blue at rest so the card reads as a link from first glance - underline only on card hover
   so multiple cards in a row don't read as a wall of underlined text. The 0.25em offset matches the
   rest of the funnel's interactive-blue treatment. */
.showcase-card-title {
    margin: 1rem 0 1rem;
    font-weight: 700;
    color: #2c5fa6;
    font-size: 1.7rem;
    line-height: 1.4;
    text-align: center;
    text-underline-offset: 0.25em;
}

.showcase-card:hover .showcase-card-title {
    text-decoration: underline;
}

.showcase-card-lede {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #555;
    margin: 0;
    text-align: center;
}

/* A description with authored paragraph breaks renders one lede per paragraph
   (ShowcaseDescriptionHelper.Paragraphs); the gap marks the beat without reading as a new section. */
.showcase-card-lede + .showcase-card-lede {
    margin-top: 0.5em;
}

/* --- Plain-page chrome (copied verbatim from calculator.css; the shared .explore-* selectors are kept
   as-is because they override the layout classes in the shared app.css). Pages under /uk/showcases set
   ViewData["BodyClass"] = "plain-page" (see _ViewStart) to pick up the centered-header / larger-breadcrumb
   layout. This sheet only loads on the showcase pages, so no other surface is affected. --- */
body.plain-page .explore-header .container {
    align-items: center;
}

/* The centred, enlarged breadcrumb lives in app.css now, beside the .explore-breadcrumb base
   rule it overrides and on the one sheet every plain-page surface already loads. It was copied
   byte-identically into this file and its sibling, which is the pair that silently diverges on the
   next tweak. */

body.plain-page .explore-header {
    border-bottom: none;
    padding: 10px 0;
    margin-bottom: 8px;
}

body.plain-page .explore-main {
    padding-top: 0;
    margin: 15px;
}

/* This sheet only loads on showcase pages, so the broad selector won't affect other surfaces' <article>.
   A centered, padded max-width column reads as one tidy card on both the listing and the detail page. */
.explore-main article {
    margin: 15px auto;
    padding: 30px;
    max-width: 900px;
}

/* --- Phone trims (copied from calculator.css @media 768px chrome block) --- */
@media (max-width: 768px) {
    body.plain-page .explore-main {
        margin: 8px;
    }

    .explore-main article {
        margin: 0 0 12px;
        padding: 5px 14px;
    }

    body.plain-page .explore-breadcrumb {
        flex-wrap: wrap;
        font-size: 1.3em;
    }
}

/* --- Detail page (/uk/showcases/{slug}) tweaks --- */

/* The page's single <h1> (the showcase title), centered + bold like the rest of the centered column. */
.showcase-detail h1 {
    text-align: center;
    font-weight: 700;
}

/* Center every prose paragraph in the detail column, so the whole page reads as one centered block:
     - the page lede (the unclassed direct-child <p> right under the h1). The `> p` child combinator
       targets it alone and leaves the nested paragraphs below to the second selector.
     - each per-plan description (a <p> nested in a plan card), to sit under the already-centered
       plan title / module pills / counts. The .showcase-detail scope out-specifies the shared
       app.css p.explore-plan-card-description (0,1,1).
   The two selectors are disjoint: the lede has no class, the plan descriptions are not direct
   children, so neither rule catches the other's element. */
.showcase-detail > p,
.showcase-detail p.explore-plan-card-description {
    text-align: center;
}

/* The per-side "Try this plan" CTA at the foot of each plan card on a MoneyLesson detail page. It
   reuses the shared .cta-button look; this lifts it off the description above and trims it down from the
   single page-wide CTA, so two cards read as two modest choices rather than two full-width buttons. */
/* Centred like everything else in the card. .cta-button is inline-block and the card centres its title,
   counts and description INDIVIDUALLY rather than carrying text-align, so without this the button alone
   hugged the left edge. block + fit-content + auto margins centres it without a wrapper element. */
.showcase-detail .explore-plan-cta {
    display: block;
    width: fit-content;
    margin: 18px auto 0;
    padding: 8px 22px;
    font-size: 1em;
}

/* --- The narrowing filter (showcases.js) --- */

/* Two .user-mode-toggle rows side by side, centred over the card grid. The pills themselves come from the
   shared app.css this page already loads, so only the row layout lives here; they wrap rather than
   compress on a narrow viewport, since a pill row that shrinks stops reading as a set of choices. */
.showcase-index-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    margin-bottom: 20px;
}

/* `hidden` does not win on its own here, and this is the trap the attribute always sets: the UA sheet
   styles [hidden] as display:none at specificity (0,0,0), so the author `display: flex` above beats it and
   the "hidden" control renders anyway. Restating it against the class is what actually hides the row until
   showcases.js unhides it. Same reason the empty-state paragraph below needs no such rule: a <p> keeps the
   UA display and nothing here overrides it. */
.showcase-index-filters[hidden] {
    display: none;
}

.showcase-no-matches {
    text-align: center;
    color: #555;
}

/* A disabled pill is a value that would show nothing. It stays VISIBLE and readable rather than being
   removed, so the set of choices does not change shape as the reader narrows: a control whose buttons come
   and go is harder to use than one whose buttons grey out. */
.showcase-index-filters .user-mode-pill:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Tag chips on the DETAIL page, matching the in-app gallery's treatment (app.css,
   ".showcase-gallery .tag"): smaller than the shared .explore-main .tag, and sitting in a symmetric band
   after the description rather than a 25px gap above the title. The markup move is in Showcase.cshtml; this
   is the other half.

   Scoped to .showcase-detail rather than changed at source: .tag is shared with the in-app page (which has
   its own copy of these values) and with any other .explore-main surface, and this sheet loads only on the
   showcase pages.

   The selector carries the ELEMENT (article.showcase-detail, 0-2-1) deliberately. Bare `.showcase-detail
   .tag` TIES (0-2-0) with the shared `.explore-main .tag` it has to beat, so it would win only because this
   sheet happens to be linked after app.css. That is true today and is not something this file should rest
   on, since its sibling rule two blocks up wins on specificity instead: one rule per mechanism is how a
   later restyle silently reverts half of them. */
article.showcase-detail .tags {
    margin-top: 12px;
    margin-bottom: 12px;
}

article.showcase-detail .tag {
    font-size: 1.1em;
    padding: 3px 8px;
    margin: 2px;
}