/* Unified Spatial Media Album — Stages 5–12 shell, grid and focused viewers. */

.media-album-shell[hidden] {
  display: none !important;
}

.media-album-shell {
  position: fixed;
  z-index: 1400;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid rgba(100, 116, 139, 0.45);
  background: #0b1220;
  color: #e5e7eb;
  box-shadow: 0 -12px 44px rgba(2, 6, 23, 0.38);
}

.media-album-shell * {
  box-sizing: border-box;
}

.media-album-header {
  display: flex;
  min-height: 68px;
  flex: 0 0 auto;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  border-bottom: 1px solid #253249;
  background: #101a2c;
}

.media-album-heading-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.media-album-kicker {
  display: block;
  margin-bottom: 2px;
  color: #7dd3fc;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.media-album-title {
  display: inline;
  margin: 0;
  color: #f8fafc;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 650;
  line-height: 1.25;
}

.media-album-count {
  margin-inline-start: 10px;
  color: #94a3b8;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.media-album-modes {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  border: 1px solid #334155;
  border-radius: 9px;
  background: #0b1322;
}

.media-album-mode-button,
.media-album-close,
.media-album-clear {
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  color: #cbd5e1;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.media-album-mode-button {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 650;
}

.media-album-mode-button[aria-pressed="true"] {
  color: #eff6ff;
  background: #2563eb;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.32);
}

.media-album-close {
  width: 44px;
  min-width: 44px;
  height: 44px;
  color: #e2e8f0;
  font-size: 28px;
  line-height: 1;
}

.media-album-close:hover,
.media-album-clear:hover,
.media-album-mode-button:not([aria-pressed="true"]):hover {
  background: #1e293b;
}

