/* Mobile layout overrides.
   The page ships desktop-only inline styles and no breakpoints, so every rule
   here needs !important to win against the element's own style attribute. */

@media (max-width: 768px) {

  /* Nav links overflowed the viewport and were clipped mid-word. Wrapping them
     onto a second row keeps every link and the CTA visible without JS. */
  nav {
    flex-wrap: wrap !important;
    padding: 10px 16px !important;
    gap: 6px 12px !important;
  }
  nav > div {
    flex: 1 1 100%;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px 14px !important;
  }
  /* Slightly tighter than desktop so the five links sit on one row. */
  nav > div > a {
    font-size: 11px !important;
    letter-spacing: 0.09em !important;
  }
  /* The CTA would otherwise wrap onto a third row; the logo row has space to
     its right, so park it there and keep the fixed header two rows tall. */
  nav > div > a:last-child {
    position: absolute;
    top: 8px;
    right: 16px;
    padding: 9px 16px !important;
  }

  /* Desktop column grids squeeze body text to ~150px at 375px wide, wrapping
     every two or three words. Collapse them. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Two exceptions: photos and short partner names stay legible in multiple
     columns, and reading them as one long list would be worse. */
  [style*="grid-template-columns"]:has(> img) {
    grid-template-columns: repeat(2, 1fr) !important;
    /* Desktop pins rows at 220px for the mosaic; let them size to the photo. */
    grid-auto-rows: auto !important;
  }
  /* The photo mosaic mixes single- and double-width cells, which reads as
     ragged once there are only two columns. Give every photo one equal cell. */
  [style*="grid-template-columns"] > img {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  [style*="grid-template-columns"]:has(> :nth-child(13)) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Carousel: nine slide dashes plus the "01 / 09" counter ran past the right
     edge. Narrower dashes fit without dropping the slide controls. */
  button[style*="height: 3px"],
  button[style*="height:3px"] {
    width: 8px !important;
  }
}