/* Public Case Studies page (/casestudies).

   Visual conventions track the rest of the public chrome:
     • #1E2240 → #3B3F7A diagonal hero band (same gradient legal.css uses
       for the privacy / terms hero) so the marketing pages read as one
       product.
     • #f7f8fb page surface, white panel cards on top, soft navy shadow
       (same tokens as .legal-page).
     • Inter font stack inherited from site.css.

   All selectors are scoped to .case-studies-page so loading this stylesheet
   on every page (per the eager-load strategy in App.razor) cannot collide
   with anything elsewhere. */

.case-studies-page {
    background: #f7f8fb;
    /* The public top app bar is 64px tall (matches MainLayout's MudAppBar
       Dense=true). Subtract that here so the page surface still fills the
       viewport even when content is short, mirroring .legal-page. */
    min-height: calc(100vh - 64px);
    padding-bottom: 80px;
}

/* ── Hero band ───────────────────────────────────────────────────────── */

.case-studies-page__hero {
    background: linear-gradient(135deg, #1E2240 0%, #3B3F7A 100%);
    color: #ffffff;
    padding: 56px 24px 64px;
    text-align: center;
}

.case-studies-page__hero h1 {
    margin: 0 0 16px;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.case-studies-page__hero-lead {
    /* Hero copy widens to the same 1100px the selector + chart cards
       below use, so all three blocks share one visual rail down the
       page. The narrow 760px max we started with read as a tight
       column under a much wider chart card and made the page look
       unbalanced. */
    max-width: 1100px;
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

/* ── Body container ─────────────────────────────────────────────────── */

.case-studies-page__body {
    /* Pull the body up under the hero by the same -28px overlap legal.css
       uses, so the white panel reads as a card sitting on the gradient
       band rather than a plain content block below it. */
    margin-top: -28px !important;
    padding: 0 16px !important;
}

.case-studies-page__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 24px;
}

.case-studies-page__empty {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(15, 22, 50, 0.08);
    padding: 48px 24px;
    text-align: center;
    margin-top: 32px;
}

/* ── Combined selector + narrative card ─────────────────────────────── */

/* The selector row and the per-case narrative used to live in two
   separate floating cards. Conceptually they are one control + content
   unit ("pick a case → read its story"), so they're now wrapped in a
   single .case-studies-page__topcard MudPaper. The card chrome
   (background / border-radius / shadow) lives here; the inner
   .case-studies-page__selector and .case-studies-page__narrative
   blocks are plain content with a hairline divider between them. */
.case-studies-page__topcard {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 24px rgba(15, 22, 50, 0.08) !important;
    /* Matches the chart panel max-width below so the two cards stack
       as one column down the page. */
    max-width: 1400px;
    margin: 0 auto 24px;
    padding: 18px clamp(16px, 3vw, 28px) 24px;
}

/* ── Selector row (inside the combined card) ───────────────────────── */

.case-studies-page__selector {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    /* No background / shadow / border-radius any more — those are
       owned by .case-studies-page__topcard now. The selector row is
       just an inner flex strip. */
}

.case-studies-page__selector-btn {
    /* Plain <button> reset — kill the UA chrome so the visual is fully
       owned by these rules. */
    appearance: none;
    border: 1px solid #d8dbe4;
    background: #ffffff;
    color: #2A2E55;
    font-family: inherit;
    cursor: pointer;
    padding: 10px 22px;
    /* Soft rounded-rectangle instead of full pill (999px). The pill
       shape was reading as too playful for what is essentially a
       segmented selector — 8px lines up with the chart panel's inner
       chart-wrap radius and the home page's CTA button. */
    border-radius: 8px;
    line-height: 1.2;
    font-weight: 500;
    transition: background-color 0.15s ease,
                color 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease,
                transform 0.15s ease;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    /* Each button stretches to fill the row evenly so all five span
       the full selector card width instead of clumping in the middle.
       flex-basis:0 forces the buttons to size off `flex-grow` rather
       than their content (otherwise the longer "Case 10+" labels would
       end up wider than the rest); the min-width keeps them from
       shrinking below a comfortable tap target on narrow viewports
       before the wrap kicks in. */
    flex: 1 1 0;
    min-width: 140px;
    max-width: 220px;
}

.case-studies-page__selector-btn:hover {
    border-color: #3B3F7A;
    color: #1E2240;
    /* Soft lift on hover — same effect the home-page module-tile uses. */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 34, 64, 0.10);
}

.case-studies-page__selector-btn:focus-visible {
    outline: none;
    border-color: #3B3F7A;
    box-shadow: 0 0 0 3px rgba(59, 63, 122, 0.25);
}

.case-studies-page__selector-btn.is-active {
    background: linear-gradient(135deg, #1E2240 0%, #3B3F7A 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(30, 34, 64, 0.22);
    transform: translateY(-1px);
}

.case-studies-page__selector-btn.is-active:hover {
    /* Already lifted — keep the same gradient on hover so the active pill
       doesn't appear to "click off" when the cursor passes over. */
    color: #ffffff;
    border-color: transparent;
}

.case-studies-page__selector-btn-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.78;
}

.case-studies-page__selector-btn-label {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Narrative panel ────────────────────────────────────────────────── */

/* The per-case story now sits inside .case-studies-page__topcard,
   directly underneath the selector row. The hairline border-top is
   the visual divider between "pick a case" (above) and "here's its
   story" (below) — same #EEF0F7 token the chart panel header uses. */
.case-studies-page__narrative {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #EEF0F7;
}

.case-studies-page__narrative-title {
    margin: 0 0 10px;
    font-size: 1.35rem;
    font-weight: 600;
    color: #1E2240;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.case-studies-page__narrative-intro {
    margin: 0 0 24px;
    color: #2A2E55;
    font-size: 1rem;
    line-height: 1.6;
}

/* Four-up grid of arc cards (Problem / Intervention / Solution /
   Outcome). Auto-fit + minmax means the grid gracefully drops from
   four columns to two and then one as the viewport narrows, without
   needing dedicated breakpoints for each step. minmax(220px, 1fr)
   stays comfortably above the minimum readable width for the
   per-card body copy. */
.case-studies-page__narrative-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.case-studies-page__narrative-card {
    background: #f7f8fb;
    border: 1px solid #EEF0F7;
    border-radius: 10px;
    padding: 18px 18px 20px;
    /* Coloured top stripe — set per variant below — calls out which
       arc step each card represents at a glance, without needing
       extra iconography. */
    border-top: 4px solid #d8dbe4;
    color: #2A2E55;
}

/* Per-arc accent colours — pulled from the GP Clarity palette so the
   strip up top reads as part of the same visual system as the
   compliance-overview tiles and the home-page module cards. */
.case-studies-page__narrative-card--problem      { border-top-color: #E04D4D; }
.case-studies-page__narrative-card--intervention { border-top-color: #E0A53A; }
.case-studies-page__narrative-card--solution     { border-top-color: #3B7FD9; }
.case-studies-page__narrative-card--outcome      { border-top-color: #2BA86E; }

.case-studies-page__narrative-card-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #565C82;
    margin-bottom: 8px;
}

.case-studies-page__narrative-card-body {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #2A2E55;
}

/* ── Chart panel ────────────────────────────────────────────────────── */

.case-studies-page__panel {
    /* The MudPaper Elevation="0" gives us a flat surface; we add our own
       shadow that matches the selector card above, so the two stack as
       one visual unit. */
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 24px rgba(15, 22, 50, 0.08) !important;
    /* Matches the selector + narrative card widths so all three blocks
       share one outer rail down the page. */
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 20px 12px;
}

.case-studies-page__panel-header {
    padding: 4px 4px 14px;
    border-bottom: 1px solid #EEF0F7;
    margin-bottom: 14px;
}

.case-studies-page__panel-title {
    font-weight: 600 !important;
    color: #1E2240 !important;
    line-height: 1.3;
}

.case-studies-page__panel-sub {
    color: #565C82 !important;
    margin-top: 4px;
    display: block;
    line-height: 1.4;
}

/* The chart wrap is the EChart's positioning context. EChart.razor
   renders its container with width:100%; height:560px (we pass those
   props on the page), so the wrap just needs to be the right outer box.
   overflow:hidden clips any in-flight render artefacts during option
   swaps when the user clicks between cases. */
.case-studies-page__chart-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

/* ── Mobile / narrow-viewport tweaks ────────────────────────────────── */

@media (max-width: 768px) {
    .case-studies-page__hero {
        padding: 40px 18px 52px;
    }

    .case-studies-page__hero h1 {
        font-size: 1.7rem;
    }

    .case-studies-page__hero-lead {
        font-size: 0.92rem;
    }

    .case-studies-page__topcard {
        padding: 14px 14px 18px;
        margin-bottom: 18px;
    }

    .case-studies-page__selector {
        gap: 8px;
    }

    .case-studies-page__selector-btn {
        padding: 8px 14px;
        /* Below 768px we drop the desktop 140px floor so five buttons
           still fit on a narrow viewport without wrapping into two
           rows. Stays a flex item so they share width evenly. */
        min-width: 72px;
        max-width: none;
    }

    .case-studies-page__selector-btn-label {
        font-size: 1rem;
    }

    .case-studies-page__panel {
        padding: 14px 12px 8px;
    }

    .case-studies-page__panel-title {
        font-size: 1rem !important;
    }

    .case-studies-page__narrative {
        margin-top: 16px;
        padding-top: 16px;
    }

    .case-studies-page__narrative-title {
        font-size: 1.15rem;
    }

    .case-studies-page__narrative-intro {
        font-size: 0.95rem;
        margin-bottom: 18px;
    }

    .case-studies-page__narrative-grid {
        gap: 12px;
    }
}

/* Phone — at <=480px the 5-button case selector wraps to two rows even
   with the 72px floor from the 768px tier. We drop it to 60px so all
   five fit on a single row at 360px viewport (5 × 60 + 4 × 8 gap = 332).
   Eyebrows shrink so labels stay readable; per-arc cards switch to a
   single column (auto-fit minmax already handles the wider tiers). */
@media (max-width: 480px) {
    .case-studies-page__hero {
        padding: 32px 14px 44px;
    }

    .case-studies-page__hero h1 {
        font-size: 1.45rem;
    }

    .case-studies-page__selector {
        gap: 6px;
    }

    .case-studies-page__selector-btn {
        padding: 6px 8px;
        min-width: 60px;
    }

    .case-studies-page__selector-btn-eyebrow {
        font-size: 0.6rem;
        letter-spacing: 0.04em;
    }

    .case-studies-page__selector-btn-label {
        font-size: 0.88rem;
    }

    .case-studies-page__narrative-card {
        padding: 14px 14px 16px;
    }

    .case-studies-page__narrative-card-eyebrow {
        font-size: 0.66rem;
    }
}