/*
 * Exclolab — Shared mobile-responsive overrides for static HTML pages
 * (case-studies-html, services-html, solutions-html)
 *
 * All these pages use inline styles, so we override with !important.
 * CSS attribute selectors [style*="value"] match on the inline style strings.
 *
 * Breakpoint: max-width 768px (phones + small tablets)
 */

/* ─────────────────────────────────────────────────────────────
   HEADER / NAV
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Reduce header inner padding, gap, and height to match Next.js nav */
  header[data-screen-label="Navigation"] > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 0 !important;
    height: 56px !important;
  }

  /* Hide the full desktop nav on mobile */
  header[data-screen-label="Navigation"] nav {
    display: none !important;
  }

  /* Hide ALL inline right-side controls — they live inside the drawer now.
     Target by ID / sibling so the selector survives the hamburger being
     inserted after the controls div (which breaks :last-child). */
  #exclo-dark-toggle,
  #exclo-dark-toggle + div,
  #exclo-dark-toggle ~ a {
    display: none !important;
  }

  /* Show the hamburger button */
  #mob-menu-btn {
    display: flex !important;
    margin-left: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   STICKY TOC / CHAPTER NAV
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  [data-screen-label="Sticky TOC"] {
    padding: 8px 12px !important;
  }

  /* Inner pill container — already has overflow-x:auto; just reduce font */
  [data-screen-label="Sticky TOC"] button {
    padding: 7px 12px !important;
    font-size: 11.5px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   SECTION HORIZONTAL PADDING (all section types)
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  main section[data-screen-label],
  main > section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero sections: also reduce top padding */
  [data-screen-label="Hero"],
  section[id="sec-hero"] {
    padding-top: 48px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Solution hero / header sections with 64-96px top padding */
  [style*="padding:96px 32px"],
  [style*="padding:80px 32px"],
  [style*="padding:100px 32px"],
  [style*="padding:64px 32px"],
  [style*="padding:60px 32px"],
  [style*="padding:52px 32px"],
  [style*="padding:44px 32px"],
  [style*="padding:40px 32px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Sections with top+bottom+sides */
  [style*="padding:20px 32px"],
  [style*="padding:30px 32px"],
  [style*="padding:24px 32px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   INNER CONTENT WRAPPERS — remove side padding they add
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Large max-width wrappers with internal 56px side padding */
  [style*="padding:0 56px"],
  [style*="padding:26px 56px"],
  [style*="padding:28px 56px"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Wide wrappers — cap their internal padding */
  [style*="padding:0 32px"],
  [style*="padding:32px 32px"],
  [style*="padding:26px 32px"],
  [style*="padding:28px 32px"],
  [style*="padding:30px 32px 26px"],
  [style*="padding:36px 32px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   GRID LAYOUTS → STACK ON MOBILE
   Class names (.m4c, .m3c) are injected into the HTML source
   by a one-time preprocessing step so they survive React's
   inline-style serialisation (which adds spaces, making
   [style*="..."] selectors unreliable).
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 4-col → 2-col (snapshot / stats grids) */
  .m4c {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 3-col → 1-col (turning-point cards, feature grids) */
  .m3c {
    grid-template-columns: 1fr !important;
  }

  /* Fallback attribute selectors for any grids not caught above */
  [style*="repeat(4, 1fr)"],
  [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="repeat(3, 1fr)"],
  [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   FLEX ROWS THAT NEED TO STACK ON MOBILE
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Services page: two-column hero layout */
  [style*="display:flex"][style*="gap:60px"],
  [style*="display:flex"][style*="gap:80px"] {
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* Solution feature row with icon + text: keep as row but smaller */
  [style*="display:flex"][style*="align-items:flex-start"][style*="gap:16px"] {
    gap: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   HERO METRIC FONT SIZE
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Giant hero metric (e.g. "85% less admin time") */
  [style*="font-size:clamp(46px,7vw,84px)"] {
    font-size: clamp(36px, 9vw, 56px) !important;
  }

  /* Section heading h1 font size */
  [style*="font-size:clamp(30px,4.2vw,52px)"],
  [style*="font-size:clamp(30px,4.6vw,58px)"] {
    font-size: clamp(26px, 7vw, 40px) !important;
  }

  /* Sub-section heading h2 */
  [style*="font-size:clamp(28px,3.4vw,42px)"] {
    font-size: clamp(22px, 6vw, 36px) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   SECONDARY CHIPS BELOW HERO (long pill text that wraps badly)
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Allow chips to be full-width on mobile for readability */
  [style*="border-radius:999px"][style*="padding:9px 18px"] {
    font-size: 12.5px !important;
    padding: 8px 14px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   DARK CARD BOXES (business impact, turning point insight)
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Dark teal card with large padding: reduce on mobile */
  [style*="background:var(--bg-07333B"][style*="padding:32px 34px"],
  [style*="background:var(--bg-07333B"][style*="padding:28px 32px"],
  [style*="background:#07333B"][style*="padding:32px 34px"],
  [style*="background:#07333B"][style*="padding:28px 32px"] {
    padding: 20px 18px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   SOLUTION DETAIL PAGE — specific sections
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Proof/mechanism row that uses large padding inner */
  [style*="padding:64px 56px"],
  [style*="padding:80px 56px"],
  [style*="padding:72px 56px"] {
    padding: 36px 20px !important;
  }

  /* 3-column proof grids on solutions pages */
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:14px"],
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:12px"],
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:20px"] {
    grid-template-columns: 1fr !important;
  }

  /* Wide solution horizontal scrollable tables: let them scroll */
  [style*="overflow-x:auto"] {
    -webkit-overflow-scrolling: touch;
  }
}

/* ─────────────────────────────────────────────────────────────
   FOOTER (if present in static HTML)
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  footer[data-screen-label],
  footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Footer grid columns */
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   SERVICES PAGE — specific content sections
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Deliverable/feature list cards: reduce padding */
  [style*="border-radius:16px"][style*="padding:22px 24px"],
  [style*="border-radius:20px"][style*="padding:28px 32px"],
  [style*="border-radius:20px"][style*="padding:32px 34px"] {
    padding: 18px 16px !important;
  }

  /* Phase cards */
  [style*="border-radius:20px"][style*="overflow:hidden"] > div[style*="padding:30px 32px"] {
    padding: 20px 18px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CASE STUDY MOBILE READING EXPERIENCE
   CSS classes injected into all 12 case study HTML files.
   ALL rules are inside @media (max-width: 768px).
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   STEP 7 · Section padding & rhythm
   Reduce 100px vertical padding to 48px on all major content
   sections; give section-number labels clear top clearance.
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #sec-situation,
  #sec-approach,
  #sec-tech,
  #sec-timeline,
  #sec-voice,
  #sec-results {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Snapshot section: big bottom padding (90px) → sensible on mobile */
  #sec-snapshot {
    padding-top: 28px !important;
    padding-bottom: 40px !important;
  }

  /* Section number labels ("01 · The Situation Before") — 32px top margin
     so adjacent sections breathe when scrolling. Scoped to sec-* IDs to
     avoid touching navigation or hero label variants. */
  [id^="sec-"] [style*="letter-spacing:0.14em"][style*="text-transform:uppercase"]:first-child,
  [id^="sec-"] > div > [style*="letter-spacing:0.14em"][style*="text-transform:uppercase"]:first-child {
    margin-top: 0 !important; /* section padding-top handles breathing room */
    display: block !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   STEP 2 · Pain points → accent card list
   .cs-pain-list wraps the sc-for of pain-point rows.
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cs-pain-list {
    gap: 10px !important;
  }

  /* Each pain-point row → full-width card with left accent border */
  .cs-pain-list > div,
  .cs-pain-list sc-for > div {
    background: var(--bg-FFFFFF, #FFFFFF) !important;
    border: 1px solid var(--bd-E7E4DC, #E7E4DC) !important;
    border-left: 3px solid #FFA319 !important;
    border-radius: 12px !important;
    padding: 12px 16px 12px 14px !important;
    box-shadow: 0 2px 8px rgba(10, 87, 100, 0.06) !important;
  }

  /* Pain-point text */
  .cs-pain-list > div p,
  .cs-pain-list sc-for > div p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   STEP 3 · Turning point — dramatic mobile treatment
   .cs-turning-grid  — "Not This" 3-col card grid
   .cs-insight-card  — dark teal structural-insight card
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* "Not This" grid: already 1-col via .m3c; tighten gap */
  .cs-turning-grid {
    gap: 10px !important;
  }

  /* Each "Not This" card — warm red-tinted left border */
  .cs-turning-grid > div,
  .cs-turning-grid sc-for > div {
    border-left: 3px solid #C4938A !important;
    background: rgba(196, 147, 138, 0.05) !important;
  }

  /* Insight card — chapter-break: column layout, comfortable padding */
  .cs-insight-card {
    border-radius: 16px !important;
    padding: 24px 18px !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* Insight card headmark badge */
  .cs-insight-card > span:first-child {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
  }

  /* Insight body text */
  .cs-insight-card p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   STEP 4 · Engagement timeline → vertical scroll
   All timeline grids live in #sec-timeline and carry
   grid-template-columns + position:relative in their style.
   No separate class required — section-scoped attribute
   selector catches every column-count variation (3–7 cols).
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* The n-column timeline grid → single vertical column.
     Both the explicit class and the section-scoped attribute selector
     are listed so every column-count variant (3–7 cols) is covered. */
  .cs-timeline-grid,
  #sec-timeline [style*="grid-template-columns"][style*="position:relative"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding-left: 32px !important;
    position: relative !important;
  }

  /* Hide horizontal connector line (absolute-positioned div) */
  .cs-timeline-grid > [style*="position:absolute"],
  #sec-timeline [style*="grid-template-columns"][style*="position:relative"] > [style*="position:absolute"] {
    display: none !important;
  }

  /* Vertical connector line drawn via ::before on the grid container */
  .cs-timeline-grid::before,
  #sec-timeline [style*="grid-template-columns"][style*="position:relative"]::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: var(--bg-DCD8CE, #DCD8CE);
    border-radius: 1px;
  }

  /* Each timeline step: flex row (badge left | card right) */
  .cs-timeline-grid > div,
  #sec-timeline [style*="grid-template-columns"][style*="position:relative"] > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding-bottom: 18px !important;
  }

  /* Number badge: fixed size, sits above the connector line */
  .cs-timeline-grid > div > span,
  #sec-timeline [style*="grid-template-columns"][style*="position:relative"] > div > span {
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
    z-index: 1 !important;
    position: relative !important;
  }

  /* Step card: fill remaining width, remove forced min-height */
  .cs-timeline-grid > div > div,
  #sec-timeline [style*="grid-template-columns"][style*="position:relative"] > div > div {
    flex: 1 !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   STEP 5 · Results section
   .cs-results-grid  — outer 2-col metrics grid
   .cs-metric-card   — individual before/after metric card
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Results grid: 2-col → 1-col */
  .cs-results-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Metric card: comfortable padding */
  .cs-metric-card {
    padding: 20px 18px !important;
  }

  /* Metric label: clear hierarchy marker */
  .cs-metric-card > [style*="font-weight:800"][style*="color:#FFFFFF"] {
    font-size: 14px !important;
    margin-bottom: 12px !important;
  }

  /* Before / After rows: display as 2-col mini grid for visual contrast */
  .cs-metric-card > [style*="flex-direction:column"][style*="gap:8px"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 10px !important;
  }

  /* Individual Before / After row */
  .cs-metric-card [style*="display:flex"][style*="gap:10px"][style*="font-size:13px"] {
    flex-direction: column !important;
    gap: 2px !important;
  }

  /* BEFORE / AFTER label chips */
  .cs-metric-card [style*="flex:0 0 56px"] {
    flex: none !important;
    font-size: 9.5px !important;
    letter-spacing: 0.08em !important;
  }

  /* After value: bump contrast */
  .cs-metric-card [style*="color:var(--cs-E4F0F1"] {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #E4F0F1 !important;
  }

  /* Impact badge: full width, clear bottom accent */
  .cs-metric-card > [style*="background:rgba(255,163,25"] {
    margin-top: 10px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   STEP 6 · Technical deep dive
   .cs-tech-table    — stack table container (stackRows)
   .cs-tech-ba-grid  — before/after 4-col grid rows
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Tech stack table: each 3-col row → 1-col stacked */
  .cs-tech-table sc-for > div,
  .cs-tech-table > div {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    padding: 12px 16px !important;
  }

  /* Layer label: de-emphasise */
  .cs-tech-table [style*="font-size:11px"][style*="text-transform:uppercase"] {
    font-size: 10px !important;
    margin-bottom: 2px !important;
    color: var(--fg-9AA3AE, #9AA3AE) !important;
  }

  /* Tech name */
  .cs-tech-table [style*="font-weight:700"][style*="font-size:14px"] {
    font-size: 14.5px !important;
    margin-bottom: 2px !important;
  }

  /* Purpose text */
  .cs-tech-table [style*="font-size:13.5px"][style*="color:var(--fg-4B5563"] {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* BA grid: already single-column via parent .m3c (outer loop is 1-col);
     each inner row collapses from 4 col → 1 col */
  .cs-tech-ba-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 14px 16px !important;
  }

  /* BA label: separator below */
  .cs-tech-ba-grid > div:first-child {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--bd-E7E4DC, #E7E4DC) !important;
    margin-bottom: 2px !important;
  }

  /* BA before / after / impact cells */
  .cs-tech-ba-grid > div:not(:first-child) {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  /* Tech tag chips: wrap freely */
  [style*="display:flex"][style*="flex-wrap:wrap"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   STEP 8 · Client voice — testimonial cards
   Dark teal cards (background:#0A5764) with 34px 36px padding;
   reduce side padding so text isn't cramped on 390px screens.
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Testimonial card in #sec-voice */
  #sec-voice [style*="background:#0A5764"][style*="border-radius:20px"] {
    padding: 24px 20px !important;
  }

  /* Quote text — slightly smaller on mobile */
  #sec-voice [style*="font-size:19px"][style*="font-style:italic"] {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   STEP 9 · Hero metric — case study variant clamp value
   The case study hero uses clamp(46px,6vw,76px) which differs
   from the solution pages' clamp(46px,7vw,84px).
   Scale it down on narrow screens.
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  [style*="font-size:clamp(46px,6vw,76px)"] {
    font-size: clamp(36px, 9vw, 52px) !important;
  }

  /* Snapshot card padding: reduce on mobile */
  #sec-snapshot [style*="border-radius:16px"][style*="padding:22px 24px"] {
    padding: 16px 18px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CASE STUDY MOBILE — DARK MODE OVERRIDES
   All selectors are scoped to html.dark so they only fire when
   dark mode is active.  The @media (max-width: 768px) wrapper
   means these rules only apply on mobile (same breakpoint as the
   light-mode counterparts above).
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   Pain-point cards (.cs-pain-list)
   Light mode: white bg + amber left border.
   Dark mode: translucent dark surface, softer border, keep amber
   accent so the card still reads as a distinct list item.
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html.dark .cs-pain-list > div,
  html.dark .cs-pain-list sc-for > div {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 3px solid #FFA319 !important;
    box-shadow: none !important;
  }

  html.dark .cs-pain-list > div p,
  html.dark .cs-pain-list sc-for > div p {
    color: var(--fg-1F2937, #E2EBEC) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   "Not This" turning-point cards (.cs-turning-grid)
   Light mode: light rgba(196,147,138,0.05) bg — hardcoded, so
   the CSS-variable dark tokens never fire.
   Dark mode: use the dark red-tinted surface token (--bg-FBE9E7
   resolves to #2A1815 in dark mode) and mute the border colour.
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html.dark .cs-turning-grid > div,
  html.dark .cs-turning-grid sc-for > div {
    background: var(--bg-FBE9E7, rgba(196, 147, 138, 0.12)) !important;
    border-left-color: var(--cs-C4938A, #A06B62) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   Metric cards (.cs-metric-card) inside #sec-results
   Results section already has a dark teal background; the cards
   sit inside it.  Ensure the card surface uses the dark teal
   token so they don't flash white on load in dark mode, and
   keep highlight text legible.
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html.dark .cs-metric-card {
    background: var(--bg-07333B, #041518) !important;
  }

  /* "After" value highlight — already #E4F0F1 in light CSS but
     confirm it isn't suppressed by a dark-mode color token. */
  html.dark .cs-metric-card [style*="color:var(--cs-E4F0F1"] {
    color: #E4F0F1 !important;
  }

  /* Impact badge amber text stays readable */
  html.dark .cs-metric-card > [style*="background:rgba(255,163,25"] {
    color: #402A00 !important;
  }
}