/* ============================================================
 * Map embed - wrapper for Trophy Maps iframe.
 *
 * Trophy Maps is a separate tool (~/Projects/trophy-maps) that
 * outputs a per-project embed URL. This component is the WRAPPER
 * a Trophy site puts around that iframe: title, lede, legend,
 * loading state, lazy-load.
 *
 * The iframe ALWAYS renders, including on mobile - the iframe is
 * already responsive via aspect-ratio. There is no static-image
 * fallback. Trophy is on Mapbox free plan with plenty of quota;
 * lazy is for first-paint perf, not quota saving.
 *
 * Token contract: same as the rest of shared/.
 *   --bg-base, --bg-2, --ink, --ink-soft,
 *   --accent, --accent-bright, --accent-muted,
 *   --font-display, --font-sans, --font-mono,
 *   --container-pad, --container-max, --space-section,
 *   --ease, --duration-fast
 *
 * Reference: 119 W 57 map-embed-for-handoff.html and the SOPs
 * at knowledge/project-delivery/expand/component-sops/map.md +
 * trophy-maps-tool.md.
 * ============================================================ */

.map-embed {
  padding: var(--space-section) var(--container-pad);
  background: var(--bg-base);
}

.map-embed-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.map-embed-header {
  margin-bottom: 4.8rem;
  max-width: 56ch;
}

.map-embed-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}

.map-embed-title {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
}

.map-embed-lede {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin-top: 1.6rem;
}

/* ---------- Frame ---------- */
/* The frame is an editorial container with a hairline border.
 *
 * Height: desktop uses an 80vh-anchored clamp so the map is never taller
 * than the viewport (and never absurdly small on a tiny laptop or absurdly
 * tall on a huge external monitor). Mobile falls back to aspect-ratio
 * (overridden in the @media block below) because portrait viewports need
 * a different shape.
 *
 * Per-site overrides can still set their own `height` or `aspect-ratio`
 * at plain class specificity; this is the wrapper default that every site
 * inherits unless it actively opts out. */

.map-embed-frame {
  position: relative;
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--accent);
  overflow: hidden;
  height: clamp(480px, 80vh, 800px);
}

.map-embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Loading state - visible until the iframe load event fires. */
.map-embed-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent-muted);
  z-index: 1;
  transition: opacity var(--duration-fast) var(--ease);
}
.map-embed-frame.is-loaded .map-embed-loading {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Legend (optional) ---------- */

.map-embed-legend {
  margin-top: 3.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.8rem;
  font-family: var(--font-sans);
  font-size: 1.3rem;
  color: var(--ink-soft);
}

.map-embed-legend-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.map-embed-legend-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--accent-bright);
  flex-shrink: 0;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .map-embed {
    padding: var(--space-section-mobile) var(--container-pad);
  }
  /* Portrait map on mobile — drop the desktop height clamp and use a
     taller-than-wide aspect ratio. Selector `.map-embed .map-embed-frame`
     bumps the specificity above the bare `.map-embed-frame` desktop rule
     so this wins independently of source order across sites that load
     shared/index.css before vs. after their own style.css.
     `height: auto` is the trick that re-enables aspect-ratio sizing. */
  .map-embed .map-embed-frame {
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .map-embed-header { margin-bottom: 3.2rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .map-embed-loading {
    transition: none;
  }
}