/* Destination photos: Commons candidates from /api/v1/photos, shimmer until loaded, never a layout jump. */
.mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;aspect-ratio:1.5;overflow:hidden;background:var(--skeleton)}
.mosaic img{min-width:0;min-height:0}
.photo-slot{display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;padding:4px;font-size:10px;font-weight:800;color:var(--muted);text-align:center;background:linear-gradient(100deg,var(--skeleton) 30%,var(--skeleton-hi) 50%,var(--skeleton) 70%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite}
.photo-slot.photo-loaded{padding:0;background:var(--skeleton);animation:none}
.photo-slot.photo-loaded img{object-fit:cover;width:100%;height:100%}
.photo-slot.photo-missing{animation:none;background:var(--surface-3)}
@keyframes shimmer{to{background-position:-100% 0}}
/* Credits: a 32 px ⓘ in the mosaic's top-left corner (secondary control); the list opens as a popover over the card. */
.photo-credits{position:absolute;top:14px;left:14px;right:14px;z-index:3;color:var(--muted);font-size:11px;line-height:1.45;pointer-events:none}
.photo-credits>summary{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--surface);color:var(--ink-2);cursor:pointer;list-style:none;pointer-events:auto;box-shadow:var(--shadow-card)}
.photo-credits>summary::-webkit-details-marker{display:none}
.photo-credits>summary .icon{width:18px;height:18px}
.photo-credits[open]>summary{background:var(--surface);color:var(--accent-ink)}
.photo-credits-panel{margin-top:6px;max-height:min(60vh,320px);overflow:auto;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);pointer-events:auto}
.photo-credits-title{margin:0 0 4px;font-weight:800;color:var(--ink-2)}
.photo-credits ol{padding:0 0 0 18px;margin:0;overflow-wrap:anywhere}
.photo-credits li{margin:4px 0}
.photo-credits a{color:var(--accent-ink);text-decoration:underline}
.trip-card{position:relative}
.photo-empty-note{font-size:11px;padding:6px 4px;color:var(--muted);margin:0}
.hero-photo-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--on-accent)}
.detail-hero img{position:absolute;inset:0}
.hero-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;outline-offset:-4px}
.hero-track::-webkit-scrollbar{display:none}
.detail-hero .hero-track img{position:static;flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;scroll-snap-stop:always;user-select:none}
/* Let swipes on the scrim and the title fall through to the photo strip. */
.detail-hero::before,.detail-hero-content{pointer-events:none}
.hero-dots{position:absolute;z-index:3;top:14px;right:14px;display:flex;gap:6px;padding:6px 8px;border-radius:var(--radius-pill);background:var(--scrim)}
.hero-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--on-accent);opacity:.5;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.hero-dots button[aria-current="true"]{opacity:1;transform:scale(1.25)}
.hero-arrow{position:absolute;z-index:3;top:50%;display:none;place-items:center;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:50%;background:var(--scrim);color:var(--on-accent);opacity:0;transition:opacity var(--dur) var(--ease)}
.hero-arrow-prev{left:12px}.hero-arrow-prev .icon{transform:rotate(180deg)}
.hero-arrow-next{right:12px}
@media(hover:hover){.hero-arrow{display:grid}.detail-hero:hover .hero-arrow,.hero-arrow:focus-visible{opacity:1}}
@media(prefers-reduced-motion:reduce){.photo-slot,.skeleton-card{animation:none}}
/* Destination video (WF-078): the last hero slide — poster first, muted loop, 44 px play/pause control. */
.detail-hero .hero-video{position:relative;flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;background:var(--hero-fallback)}
.detail-hero .hero-video video{display:block;width:100%;height:100%;object-fit:cover;user-select:none}
.hero-video-play{position:absolute;z-index:3;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:var(--scrim);color:var(--on-accent);transition:opacity var(--dur) var(--ease)}
.hero-video-play .icon{width:22px;height:22px}
.hero-video.is-playing .hero-video-play{opacity:0}
.hero-video.is-playing .hero-video-play:focus-visible,.hero-video.is-playing:hover .hero-video-play{opacity:1}
/* Beside the ⓘ credits button (32 px at top/left 14 px), vertically centred on it. */
.hero-video-badge{position:absolute;z-index:3;top:20px;left:54px;padding:3px 9px;border-radius:var(--radius-pill);background:var(--scrim);color:var(--on-accent);font-size:11px;font-weight:700}
.hero-dots .hero-dot-video{border-radius:2px}
@media(prefers-reduced-motion:reduce){.hero-video-play{transition:none}}