/* Image frames shared by the static site and WordPress. Loaded after the design. */
body .media-frame,
body .photo-open,
body .service-image,
body .sector-image,
body .service-hero-media {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 13px;
  background: #e8e7df;
}

/* Reserve the frame before loading; intrinsic portrait heights cannot grow a row. */
body .media-frame > img[data-media-key][data-media-fit],
body .photo-open > img[data-media-key][data-media-fit],
body .service-image > img[data-media-key][data-media-fit],
body .sector-image > img[data-media-key][data-media-fit],
body .service-hero-media > img[data-media-key][data-media-fit],
body .hero-visual > img[data-media-key][data-media-fit],
body .coverage-visual > img[data-media-key][data-media-fit] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* Keep the complete client/reference photograph and all portrait subjects visible. */
body main img[data-media-key][data-media-fit="contain"][data-media-shape] {
  object-fit: contain;
  object-position: center;
}

body .hero-visual {
  width: 100%;
  max-width: 420px;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 4;
  margin-inline: auto;
  justify-self: center;
  overflow: hidden;
}

body .service-image,
body .project .photo-open,
body.page-home .work-mosaic .photo-open {
  aspect-ratio: 4 / 3;
  height: auto;
  background: #e8e7df;
}

body .lighting-photo .photo-open {
  aspect-ratio: 3 / 2;
  height: auto;
}

body.page-home .work-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  columns: auto;
  gap: 38px 32px;
  align-items: start;
}

body.page-home .work-mosaic .project,
body .project-gallery .project {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  justify-self: stretch;
}

body .project-gallery,
body .lighting-gallery .lighting-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  columns: auto;
  gap: 36px 27px;
  align-items: start;
}

body .lighting-gallery .lighting-grid > .lighting-photo {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}

body .lighting-photo,
body .project-feature-copy,
body .gallery-note,
body .service-hero-caption {
  min-width: 0;
}

body .why-visual,
body .about-image {
  width: 100%;
  max-width: 400px;
  min-width: 0;
  margin-inline: auto;
}

body .why-visual .media-frame { aspect-ratio: 3 / 4; }
body .about-image .media-frame { aspect-ratio: 4 / 5; }

body .service-page-hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: stretch;
  padding: 0;
  background: #ecefe5;
}

body .service-hero-media {
  max-height: 420px;
  border-radius: 0;
}

body .service-hero-caption {
  position: static;
  inset: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding: 32px;
  border-radius: 0;
}

body .service-hero-caption > span { line-height: 1.6; }

body .coverage-visual {
  position: relative;
  min-width: 0;
  min-height: 360px;
  height: auto;
  overflow: hidden;
}

/* The dialog shows the uncropped original, independent of thumbnail frames. */
body .lightbox figure > img {
  position: static;
  width: auto;
  height: auto;
  max-width: 85vw;
  max-height: 73vh;
  object-fit: contain;
}

@media (max-width: 1100px) {
  body .project-gallery,
  body .lighting-gallery .lighting-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body .service-page-hero { grid-template-columns: minmax(0, 1fr); }
  body .service-hero-caption {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 22px 24px;
  }
}

@media (max-width: 760px) {
  body .hero-visual { max-width: 330px; }
  body.page-home .work-mosaic,
  body .project-gallery,
  body .lighting-gallery .lighting-grid {
    grid-template-columns: minmax(0, 1fr);
    columns: auto;
    gap: 32px;
    max-width: none;
  }
  body .project .photo-open,
  body.page-home .work-mosaic .photo-open { aspect-ratio: 1 / 1; }
  body.page-home .work-mosaic,
  body .project-gallery {
    max-width: 520px;
    margin-inline: auto;
  }
  body .why-visual,
  body .about-image { max-width: 330px; }
  body .service-hero-media { max-height: 360px; }
  body .service-hero-caption { padding: 20px; }
  body .coverage-visual {
    min-height: 0;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  body .lightbox figure > img {
    max-width: 87vw;
    max-height: 67vh;
  }
}