/* Projects Gallery — phones only (760px and narrower). Desktop and tablet are untouched.
   The slideshow and the Technical Atlas viewer match the first "Integrated structural studies"
   image on the home page: full content width, picture edge-to-edge inside a thin rounded rim.
   Every other image matches the images beneath it on the home page: full content width at its
   natural proportions. */
@media (max-width:760px){
  /* ---- Never wider than the phone screen ----
     The page body is a flex column and <main> is centred with auto margins, which makes it
     size itself to its widest picture (about 1020px) instead of the screen. Pin every page
     block to the screen width so all content scales to whatever phone it is viewed on. */
  html:has(body[data-page="work"]),
  body[data-page="work"]{
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  @supports (overflow-x:clip){
    html:has(body[data-page="work"]),
    body[data-page="work"]{overflow-x:clip !important}
  }
  body[data-page="work"] > :is(header,main,footer,.cookie-prompt){
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  body[data-page="work"] main,
  body[data-page="work"] main *{min-width:0 !important;max-width:100% !important}
  body[data-page="work"] main :is(img,video,canvas,picture,svg,iframe){
    max-width:100% !important;
    height:auto;
  }
  body[data-page="work"] main :is(h1,h2,h3,h4,p,span,strong,a,li,figcaption){overflow-wrap:anywhere}

  /* ---- Projects slideshow: the picture fills the frame, the frame is just a thin rim ---- */
  body[data-page="work"] main .project-slideshow__frame{
    width:100% !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:27px !important;
    border:1px solid #d6e6e9 !important;
  }
  body[data-page="work"] main .project-slideshow__stage{
    width:100% !important;
    aspect-ratio:16/9 !important;
    max-height:none !important;
    min-height:0 !important;
    margin:0 !important;
    border-radius:0 !important;
  }
  body[data-page="work"] main .project-slideshow__img{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    border-radius:0 !important;
  }
  body[data-page="work"] main .project-slideshow__progress{margin:0 !important;border-radius:0 !important}
  body[data-page="work"] main .project-slideshow__meta{padding:12px 16px 14px !important}

  /* ---- Technical Atlas viewer: same treatment as the slideshow ---- */
  body[data-page="work"] main .anatomy-image-wrap{
    width:100% !important;
    aspect-ratio:16/9 !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:27px !important;
    box-sizing:border-box !important;
  }
  body[data-page="work"] #construction-anatomy .anatomy-image-wrap img{width:100% !important;height:100% !important;border-radius:0 !important}
  body[data-page="work"] main .anatomy-image-wrap .anatomy-image-tools{display:none !important}
  body[data-page="work"] main .anatomy-container{padding:0 !important}

  /* ---- All other images: full content width at natural proportions, like the home page ---- */
  body[data-page="work"] main .archid-gallery-grid{grid-template-columns:1fr !important}
  body[data-page="work"] main .pin-grid{columns:1 100% !important}
  body[data-page="work"] main :is(.archid-gallery-tile,.pin-card,.studio-visual-card,.approach-image){width:100% !important;max-width:100% !important}
  body[data-page="work"] main :is(.archid-gallery-tile,.pin-card,.studio-visual-card,.approach-image) img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
  }
}