/* National indicators around the original Natural Earth coastline. */
.hero__map.map-snapshot {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 0;
  justify-self: center;
}

.map-snapshot__caption { display: block; margin-bottom: 8px; }
.map-snapshot__country {
  display: block;
  color: var(--gold-400);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.map-snapshot__heading {
  display: block;
  margin-top: 5px;
  color: var(--white);
  font-size: clamp(1.25rem, 1rem + .6vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -.02em;
}
.map-snapshot__stage { position: relative; aspect-ratio: 1 / 1; min-height: 400px; }
.map-snapshot .map {
  position: absolute;
  right: 0;
  top: 50%;
  width: 62%;
  max-height: 100%;
  transform: translateY(-50%);
}
.map-snapshot .map__grid line { stroke: var(--on-dark-line); stroke-dasharray: 1 9; }
.map-snapshot .map__labels text { font-size: 16px; fill: var(--on-dark-muted); }
.map-snapshot .map__land {
  fill: var(--green-tint);
  stroke: var(--gold-400);
  stroke-width: 1.6;
}
.map__glow, .map__spark {
  fill: none;
  stroke: var(--gold-400);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.map__glow {
  stroke-width: 5;
  opacity: .2;
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, .5));
}
.map__spark {
  stroke-width: 2.8;
  stroke-dasharray: 7 93;
  stroke-dashoffset: 100;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, .9));
}
.map-snapshot__metrics { margin: 0; }
.map-snapshot__metric {
  position: absolute;
  z-index: 1;
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--gold-400);
  max-width: 42%;
}
.map-snapshot__metric--population { left: 0; top: 8%; }
.map-snapshot__metric--hospitals { left: 0; top: 40%; }
.map-snapshot__metric--system { left: 0; top: 72%; }
.map-snapshot__metric dt {
  font-size: 13px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
  color: var(--on-dark-muted);
}
.map-snapshot__metric dd { margin: 4px 0 0; }
.map-snapshot__value {
  display: block;
  font-size: clamp(2rem, 1.5rem + 1.1vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.12;
  color: var(--white);
  white-space: nowrap;
}
.map-snapshot__value--system { font-size: clamp(1rem, .95rem + .25vw, 1.15rem); line-height: 1.3; letter-spacing: -.01em; white-space: normal; }
.map-snapshot__detail { display: block; margin-top: 5px; font-size: 13px; color: var(--on-dark-muted); line-height: 1.5; }
.map-snapshot__year { display: block; margin-top: 4px; font-size: 13px; color: var(--gold-400); }
.map-snapshot__sources {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--on-dark-line);
  font-size: 13px;
  color: var(--on-dark-muted);
}
.map-snapshot__sources summary {
  cursor: pointer;
  width: fit-content;
  padding: 8px 0;
  min-height: 32px;
  color: var(--on-dark);
}
.map-snapshot__sources p { margin: 6px 0 10px; }
.map-snapshot__sources a { color: var(--gold-400); }
.map-snapshot a:focus-visible,
.map-snapshot summary:focus-visible { outline-color: var(--gold-400); }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(360px, 1fr); gap: 48px; }
}
@media (min-width: 1200px) { .hero__grid { gap: 64px; } }
@media (max-width: 479px) {
  .map-snapshot__metric { padding-left: 10px; }
  .map-snapshot__metric dt { font-size: 13px; }
}

/* Continuous light around the stationary coastline, with a visitor pause control. */
@media (prefers-reduced-motion: no-preference) {
  .map-snapshot.is-lit .map__spark { animation: raq-coast-light 6.5s linear infinite; opacity: 1; }
  .map-snapshot.lights-paused .map__spark,
  .map-snapshot.lights-suspended .map__spark { animation-play-state: paused; }
  @keyframes raq-coast-light {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
  }
}
@media (prefers-reduced-motion: reduce), print {
  .map-snapshot .map__spark { animation: none !important; opacity: 0; }
}

.map-snapshot__light-toggle {
  padding: 7px 10px; border: 1px solid var(--on-dark-line); border-radius: 4px;
  background: transparent; color: var(--on-dark); font: inherit;
  font-size: 13px; cursor: pointer; min-height: 32px;
}
.map-snapshot__light-toggle[hidden] { display: none; }
.map-snapshot__light-toggle:hover { border-color: var(--gold-400); }
.map-snapshot__light-toggle:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce), print {
  .map-snapshot__light-toggle { display: none; }
}

/* Small screens (E-5, E-9, 18 Oct 2026 review): the square 400px minimum stage widened the
   hero past a 390px screen and placed the figures over the map labels. Below 600px the
   figures and the map sit side by side in normal flow, inside a single fluid column. */
@media (max-width: 599px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .map-snapshot__stage {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 12px; align-items: center; aspect-ratio: auto; min-height: 0;
  }
  .map-snapshot .map { position: static; transform: none; width: 100%; grid-column: 2; grid-row: 1; }
  .map-snapshot__metrics { grid-column: 1; grid-row: 1; display: grid; gap: 18px; }
  .map-snapshot__metric { position: static; max-width: none; }
}