/* Trip event photos reuse existing image sizes; anchors also work without JS. */
.ga-travel-detail-page [data-ga-trip-image-open] { cursor: zoom-in; }
.ga-travel-detail-page .ga-memory-entry-more-images > a { display: block; flex: 0 0 88px; line-height: 0; border-radius: 10px; }
.ga-travel-detail-page [data-ga-trip-image-open]:focus-visible { outline: 3px solid var(--ga-color-gold-600, #a98535); outline-offset: 4px; }
html.ga-trip-image-open { overflow: hidden; }
dialog.ga-trip-image-modal {
  box-sizing: border-box;
  width: min(1120px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 16px;
  border: 0;
  border-radius: 12px;
  background: #101714;
  color: #fff;
  overflow: auto;
}
dialog.ga-trip-image-modal:not([open]) { display: none; }
dialog.ga-trip-image-modal[open] { display: grid; gap: 12px; }
dialog.ga-trip-image-modal::backdrop { background: rgba(0, 0, 0, .85); }
body .ga-trip-image-modal .ga-trip-image-close {
  justify-self: end;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #66716b;
  border-radius: 6px;
  background: #101714;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}
.ga-trip-image-modal [data-ga-trip-image-viewer] {
  display: block;
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 220px);
  max-height: calc(100dvh - 220px);
  object-fit: contain;
}
.ga-trip-image-modal h2 { margin: 0; color: inherit; font: 400 1rem/1.5 var(--ga-font-sans, sans-serif); overflow-wrap: anywhere; }

.ga-trip-image-controls[hidden] { display: none; }
.ga-trip-image-controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.ga-trip-image-controls [role="status"] { text-align: center; overflow-wrap: anywhere; color: #fff; font-size: .875rem; }
body .ga-trip-image-controls button { min-width: 44px; min-height: 44px; padding: 0; border: 1px solid #66716b; border-radius: 6px; background: #101714; color: #fff; font-size: 28px; cursor: pointer; }
