/* ==========================================================================
   Locations — scoped to .locations, .locations-card
   3D rotating card-sphere, scroll-driven via GSAP ScrollTrigger (assets/js/locations.js)
   ========================================================================== */

.locations {
  background: var(--prism-band);
  padding-top: clamp(16px, 2vw, 32px);
  position: relative;
}

/* Locations heading + copy, set on the left of the sphere (in the spot the
   floating location-name text used to occupy). */
.locations-intro-overlay {
  position: absolute;
  top: 50%;
  left: clamp(24px, 6vw, 96px);
  transform: translateY(-50%);
  width: min(620px, 46vw);
  text-align: left;
  z-index: 5; /* sits above the sphere on purpose — it's meant to spill over it */
}

.locations-copy {
  color: var(--prism-band-text-body);
  line-height: 1.7;
  margin: 0;
  max-width: 56ch;
}

/* Mobile-only duplicate of the intro copy, in normal flow above the globe
   (see locations.php) — hidden on desktop, where .locations-intro-overlay
   is used instead. */
.locations-intro-static {
  display: none;
}

.locations-gallery-container {
  position: relative;
  height: 420vh;
  width: 100%;
}

.locations-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  overflow: hidden;
}

.locations-sphere {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.locations-card {
  position: absolute;
  width: 200px;
  height: 270px;
  left: -100px;
  top: -135px;
  background: var(--prism-band-card);
  border: 1px solid var(--prism-band-border);
  border-radius: var(--radius-card);
  padding: 6px;
  overflow: hidden;
  transform-style: preserve-3d;
  backface-visibility: visible;
  box-shadow:
    8px 8px 16px rgba(0, 0, 0, 0.6),
    inset 1px 1px 2px rgba(255, 255, 255, 0.04);
  transition: filter 0.4s ease;
}

.locations-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* full color at all times — only a glow marks the active card now */
.locations-card.is-active {
  filter: drop-shadow(0 0 18px rgba(81, 180, 213, 0.35));
}

/* Scroll-synced location name, set on the right of the sphere (assets/js/locations.js
   swaps the text as the sphere rotates past each location). */
.locations-floating-text {
  position: absolute;
  top: 50%;
  right: clamp(24px, 6vw, 96px);
  transform: translateY(-50%);
  width: min(340px, 80vw);
  text-align: right;
  z-index: 5;
  pointer-events: none;
}

.locations-floating-text h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h3-size);
  line-height: 1.1;
  color: var(--prism-band-text);
  margin: 0;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
}

@media (max-width: 768px) {
  .locations-card {
    width: 130px;
    height: 175px;
    left: -65px;
    top: -87px;
  }
  .locations-gallery-container { height: 340vh; }

  /* Intro heading+copy: on mobile this now sits in normal flow above the
     globe entirely (see .locations-intro-static) instead of overlapping
     it — that overlap is desktop-only, by design. */
  .locations-intro-overlay { display: none; }

  .locations-intro-static {
    display: block;
    padding: 0 var(--gutter) 28px;
    text-align: center;
  }

  .locations-copy { margin: 0 auto; }

  .locations-floating-text {
    top: auto;
    bottom: 6%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    width: min(320px, 84vw);
  }
}

/* "Locations" heading — same size as the hero subtagline */
.locations .section-heading { font-size: var(--subtag-size); }

.locations-sphere { z-index: 1; }