/* ============================================================
   Par où continuer (snippets/onward.liquid).

   Fin des pages éditoriales, de la recherche sans résultat et de la 404.
   Les trois clubs sont des tuiles franches : angle net, filet de la
   couleur du club en tête, blason sur le fond de la page. Les liens qui
   suivent sont des capsules, comme les renvois de la page contact.
   ============================================================ */

.onward {
  display: grid;
  gap: 16px;
}

.onward__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.onward__text {
  max-width: 52ch;
  margin: -6px 0 0;
  color: var(--ink-70);
  line-height: 1.55;
}

.onward__clubs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.onward-club {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  min-height: 84px;
  padding: 14px 16px;
  border: 1px solid var(--ink-12);
  border-top: 4px solid var(--club, var(--ink));
  border-radius: var(--radius);
  color: var(--ink);
}

.onward-club__crest {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 48px;
}

.onward-club__crest-img {
  width: auto;
  max-width: 44px;
  height: auto;
  max-height: 48px;
}

.onward-club__body {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.onward-club__name {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.onward-club__count { color: var(--ink-70); font-size: .9rem; }
.onward-club__arrow { flex: none; }
.onward-club:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.onward__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

/* Capsules (instrument.css). */
.onward__link { padding: 0 18px; }

@media (hover: hover) {
  .onward-club:hover { border-color: var(--ink); border-top-color: var(--club, var(--ink)); }
  .onward-club:hover .onward-club__arrow { translate: 3px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .onward-club { transition: border-color var(--motion-state); }
  .onward-club__arrow { transition: translate var(--motion-state); }
}

@media (max-width: 950px) {
  .onward__clubs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .onward-club { min-height: 72px; }
}