/**
 * Guide ranking (sections/guide-ranking.liquid): podium and field.
 *
 * Order carries real information here - it is a ranking - so position is
 * the visual grammar. The FIRST entry is the podium: a brand-cast outline
 * card that opens the list, its chip filled with the brand colour and its
 * name a step up in scale, because a tier list without a confident #1 is
 * just a list. Everything after it is the field: quiet rows on hairline
 * rules whose chips stay outlined ink, in the audience's own tier-list
 * vernacular (the chip takes "#1", "S" or "Best overall" equally - it is
 * sized by its text, not a fixed square).
 *
 * Rows answer hover the way the theme's cards do - the podium lifts like a
 * card, a field row flips its chip to a solid ink fill - so the whole list
 * feels handled, not printed.
 */
.section-guide-ranking {
  padding-block: var(--space-8);
}

.guide-intro {
  max-width: 640px;
  margin-bottom: var(--space-7);
}

.guide-intro__title {
  margin: 0 0 var(--space-3);
}

.guide-intro__text {
  color: var(--color-muted);
}

.guide-ranking {
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-ranking__entry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.guide-ranking__entry:last-child {
  border-bottom: 1px solid var(--color-line);
}

/* The tier chip. Sized by its own text so "#1", "S" and "Best overall" all
   wear the same plate cleanly - a fixed square clipped the longer labels.
   Display scale: the chips are the ranking's spine, not annotations. */
.guide-ranking__rank {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-s);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--color-ink);
}

/* Field rows acknowledge the pointer without pretending to be cards: the
   chip flips to a solid ink fill - handled, not printed. The podium's own
   chip stays brand-filled via the more specific rule below. */
.guide-ranking__entry:hover .guide-ranking__rank,
.guide-ranking__entry:focus-within .guide-ranking__rank {
  background-color: var(--color-ink);
  color: var(--color-bg);
}

@media (prefers-reduced-motion: no-preference) {
  .guide-ranking__entry {
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  }

  .guide-ranking__rank {
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  /* Entrance stagger, capped like the roadmap's: past the fourth entry the
     reader is scrolling and each row re-earns its own reveal. */
  .guide-ranking > .guide-ranking__entry:nth-child(2) {
    transition-delay: 80ms;
  }

  .guide-ranking > .guide-ranking__entry:nth-child(3) {
    transition-delay: 160ms;
  }

  .guide-ranking > .guide-ranking__entry:nth-child(4) {
    transition-delay: 240ms;
  }
}

/* ------------------------------------------------------------------ */
/* The podium: entry one is a card, not a row.                         */
/* ------------------------------------------------------------------ */
.guide-ranking__entry:first-child {
  border: 1px solid color-mix(in srgb, var(--color-brand) 30%, var(--color-line));
  border-radius: var(--radius-m);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  background-color: color-mix(in srgb, var(--color-brand) 4%, var(--color-bg));
}

/* The card treatment replaces the row hairlines: the entry after the
   podium opens the field with its own top rule, so none is needed here. */
.guide-ranking__entry:first-child + .guide-ranking__entry {
  border-top: 1px solid var(--color-line);
}

.guide-ranking__entry:first-child:hover,
.guide-ranking__entry:first-child:focus-within {
  background-color: color-mix(in srgb, var(--color-brand) 4%, var(--color-bg));
  border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-line));
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--color-brand) 35%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .guide-ranking__entry:first-child:hover,
  .guide-ranking__entry:first-child:focus-within {
    transform: translateY(-2px);
  }
}

/* Top of the list is the one loud thing on the page. */
.guide-ranking__entry:first-child .guide-ranking__rank {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-bg);
}

.guide-ranking__entry:first-child .guide-ranking__name {
  font-size: 24px;
  /* Display type must wrap between words, not inside them (base.css sets a
     global break-word). */
  overflow-wrap: normal;
}

.guide-ranking__body {
  flex: 1 1 auto;
  min-width: 0;
}

.guide-ranking__name {
  margin: 0 0 var(--space-2);
}

.guide-ranking__verdict {
  color: var(--color-muted);
}

.guide-ranking__product {
  margin-top: var(--space-4);
  max-width: 420px;
}

@media screen and (min-width: 750px) {
  .guide-ranking__entry {
    gap: var(--space-5);
    padding-block: var(--space-6);
  }

  .guide-ranking__entry:first-child {
    padding: var(--space-6);
  }

  .guide-ranking__rank {
    min-height: 52px;
    font-size: 20px;
  }

  .guide-ranking__entry:first-child .guide-ranking__name {
    font-size: 28px;
  }
}

/* Wide screens: the verdict and its product card share the row - the card
   stops hanging under the text and the entry fills the page width. */
@media screen and (min-width: 990px) {
  .guide-ranking__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: var(--space-7);
    align-items: center;
  }

  .guide-ranking__name,
  .guide-ranking__verdict {
    grid-column: 1;
  }

  .guide-ranking__product {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    max-width: none;
  }
}

@media screen and (min-width: 990px) {
  .section-guide-ranking {
    padding-block: var(--space-9);
  }
}


/* ------------------------------------------------------------------ */
/* Picks as cards (layout: cards)                                      */
/* ------------------------------------------------------------------ */
.guide-picks {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.guide-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The rank overlays the photo's corner so the card reads as "S: this one"
   at a glance. Above the card's own link so it never intercepts the click
   but sits on top visually. */
.guide-pick__rank {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-m);
  background-color: var(--color-brand);
  color: var(--color-on-brand, #fff);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* The card's own badge ("In stock", "Sold out") shares the corner with
   the rank, so it steps right to make room. The rank is the reason the
   card is here; the stock line is a footnote. */
.guide-pick .product-card__badge {
  left: calc(var(--space-3) + 44px);
}

.guide-pick__name {
  margin: var(--space-2) 0 0;
}

.guide-pick__verdict {
  color: var(--color-muted);
}

.guide-pick__verdict > p {
  margin: 0;
}