/* ============================================================
   LOCATIONS LIST  ·  .locations
   Viable sites by region (sections/locations.php). A heading,
   then one ruled column of place names per region. Tokens only.
   ============================================================ */

.locations__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

/* Tall enough to tap: the text link on its own is 23px high. */
.locations__head .link-arrow {
  align-self: flex-start;
  min-height: 4.4rem;
}

.locations__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l) var(--space-m);
}

.locations__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-block-start: var(--space-s);
  border-block-start: var(--border-width) var(--border-style) var(--tertiary);
}

.locations__region {
  font-size: var(--h5);
}

.locations__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--text-s);
  color: var(--text-dark-muted);
}

@media (min-width: 576px) {
  .locations__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .locations__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}