/* Responsive fix for /case-studies/*-case-study.html "proof sheet" pages.
   These pages are hand-built as a fixed 1400x990 desktop sheet using inline
   styles that are identical across all 7 pages, so this stylesheet targets
   those inline style strings directly rather than requiring per-file markup
   changes. Below ~1500px the sheet no longer fits its own padding, so it
   switches from the fixed desktop layout to a fluid, stacked one. */

@media (max-width: 1500px) {
  body { padding: 24px 16px !important; }

  [style*="width: 1400px; height: 990px"] {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 28px 24px !important;
  }

  [style*="gap: 50px; margin-top: 26px; flex: 1; min-height: 0;"] {
    flex-direction: column !important;
    gap: 28px !important;
  }

  [style*="width: 858px; flex-shrink: 0"],
  [style*="width: 358px; flex-shrink: 0"] {
    width: 100% !important;
  }

  /* Two-column body: drop grid entirely so children stack in DOM order,
     ignoring their explicit grid-column/grid-row placement. */
  [style*="grid-template-columns: 1fr 1fr"] {
    display: block !important;
  }

  [style*="letter-spacing: 0.13em; text-transform: uppercase; color: #bd3f1d"] {
    margin-top: 24px !important;
  }

  [style*="height: 1px; background: rgba(19,23,32,0.14)"] {
    margin: 20px 0 !important;
  }

  [style*="justify-content: space-between; align-items: center;"] {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }

  [style*="background: #e8572a; padding: 20px"] {
    flex-wrap: wrap !important;
    row-gap: 16px !important;
  }

  /* Vertical dividers between stat numbers don't wrap cleanly — hide them. */
  [style*="width: 1px; background: rgba(255,255,255,0.28)"] {
    display: none !important;
  }

  [style*="justify-content: flex-end; align-items: flex-end; margin-top: 14px;"] {
    justify-content: flex-start !important;
  }
  [style*="justify-content: flex-end; align-items: flex-end; margin-top: 14px;"] > div {
    text-align: left !important;
  }
}

@media (max-width: 600px) {
  [style*="width: 1400px; height: 990px"] {
    padding: 24px 18px !important;
  }
}