/* Photo slots (nm-photos.js): a quiet shimmer while a picture is on its way, the picture when it arrives, and no stand-in when there is none. */
@keyframes nmPhShimmer{to{background-position:-200% 0}}

/* a portrait picture is cropped from the top, where towers and facades are */
img.is-portrait{object-position:50% 28%}

/* day cards in the journey */
.nm-j-photo.is-loading,.nm-h-thumb.is-loading{background:linear-gradient(100deg,var(--nm-teal-soft,#dff1ef) 30%,#f8f1e3 50%,var(--nm-teal-soft,#dff1ef) 70%);background-size:200% 100%;animation:nmPhShimmer 1.4s linear infinite}
.nm-j-photo img{opacity:0;transition:opacity .25s ease}
.nm-j-photo.has-img img{opacity:1}
.nm-j-day:has(>.nm-j-photo.no-photo){grid-template-columns:minmax(0,1fr)}
.nm-j-day:has(>.nm-j-photo.no-photo)>.nm-j-photo{display:none}
.nm-j-day:has(>.nm-j-photo.no-photo) .nm-j-daytxt{padding-left:14px}

/* hotel photo: a fixed thumbnail, the hotel icon until (and unless) a real picture of that hotel exists */
.travel-row.nm-offer.nm-hotel{grid-template-columns:72px 1fr 150px auto}
.nm-hotel .travel-icon.nm-h-thumb{position:relative;display:grid;place-items:center;width:72px;height:56px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,var(--nm-teal-soft,#dff1ef),#f6e7d2);font-size:24px}
.nm-h-thumb img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease}
.nm-h-thumb.has-img img{opacity:1}
.nm-h-thumb.has-img .nm-h-ph{visibility:hidden}
@media(max-width:700px){
  .travel-row.nm-offer.nm-hotel{grid-template-columns:64px 1fr}
  .nm-hotel .travel-icon.nm-h-thumb{width:64px;height:48px}
}

/* the classic gallery under the trip: a caption only for a tile that has its picture */
#gallery .photo-tile:not(.has-img) span{visibility:hidden}
#gallery .photo-tile[hidden]{display:none}
#gallery.is-empty{display:none}
#gallery .photo-tile img{transition:opacity .25s ease}

/* the hero banner fades in once its picture is there */
#heroPhoto{transition:opacity .35s ease}

@media(prefers-reduced-motion:reduce){.nm-j-photo.is-loading,.nm-h-thumb.is-loading{animation:none}.nm-j-photo img,.nm-h-thumb img,#heroPhoto,#gallery .photo-tile img{transition:none}}
