/* Visual Suspect — responsive repair layer (additive, see SITE_CONTRACT.md).
   Copied to site/vs-responsive/ and linked on every page by
   inject_responsive.py. Scope: repair rendering bugs only — never restyle
   or redesign legacy pages. Guarded SEO fields and visible text untouched. */

/* 1) Homepage SHOWREEL / LATEST PRODUCTION block.
   WPBakery authored the wrapping column as vc_col-sm-1 + vc_col-lg-12:
   full width on desktop (>=1200px) but 1/12 (~64px) between 768 and
   1199px, crushing ~3000px of content into a one-letter-per-line sliver
   on iPad portrait AND landscape. Restore full width in that range. */
@media (min-width: 768px) and (max-width: 1199px) {
  .wpb_column.vc_col-sm-1.vc_col-lg-12 {
    width: 100%;
  }

  /* The restored block holds a non-wrapping flex row of category buttons
     sized for desktop; let it wrap instead of spilling past the viewport. */
  .ut-btn-group {
    flex-wrap: wrap;
  }

}

/* Decorative theme layers (gallery zoom ::before overlays, reveal panes)
   are sized a few percent wider than their containers. Desktop side
   margins absorb that; on phones and tablets it spills past the viewport
   and lets the page wiggle sideways. The spill is purely decorative —
   every content box stays inside the viewport — so clip it at the body.
   html keeps overflow untouched and remains the viewport scroller, so
   vertical scrolling and position:sticky are unaffected. */
@media (max-width: 1199px) {
  body {
    overflow-x: hidden;
  }
}

/* 2) Contact-block list icons (phone / e-mail / globe, ~590 pages).
   The theme prints FontAwesome .fa-li markers inside plain <li>s without
   FontAwesome's required fa-ul / position:relative pairing, so the
   absolutely-positioned icons resolve against the page edge and sit
   off-canvas at every viewport width. Anchor them to their own item. */
.contact-section li,
li:has(> .fa-li) {
  position: relative;
}

/* 3) Safety net for the long tail of 800+ exported pages: embedded
   players and in-article images must never force horizontal scrolling
   on phones. Fixed-size iframes keep their height; only width is capped. */
@media (max-width: 767px) {
  .wpb_wrapper iframe,
  article iframe {
    max-width: 100%;
  }
  .wpb_wrapper img,
  article img {
    max-width: 100%;
    height: auto;
  }
}

/* 4) Stop iOS Safari from arbitrarily inflating text after an
   orientation change (classic iPhone landscape zoom). */
html {
  -webkit-text-size-adjust: 100%;
}