/*
 * Centre pages (/centres/laeken/, /centres/anderlecht/, /centres/evere/) — ported from the
 * <style> block of src/pages/centres/[id].astro. The Brussels map is in sections.css, which
 * loads before this file. The /centres/ hub has no page styles (PageHero, Visit, CtaBand).
 */

/* — Contact card and map ——————————————————————————————————————— */
.ctr {
  background: var(--white);
  padding-top: clamp(3rem, 6vw, 5rem);
}

.ctr__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.ctr__card {
  display: grid;
  gap: 1.5rem;
}

.ctr__facts {
  border-top: 1px solid var(--line);
}

.ctr__facts > div {
  display: grid;
  gap: 0.2rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}

.ctr__facts dt {
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

.ctr__facts dd {
  margin: 0;
}

.ctr__facts address {
  font-style: normal;
}

.ctr__facts a {
  text-decoration-color: var(--line-strong);
}

.ctr__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ctr__gbp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  min-height: 2.75rem;
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.ctr__map {
  padding: clamp(1rem, 3vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--paper);
}

/* — En pratique ———————————————————————————————————————————————— */
.ctr-practical__grid {
  display: grid;
  gap: 1.5rem;
}

.ctr-practical ul {
  display: grid;
  gap: 0.75rem;
}

.ctr-practical li {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-strong);
}

/* — Services list ——————————————————————————————————————————————— */
.ctr-services {
  background: var(--white);
}

.ctr-services h2 {
  margin-top: 1.25rem;
}

.ctr-services__list {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

.ctr-services__list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1.5rem;
  align-items: center;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

/* The arrow spans both text rows on small screens, then takes its own column. */
.ctr-services__list a > svg {
  grid-row: 1 / span 2;
  grid-column: 2;
  transition: transform var(--dur) var(--ease-out);
}

.ctr-services__list a:hover > svg {
  transform: translateX(4px);
}

.ctr-services__name {
  font-size: var(--fs-h4);
  font-weight: 520;
}

.ctr-services__teaser {
  color: var(--fg-2);
  font-size: var(--fs-small);
}

.ctr-services__note {
  margin-top: 1.5rem;
  color: var(--fg-2);
}

.ctr-services__note a {
  color: var(--fg);
}

/* — Other centres ——————————————————————————————————————————————— */
.ctr-others {
  background: var(--white);
  padding-top: 0;
}

.ctr-others__list {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.ctr-others__list a {
  display: grid;
  gap: 0.35rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out);
}

.ctr-others__list a:hover {
  background: var(--stone-100);
}

@media (min-width: 48rem) {
  .ctr-others__list {
    grid-template-columns: 1fr 1fr;
  }

  .ctr-services__list a {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
  }

  .ctr-services__list a > svg {
    grid-row: auto;
    grid-column: auto;
  }
}

@media (min-width: 64rem) {
  .ctr__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(4rem, 8vw, 9rem);
  }

  .ctr-practical__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
}