.media-album-filters {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(190px, 1.35fr) minmax(238px, 1.2fr)
    minmax(170px, 1fr) minmax(140px, 0.75fr) minmax(150px, 0.85fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid #253249;
  background: #111b2d;
}

.media-album-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.media-album-field-label {
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 650;
}

.media-album-control {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #334155;
  border-radius: 7px;
  outline: none;
  color: #e2e8f0;
  background: #0b1322;
  font: inherit;
  font-size: 12px;
}

.media-album-control::placeholder {
  color: #64748b;
}

.media-album-control:disabled {
  color: #cbd5e1;
  background: #172033;
  cursor: not-allowed;
  opacity: 0.85;
}

.media-album-control[aria-invalid="true"] {
  border-color: #fb7185;
}

.media-album-date-group {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.media-album-clear {
  padding: 7px 12px;
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.media-album-filter-toggle {
  display: none;
  min-width: 88px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #38506e;
  border-radius: 8px;
  color: #e0f2fe;
  background: #142238;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.media-album-filter-toggle:hover,
.media-album-filter-toggle:focus-visible {
  border-color: #38bdf8;
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
}

.media-album-body {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0, rgba(30, 64, 175, 0.08), transparent 44%),
    #0b1220;
}

.media-album-stage {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.media-album-map-dock {
  display: none;
  flex: 0 0 auto;
  pointer-events: none;
}

.media-album-status {
  flex: 0 0 auto;
  margin: 12px 18px 0;
  padding: 9px 11px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 7px;
  color: #bae6fd;
  background: rgba(14, 116, 144, 0.13);
  font-size: 12px;
}

.media-album-status-error {
  border-color: rgba(251, 113, 133, 0.35);
  color: #fecdd3;
  background: rgba(159, 18, 57, 0.16);
}

.media-album-content {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
}

.media-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  padding: 18px;
}

.media-card-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.media-card-item > .media-card {
  flex: 1 1 auto;
  height: auto;
  border-radius: 12px 12px 0 0;
}

.media-card-spatial-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  margin-top: -1px;
  border: 1px solid #2a3951;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: #111b2d;
}

.media-card-map-action {
  flex: 1 1 88px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid rgba(56, 189, 248, 0.48);
  border-radius: 8px;
  color: #e0f2fe;
  background: rgba(15, 23, 42, 0.9);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.media-card-camera-action {
  flex: 1 1 130px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid rgba(250, 204, 21, 0.52);
  border-radius: 8px;
  color: #fef9c3;
  background: rgba(15, 23, 42, 0.9);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.media-card-camera-action:hover,
.media-card-camera-action:focus-visible {
  border-color: #facc15;
  background: #713f12;
  outline: 2px solid #fde047;
  outline-offset: 2px;
}

.media-card-map-action:hover,
.media-card-map-action:focus-visible {
  border-color: #38bdf8;
  background: #0c4a6e;
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
}

.media-card-map-action:disabled {
  border-color: rgba(148, 163, 184, 0.25);
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.55);
  cursor: not-allowed;
  opacity: 0.72;
}

.media-card {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid #2a3951;
  border-radius: 12px;
  color: #e5e7eb;
  background: #111b2d;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.2);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.media-card:hover,
.media-card-hovered {
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 132, 199, 0.18);
}

.media-card-selected,
.media-card[aria-pressed="true"] {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.45),
    0 12px 28px rgba(37, 99, 235, 0.2);
}

.media-card-preview {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  place-items: center;
  color: #94a3b8;
  background: linear-gradient(145deg, #17243a, #0d1626);
}

.media-card-placeholder {
  padding: 6px 9px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.media-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card-preview-loading::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.09) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: media-album-shimmer 1.25s linear infinite;
}

.media-card-preview-unavailable {
  background: #121d2e;
}

.media-card-copy {
  display: flex;
  min-width: 0;
  padding: 12px;
  flex-direction: column;
  gap: 7px;
}

.media-card-title {
  overflow: hidden;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-card-details {
  display: flex;
  min-height: 17px;
  flex-wrap: wrap;
  gap: 5px 10px;
  color: #94a3b8;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.media-card-skeleton {
  min-height: 210px;
  border-color: transparent;
  pointer-events: none;
  background: linear-gradient(100deg, #111b2d 28%, #1b2a41 48%, #111b2d 68%);
  background-size: 220% 100%;
  animation: media-album-shimmer 1.25s linear infinite;
}

.media-single-photo {
  min-height: 100%;
  padding: 16px;
  color: #e5e7eb;
  background: #07101f;
}

.media-single-toolbar,
.media-single-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.media-single-title {
  min-width: 0;
  flex: 1 1 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-single-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(62vh, 680px);
  overflow: hidden;
  border: 1px solid #25334a;
  border-radius: 12px;
  background: #020617;
  touch-action: none;
}

.media-single-stage > .skylens-powered-by {
  position: absolute;
  right: clamp(8px, 2vw, 16px);
  bottom: clamp(8px, 2vw, 16px);
  z-index: 12;
}

.media-single-image {
  display: block;
  max-width: 100%;
  max-height: min(62vh, 680px);
  object-fit: contain;
  transform-origin: center;
  cursor: grab;
  user-select: none;
}

.media-single-image:active { cursor: grabbing; }

.media-single-video-stage {
  touch-action: auto;
}

.media-single-video {
  display: block;
  width: min(100%, 1180px);
  max-height: min(62vh, 680px);
  background: #000;
}

.media-single-loading::after {
  content: "Loading preview…";
  position: absolute;
  color: #cbd5e1;
}

.media-single-failed { color: #fecaca; }

.media-single-control,
.media-single-back {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #38506e;
  border-radius: 8px;
  color: #e2e8f0;
  background: #142238;
  font: inherit;
  cursor: pointer;
}

.media-single-control:hover,
.media-single-control:focus-visible,
.media-single-back:hover,
.media-single-back:focus-visible {
  border-color: #38bdf8;
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
}

.media-single-control:disabled { opacity: 0.45; cursor: default; }

.media-single-metadata {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}

.media-single-metadata-row {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #25334a;
  border-radius: 8px;
  background: #0f1a2c;
}

.media-single-metadata dt { color: #94a3b8; font-size: 12px; }
.media-single-metadata dd { margin: 4px 0 0; overflow-wrap: anywhere; }

.media-album-empty {
  display: flex;
  min-height: min(42vh, 360px);
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  color: #cbd5e1;
  text-align: center;
}

.media-album-retry,
.media-album-load-more {
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid #3b82f6;
  border-radius: 8px;
  color: #eff6ff;
  background: #1d4ed8;
  font: inherit;
  font-size: 12px;
  font-weight: 680;
  cursor: pointer;
}

.media-album-pagination {
  display: flex;
  justify-content: center;
  padding: 0 18px 22px;
}

.media-album-load-more:disabled {
  cursor: progress;
  opacity: 0.65;
}

@keyframes media-album-shimmer {
  to { background-position: -220% 0; }
}

.media-album-shell :is(button, input, select):focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
}

body.media-album-open {
  overflow: hidden;
}

.media-album-mobile-return {
  display: none;
}

/* Mini map + album: reserve a real dock inside the album stage, then place the
   existing Viewer-owned Cesium canvas exactly over that dock. The map remains
   one global Viewer (never reparented or recreated), while cards begin below
   it in their own unobstructed scroll area. A selected panorama keeps its established
   panorama+catalogue layout instead. */
body.media-album-map-mode:not(.panorama-workspace-open) .media-album-stage {
  flex-direction: column;
}

body.media-album-map-mode:not(.panorama-workspace-open) .media-album-content {
  min-width: 0;
  flex: 1 1 auto;
  order: 2;
}

body.media-album-map-mode:not(.panorama-workspace-open) .media-album-map-dock {
  display: block;
  width: auto;
  height: clamp(180px, 24vh, 240px);
  margin: 12px 18px 0;
  flex-basis: clamp(180px, 24vh, 240px);
  order: 1;
  border: 2px solid transparent;
  border-radius: 12px;
}

body.media-album-map-mode:not(.panorama-workspace-open) #cesiumContainer {
  position: fixed !important;
  top: var(--media-album-map-dock-top, auto) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--media-album-map-dock-left, auto) !important;
  width: var(--media-album-map-dock-width, calc(100% - 36px)) !important;
  height: var(--media-album-map-dock-height, clamp(180px, 24vh, 240px)) !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  z-index: 1420 !important;
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
  border: 2px solid rgba(125, 211, 252, 0.9);
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(2, 8, 23, 0.55);
}

/* The album map is a north-up 2D locator for both photos and panoramas.
   General Viewer controls can mutate the shared Cesium scene back to 3D, so
   they are deliberately unavailable while the canvas is docked in an album. */
body.media-album-map-mode #cesiumContainer .cesium-viewer-toolbar,
body.media-album-map-mode #cesiumContainer #gisViewModeControls,
body.media-album-map-mode #cesiumContainer #viewCubeContainer,
body.media-album-map-mode #cesiumContainer .cesium-viewer-fullscreenContainer {
  display: none !important;
}

@media (min-width: 901px) {
  body.media-album-map-mode.panorama-workspace-open {
    /* First panorama open contract: 55% immersive panorama, 45% album. The
       locator's right offset below is derived from the same value so it can
       never drift underneath the catalogue. */
    --media-album-pane-width: 45%;
  }

  body.media-album-map-mode.panorama-workspace-open:not(.panorama-mini-map-mode)
    #cesiumContainer {
    width: calc(100% - var(--media-album-pane-width)) !important;
  }

  body.media-album-map-mode.panorama-workspace-open .media-album-shell {
    top: calc(var(--skylens-header-height) + var(--skylens-safe-top));
    right: var(--skylens-safe-right);
    bottom: calc(var(--skylens-bottom-nav-height) + var(--skylens-safe-bottom));
    left: calc(100% - var(--media-album-pane-width));
    width: auto;
    border-left: 1px solid rgba(100, 116, 139, 0.55);
    border-radius: 0;
    box-shadow: -14px 0 34px rgba(2, 6, 23, 0.35);
  }

  body.media-album-map-mode.panorama-workspace-open .media-album-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
  }

  body.media-album-map-mode.panorama-workspace-open .media-album-heading-copy {
    flex-basis: calc(100% - 58px);
  }

  body.media-album-map-mode.panorama-workspace-open .media-album-modes {
    order: 3;
  }

  body.media-album-map-mode.panorama-workspace-open .media-album-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px 12px;
  }

  body.media-album-map-mode.panorama-workspace-open .media-album-date-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.media-album-map-mode.panorama-workspace-open .media-album-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 12px;
  }
}

