/* iEA mobile layout guard.
   Every rule here exists because a specific element was measured sitting outside a
   390px viewport. Scoped to small screens so desktop layout is untouched. */
@media (max-width: 700px) {

  /* 1. Grid and flex items must be allowed to shrink below their content's intrinsic
        width. Without this a track is sized by its widest unbreakable content: the
        related-services row resolved to 313px + 276px inside a 326px parent, so the
        second card sat 279px off the right edge. */
  [style*="display:grid"] > *,
  [style*="display: grid"] > *,
  [style*="display:flex"] > *,
  [style*="display: flex"] > * { min-width: 0; }

  /* 2. Two-up card rows stack. At 390px two cards side by side leave ~153px each,
        which is not readable for a heading plus two lines of body copy. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  /* the About page crew pair is 1.4fr 1fr, so it missed the rule above and stayed
     two-up: two group photos ~170px wide each, at which width no face is legible */
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  .rgrid { grid-template-columns: minmax(0, 1fr) !important; }

  /* 3. A single long unbreakable string (a client name, an email, a URL) must wrap
        rather than push the whole page sideways. break-word, not anywhere: it only
        breaks when the word alone will not fit. */
  h1, h2, h3, h4, h5, p, span, a, li, td, figcaption, div { overflow-wrap: break-word; }
}

@media (max-width: 700px) {
  /* 4. The film-title overlay on the scroll-video blocks is white-space:nowrap, so a
        long title ran 123px past the right edge of a 390px screen. Let it wrap; two
        short lines beat one line the reader cannot finish. */
  .sv-title, .sv-title .sc-interp { white-space: normal !important; }
}

@media (max-width: 700px) {
  /* 5. Contact page: the enquiry form stacks ABOVE the contact details.
        Measured at 390px, the form began 1,800px down, behind the address, the
        messaging buttons, a 420px map and the Google Maps button. On the page
        whose entire job is capturing an enquiry, the form went unseen. Desktop
        keeps its two-column layout: this only applies once they stack. */
  .contact-grid { display: flex !important; flex-direction: column; }
  /* switching from grid to flex loses the grid track's implicit sizing, so the
     form measured 405px inside a 390px viewport until these two lines */
  .contact-grid > * { min-width: 0; max-width: 100%; }
  .contact-grid > form { order: 1; }
  .contact-grid > *:not(form) { order: 2; }
}