/**
 * The Hall of Fame (sections/hall-of-fame.liquid).
 *
 * A record, not a shop - but a CELEBRATED record. The one strong shape is
 * the plaque: every card hangs under an induction number set in ghost
 * display type over a hairline, the way retired jerseys hang under their
 * numbers in a stadium roof. The numbers run in collection order and carry
 * on across pages, so they read as a sequence of inductions, not a ranking
 * - deliberately distinct from guide-ranking's tier chips, which pass an
 * ordered judgement. Nothing here is being judged; it already won by being
 * missed.
 *
 * The numeral is outlined (text-stroke where supported, a faint fill where
 * not) and fills with brand when its card is engaged: the hall lights one
 * plaque at a time. All hover motion sits behind the reduced-motion gate.
 *
 * The grid is the same product card the rest of the theme uses - rebuilding
 * a near-identical card for one page is how two versions of the same
 * component start drifting - but the page around it is quieter and
 * wider-set, because nothing here is being sold.
 */

.section-hall-of-fame {
  padding-block: var(--space-8) var(--space-10);
}

.hall-of-fame__head {
  margin-bottom: var(--space-7);
}

/* 62ch is a reading measure - a line longer than that is hard to track back
   from. It is the default, and a merchant who wants the introduction to
   span the grid turns it off in the section settings. */
.hall-of-fame__head--measured {
  max-width: 62ch;
}

/* The eyebrow leads with a short brand dash - a small ceremonial ribbon,
   the head's only colour. */
.hall-of-fame__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hall-of-fame__eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background-color: var(--color-brand);
}

.hall-of-fame__heading {
  margin: 0 0 var(--space-4);
}

.hall-of-fame__body {
  color: var(--color-muted);
}

.hall-of-fame__body > p {
  margin: 0;
}

/* The rule used to hang off the count line ("1 retired"), which is gone.
   It carried the only separation between the intro and the grid, so it
   moves here rather than disappearing with the text it happened to sit
   under. */
.hall-of-fame__grid {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
  display: grid;
  /* Two up on the narrowest screen rather than one. A retired product is
     browsed rather than considered - the visitor is scanning a list of things
     that are gone, not evaluating a purchase - and one enormous card per row
     turns that scan into a scroll. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hall-of-fame__item {
  min-width: 0;
}

/* ------------------------------------------------------------------ */
/* The plaque                                                          */
/* ------------------------------------------------------------------ */
/* Number left, hairline running to the card's right edge: each card hangs
   from its own labelled rail, and the rails align across the row into the
   hall's ceiling line. */
.hall-of-fame__plaque {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.hall-of-fame__plaque::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-line);
}

.hall-of-fame__number {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  /* Ghost numeral: faint fill everywhere, upgraded to a true outline where
     text-stroke exists. Both read as "engraved, not printed". */
  color: color-mix(in srgb, var(--color-ink) 22%, transparent);
}

@supports (-webkit-text-stroke: 1px black) {
  .hall-of-fame__number {
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--color-ink) 38%, transparent);
  }
}

/* The small ordinal prefix makes 07 read as a plaque, not a countdown. */
.hall-of-fame__number::before {
  content: 'No.';
  margin-right: var(--space-1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  -webkit-text-stroke: 0;
}

/* One plaque lights at a time: engaging the card fills its numeral with
   brand. A paint swap, so it lives outside the motion gate; only its
   transition is gated below. */
.hall-of-fame__item:hover .hall-of-fame__number,
.hall-of-fame__item:focus-within .hall-of-fame__number {
  color: var(--color-brand);
  -webkit-text-stroke: 1.5px var(--color-brand);
}

@media (prefers-reduced-motion: no-preference) {
  .hall-of-fame__number {
    transition: color 200ms ease, -webkit-text-stroke-color 200ms ease;
  }

  /* Entrance stagger, same capped rhythm as the theme's other card grids.
     The delay targets the reveal carriers INSIDE each item - the plaque and
     the product card each hold their own [data-reveal] (see the liquid),
     and both should arrive on their column's beat together. */
  .hall-of-fame__grid > .hall-of-fame__item:nth-child(2) [data-reveal] {
    transition-delay: 80ms;
  }

  .hall-of-fame__grid > .hall-of-fame__item:nth-child(3) [data-reveal] {
    transition-delay: 160ms;
  }

  .hall-of-fame__grid > .hall-of-fame__item:nth-child(4) [data-reveal] {
    transition-delay: 240ms;
  }
}

.hall-of-fame__empty {
  padding-block: var(--space-9);
  text-align: center;
}

.hall-of-fame__empty-heading {
  margin: 0 0 var(--space-2);
}

.hall-of-fame__empty-text {
  max-width: 46ch;
  margin: 0 auto var(--space-5);
  color: var(--color-muted);
}

@media screen and (min-width: 750px) {
  .hall-of-fame__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7) var(--space-5);
  }

  .hall-of-fame__number {
    font-size: 42px;
  }
}

@media screen and (min-width: 990px) {
  .hall-of-fame__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}