/* Places and photos on portrait phones. Keep the existing app palette. */
.place-list-photo { display: none; }

@media (max-width: 600px) and (orientation: portrait) {
  .places-list-overlay {
    align-items: stretch !important;
    padding: 8px !important;
  }
  .places-list-card {
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 18px !important;
  }
  .places-list-header { padding: 10px 12px !important; }
  .places-list-back-btn, .places-list-close {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  .places-list-title { font-size: 16px !important; }
  .places-list-filters { margin: 8px 12px 12px !important; }
  .places-filter-btn { min-height: 44px !important; padding: 6px 4px !important; }
  .places-list-content {
    min-height: 0;
    gap: 8px !important;
    padding: 0 12px 14px !important;
    overscroll-behavior: contain;
  }
  .place-item {
    min-height: 72px;
    padding: 9px 10px !important;
    gap: 10px !important;
  }
  .place-list-photo {
    display: block;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    overflow: hidden;
    border-radius: 10px;
    background: #0f172a;
    border: 1px solid rgba(255,255,255,.1);
  }
  .place-list-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .place-name { align-items: flex-start !important; line-height: 1.3; margin-bottom: 6px !important; }
  .place-name > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .place-details { gap: 4px 6px !important; }
  .place-location { display: none; }
  .place-arrow { width: 28px; height: 28px; }

  #mobilePlaceSurface .saved-popup-grid.has-gpx,
  #mobilePlaceSurface .saved-popup-grid.no-gpx,
  #mobilePlaceSurface .saved-popup-card.sparse.has-photo .saved-popup-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "media" "minimap" "info" !important;
    gap: 10px !important;
  }
  #mobilePlaceSurface .saved-popup-grid.no-gpx { grid-template-areas: "media" "info" !important; }
  #mobilePlaceSurface .saved-popup-grid.no-photo.has-gpx { grid-template-areas: "minimap" "info" !important; }
  #mobilePlaceSurface .saved-popup-grid.no-photo.no-gpx { grid-template-areas: "info" !important; }

  #mobilePlaceSurface .saved-popup-media-col,
  #mobilePlaceSurface .saved-popup-card.sparse.has-photo .saved-popup-media-col,
  #mobilePlaceSurface .saved-popup-media-col > div {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #mobilePlaceSurface .saved-popup-media-col .carousel {
    --phone-photo-height: clamp(190px, 31dvh, 250px);
    display: block !important;
    width: 100% !important;
    height: var(--phone-photo-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  #mobilePlaceSurface .saved-popup-media-col .carousel:has(.carousel-thumbs) {
    display: grid !important;
    grid-template-rows: var(--phone-photo-height) 54px !important;
    height: calc(var(--phone-photo-height) + 54px) !important;
  }
  #mobilePlaceSurface .saved-popup-media-col .carousel-main,
  #mobilePlaceSurface .saved-popup-media-col .carousel-main.has-thumbs,
  #mobilePlaceSurface .saved-popup-media-col .carousel-main.single-photo,
  #mobilePlaceSurface .saved-popup-card.sparse.has-photo .carousel-main {
    width: 100% !important;
    height: var(--phone-photo-height) !important;
    min-height: var(--phone-photo-height) !important;
    max-height: var(--phone-photo-height) !important;
  }
  #mobilePlaceSurface .saved-popup-media-col .carousel-thumbs,
  #mobilePlaceSurface .saved-popup-card.sparse.has-photo .carousel-thumbs {
    display: flex !important;
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 5px 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  #mobilePlaceSurface .saved-popup-media-col .carousel-thumbs .t {
    width: 52px !important;
    min-width: 52px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }
  #mobilePlaceSurface .saved-popup-minimap-col,
  #mobilePlaceSurface .saved-popup-minimap-canvas {
    width: 100% !important;
    height: clamp(120px, 18dvh, 150px) !important;
    min-height: clamp(120px, 18dvh, 150px) !important;
    max-height: clamp(120px, 18dvh, 150px) !important;
  }
  #mobilePlaceSurface .saved-popup-desc-wrap,
  #mobilePlaceSurface .saved-popup-desc {
    max-height: none !important;
    overflow: visible !important;
  }
}