/* upholstery1066.uk - mobile layout guard.
 *
 * The theme sets body{overflow-x:hidden}, which HIDES sideways overflow but does not
 * prevent it: the DOCUMENT is still wider than the screen, so Safari computes a
 * minimum zoom scale below 1 and a pinched-out view becomes a legal scale with
 * nothing to spring back to.
 *
 * MEASURED, not inferred: at a 390px viewport the homepage reported
 *   document.scrollWidth = 684px
 * and every offending element was an `img.seo-image`.
 */

/* THE FIX.
 * .seo-image is an SEO-only copy of each tile photo:
 *     opacity:0; visibility:collapse; position:absolute; max-width:100%
 * It is invisible, but `position:absolute` with no offsets leaves it at its STATIC
 * position - so it still projects past the right edge and stretches the document to
 * 684px. Pinning it to its containing block gives it zero footprint while keeping the
 * element (and its alt text) in the DOM for crawlers.
 */
img.seo-image {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 1px !important;
  max-height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;
}

html, body { max-width: 100%; }

/* Nothing may exceed its container. Media and embeds are the usual culprits. */
img, video, iframe, embed, object, canvas, svg { max-width: 100%; }
img, video { height: auto; }

/* Wide content scrolls inside its own box instead of stretching the page. */
table, pre { max-width: 100%; overflow-x: auto; display: block; }

/* NOTE: `overflow-wrap: break-word` on body was tried here and REMOVED. It broke
   words mid-character in the main navigation ("HOMEPAG / E"). Preventing overflow is
   not worth mangling the site's own wording. */

.u1066-tile { max-width: 100%; }
.u1066-tile .category--project__photo { transform-origin: center center; }

/* The video gallery shares .project--photos styling (leather background, black
   containers). Give the iframe a sane mobile size instead of a 674px fixed height. */
.project--photos_video-gallery { min-height: 0 !important; }
.project--photos_video-gallery iframe { width: 100%; max-height: 70vh; aspect-ratio: 9 / 16; }
@media (min-width: 768px) {
  .project--photos_video-gallery iframe { aspect-ratio: auto; }
}