/* =========================================================================
   Locations — interactive globe + store list/detail pairing
   Uses design tokens from css/variables.css only (no hardcoded hex).
   Matches scaffold ids/classes:
     .locations__layout / .locations__globe-wrap / #globe-canvas
     .locations__hint / .locations__side / #store-list (.store-list)
   ========================================================================= */

/* The Locations section sits on the navy scroll-journey color (#bg-layer);
   sections are transparent (bg-theme.css) so no section background here. */

/* ---- Stage: store cards (left) | centered big globe | store cards (right) ---- */
.locations__stage {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 0.85fr);
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-6);
}

/* On medium screens: globe on top, cards in two columns beneath */
@media (max-width: 980px) {
  .locations__stage {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
  .locations__globe-wrap {
    grid-column: 1 / -1;
    order: -1;
  }
}
@media (max-width: 560px) {
  .locations__stage { grid-template-columns: 1fr; }
}

/* ---- Globe wrapper: a translucent halo stage (bigger, centered) ---- */
.locations__globe-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  background: radial-gradient(
    circle at 50% 42%,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.05) 58%,
    transparent 80%
  );
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: var(--space-1); /* smaller card — hugs the globe */
}

/* ---- The globe canvas mount ----
   Fixed size that does NOT change when the detail panel opens (the wrapper
   reserves room for the detail below, so the globe never shrinks/resizes). */
#globe-canvas.locations__globe {
  /* Big on desktop, but the min must stay below small-phone widths or it forces
     horizontal scroll. The 62vh cap keeps the (square) globe from making the
     locations page taller than the viewport on short screens. */
  width: min(clamp(300px, 40vw, 520px), 62vh);
  aspect-ratio: 1 / 1;
  min-height: 300px;
  margin-inline: auto;
  background: transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  touch-action: pan-y; /* allow page scroll while still dragging the globe */
}

/* globe.gl canvas should fill the mount */
#globe-canvas.locations__globe canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: var(--radius-md);
  cursor: grab;
}
#globe-canvas.locations__globe canvas:active {
  cursor: grabbing;
}

/* Hint line under the globe (light, on the navy page) */
.locations__hint {
  margin: 0;
  font-size: var(--fs-sm);
  color: rgba(244, 232, 211, 0.75);
  text-align: center;
}

/* ---- Store cards: small + translucent, flanking the globe ---- */
.store-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}

.store-list__btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  /* translucent so the navy page shows through */
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.store-list__btn:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.17);
}

.store-list__btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Active store gets a gold accent edge */
.store-list__btn.is-active {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.2);
}

/* Storefront cover thumbnail + text column inside each card */
.store-list__cover {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 2px solid rgba(var(--cream-rgb), 0.5);
}

.store-list__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.store-list__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--cream);
}

.store-list__place {
  font-size: var(--fs-sm);
  color: rgba(244, 232, 211, 0.78);
}

@media (prefers-reduced-motion: reduce) {
  .store-list__btn,
  .store-list__btn:hover {
    transform: none;
  }
}