/* map.css — the Elba map section.
   The map itself lives in map/elba.html and is embedded in an iframe: it keeps its
   own CSS reset out of this site, and a new export from Claude Design is a file swap.
   Everything here is the FRAME around it — the place for per-project design. */

.section-map {
  background: transparent;
  /* sits close under the booking section — the global section rhythm is far too
     generous here */
  padding-top: clamp(1rem, 2.5vh, 2rem);
}

/* the shared centred-title rule lists sections explicitly and does not include this one */
.section-map .section-title {
  text-align: center;
  margin: 0 auto 0.8rem;
  max-width: 20ch;
}

.map-lead {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto clamp(1.4rem, 3vw, 2.2rem);
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.map-frame {
  position: relative;
  /* The island is roughly 1.5x wider than tall — a frame near that ratio wastes the
     least space.
     NOTE: width must be pinned. aspect-ratio + min-height lets the box grow SIDEWAYS
     to satisfy the ratio, which pushed the frame off-screen on phones. */
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1.45 / 1;
  /* The sidebar needs ~855px to show wind, view and all nine legend rows without a
     scrollbar. width is pinned above, so min-height only ever grows the HEIGHT. */
  /* 880px map + the parchment margin around it, so the sidebar still fits
     without a scrollbar (it needs ~825px of inner height). */
  min-height: 900px;
  /* transparent: the map's own header and sidebar are see-through, so the
     page's parchment runs through the whole card */
  background: transparent;
}

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

/* shown until the iframe is loaded */
.map-frame .map-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  background: transparent;
  transition: opacity 0.4s var(--ease);
}
.map-frame.is-ready .map-hint { opacity: 0; pointer-events: none; }

@media (max-width: 640px) {
  /* the lead is redundant on a phone — the map speaks for itself */
  .map-lead { display: none; }
  .section-map { padding-top: 0.5rem; }
  .section-map .section-title { margin-bottom: 1rem; }

  /* explicit height instead of a ratio — the ratio would drive the width again */
  .map-frame {
    aspect-ratio: auto;
    /* the desktop min-height would otherwise force 900px on a phone too */
    min-height: 0;
    height: clamp(460px, 70vh, 620px);
    border-radius: var(--radius);
  }
}