/* Native panorama fullscreen temporarily gives the panorama the complete
   viewport while retaining the same Viewer-owned Cesium mini-map. The album
   state stays mounted underneath and returns unchanged after fullscreen exits. */
body.panorama-native-fullscreen .media-album-shell {
  display: none !important;
}

body.panorama-native-fullscreen.media-album-map-mode.panorama-mini-map-mode
  #cesiumContainer {
  right: max(18px, var(--skylens-safe-right, 0px)) !important;
  width: clamp(260px, 27vw, 380px) !important;
}

@media (max-width: 900px) {
  /* Reopening the catalogue from an immersive phone tour keeps the panorama
     renderer mounted underneath for an instant return. Elevate the opaque
     album surface above that retained renderer so its mode controls remain
     real touch targets; closing the album reveals the same Cesium instance. */
  body.media-album-open.panorama-workspace-open .media-album-shell {
    z-index: 1470;
  }

  /* The panorama workspace is the active immersive layer on phones. Its More
     button occupies the same corner as the album close button underneath, so
     remove that covered control from both pointer and keyboard interaction. */
  body.panorama-workspace-open .media-album-close {
    visibility: hidden;
    pointer-events: none;
  }

  /* Once that action reopens the album above the retained panorama, the close
     control is the explicit route back to the same immersive Cesium session. */
  body.media-album-open.panorama-workspace-open .media-album-close {
    visibility: visible;
    pointer-events: auto;
  }

  body.media-album-map-mode:not(.panorama-workspace-open) .media-album-map-dock {
    width: auto;
    height: clamp(132px, 22vh, 170px);
    margin: 8px 8px 0;
    flex-basis: clamp(132px, 22vh, 170px);
    border-radius: 10px;
  }

  body.media-album-map-mode:not(.panorama-workspace-open) #cesiumContainer {
    right: auto !important;
    bottom: auto !important;
    width: var(--media-album-map-dock-width, calc(100% - 16px)) !important;
    height: var(--media-album-map-dock-height, clamp(132px, 22vh, 170px)) !important;
    border-radius: 10px;
  }
}

