/* Responsive image alignment fixes
   Keeps visual assets inside their cards, preserves full image content where product/detail accuracy matters,
   and prevents narrow media columns from creating cropped or tiny images on tablet and desktop widths. */
img,
picture,
svg {
  max-width: 100%;
}

figure,
[class*="media"],
[class*="visual"],
[class*="gallery"],
[class*="compare"],
[class*="workspace"] {
  min-width: 0;
}

/* Ecommerce product page: prevent cramped side thumbnails like the reported screenshot. */
.product-page .model-grid {
  align-items: stretch;
}

.product-page .model-grid article {
  grid-template-columns: minmax(230px, 0.9fr) minmax(0, 1fr);
  min-width: 0;
}

.product-page .model-media {
  min-height: 320px;
  padding: 0.65rem;
  overflow: hidden;
}

.product-page .model-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.product-page .route-grid img,
.product-page .fit-media img,
.product-page .product-compare__stage > img,
.product-page .product-compare__after img {
  object-fit: contain;
  object-position: center;
  background: #050f18;
}

/* Image generator and cloud editor pages: show complete examples instead of cropping tall/portrait samples. */
.generator-hero__visual > img,
.generator-model-card img,
.review-board__visual img,
.generator-workspace img,
.generator-showcase img,
.generator-wide-photo img,
.editor-showcase img,
.editor-evidence-grid img,
.editor-fit-card img,
.editor-hero__compare img,
.editor-workspace img,
.editor-wide-photo img {
  object-fit: contain !important;
  object-position: center !important;
  background: #07131e;
}

.review-board__visual,
.generator-model-card > div,
.editor-fit-card,
.editor-showcase,
.editor-evidence-grid figure,
.editor-workspace,
.editor-wide-photo {
  min-width: 0;
  overflow: hidden;
}

/* Photography solution: keep uploaded images inside framed cards on desktop and mobile. */
.photo-hero__visual img,
.photo-wide img,
.photo-gallery img,
.route-grid img,
.photo-portrait-compare img,
.crop-story img {
  object-fit: contain !important;
  object-position: center !important;
  background: #06131f;
}

.photo-gallery figure > div,
.crop-story figure,
.photo-portrait-compare figure,
.route-grid figure {
  min-width: 0;
  overflow: hidden;
}

/* Restore/printing/design agency/detail pages: avoid overflow and hard crops in framed proofing images. */
.restore-editorial img,
.restore-compare img,
.print-hero__visual img,
.print-proof img,
.print-media img,
.agency-hero__visual img,
.split-layout figure img,
.hr-showcase img,
.hr-fit-card img,
.hr-model-card img,
.batch-showcase img,
.batch-proof img,
.cloud-hero__visual img,
.cloud-step img,
.download-hero__visual img,
.download-media img,
.download-proof img {
  object-fit: contain !important;
  object-position: center !important;
  background: #07131e;
}

/* Better image cards on medium screens where two-column cards become too narrow. */
@media (max-width: 1120px) {
  .product-page .model-grid {
    grid-template-columns: 1fr;
  }

  .product-page .model-grid article {
    grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1fr);
    min-height: 0;
  }

  .product-page .model-media {
    min-height: 300px;
  }
}

@media (max-width: 720px) {
  .product-page .model-grid article {
    grid-template-columns: 1fr;
  }

  .product-page .model-media {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .product-page .model-media img {
    height: 100%;
  }

  .review-board,
  .editor-evidence-grid,
  .editor-fit-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Adaptive portrait-media framing
   When a source image is naturally tall, wide containers can create a large dark border with a small centered image.
   These rules make portrait examples use a narrower frame so the image fills the card more naturally while still using object-fit: contain. */
.product-compare.is-portrait-media,
.restore-compare.is-portrait-media,
.image-compare.is-portrait-media,
.fit-media.is-portrait-media,
.review-board__visual.is-portrait-media,
.editor-showcase.is-portrait-media,
.editor-fit-card.is-portrait-media,
.editor-evidence-grid figure.is-portrait-media,
.download-media.is-portrait-media,
.download-proof.is-portrait-media,
.batch-showcase.is-portrait-media,
.batch-proof.is-portrait-media,
.hr-showcase.is-portrait-media,
.hr-fit-card.is-portrait-media,
.photo-gallery figure > div.is-portrait-media,
.crop-story figure.is-portrait-media,
.photo-portrait-compare.is-portrait-media {
  max-width: min(100%, 760px);
  margin-inline: auto;
}

.product-compare.is-portrait-media .product-compare__stage,
.restore-compare.is-portrait-media .restore-compare__stage,
.image-compare.is-portrait-media,
.fit-media.is-portrait-media,
.review-board__visual.is-portrait-media,
.editor-showcase.is-portrait-media,
.editor-fit-card.is-portrait-media,
.editor-evidence-grid figure.is-portrait-media,
.download-media.is-portrait-media,
.download-proof.is-portrait-media,
.batch-showcase.is-portrait-media,
.batch-proof.is-portrait-media,
.hr-showcase.is-portrait-media,
.hr-fit-card.is-portrait-media,
.photo-gallery figure > div.is-portrait-media,
.crop-story figure.is-portrait-media,
.photo-portrait-compare.is-portrait-media {
  aspect-ratio: 4 / 5;
}

.product-page .model-grid article.has-portrait-media {
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1fr);
}

.product-page .model-media.is-portrait-media {
  min-height: 360px;
  aspect-ratio: 4 / 5;
  width: min(100%, 320px);
  margin-inline: auto;
}

.product-page .model-media.is-portrait-media img {
  max-height: none;
}

@media (max-width: 1120px) {
  .product-page .model-grid article.has-portrait-media {
    grid-template-columns: minmax(250px, 0.82fr) minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .product-compare.is-portrait-media,
  .restore-compare.is-portrait-media,
  .image-compare.is-portrait-media,
  .fit-media.is-portrait-media,
  .review-board__visual.is-portrait-media,
  .editor-showcase.is-portrait-media,
  .editor-fit-card.is-portrait-media,
  .editor-evidence-grid figure.is-portrait-media,
  .download-media.is-portrait-media,
  .download-proof.is-portrait-media,
  .batch-showcase.is-portrait-media,
  .batch-proof.is-portrait-media,
  .hr-showcase.is-portrait-media,
  .hr-fit-card.is-portrait-media,
  .photo-gallery figure > div.is-portrait-media,
  .crop-story figure.is-portrait-media,
  .photo-portrait-compare.is-portrait-media {
    max-width: 100%;
  }

  .product-page .model-grid article.has-portrait-media {
    grid-template-columns: 1fr;
  }

  .product-page .model-media.is-portrait-media {
    width: 100%;
    max-width: 320px;
    min-height: 0;
  }
}