/* location.css — Location-Seite (Surroundings + Maps-Facade).
   Referenz: scrape/screens/{en,ru}-location-*.jpg (CN: EN-Layout mit CN-Text).
   .split, .location-teaser, .distances, .surroundings__* kommen aus home.css —
   hier nur seitenspezifische Ergänzungen (intro-Subheading-Spacing, Facade,
   Surroundings-CTA). Das illustrierte Umgebungs-Icon-Set des Originals wurde
   (wie schon bei home.css) nicht 1:1 nachgebaut; die interaktive Maps-Facade
   ersetzt/ergänzt es funktional. */

.location { background: #fffdfb; }

.location-intro .intro__inner { margin-bottom: 2.4rem; }
.location-intro .split__script { text-align: center; }

/* Breitband-Luftaufnahme direkt unter „RARE BEACHFRONT LIVING ON" (Raw: photo-55
   folgt auf die Überschrift). Cinematisches Establishing-Shot vor dem Split. */
.location-intro__lead { margin: 0 auto 2.4rem; }
.location-intro__lead img { width: 100%; border-radius: 4px; aspect-ratio: 16 / 7; object-fit: cover; }

/* ---- Surroundings-CTA ------------------------------------------------- */
.surroundings__cta { margin-top: 2.4rem; }

/* ---- Google-Maps-Facade (Klick lädt das iframe, siehe assets/js/map.mjs) */
.map-section .section-title { margin-bottom: 2rem; }

.map-facade {
  position: relative;
  max-width: 800px;
  margin-inline: auto;
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
}
.map-facade picture,
.map-facade img { display: block; width: 100%; }
.map-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(13, 27, 36, 0.18);
  transition: background-color 0.2s var(--ease);
}
.map-facade:hover::after { background: rgba(13, 27, 36, 0.28); }
.map-facade__load {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Nach dem Klick ersetzt map.mjs den Inhalt durch ein echtes iframe. */
.map-facade iframe {
  display: block;
  width: 100%;
  aspect-ratio: 800 / 598;
  border: 0;
}