/* Compact portrait orthophoto cards, selected from the owner's reference. */
.experience { min-height: 780px; }
.destinations {
  left: 50%;
  right: auto;
  bottom: 58px;
  width: min(92.4vw, 900px);
  transform: translateX(-50%);
}
.destinations-heading { font-size: 10px; margin-bottom: 14px; gap: 16px; }
.destinations-heading > span { font-size: 10px; }
.destinations-heading > span > span { font-size: 10px; }
.village-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.village {
  min-height: 0;
  aspect-ratio: 3 / 5;
  padding: 14px 12px 18px;
  border-radius: 5px;
  transform: none;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.village:hover, .village:focus-visible, .village[aria-pressed=true] {
  transform: translateY(-6px);
}
.village-meta { margin: 0; }
.village-num, .north { font-size: 10px; }
.village-name { font-size: 16px; line-height: 1.18; margin-bottom: 9px; }
.village-province { font-size: 11px; line-height: 1.35; letter-spacing: 0; }
.village-label { padding-right: 0; }
.village-shade {
  background: linear-gradient(0deg, #031a19f5, #031a19a3 23%, transparent 65%),
    linear-gradient(180deg, #041f2155, transparent 35%);
}
.village-picture.awaited { font-size: 12px; letter-spacing: 0; padding: 0 10px 20px; text-align: center; }
.village-picture.awaited::before { inset: 15px; }
.village-arrow { right: 8px; bottom: 7px; font-size: 12px; }
.portrait-mobile-hint { display: none; }
.experience.is-entering .destinations { transform: translate(-50%, 30px); }

@media (min-width: 651px) and (max-width: 1000px) {
  .village-rail { gap: 9px; }
  .village { padding: 12px 8px 16px; }
  .village-name { font-size: 13px; }
  .village-province { font-size: 10px; }
  .village-picture.awaited { font-size: 11px; }
}

/* One swipeable row replaces the large two-row phone grid. Keyboard focus also
   scrolls each existing destination button into view. */
@media (max-width: 650px) {
  .experience { min-height: 820px; }
  .experience[data-view=destination] { min-height: 900px; }
  .destinations { left: 6vw; right: 6vw; width: auto; bottom: 58px; transform: none; }
  .destinations-heading { align-items: flex-start; gap: 12px; font-size: 9px; }
  .destinations-heading > span { font-size: 10px; }
  .portrait-desktop-hint { display: none; }
  .portrait-mobile-hint { display: inline; white-space: nowrap; }
  .village-rail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(118px, 30vw, 150px);
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 8px;
    scrollbar-width: thin;
    scrollbar-color: #8ba78b #122e2d;
    padding: 10px 8px 12px;
    margin: -10px -8px -12px;
  }
  .village { padding: 12px 10px 18px; scroll-snap-align: start; }
  .village-name { font-size: 14px; }
  .village-province { font-size: 11px; }
  .village-picture.awaited { align-items: center; padding: 0 10px 20px; font-size: 12px; }
  .flight-console { bottom: 20px; }
  .experience.is-entering .destinations { transform: translateY(30px); }
}

@media (prefers-reduced-motion: reduce) {
  .village { transform: none !important; }
}