/* ===== ATLAS SIDE PANELS =====
 * Desktop only. The atlas is the one screen that should behave like a
 * workspace: the filter block stays put, the city list scrolls in its own
 * column, and the whole three-column surface fits the viewport so neither
 * the list nor the city detail is cut off by the page edge.
 */

@media (min-width: 951px) {
  .atlas-workspace {
    grid-template-columns: clamp(250px, 17vw, 290px) minmax(0, 1fr) clamp(290px, 20vw, 340px);
    /* Heading + panel + footnote should fit a laptop viewport. */
    height: clamp(520px, calc(100svh - 296px), 920px);
    min-height: 0;
    max-height: 920px;
  }

  /* --- Left: fixed search/filters, scrolling catalogue --- */
  .atlas-left {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 16px 14px 12px;
    background: #fbfcf7;
  }

  .atlas-search,
  .atlas-filters,
  .atlas-list-heading,
  .atlas-storage {
    flex: 0 0 auto;
  }

  .atlas-search {
    border-radius: 10px;
    box-shadow: inset 0 1px 0 #ffffffb0, 0 2px 8px #31452f08;
  }

  .atlas-filters {
    margin-top: 9px;
  }

  .atlas-filters select {
    min-height: 37px;
    border-radius: 8px;
    background: #f6f8f2;
    font-size: 10.5px;
  }

  .atlas-list-heading {
    margin-top: 2px;
    padding: 12px 2px 8px;
    border-bottom: 1px solid #e7ece2;
  }

  .place-count {
    color: #66795e;
    font-weight: 650;
    letter-spacing: 0.01em;
  }

  .clear-filters {
    color: #9a5b48;
    font-weight: 600;
  }

  #atlas-cards {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 6px 4px 14px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c3d0bf transparent;
  }

  #atlas-cards::-webkit-scrollbar {
    width: 9px;
  }

  #atlas-cards::-webkit-scrollbar-track {
    background: #eef2e9;
    border-radius: 9px;
  }

  #atlas-cards::-webkit-scrollbar-thumb {
    background: #c5d2c0;
    border: 2px solid #eef2e9;
    border-radius: 9px;
  }

  #atlas-cards::-webkit-scrollbar-thumb:hover {
    background: #aebfa9;
  }

  /* A quiet bottom fade marks the list as scrollable even with hidden
     macOS overlay scrollbars. */
  .atlas-left::after {
    content: '';
    position: absolute;
    right: 14px;
    bottom: 12px;
    left: 14px;
    height: 26px;
    pointer-events: none;
    background: linear-gradient(transparent, #fbfcf7 82%);
    border-radius: 0 0 12px 12px;
    z-index: 2;
  }

  .atlas-left:has(.atlas-storage:not([hidden]))::after {
    bottom: 34px;
  }

  /* --- Left cards --- */
  .atlas-city-card {
    border: 1px solid #e7ece1;
    border-radius: 10px;
    margin: 5px 0;
    background: #fffefa;
    box-shadow: 0 1px 2px #2c44350a;
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  }

  .atlas-city-card:hover {
    translate: 0 0;
    border-color: #c6d3c0;
    background: #f7faf3;
    box-shadow: 0 6px 16px #2c443512;
  }

  .atlas-city-card.active {
    border-color: #9db391;
    background: #f1f6ea;
    box-shadow: inset 3px 0 #547158, 0 6px 16px #2c44350f;
  }

  .city-card-select {
    min-height: 84px;
    gap: 10px;
    padding: 10px 38px 10px 9px;
  }

  .city-card-select > img,
  .city-card-select .city-monogram {
    width: 48px;
    height: 58px;
    border-radius: 6px;
  }

  .city-card-select strong {
    font-size: 15px;
    letter-spacing: -0.01em;
  }

  .city-card-select small {
    font-size: 9px;
  }

  .city-card-select em {
    font-size: 10px;
    color: #78886f;
  }

  .card-heart {
    top: 21px;
    width: 38px;
    height: 40px;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .card-heart:hover {
    background: #f3e7e4;
    color: #a35050;
  }

  .card-heart.is-saved {
    color: #a35050;
  }

  /* --- Right: detail card --- */
  .atlas-detail {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fffefa;
    scrollbar-width: thin;
    scrollbar-color: #c3d0bf transparent;
  }

  .atlas-detail::-webkit-scrollbar {
    width: 9px;
  }

  .atlas-detail::-webkit-scrollbar-thumb {
    background: #cbd6c6;
    border: 2px solid #fffefa;
    border-radius: 9px;
  }

  .detail-city-photo {
    height: 188px;
  }

  .detail-photo-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 52%, #13241c66);
  }

  .detail-photo-wrap > span {
    z-index: 1;
  }

  .detail-city-copy {
    padding: 18px 20px 16px;
  }

  .detail-city-region {
    color: #94a18a;
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  .detail-city-copy h2 {
    font-size: 27px;
    margin: 4px 0 10px;
  }

  .detail-city-copy > p {
    font-size: 12px;
    line-height: 1.85;
    color: #6f8166;
  }

  .detail-city-copy .detail-primary {
    min-height: 44px;
    margin: 10px 0 13px;
    border-radius: 8px;
    font-size: 12px;
  }

  .detail-city-copy .detail-guide {
    margin-top: 11px;
    padding: 11px 13px;
    border-radius: 8px;
  }

  .city-quick-note {
    margin-top: 16px;
  }

  .city-quick-note p {
    font-size: 10.5px;
  }

  .city-coordinate {
    margin-top: 14px;
  }

  .detail-bottom {
    padding: 11px 16px 13px;
    background: #fffefaf2;
  }

  .detail-bottom a {
    min-height: 44px;
    border-radius: 9px;
    font-size: 12px;
  }

  /* Route mode keeps the same shell. */
  .route-days {
    padding: 4px 12px 12px;
  }

  .route-day {
    margin: 8px 0;
    padding: 13px 12px;
  }
}

/* City detail scrolls inside its column. A sticky fade makes that obvious
   on macOS where overlay scrollbars stay hidden until the user scrolls. */
@media (min-width: 951px) {
  .atlas-detail:has(.detail-city-copy)::after {
    content: '';
    position: sticky;
    bottom: 0;
    z-index: 3;
    flex: 0 0 22px;
    height: 22px;
    margin-top: -22px;
    pointer-events: none;
    background: linear-gradient(transparent, #fffefa 88%);
  }
}

/* Explicit scroll affordance for the city detail (macOS hides overlay
   scrollbars). A small arrow appears only while the panel overflows and is
   not scrolled to the end. */
@media (min-width: 951px) {
  .atlas-workspace {
    position: relative;
  }

  .atlas-scroll-hint {
    position: absolute;
    right: 16px;
    bottom: 14px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #dfe6d8;
    border-radius: 50%;
    background: #fffefaf2;
    box-shadow: 0 4px 12px #2c44351a;
    color: #5b7663;
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .atlas-scroll-hint.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* The hint only exists on the desktop workspace; keep it out of mobile flow. */
.atlas-scroll-hint {
  display: none;
}

@media (min-width: 951px) {
  .atlas-scroll-hint {
    display: grid;
  }
}

/* The expanded map hides both side columns; its scroll hint must go too. */
@media (min-width: 951px) {
  .atlas-workspace.is-expanded .atlas-scroll-hint {
    display: none;
  }
}