/* ==========================================================================
   This file covers the ENTIRE /case-studies/ section:
     1. LIST PAGE   (/case-studies/)       — page header + card grid
     2. DETAIL PAGE (/case-studies/slug/)  — individual case study write-up
   WEBSITE_SPECIFICATION.md "Case Studies (`/case-studies/`)".
   ========================================================================== */

.case-studies-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

/* Page subtitle, added per seo/xInsight-SEO-Plan.md Page 3 — a real <h2>
   carrying the primary keyword, styled as a quiet subtitle rather than a
   second visual headline. Same values as css/index.css .hero-subtitle
   (that plan's equivalent note for the Homepage hero), duplicated rather
   than shared since each page already has its own dedicated stylesheet
   (WEBSITE_SPECIFICATION.md §2) and this is a 5-line rule. */
.case-studies-subtitle {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-link);
  line-height: var(--line-height-link);
  color: var(--color-text-primary);
}

/* 3 columns only holds up at large desktop (≥1400px) — confirmed via Figma
   at 24px gutter, a 1280px container gives each card ~284px of text width
   after its own 40px padding, which is comfortable. The same 3-column
   split squeezes small desktop (992–1399px) and tablet (768–991px) down to
   only ~200px of text width — long titles like "AI-Powered Financial Media
   Intelligence Platform" would wrap 4–5 lines. 2 columns holds up
   comfortably across that whole 768–1399px range instead (see media query
   below), matching the same squeeze-avoidance pattern already applied to
   Index's banner Lottie and case-study panel this session. */
.case-study-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--column-gutter);
}
@media (min-width: 1400px) {
  .case-study-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .case-study-grid { grid-template-columns: 1fr; row-gap: var(--space-40); }
}

/* Template-safe: no nth-child styling anywhere in this file — cards are
   fully self-contained blocks in a plain grid, so adding, removing, or
   reordering <article class="case-study-tile"> blocks in the HTML can't
   break the layout. A partial last row (e.g. 4 cards in a 3-column grid)
   left-aligns naturally, CSS Grid's default behavior. */
.case-study-tile {
  display: flex;
  flex-direction: column;
}

/* 366:277 confirmed via Figma (close to but not exactly 4:3) — object-fit
   cover means a future replacement image of different proportions still
   crops cleanly into the same box instead of distorting or resizing the
   card. */
.case-study-tile__image {
  width: 100%;
  aspect-ratio: 366 / 277;
  object-fit: cover;
}

.case-study-tile__panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-27);
  padding: var(--space-40);
  background: var(--color-bg-light);
  color: var(--color-text-secondary);
}

/* Figma's title text box showed a fixed 286px width — that's an
   auto-layout artifact from the specific example copy at authoring time,
   not a real constraint (a fixed width here would clip or wrap oddly once
   the client swaps in a longer/shorter real title). Left at 100% (the
   flex column's own natural full width) instead. */
.case-study-tile__title,
.case-study-tile__body {
  width: 100%;
  color: var(--color-text-secondary);
}

/* "Read More" CTA linking each card to its detail page (pages/case-studies/*.html)
   — same btn/btn--primary/btn--small classes as the Index Section 5 case-study
   teaser's own "Read More" button, for a consistent affordance sitewide.
   margin-top: auto pins it to the panel's bottom edge regardless of how long
   each card's description runs, so buttons still line up across a row even
   when descriptions wrap to different heights. */