/* Category and collection entry actions stay independent of the accordion and
   marker-visibility eye. */
.gis-media-acc-header {
  display: flex;
  align-items: stretch;
  background: #111827;
}

.gis-media-acc-header > .gis-acc-h {
  min-width: 0;
  flex: 1 1 auto;
  width: auto;
}

/* Media albums are date-scoped. Keep their entry action on the concrete date
   row instead of offering a category action that can mix capture dates. */
#photoCollectionsPanel .layer-item-actions,
#panoramaCollectionsPanel .layer-item-actions {
  opacity: 1;
}

.media-collection-row-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.media-collection-row-copy > .layer-item-name {
  display: -webkit-box;
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.media-collection-capture-date {
  color: #7dd3fc;
  font-size: 9px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}

.media-date-open-album {
  flex: 0 0 auto;
  padding: 4px 6px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 5px;
  background: rgba(14, 116, 144, 0.18);
  color: #7dd3fc;
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.media-date-open-album:hover {
  color: #e0f2fe;
  background: rgba(56, 189, 248, 0.25);
}

.media-date-open-album:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 1px;
}

.media-date-open-album:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 1100px) {
  .media-album-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .media-album-shell {
    width: 100dvw;
    height: 100dvh;
    padding-top: var(--skylens-safe-top, 0px);
    padding-right: var(--skylens-safe-right, 0px);
    padding-bottom: var(--skylens-safe-bottom, 0px);
    padding-left: var(--skylens-safe-left, 0px);
    border: 0;
  }

  .media-album-header {
    min-height: 64px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 10px;
  }

  .media-album-kicker {
    display: none;
  }

  .media-album-heading-copy {
    order: 1;
    flex: 1 1 0;
  }

  .media-album-count {
    display: inline;
    margin-inline-start: 6px;
  }

  .media-album-modes {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
  }

  .media-album-mode-button {
    flex: 1 1 50%;
  }

  .media-album-close {
    order: 2;
  }

  .media-album-mode-button {
    min-height: 44px;
    padding: 7px 9px;
  }

  .media-album-filters {
    max-height: none;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px;
    overflow: visible;
  }

  .media-album-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .media-album-filters:not([data-expanded="true"]) > .media-album-date-group,
  .media-album-filters:not([data-expanded="true"]) > .media-album-field:not(:first-child),
  .media-album-filters:not([data-expanded="true"]) > .media-album-clear {
    display: none;
  }

  .media-album-filters[data-expanded="true"] {
    max-height: 42dvh;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-y: auto;
  }

  .media-album-filters[data-expanded="true"] > .media-album-field:first-child,
  .media-album-filters[data-expanded="true"] > .media-album-date-group {
    grid-column: 1 / -1;
  }

  .media-album-control,
  .media-album-clear {
    min-height: 44px;
    font-size: 14px;
  }

  .media-album-grid {
    display: flex;
    min-height: 100%;
    box-sizing: border-box;
    align-items: stretch;
    grid-template-columns: none;
    gap: 12px;
    padding: 12px 16px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    direction: rtl;
    scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .media-album-grid > .media-card-item,
  .media-album-grid > .media-card-skeleton {
    min-height: 100%;
    flex: 0 0 min(86vw, 400px);
    scroll-snap-align: center;
    scroll-snap-stop: normal;
    direction: ltr;
  }

  .media-album-grid > .media-album-empty {
    flex: 1 0 calc(100vw - 32px);
    direction: ltr;
  }

  .media-album-content {
    overflow-x: hidden;
  }

  .media-card-item > .media-card {
    min-height: 0;
  }

  .media-card-preview {
    min-height: clamp(170px, 30dvh, 360px);
    flex: 1 1 auto;
    aspect-ratio: 16 / 10;
  }

  .media-card[data-media-type="photo"] .media-card-preview {
    aspect-ratio: 4 / 3;
  }

  .media-card[data-media-type="panorama_360"] .media-card-preview {
    aspect-ratio: 2 / 1;
  }

  .media-card[data-media-type="video"] .media-card-preview {
    aspect-ratio: 16 / 9;
  }

  .media-card-copy {
    padding: 9px;
  }

  .media-card-title {
    font-size: 12px;
  }

  .media-album-shell[data-view-mode="single"] .media-album-header {
    display: none;
  }

  .media-album-shell[data-view-mode="single"] .media-album-body,
  .media-album-shell[data-view-mode="single"] .media-album-content,
  .media-album-shell[data-view-mode="single"] .media-single-photo {
    min-height: 0;
    height: 100%;
  }

  .media-album-shell[data-view-mode="single"] .media-single-photo {
    display: flex;
    padding: 0;
    flex-direction: column;
    overflow: auto;
  }

  .media-album-shell[data-view-mode="single"] .media-single-toolbar,
  .media-album-shell[data-view-mode="single"] .media-single-controls,
  .media-album-shell[data-view-mode="single"] .media-single-metadata {
    margin: 0;
    padding: 10px;
    flex: 0 0 auto;
  }

  .media-album-shell[data-view-mode="single"] .media-single-stage {
    height: 55dvh;
    min-height: 55dvh;
    flex: 1 0 55dvh;
    border-inline: 0;
    border-radius: 0;
  }

  .media-album-shell[data-view-mode="single"] .media-single-image,
  .media-album-shell[data-view-mode="single"] .media-single-video {
    max-height: 100%;
  }

}

@media (max-width: 430px) {
  .media-album-title {
    font-size: 16px;
  }

  .media-album-mode-button {
    font-size: 0;
  }

  .media-album-mode-button::before {
    font-size: 12px;
  }

  .media-album-mode-button[data-view-mode="grid"]::before {
    content: "Album";
  }

  .media-album-mode-button[data-view-mode="map_album"]::before {
    content: "Map";
  }

  .media-album-filters[data-expanded="true"] {
    grid-template-columns: 1fr;
  }

  .media-album-filters[data-expanded="true"] > *,
  .media-album-filters[data-expanded="true"] > .media-album-date-group {
    grid-column: 1;
  }

  .media-album-filters:not([data-expanded="true"]) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-album-shell,
  .media-album-shell * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}