/*
 * Phone layout fixes shared by every case-study page.
 * Loaded last in <head>, so it only needs to override what breaks below 640px.
 */
@media (max-width: 640px) {
  /* Decorative glows and wide strips must never cause sideways scrolling */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }
  @supports (overflow: clip) {
    html,
    body {
      overflow-x: clip;
    }
  }

  img,
  video,
  svg,
  canvas {
    max-width: 100%;
  }

  /* ---- Shared header pattern (Ariel, Bay6, Deloitte, Lunamé, ThoughtFocus) ---- */
  .site-header .header-inner {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .site-header .header-left {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }
  .site-header .header-badge,
  .site-header .header-role,
  .site-header .header-sep,
  .site-header .header-title,
  .site-header .header-nav {
    display: none !important;
  }
  .site-header .header-right {
    flex: 0 0 auto;
    gap: 8px !important;
    min-width: 0;
  }
  .site-header .header-right a {
    font-size: 12px !important;
    padding: 7px 12px !important;
    white-space: nowrap;
  }
  /* "Back to Portfolio" buttons that carry an arrow icon collapse to just the icon */
  .site-header .header-right a:first-child:has(svg) {
    font-size: 0 !important;
    gap: 0 !important;
    padding: 8px 10px !important;
  }

  /* ---- SmartWheels ---- */
  .top-meta-inner {
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
  }
  .top-meta-desc,
  .top-meta-sep {
    display: none !important;
  }
  .top-meta-links {
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
  }
  .top-meta-links a {
    white-space: nowrap;
  }
  .site-nav .nav-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  .site-nav .nav-logo span,
  .site-nav .nav-sep,
  .site-nav .nav-links {
    display: none !important;
  }
  .site-nav .nav-left {
    min-width: 0;
    overflow: hidden;
  }
  .site-nav .nav-project-name {
    display: none !important;
  }

  /* ---- Lunamé announcement bar ---- */
  .rebrand-top-bar-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  .rebrand-top-bar-inner * {
    white-space: normal !important;
  }

  /* ---- Ariel deliverable filters ---- */
  .canvas-filter-pills {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  /* Inline two-column grids stack on phones */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Wide tables / code-like strips scroll inside themselves instead of the page */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}