/* Cross-link block shared by the two long-tail page families:
   a commune page pointing at its GRD's tariff page, and a GRD page
   listing the communes it serves.

   Both templates carry their own inline <style>, but this component is
   the same on both and is what ties the ~1 200 commune URLs to the ~80
   GRD URLs — one copy so the two families can't drift apart visually.
   Markup is generated by src/services/commune-grd-link.service.js and
   the route handlers. */

.wm-crosslink {
  max-width: 50rem;
  /* The sibling blocks on these pages (.cm-body, .grd-cta …) get their
     gutter from a horizontal *padding* on a full-width container. This is
     a bordered card, so its padding is the card's own inset and cannot
     double as the page gutter: without the width calc the border sits
     flush against both screen edges below 50rem. */
  width: calc(100% - 3rem);
  margin: 0 auto 2.5rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #E7E5E4;
  border-radius: 14px;
}

.wm-crosslink__title {
  font-family: 'Suisse Screen', 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1C1917;
  margin: 0 0 0.5rem;
}

.wm-crosslink__body {
  color: #57534E;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.wm-crosslink__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: #15803D;
  text-decoration: none;
}

.wm-crosslink__cta:hover,
.wm-crosslink__cta:focus-visible {
  text-decoration: underline;
}

/* Commune list on a GRD page. Chips rather than a bullet list: at 245
   communes for Romande Energie a vertical list would dwarf the page. */
.wm-crosslink__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.wm-crosslink__list a {
  display: inline-block;
  /* Keeps the chip above the 24×24 CSS px minimum target size
     (WCAG 2.2 AA, 2.5.8) — at 0.3rem it lands right on the line. */
  padding: 0.4rem 0.75rem;
  border: 1px solid #E7E5E4;
  border-radius: 999px;
  background: #FAFAF9;
  font-size: 0.85rem;
  color: #44403C;
  text-decoration: none;
}

.wm-crosslink__list a:hover,
.wm-crosslink__list a:focus-visible {
  border-color: #15803D;
  color: #15803D;
}