/* Photo-only crops from the supplied catalogue. Text is presented separately in HTML. */
.product-detail-image--photo,
.product-grid .product-card .product-image.product-photo,
.photo-gallery-media {
  background-color: #eaf1f6;
  background-repeat: no-repeat;
}

.product-detail-image--photo {
  min-height: 390px;
  background-size: cover;
  background-position: center;
}

.product-grid .product-card .product-image.product-photo {
  background-size: cover;
  background-position: center;
}

.product-photo--hydraulic { background-image: url('../images/guide-rail-cargo-lift-enhanced.webp'); background-size: cover; background-position: center; }
.product-photo--attic { background-image: url('../images/attic-lift-showcase.webp'); background-size: cover; background-position: center; }
.product-photo--villa { background-image: url('../images/home-elevator-enhanced.webp'); background-size: cover; background-position: center; }
.product-photo--scissor { background-image: url('../images/scissor-lift-table-enhanced.webp'); background-size: cover; background-position: center; }
.product-photo--restaurant { background-image: url('../images/restaurant-service-lift-showcase.webp'); background-size: cover; background-position: center; }
.product-photo--boarding { background-image: url('../images/mobile-boarding-bridge-showcase.webp'); background-size: cover; background-position: center; }
.product-photo--dock { background-image: url('../images/fixed-dock-leveler-enhanced.webp'); background-size: cover; background-position: center; }
.product-photo--mobile { background-image: url('../images/mobile-loading-platform-showcase.webp'); background-size: cover; background-position: center; }

.product-detail--single-sided { grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: start; }
.single-sided-lift-media { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; min-height: 510px; }
.single-sided-lift-media__image { min-width: 0; min-height: 0; margin: 0; overflow: hidden; border-radius: 14px; background: #eaf1f6; box-shadow: 0 10px 25px rgba(13, 44, 73, .09); }
.single-sided-lift-media__image--shaft { grid-row: 1 / span 2; }
.single-sided-lift-media__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.single-sided-lift-media__image:hover img { transform: scale(1.025); }

.photo-showcase-section { padding: 84px 0 96px; background: #f5f8fc; }
.photo-showcase-section--company { background: #fff; }
.photo-showcase-heading { max-width: 820px; margin: 0 auto 38px; text-align: center; }
.photo-showcase-heading .eyebrow { color: var(--blue); }
.photo-showcase-heading h2 { margin: 8px 0 14px; color: var(--ink); font-size: clamp(32px, 4vw, 50px); line-height: 1.14; }
.photo-showcase-heading p { margin: 0; color: #607082; font-size: 17px; }

.photo-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.photo-gallery-card { overflow: hidden; border: 1px solid #dbe5ee; background: #fff; box-shadow: 0 10px 26px rgba(13, 44, 73, .07); }
.photo-gallery-media { display: block; width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.photo-gallery-copy { padding: 17px 18px 19px; }
.photo-gallery-copy h3 { margin: 0 0 6px; color: #163b62; font-size: 19px; line-height: 1.3; }
.photo-gallery-copy p { margin: 0; color: #637284; font-size: 14px; line-height: 1.55; }

.photo-gallery-media--company-building { background-image: url('../images/about/company-building-clean.webp'); background-size: cover; background-position: center; }
.photo-gallery-media--facility { background-image: url('../images/scissor-lift-table-enhanced.webp'); background-size: cover; background-position: center; }
.photo-gallery-media--cylinder { background-image: url('../images/guide-rail-cargo-lift-enhanced.webp'); background-size: cover; background-position: center; }
.photo-gallery-media--steel { background-image: url('../images/fixed-dock-leveler-enhanced.webp'); background-size: cover; background-position: center; }
.photo-gallery-media--assembly { background-image: url('../images/mobile-loading-platform-showcase.webp'); background-size: cover; background-position: center; }
.photo-gallery-media--installation-yellow { background-image: url('../images/mobile-boarding-bridge-showcase.webp'); background-size: cover; background-position: center; }
.photo-gallery-media--installation-blue { background-image: url('../images/home-elevator-enhanced.webp'); background-size: cover; background-position: center; }
.photo-gallery-media--hoistway { background-image: url('../images/attic-lift-showcase.webp'); background-size: cover; background-position: center; }
.photo-gallery-media--outdoor { background-image: url('../images/restaurant-service-lift-showcase.webp'); background-size: cover; background-position: center; }
.photo-gallery-media--safety { background-image: url('../images/mobile-loading-platform-showcase.webp'); background-size: cover; background-position: center; }

@media (max-width: 860px) {
  .product-detail--single-sided { grid-template-columns: 1fr; }
  .photo-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-showcase-section { padding: 64px 0 70px; }
}

@media (max-width: 560px) {
  .product-detail-image--photo { min-height: 300px; }
  .single-sided-lift-media { min-height: 410px; gap: 9px; }
  .single-sided-lift-media__image { border-radius: 10px; }
  .photo-gallery-grid { grid-template-columns: 1fr; gap: 18px; }
  .photo-showcase-heading { margin-bottom: 27px; }
  .photo-showcase-heading p { font-size: 16px; }
}