/* Region map — generic, content-agnostic interactive list + map pairing.
   Built for the Emergency Assistance panel (Figma node 18695:11925,
   inside .promo__panel--split, css/promo-panel.css) but knows nothing
   about emergencies, phone numbers, or Australia specifically: it's just
   a list of [data-region] items paired with a same-named set of
   [data-region] shapes in an SVG, wired up generically by
   js/region-map.js. A future instance could use entirely different
   regions/labels/values without touching this file or that script.

   The explicit link between a list row and its map shape is the
   `data-region` value they share (e.g. data-region="nsw") — never text
   matching. See js/region-map.js for the hover/focus wiring. */

/* ---- Region list ---- */

.promo__region-list {
  display: flex;
  gap: var(--space-5xl); /* 42px between the two columns */
}

.promo__region-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-l); /* 16px between rows */
  list-style: none;
  margin: 0;
  padding: 0;
}

.promo__region {
  display: flex;
  align-items: center;
  gap: var(--space-3xs); /* 2px */
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 24px;
  line-height: 28.8px;
}

.promo__region-label {
  min-width: 70px; /* Figma's own value — keeps every phone number lined up and leaves breathing room even after the widest label (NSW) */
  color: var(--colour-white);
}

.promo__region-phone {
  color: var(--colour-sky-teal);
  text-decoration: none;
  white-space: nowrap;
}

.promo__region-phone:hover,
.promo__region-phone:focus-visible {
  text-decoration: underline;
}

/* ---- Map ---- */

.promo__map {
  display: block;
  width: 100%;
  height: auto;
}

.promo__map-outline {
  fill: none;
}

.promo__map-region {
  fill: var(--colour-sky-teal);
  fill-opacity: 0.2; /* default/inactive — Figma's own file shows NSW at 0.8 as a demonstration of the ACTIVE state, not the default one */
  transition: fill-opacity 0.25s ease;
}

.promo__map-region.is-active {
  fill-opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .promo__map-region {
    transition: none;
  }
}

/* ---- Responsive ----
   At 1023px the panel itself has already stacked the list above the map
   (see .promo__panel--split, css/promo-panel.css), so the map no longer
   needs to fill a full-width column; below 768px the two list columns
   become one so each phone number keeps a comfortable, tappable row
   rather than compressing to fit two abreast. */
@media (max-width: 1023px) {
  .promo__map {
    max-width: 400px;
    margin: 0 auto;
  }
}

/* Smaller mobiles: stay two columns (stacking to one long column made
   every state+number a scroll-y list, which is what this is fixing) —
   just tighten the gap and stack each row's own label above its own
   number instead of side-by-side, so a 13-character phone number never
   has to share a horizontal row with the label in a ~140px-wide column. */
@media (max-width: 767px) {
  .promo__region-list {
    gap: var(--space-l); /* 16px between the two columns, down from 42px */
  }

  .promo__region-column {
    flex: 1 1 0%;
    min-width: 0;
    gap: var(--space-m); /* 12px between rows, down from 16px */
  }

  .promo__region {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 15px;
    line-height: 1.3;
  }

  .promo__region-label {
    min-width: 0;
  }
}