/* ============================================================
   CASE RENDERER — shared atoms for the inline /work case view
   AND the standalone /work/:slug page. These rules previously
   lived in casePanel.css; the slide-in overlay was removed in
   task #342 but the renderer atoms are still required by both
   surfaces (caseRenderer.js and casePage.js). The CTA strip at
   the foot of each rendered case keeps the canonical pair
   (Talk to us / Back to all work).
   ============================================================ */
.case-renderer {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.case-renderer__hero {
  padding: 64px 32px 44px;
  background: var(--ink-2);
  color: var(--paper);
  position: relative;
  /* Hero is a flex column so the metric line can be visually lifted
     above the client name via `order` without changing the source
     DOM order — which keeps semantic h1 → metric reading order intact
     for assistive tech. Task #488 Phase 3. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.case-renderer__hero-meta { order: 1; }
/* Hero metric (Playfair 900, inherits sector hero text colour) sits
   above the client name per the v1.1 case-panel reference — it's the
   punchline the visitor should read first. Yellow is reserved for
   Expression A (agentic dark) per main.css §brand expressions, so
   case panels carry the punchline via display weight + size, not
   via the brand accent. */
.case-renderer__metric { order: 2; margin-top: 0; margin-bottom: 18px; }
.case-renderer__client { order: 3; margin-top: 0; }
.case-renderer[data-sector="hospitality"] .case-renderer__hero {
  background: var(--sec-hospitality);
  color: var(--ink, #0e0e10);
}
.case-renderer[data-sector="retail"] .case-renderer__hero {
  background: var(--sec-retail);
  color: var(--paper, #f4f1ea);
}
.case-renderer[data-sector="finance"] .case-renderer__hero {
  background: var(--sec-finance);
  color: var(--paper, #f4f1ea);
}
.case-renderer[data-sector="technology"] .case-renderer__hero {
  background: var(--sec-technology);
  color: var(--paper, #f4f1ea);
}
/* Public-sector + media render in the neutral ink scale (task #497). */
.case-renderer[data-sector="public-sector"] .case-renderer__hero {
  background: var(--ink-2, #1c1c1e);
  color: var(--paper, #f4f1ea);
}
.case-renderer[data-sector="media"] .case-renderer__hero {
  background: var(--ink-3, #2a2a2d);
  color: var(--paper, #f4f1ea);
}

.case-renderer__hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  opacity: 0.85;
}

.case-renderer__eyebrow {
  /* Section-intro tier (Task #541) — case study hero opener. The
     parent .case-renderer__hero-meta sets the row's micro size for
     metadata siblings; the eyebrow itself promotes to the larger
     section-intro size + tighter caps tracking. */
  font-size: var(--fs-eyebrow-section);
  letter-spacing: var(--ls-caps-section);
  font-weight: var(--fw-medium);
}

/* Close × moved out of the hero typography flow into a chrome layer
   that sits on the panel's top-right corner OUTSIDE the hero block.
   This stops the button overlapping the eyebrow / client headline /
   metric line on cases like Bank of Cyprus where the hero copy ran
   to the right edge. The chrome relies on the case-renderer flex
   column being the positioning context. */
.case-renderer { position: relative; }
.case-renderer__chrome {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
}
.case-renderer__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(14, 14, 16, 0.55);
  color: var(--paper, #f4f1ea);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.case-renderer__close:hover {
  background: rgba(14, 14, 16, 0.85);
  border-color: var(--paper, #f4f1ea);
}
.case-renderer__close:focus-visible {
  outline: 2px solid var(--be-yellow, #FFC217);
  outline-offset: 2px;
}

.case-renderer__client {
  font-family: var(--display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-headline);
  text-transform: uppercase;
  margin: 0 0 18px 0;
  color: inherit;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 100%;
}

/* The hero metric line replaces the legacy italic headline AND the
   metrics grid with a single bold one-liner — matches the reference
   sample. Both the curated metric and (when no metric exists) the
   derived headline render in the same metric weight; the modifier
   class lets us tighten the size for the longer headline fallback. */
/* Locked metric-colour rule (docs/TYPOGRAPHY.md, Task #527):
   - On the default --ink-2 hero (no sector data attribute) the
     metric renders in --be-yellow.
   - On every sector-coloured hero (hospitality, retail, finance,
     technology, public-sector, media) the metric renders in
     --text (white) — including hospitality, whose tile text
     colour is otherwise --ink. The earlier "inherits sector hero
     text colour" behaviour is removed for consistency. */
.case-renderer__metric {
  font-family: var(--display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-body);
  margin: 0;
  color: var(--be-yellow);
  max-width: 32ch;
}
.case-renderer[data-sector] .case-renderer__metric {
  color: var(--text);
}
.case-renderer__metric--headline {
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  max-width: 38ch;
  font-weight: var(--fw-display);
}

.case-renderer__body {
  padding: 40px 32px 40px;
  background: var(--black, #0a0a0a);
  color: var(--white, #fff);
  flex: 1;
}

.case-renderer__section {
  margin: 0 0 28px;
  max-width: var(--measure-body);
}
.case-renderer__section:first-child {
  margin-top: 0;
}

/* Heading hierarchy follows the source — h2 is the dominant section
   eyebrow (matches the sample's stylised "ABOUT THE CLIENT" / "THE
   WORK" headings). h3/h4 step down. Tracking + uppercase mirrors the
   editorial feel without needing a separate accent element. */
.case-renderer__heading {
  font-family: var(--display);
  color: var(--white, #fff);
  margin: 36px 0 14px;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-snug);
}
.case-renderer__section:first-child .case-renderer__heading,
.case-renderer__section:first-child .case-renderer__heading:first-child {
  margin-top: 0;
}
.case-renderer__heading--h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-body);
  position: relative;
  padding-top: 12px;
}
.case-renderer__heading--h2::before {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: var(--yellow, #ffc217);
  margin-bottom: 14px;
}
.case-renderer__heading--h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-body);
}
.case-renderer__heading--h4 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-body);
  color: rgba(255,255,255,0.7);
}

.case-renderer__p {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: rgba(255,255,255,0.82);
  margin: 0 0 1em 0;
}
.case-renderer__p--empty {
  opacity: 0.6;
}

/* Single-column full-bleed media. Drops the legacy 2-column gallery
   grid on case detail (kept on the work index). Every image and
   video block is 100% of the body's content width. Margins are
   generous so each asset reads as its own beat in the scroll. */
.case-renderer__media {
  margin: 32px 0;
  padding: 0;
  background: var(--ink-2);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.case-renderer__media:first-child {
  margin-top: 0;
}
.case-renderer__media img,
.case-renderer__media video {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   CANONICAL SECTIONS — Challenge / Approach / Results.
   Triggered by an h2 matching the canonical vocabulary; the
   renderer wraps that h2 + its prose in a section with a
   yellow-rule eyebrow primitive (.eyebrow--rule) above the h2.
   ============================================================ */
.case-renderer__section--cs {
  margin-bottom: 44px;
}
.case-renderer__cs-eyebrow {
  /* Section-intro tier (Task #541) — Challenge / Approach / Results
     openers within a case study read as major section intros. */
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--be-yellow, #FFC217);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow-section);
  letter-spacing: var(--ls-caps-section);
  text-transform: uppercase;
  margin: 0 0 20px;
}
.case-renderer__cs-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--be-yellow, #FFC217);
  flex: 0 0 auto;
}
/* Inside a canonical section the h2 already has its own eyebrow
   above (yellow rule + label), so suppress the legacy yellow rule
   that sits above every .case-renderer__heading--h2. */
.case-renderer__section--cs .case-renderer__heading--h2 {
  padding-top: 0;
  margin-top: 0;
}
.case-renderer__section--cs .case-renderer__heading--h2::before {
  display: none;
}

/* Approach: ghost discipline pills below the prose. */
.case-renderer__pills {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.case-renderer__pill {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-full);
  padding: 6px 12px;
}

/* Results: Playfair 900 yellow callout pulled from the leading
   metric phrase of a paragraph. Sized to .aiops-stats__num
   (canonical 56px) clamped down to fit the 60ch body column on
   smaller surfaces. */
.case-renderer__metric-callout {
  font-family: var(--display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-headline);
  color: var(--be-yellow, #FFC217);
  margin: 8px 0 12px;
}
.case-renderer__metric-callout + .case-renderer__p {
  margin-top: 0;
}

.case-renderer__actions {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.case-renderer__action {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--white, #fff);
  background: transparent;
  padding: 11px 18px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-full);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
.case-renderer__action:hover {
  border-color: var(--yellow, #ffc217);
  color: var(--yellow, #ffc217);
  transform: translateY(-1px);
}
.case-renderer__action--primary {
  background: var(--yellow, #ffc217);
  color: var(--black, #0a0a0a);
  border-color: var(--yellow, #ffc217);
}
.case-renderer__action--primary:hover {
  background: transparent;
  color: var(--yellow, #ffc217);
}

@media (max-width: 600px) {
  .case-renderer__hero { padding: 40px 22px 32px; }
  .case-renderer__client { font-size: var(--fs-display); }
  .case-renderer__body { padding: 28px 22px 32px; }
  .case-renderer__media { margin: 22px 0; }
  .case-renderer__heading--h2 { font-size: var(--fs-h3); }
}

/* ============================================================
   /WORK COLUMN VARIANT — task #262.
   When the case study renders inside the /work right-column
   swap (rather than the slide-in panel), the shared renderer
   needs to fill the full chat-panel column width: no inner max
   width, no panel-content padding, hero + media flush with the
   column edges. The body still respects the 60ch readability
   cap on prose paragraphs (inherited from .case-renderer__
   section's max-width), which is the only readability cap we
   want to keep on this surface.
   ============================================================ */
.work-case-shared {
  width: 100%;
}
.work-case-shared .case-renderer { width: 100%; min-height: 100%; }
.chat-panel-col .panel-content:has(.work-case-shared) { padding: 0; margin: 0; }


/* ============================================================
   RELATED WORK STRIP (#357)
   Rendered at the bottom of the standalone /work/:slug page.
   Reuses the .work-tile / .work-grid atoms from proof.css so
   the visual treatment cannot drift between the index and the
   related strip. Keeps a lightweight three-up layout that
   collapses to two then one column on smaller viewports.
   ============================================================ */
.work-related {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.work-related__inner {
  max-width: var(--case-renderer-content-max, 1200px);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.work-related__eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 18px;
}
.work-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1100px) {
  .work-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .work-related__grid { grid-template-columns: 1fr; }
}
.work-related .work-tile { min-height: 240px; }
.work-related .work-tile .work-tile__client {
  font-size: var(--fs-h1);
}