/*
  cs-shared.css — shared rules for all case study pages

  Two gutter patterns:
  ─────────────────────────────────────────────────────────────────────────
  A) Full-width elements (no explicit width set):
     Use .cs-gutter — gets padding-left/right: 20px.
     Known selectors: .cs-section, .cs-outcomes-heading, .cs-prevnext,
     .cs-meta-row, .cs-quote.

  B) Calc-width elements (already have width: calc(100% - 40px); margin: auto):
     These self-manage their 20px gutter via margin — don't add padding.
     Known selectors: .cs-process, .cs-platforms, .cs-decisions,
     .cs-quote-block, .cs-two-col, .cs-panel.
     These get max-width: 100% so they don't overflow at narrow widths.

  C) Horizontal scroll sliders: full-width container + ::before/::after spacers
     + scroll-padding-left: 20px for correct snap.
*/

/* ── Lightbox — controls below the slide ── */
.cs-lightbox {
  flex-direction: column !important;
}
.cs-lightbox-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 92vw;
  width: 100%;
}
.cs-lightbox-img {
  max-width: 100% !important;
  max-height: 80vh !important;
  border-radius: 10px 10px 0 0 !important;
  display: block;
}
.cs-lightbox-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 20px;
  background: rgba(255,255,255,0.1);
  border-radius: 0 0 10px 10px;
  width: 100%;
  box-sizing: border-box;
}
.cs-lightbox-nav {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(255,255,255,0.14) !important;
  border: 1.5px solid rgba(255,255,255,0.24) !important;
  border-radius: 50% !important;
  color: #fff !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  transition: background 0.15s !important;
}
.cs-lightbox-nav:hover {
  background: rgba(255,255,255,0.28) !important;
}
.cs-lightbox-counter {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  flex: 1;
  text-align: center;
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

/* Mobile: hide controls, swipe only */
@media (max-width: 767px) {
  .cs-lightbox-controls { display: none !important; }
  .cs-lightbox-img { border-radius: 10px !important; max-height: 70vh !important; }
  .cs-lightbox-inner { max-width: 96vw; }
}

/* ── Section vertical rhythm — 48px between sections, no double-spacing ── */
/* Each section provides its own 48px top gap; no bottom padding so the next
   section's top doesn't stack with a previous section's bottom. */
.cs-decks {
  padding-top: 48px;
  padding-bottom: 0;
}

/* ── Desktop: balance hero subtitle line breaks ── */
@media (min-width: 768px) {
  p.max-w-xl.leading-relaxed {
    text-wrap: balance;
  }
  /* Standardise cs-section top to 48px (a couple of pages used 56px) */
  .cs-section {
    padding-top: 48px;
  }
}

/* ── Mobile: deck top 48px, no bottom double-space ── */
@media (max-width: 767px) {
  .cs-decks {
    padding-top: 48px !important;
    padding-bottom: 0 !important;
  }
}

/* ── Copy size: 16px desktop → 14px mobile across all case studies ── */
@media (max-width: 767px) {
  :root { --cs-copy-size: 14px !important; }
}

/* ── Desktop: hide mobile-only expand button; show all content ── */
@media (min-width: 768px) {
  .cs-view-more-btn { display: none !important; }
  .cs-challenge-more { display: block !important; }
  .cs-approach-block { display: block !important; }
}

@media (max-width: 767px) {

  /* ── A: Full-width → padding gutter ── */
  .cs-gutter,
  .cs-section,
  .cs-outcomes-heading,
  .cs-outcomes-grid,
  .cs-prevnext,
  .cs-meta-row,
  .cs-quote {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
    max-width: 100% !important;
  }

  /* ── B: Calc-width → margin already handles gutter, just clamp width ── */
  .cs-process,
  .cs-platforms,
  .cs-decisions,
  .cs-quote-block,
  .cs-two-col,
  .cs-panel {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* ── C: Horizontal scroll sliders only ── */
  .cs-hscroll {
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-padding-left: 20px;
    max-width: 100% !important;
  }
  .cs-hscroll::before,
  .cs-hscroll::after {
    content: '';
    flex-shrink: 0;
    width: 20px;
  }

}

/* ── Dark mode — active nav link ── */
[data-theme="dark"] #main-nav a[style*="text-decoration:underline"] {
  color: #4F6FF5 !important;
  text-decoration-color: #4F6FF5 !important;
}
/* Scrolled nav background — override the blue-navy rgba the JS sets */
[data-theme="dark"] #main-nav[style*="rgba(26,26,62"] {
  background: rgba(25,25,32,0.95) !important;
}

/* ── Dark mode — hero panels ── */
/* Hero divs use inline background-color:#1a1a3e + radial-gradient. Override both. */
[data-theme="dark"] [style*="background-color:#1a1a3e"] {
  background-color: #1e1e26 !important;
  background-image: none !important;
}

