/* The towns under the map as plain text in even rows (13 Oct 2026, Southend Gas & Plumbing; 15 Oct, Relax). Mike, 13 Oct:
   "x should also be the perfect number that looks good visually wherever the locations are placed": pills that wrap by
   their own widths left the eighth town alone on a row; a fast build lists eight (the base and the seven nearest).
   Mike, 15 Oct: "The location tags under the map look like buttons. Maybe we could just have text instead. Maybe two
   rows of four. This would apply to our template too." So: no border, ground or padding, the names as text, four to a
   row (two rows of four for eight), and "and surrounding areas" as a quiet line under them. Opt-in (`optInCss`); the
   fast build adds it when the count is even. */
#contact ul[aria-label="Towns and areas"],
#areas ul[aria-label="Towns and areas"] {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem 0.75rem;
}
#contact ul[aria-label="Towns and areas"] > li,
#areas ul[aria-label="Towns and areas"] > li {
  border: 0; background: none; padding: 0; border-radius: 0;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 0.9375rem; font-weight: 600; color: var(--color-ink);
}
/* The closing "and surrounding areas" spans the row under the names, lighter. */
#contact ul[aria-label="Towns and areas"] > li.border-dashed,
#areas ul[aria-label="Towns and areas"] > li.border-dashed {
  grid-column: 1 / -1; white-space: normal; font-weight: 500; color: var(--color-body-soft); margin-top: 0.125rem;
}
/* Phones: two rows of three (Mike, 15 Oct: four to a row "doesn't really work on mobile. Maybe we need to drop to six"),
   the six nearest; the map above still marks all of them. The laptop keeps two rows of four. */
@media (max-width: 639px) {
  #contact ul[aria-label="Towns and areas"],
  #areas ul[aria-label="Towns and areas"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #contact ul[aria-label="Towns and areas"] > li:nth-child(n+7):not(.border-dashed),
  #areas ul[aria-label="Towns and areas"] > li:nth-child(n+7):not(.border-dashed) { display: none; }
}
/* A name longer than 12 characters ("Southend-on-Sea", 15 Oct) is cut at three to a row on a phone: two to a row there,
   the same six in three rows. The template marks such a list `data-long`. */
@media (max-width: 639px) {
  #contact ul[aria-label="Towns and areas"][data-long],
  #areas ul[aria-label="Towns and areas"][data-long] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}