/* Shared responsive rules for case study pages (work/*.html).
 *
 * Loaded after each page's inline <style> block AND after site.css,
 * so rules here override matching declarations from either. Used to
 * enforce consistent responsive behavior across all case study pages
 * — single source of truth for future responsive tweaks.
 *
 * Inline <style> blocks on individual case study pages may add unique
 * rules (illustrative SVG sizing, page-specific decorations) but the
 * shared layout/responsive rules live here.
 */

/* ============================================================
   Design-token alignment
   ============================================================
   Case study pages were authored with --cream as the LIGHT cream
   (matching body bg) and --paper as the DARKER accent. The site-wide
   tokens in site.css use the inverse convention (--bg = light,
   --cream = darker). Because site.css loads after the inline <style>
   blocks, its --cream wins and our case study sections paint the
   wrong (darker) color, creating a visible band between the body's
   padding-top region (light) and the page content (darker).
   This redefines the two tokens to what the case study inline CSS
   expects, restoring the intended palette without touching site.css. */
:root {
  --cream: #FDFCF8;
  --paper: #F7F4E8;
}

/* ============================================================
   1080px breakpoint — stack two-column layouts to single column
   ============================================================ */
@media (max-width: 1080px) {
  .cs-stats__inner { grid-template-columns: repeat(2, 1fr); }
  .cs-stat { border-bottom: 1px solid var(--rule, rgba(0,0,0,0.12)); }
  .cs-stat:nth-child(2) { border-right: 0; }

  .cs-opp__layout { grid-template-columns: 1fr; gap: 48px; }

  .cs-mod { grid-template-columns: 1fr; gap: 32px; }
  .cs-mod--reverse .cs-mod__visual { order: 1; }
  .cs-mod--reverse .cs-mod__copy { order: 2; }

  .cs-res__grid { grid-template-columns: repeat(2, 1fr); }

  .cs-quote__inner { grid-template-columns: 1fr; gap: 32px; }

  .cs-timeline { grid-template-columns: 1fr; gap: 16px; }
  .cs-timeline__connector { transform: rotate(90deg); padding: 8px; }

  /* maritech-only sections: keep these responsive too */
  .cs-logos { grid-template-columns: repeat(4, 1fr); }
  .cs-logo--center { grid-column: span 2; }
  .cs-roll__grid { grid-template-columns: 1fr; }
  .cs-cta__inner { grid-template-columns: 1fr; padding: 40px; }
}

/* ============================================================
   700px breakpoint — mobile
   ============================================================ */
@media (max-width: 700px) {
  .cs-hero,
  .cs-opp,
  .cs-how,
  .cs-built,
  .cs-quote,
  .cs-res,
  .cs-stack,
  .cs-roll,
  .cs-cta {
    padding-left: 24px;
    padding-right: 24px;
  }

  .cs-stats__inner { grid-template-columns: 1fr; }
  .cs-stat { border-right: 0; }

  .cs-res__grid { grid-template-columns: 1fr; }

  /* Wrap the 4 hero topstats to a 2x2 grid on mobile.
     This is the fix that was missing from maritech.html and present in
     all 7 new case studies — now shared across all 8. */
  .cs-hero__topstats { flex-wrap: wrap; gap: 18px 0; }
  .cs-topstat { flex-basis: 50%; padding-right: 12px; }
  .cs-topstat__sep { display: none; }

  /* maritech-only sections */
  .cs-logos { grid-template-columns: repeat(2, 1fr); }
  .cs-logo--center { grid-column: span 2; }
}