/* U58: portrait photos in the new gallery are never cropped: the whole photo over a blurred copy of itself.
   Offer open view (rail, all photos modal, description collage, tablet hero) and brand page (rail, about grid).
   Spec: ai/specs/2026-10-06-gallery-portrait-design.md */

.gp-tile { position: relative; overflow: hidden; background: #1c1c1c; }
.gp-tile > .gp-bg {
  position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: blur(26px) saturate(1.15) brightness(.92); transform: translateZ(0);
}
.gp-tile > img,
.gp-tile > picture > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain !important; object-position: center; }
/* the hover zoom of the rail would crop the edges again */
.gp-tile:hover > img { transform: none !important; }

/* all photos modal: masonry columns, every photo in its own shape */
.offer-gallery-grid.offer-gallery-grid--shaped { display: block; columns: 2 300px; column-gap: 10px; }
.offer-gallery-grid--shaped .grid-item { break-inside: avoid; margin-bottom: 10px; position: relative; }
.offer-gallery-grid--shaped .grid-item--full { column-span: all; }
.offer-gallery-grid--shaped .grid-item img { width: 100%; height: auto; object-fit: cover; }

/* description collage with portrait photos: the portrait is the tall tile on the left */
.campaign-collage-gallery.collage-count-3p { grid-template-columns: 2fr 3fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 11; }
.campaign-collage-gallery.collage-count-3p .collage-item:nth-child(1) { grid-row: 1 / span 2; border-radius: 1rem 0 0 1rem; }
.campaign-collage-gallery.collage-count-3p .collage-item:nth-child(2) { border-radius: 0 1rem 0 0; }
.campaign-collage-gallery.collage-count-3p .collage-item:nth-child(3) { border-radius: 0 0 1rem 0; }
.campaign-collage-gallery.collage-count-2p { grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 3; }
.campaign-collage-gallery.collage-count-2p .collage-item:nth-child(1) { border-radius: 1rem 0 0 1rem; }
.campaign-collage-gallery.collage-count-2p .collage-item:nth-child(2) { border-radius: 0 1rem 1rem 0; }
.listing-description .campaign-collage-gallery .collage-item.gp-tile img { object-fit: contain !important; z-index: 1; }

/* brand page about grid */
.brand-gal__t.gp-tile img { object-fit: contain !important; }