/**
 * Het overzicht van de werkgebieden.
 *
 * Bouwt voort op rix-home.css. De plaatsenlijst is het hart van deze pagina en
 * krijgt daarom de meeste ruimte; de gebieden staan er rustiger onder.
 */

.rix-loc-intro h1 {
  font-size: var(--rix-size-hero);
  line-height: var(--rix-leading-hero);
  color: var(--rix-white);
  max-width: 16ch;
}

/* De kaart in deze hero moet onder de tekst zichtbaar blijven. */
.rix-loc-intro .rix-home__hero-veil { background: rgba(0, 0, 0, .42); }

.rix-locaties__lead {
  margin-block-start: 14px;
  max-width: 62ch;
  font-size: var(--rix-size-small);
}

/* --- Alle plaatsen -------------------------------------------------------- */

/* Eén kolom op een telefoon, meer zodra het past. Een lijst van eenendertig
   plaatsen onder elkaar is op een breed scherm een onnodig lange kolom. */
.rix-locaties__plaatsen {
  margin-block-start: 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.rix-locaties__plaatsen a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--rix-radius-card);
  text-decoration: none;
  color: inherit;
  transition: background-color 200ms ease;
}

.rix-locaties__plaatsen a:hover,
.rix-locaties__plaatsen a:focus-visible {
  background: var(--rix-surface);
}

.rix-locaties__plaats {
  display: block;
  font-family: var(--rix-font-ui);
  font-weight: 500;
  color: var(--rix-heading);
}

/* Het gebied staat er klein bij: het is context, geen keuze. */
.rix-locaties__gebied {
  display: block;
  margin-block-start: 2px;
  font-size: var(--rix-size-kicker);
  color: var(--rix-blue);
}

/* --- De zes gebieden ------------------------------------------------------ */

.rix-locaties__gebieden {
  margin-block-start: 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 20px;
}

.rix-locaties__gebieden li {
  background: var(--rix-white);
  border: 1px solid var(--rix-line);
  border-radius: var(--rix-radius-card);
  box-shadow: var(--rix-shadow-card);
  padding: 24px;
}

.rix-locaties__gebieden h3 { margin-block-end: 10px; }

.rix-locaties__gebieden h3 a {
  color: inherit;
  text-decoration: none;
}

.rix-locaties__gebieden h3 a:hover { color: var(--rix-blue); }

.rix-locaties__gebied-plaatsen {
  font-size: var(--rix-size-small);
  color: var(--rix-text);
}

.rix-locaties__gebied-owner {
  margin-block-start: 12px;
  font-family: var(--rix-font-ui);
  font-size: var(--rix-size-kicker);
  color: var(--rix-ink-soft);
}

@media (min-width: 600px) {
  .rix-locaties__plaatsen { grid-template-columns: repeat(2, 1fr); gap: 2px 20px; }
}

@media (min-width: 768px) {
  .rix-locaties__gebieden { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (min-width: 1025px) {
  .rix-locaties__plaatsen { grid-template-columns: repeat(4, 1fr); }
  .rix-locaties__gebieden { grid-template-columns: repeat(3, 1fr); }
}

/* Een gedeelde plaats krijgt geen gebiedsnaam maar een toelichting. Die staat
   in het blauw van de huisstijl, zodat hij leest als een opmerking en niet als
   de naam van een gebied. */
.rix-locaties__gedeeld .rix-locaties__gebied {
  color: var(--rix-blue);
}

/* De gedeelde plaatsen achter de eigen plaatsen: zelfde regel, rustiger kleur,
   zodat zichtbaar blijft dat het een aanvulling is en geen claim. */
.rix-locaties__gebied-gedeeld { color: var(--rix-ink-soft); }