/* ── Dark mode — footer & CTA section ── */
[data-theme="dark"] .bg-primary,
[data-theme="dark"] section.bg-primary,
[data-theme="dark"] footer.bg-primary {
  background-color: #1e1e26 !important;
}
[data-theme="dark"] footer.bg-primary {
  border-top-color: rgba(255,255,255,0.08) !important;
}

/* ── Dark mode — CSS variable overrides ── */
/* --text-2 and --text-3 are defined as dark navy in light mode on every CS page.
   Override them here so all supporting copy resolves to the standard muted colour. */
[data-theme="dark"] {
  --text-2: #a0a0c0 !important;
  --text-3: rgba(160,160,192,0.6) !important;
}

/* ── Dark mode — fix inline background:#fff on panels ── */
/* Inline styles win over class selectors, so !important is required here.   */
/* These rules cover the common hardcoded patterns across all CS pages.       */

[data-theme="dark"] .cs-panel,
[data-theme="dark"] .cs-two-col,
[data-theme="dark"] .cs-quote-block,
[data-theme="dark"] .cs-decisions,
[data-theme="dark"] .cs-meta-card {
  background: #1e1e26 !important;
  color: #e8e8f0 !important;
  box-shadow: rgba(0,0,0,0.4) 0px 2px 16px 0px, rgba(255,255,255,0.04) 0px 0px 0px 1px !important;
}

/* Headings inside panels */
[data-theme="dark"] .cs-panel h2,
[data-theme="dark"] .cs-panel h3,
[data-theme="dark"] .cs-panel h4,
[data-theme="dark"] .cs-two-col h2,
[data-theme="dark"] .cs-two-col h3,
[data-theme="dark"] .cs-two-col h4,
[data-theme="dark"] .cs-meta-card h2,
[data-theme="dark"] .cs-meta-card h3 {
  color: #e8e8f0 !important;
}

/* Dividers inside panels */
[data-theme="dark"] .cs-panel hr,
[data-theme="dark"] .cs-two-col hr {
  border-color: rgba(255,255,255,0.08) !important;
}

/* Meta row background */
[data-theme="dark"] .cs-meta-row-wrap {
  background: #111118 !important;
}

/* Deck controls */
[data-theme="dark"] .cs-deck {
  background: #1e1e26 !important;
}
[data-theme="dark"] .cs-deck-btn {
  background: #2a2a32 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #e8e8f0 !important;
}
[data-theme="dark"] .cs-deck-title {
  color: #e8e8f0 !important;
}
[data-theme="dark"] .deck-counter {
  color: rgba(255,255,255,0.5) !important;
}

/* Prev/next cards */
[data-theme="dark"] .cs-pn-card {
  background: #1e1e26 !important;
  box-shadow: rgba(0,0,0,0.4) 0px 2px 16px 0px !important;
}
[data-theme="dark"] .cs-pn-title {
  color: #e8e8f0 !important;
}

/* Disclaimer accordion */
[data-theme="dark"] .cs-disclaimer-accord {
  background: #1e1e26 !important;
}
[data-theme="dark"] .cs-disclaimer-toggle {
  color: #a0a0c0 !important;
}
[data-theme="dark"] .cs-disclaimer-body {
  color: #a0a0c0 !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}

/* ── Dark mode — CSS attribute selectors catch ALL inline white backgrounds ── */
/* Covers any element with background:#fff or background:#F7F8FF in inline style */
/* that wasn't targeted by a class selector above. Fixes all CS pages at once.  */

[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background: #fafafa"],
[data-theme="dark"] [style*="background:#F7F8FF"],
[data-theme="dark"] [style*="background:#f7f8ff"],
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background:#F0F0F2"],
[data-theme="dark"] [style*="background:#f0f0f2"],
[data-theme="dark"] [style*="background:#F7F7FA"],
[data-theme="dark"] [style*="background:#f7f7fa"] {
  background: #1e1e26 !important;
  box-shadow: rgba(0,0,0,0.4) 0px 2px 12px 0px, rgba(255,255,255,0.04) 0px 0px 0px 1px !important;
}

/* Fix dark navy text that becomes invisible on dark backgrounds */
[data-theme="dark"] [style*="color:#1a1a3e"],
[data-theme="dark"] [style*="color: #1a1a3e"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color: #111"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#1A1A3E"] {
  color: #e8e8f0 !important;
}

/* Borders that use light-mode rgba */
[data-theme="dark"] [style*="border:1px solid rgba(26,26,62"],
[data-theme="dark"] [style*="border: 1px solid rgba(26,26,62"],
[data-theme="dark"] [style*="border-bottom:1px solid rgba(26,26,62"],
[data-theme="dark"] [style*="border-top:1px solid rgba(26,26,62"] {
  border-color: rgba(255,255,255,0.08) !important;
}