.stop-photo-picker {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
  border: 1px solid #dfd9cf;
  border-radius: 0.75rem;
  background: #fffcf7;
}
.stop-photo-picker__heading { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.stop-photo-picker__heading strong { font: 600 1.35rem/1.1 "Cormorant Garamond", Georgia, serif; }
.stop-photo-picker__heading span, .stop-photo-picker__hint { color: #65737c; font-size: 0.72rem; line-height: 1.5; }
.stop-photo-picker__hint { margin: 0; }
.stop-photo-picker__search { display: grid; gap: 0.3rem; }
.stop-photo-picker__search label { font-size: 0.72rem; font-weight: 700; }
.stop-photo-picker__search > div { display: flex; gap: 0.5rem; }
.stop-photo-picker__search input { min-width: 0; flex: 1; }
.stop-photo-picker__selected, .stop-photo-gallery { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0.55rem; }
.stop-photo-picker__selected:empty { display: none; }
.stop-photo-picker__selected:has(> :only-child), .stop-photo-gallery:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.stop-photo-picker__selected:has(> :nth-child(3)) > :first-child,
.stop-photo-gallery:has(> :nth-child(3)) > :first-child { grid-row: span 2; }
.stop-photo-picker__selected-photo, .stop-photo-picker__choice, .stop-photo-gallery__photo {
  min-width: 0; margin: 0; padding: 0.3rem; border: 1px solid #d8dedc; border-radius: 0.45rem; background: white;
}
.stop-photo-picker__selected-photo--cover { border-color: #ad664b; }
.stop-photo-picker__selected-photo img, .stop-photo-picker__choice img, .stop-photo-gallery__photo img {
  display: block; width: 100%; height: 96px; object-fit: cover; border-radius: 0.2rem;
}
.stop-photo-picker__selected-photo--cover img, .stop-photo-gallery__photo--cover img { height: 218px; }
.stop-photo-picker__selected-photo figcaption, .stop-photo-picker__choice figcaption,
.stop-photo-gallery__photo figcaption { display: grid; gap: 0.3rem; padding: 0.3rem 0.1rem 0; }
.stop-photo-picker__selected-photo strong { color: #814d37; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.07em; }
.stop-photo-picker__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.stop-photo-picker__actions .text-button { min-height: 1.7rem; padding: 0; font-size: 0.72rem; }
.stop-photo-picker__results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.6rem; }
.stop-photo-picker__choice .outline-button { min-height: 2rem; padding: 0.25rem 0.5rem; font-size: 0.7rem; }
.unsplash-credit { display: block; font-size: 0.7rem; line-height: 1.4; }

.stop-photo-gallery--book { margin: 0.8rem 0 1rem; }
.stop-photo-gallery--book .stop-photo-gallery__photo { break-inside: avoid; }
.stop-photo-gallery__photo figcaption { color: #516263; }

.stop-photo-preview { flex: 0 0 24%; min-width: 5.5rem; max-width: 8.5rem; align-self: flex-start; }
.stop-photo-preview__frame { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 0.5rem; background: #e9eef1; }
.stop-photo-preview__open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.stop-photo-preview__open img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stop-photo-preview__open:focus-visible { outline: 3px solid #397aeb; outline-offset: -3px; }
.stop-photo-preview__credit { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: baseline; gap: 0.15rem; padding: 0.3rem; background: #fffffff0; color: #000; font-size: 0.6875rem; line-height: 1.25; white-space: nowrap; }
.stop-photo-preview__credit a { color: #000; text-decoration: none; }
.stop-photo-preview__credit a:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stop-photo-preview__credit a:last-of-type { flex: none; }
.stop-photo-preview__credit a:focus-visible { outline: 2px solid #397aeb; outline-offset: 1px; }
.stop-photo-card-credit { display: none; }

html:has(.stop-photo-viewer[open]) { overflow: hidden; }
.stop-photo-viewer { position: fixed; inset: 0; box-sizing: border-box; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #0a0a0a; color: #fff; }
.stop-photo-viewer::backdrop { background: #000; }
.stop-photo-viewer__panel { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: calc(4rem + env(safe-area-inset-top)) clamp(3.5rem, 7vw, 6rem) calc(2rem + env(safe-area-inset-bottom)); }
.stop-photo-viewer__close { position: absolute; z-index: 2; top: calc(1rem + env(safe-area-inset-top)); right: calc(1rem + env(safe-area-inset-right)); min-width: 3.5rem; min-height: 2.75rem; padding: 0.5rem 0.9rem; border: 0; border-radius: 2rem; background: #0009; color: #fff; font-size: 0.875rem; cursor: pointer; }
.stop-photo-viewer__slide { display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; margin: 0; }
.stop-photo-viewer__slide[hidden] { display: none; }
.stop-photo-viewer__slide img { display: block; width: auto; height: auto; max-width: min(85vw, 90rem); max-height: calc(100dvh - 9rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); object-fit: contain; border-radius: 0.35rem; }
.stop-photo-viewer__slide figcaption { align-self: flex-start; padding-top: 0.65rem; color: #ddd; }
.stop-photo-viewer__slide .unsplash-credit a { color: #fff; }
.stop-photo-viewer__controls { position: absolute; inset: 0; pointer-events: none; }
.stop-photo-viewer__arrow { position: absolute; top: 50%; display: grid; place-items: center; width: 2.75rem; height: 3.5rem; transform: translateY(-50%); padding: 0; border: 0; background: transparent; color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer; pointer-events: auto; }
.stop-photo-viewer__arrow--previous { left: calc(1rem + env(safe-area-inset-left)); }
.stop-photo-viewer__arrow--next { right: calc(1rem + env(safe-area-inset-right)); }
.stop-photo-viewer__arrow:hover, .stop-photo-viewer__close:hover { background: #ffffff24; }
.stop-photo-viewer__arrow:focus-visible, .stop-photo-viewer__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 560px) {
  .stop-photo-picker__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stop-photo-picker__search > div { flex-wrap: wrap; }
  .stop-photo-picker__search input { flex-basis: 100%; }
  .stop-photo-preview__credit { display: none; }
  .stop-photo-card-credit { display: block; color: #000; font-size: 0.75rem; line-height: 1.4; }
  .stop-photo-card-credit a { color: inherit; text-decoration: none; }
  .itinerary-creator .stop-photo-card-credit { flex-basis: 100%; order: 2; }
  .stop-photo-viewer__panel { padding-right: calc(3.5rem + env(safe-area-inset-right)); padding-left: calc(3.5rem + env(safe-area-inset-left)); }
  .stop-photo-viewer__slide img { max-width: calc(100vw - 7rem - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  .stop-photo-viewer__arrow--previous { left: calc(0.25rem + env(safe-area-inset-left)); }
  .stop-photo-viewer__arrow--next { right: calc(0.25rem + env(safe-area-inset-right)); }
}