/* Shared media sizing for browsers, embedded web views and the installed app. */
html body img,
html body video,
html body canvas,
html body picture {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
/* HTML width/height attributes must not stretch otherwise unconstrained images.
   Component classes can still set a deliberate frame height and object-fit. */
img { height: auto; }
picture { display: block; }

/* Grid/flex automatic minimum sizes can otherwise use the original image width,
   making max-width:100% resolve against a container wider than the screen. */
body main,
body main > section,
body :is(.hero, .section-head, .logo-hero-wrap, .logo-stage,
  .featured-shell, .slideshow-frame, .slide-view, .pin-wrap, .pin-card,
  .studio-visual-grid, .studio-visual-card, .approach-panel, .approach-image,
  .lab-layout, .lab-main, .lab-aside, .lab-background, .lab-bottom,
  .anatomy-container, .anatomy-image-wrap, .anatomy-thumbs,
  .archid-gallery-grid, .archid-gallery-tile, .archid-home-preview-grid,
  .iconographies-grid, .iconography-study, .iconography-art,
  .favicon-workbench, .w-layout, .w-auth, .w-stack, .w-panel, .modal-box),
body :is(.hero, .section-head, .lab-layout, .lab-bottom, .approach-panel,
  .archid-home-preview-grid, .w-layout, .w-auth, .modal-box) > * {
  min-width: 0;
}

@media (max-width: 1180px) {
  /* Include tablet portrait, landscape and split-screen layouts. */
  body :is(.logo-stage, .lab-main, .lab-aside, .anatomy-container,
    .slideshow-frame, .featured-shell, .pin-wrap, .iconography-art) {
    max-width: 100%;
    box-sizing: border-box;
  }
  body :is(.studio-visual-card, .archid-gallery-tile, .archid-home-preview-grid,
    .approach-image, .pin-media) img {
    height: auto;
    object-fit: contain;
  }
  body .slide-view { min-height: 0; }
  body .slide-view img {
    height: auto;
    max-height: 65vh;
    max-height: 65svh;
    object-fit: contain;
  }
  /* The browser toolbar can change the visible height on mobile Safari. */
  body .modal { box-sizing: border-box; padding: 12px; }
  body .modal-box {
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }
  body .modal-box img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 65vh;
    max-height: 65dvh;
    object-fit: contain;
  }
  body .modal-meta { flex-wrap: wrap; overflow-wrap: anywhere; }
}