.case-study-tile__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   Case study detail page (pages/case-studies/*.html) — no Figma reference
   exists (individual case pages were out of scope until this was added,
   see PROJECT_STATUS.md). Reuses the grid page's own type scale/spacing rather
   than inventing a new layout language.
   ========================================================================== */
.case-study-detail {
  display: flex;
  flex-direction: column;
  /*gap: var(--space-27);*/
}

/* Was ".case-study-detail h1, h2, h3, h4" — the missing repeat of the
   ".case-study-detail" ancestor before h2/h3/h4 meant those 3 selectors
   matched ANY h2/h3/h4 on the page, not just ones inside this component.
   case-studies.css is also loaded by the case-studies grid page (
   pages/case-studies.html), where it was silently overriding the card
   grid's own h2 subtitle and h3 tile titles. Scoped properly below.
   h2/h3/h4 now live on .longform-body (css/components.css) instead — they
   only ever appear inside .case-study-detail__body, which carries that
   class too. h1 is the page title, sitting outside that div, so it stays
   here as page-chrome, not body copy. */
.case-study-detail h1 {
  line-height: 1.25; /* Tighter line height for large text */
  margin-top: 2rem;   /* Push down from previous content */
  margin-bottom: 0.75rem;  /*Closer to the text it introduces */
}


.case-study-detail__image {
  width: 100%;
  max-height: 28rem;
  object-fit: cover;
  margin: 1.5rem 0rem;
}

/* Paragraph/list/heading spacing, and reading-width max-width, all now
   live on .longform-body (css/components.css) — shared with Insights'
   .article-detail__body. This div carries both classes: this one for
   layout (display/flex-direction), .longform-body for prose rules. */
.case-study-detail__body {
  display: flex;
  flex-direction: column;
  /*gap: var(--space-27);*/
}

/* ==========================================================================
   Case study detail — long-form reading aids (2026-07-27).
   ai-education-awareness-program is the first case narrative long enough
   (11 H2 questions) that a reader benefits from an overview + deep links,
   and from grouping parallel items (3 strategic risks, 4 FDE activities)
   instead of reading them as a flat stack of h3/p pairs.
   ========================================================================== */

/* Jump-link overview, sits between the intro image and the body copy.
   Plain border (not .case-study-tile's bg-light fill) so it reads as
   in-page chrome on the dark page background, not another content card. */
.case-study-detail__toc {
  margin: var(--space-40) 0;
  padding: var(--space-27);
  border: 1px solid var(--color-text-disabled);
  border-radius: var(--radius-sm);
}
.case-study-detail__toc-heading {
  margin-bottom: var(--space-12);
}
.case-study-detail__toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Each question gets its own <section> so the TOC links above have a
   real target. scroll-margin-top repeats the site's existing 150px fixed
   -header clearance (see #new-way-of-working in css/index.css) so a jump
   link doesn't land with its heading hidden behind the header. The
   border-top on every section after the first is a quiet divider between
   questions — no extra margin/padding needed since the heading rule above
   already adds 2rem of clearance below it. */
.case-study-detail__section {
  scroll-margin-top: 150px;
  padding: 3rem 0rem;
}
.case-study-detail__section + .case-study-detail__section {
  border-top: 1px solid var(--color-text-disabled);
}

/* Groups parallel same-shape items (a named risk/activity + one sentence
   each) into cards instead of a stack of h3/p pairs — same content, but
   scannable at a glance instead of read top-to-bottom like prose.
   auto-fit/minmax reflows 3 or 4 cards into 1 column on mobile without a
   separate breakpoint rule. Reuses .case-study-tile__panel's light-card/
   dark-text pairing (css/case-studies.css above) rather than inventing a
   new color combination. */
.case-study-detail__highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-27);
  margin-bottom: 1.5rem;
}
.case-study-detail__highlight-card {
  padding: var(--space-27);
  background: var(--color-bg-light);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
}
.case-study-detail__highlight-card .text-h4 {
  margin-top: 0;
}
.case-study-detail__highlight-card p {
  margin-bottom: 0;
}

/* Replaces the old <br><strong>…</strong><br> hack used to fake a pull
   quote — a real <blockquote> is both more semantic and easier to spot
   while scanning the page. */
.case-study-detail__quote {
  margin: var(--space-27) 0;
  padding: var(--space-12) var(--space-27);
  border-left: 3px solid var(--color-text-link);
  font-style: italic;
}

/* Flags copy that's known to still be a placeholder (not real client
   outcomes yet — see the file-level comment at the top of this page's
   HTML) so it reads visibly as "pending", not as a finished sentence. */
.case-study-detail__placeholder-note {
  padding: var(--space-12) var(--space-18);
  border: 1px dashed var(--color-text-disabled);
  border-radius: var(--radius-sm);
  color: var(--color-text-disabled);
  font-style: italic;
}