/* PDXCCF Fan Favorites page. Loads after pdxccf-core.css and pdxccf-makers.css (the hero and the
   "how voting works" card come from the Makers page styles). The list runs from 1 to 10 in a
   single stack, every row the same size. Medal colors on the top three are decoration only: the rank
   number is always written out. */

.ff-section { padding: clamp(3rem, 7vw, 5rem) 0; }
.ff-section--now { background: var(--paper); }
.ff-section { scroll-margin-top: calc(var(--pdxccf-banner-height, 0px) + 3.5rem); } /* the hero button jumps here, below the sticky header */
.ff-section[hidden] { display: none; }
.ff-intro { max-width: 36rem; margin: .8rem 0 0; color: var(--muted); }

.ff-list {
  display: grid;
  gap: .7rem;
  max-width: 44rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.ff-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
}

.ff-rank {
  display: grid;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
}

.ff-item--gold { --ff-edge: #e6c25f; --ff-tint: var(--medal-gold-solid); }
.ff-item--silver { --ff-edge: #c8cacd; --ff-tint: #aeb0b3; }
.ff-item--bronze { --ff-edge: #d1a784; --ff-tint: #c98a55; }   /* edges are matched in lightness so no one medal outweighs the others */

/* the top three: a larger row with a medal-colored edge and a soft tint, so the podium stands out */
.ff-item--gold,
.ff-item--silver,
.ff-item--bronze {
  padding: 1rem 1.15rem;
  border: 1.5px solid var(--ff-edge);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ff-tint) 12%, #fff), #fff 65%);
  box-shadow: 0 .35rem .9rem rgb(33 16 11 / 7%);
}
.ff-item--gold .ff-rank,
.ff-item--silver .ff-rank,
.ff-item--bronze .ff-rank { width: 3.2rem; height: 3.2rem; font-size: 1.45rem; }
.ff-item--gold .ff-logo,
.ff-item--silver .ff-logo,
.ff-item--bronze .ff-logo { width: 4.75rem; height: 4.75rem; border-radius: .9rem; }
.ff-item--gold .ff-name,
.ff-item--silver .ff-name,
.ff-item--bronze .ff-name { font-size: 1.3rem; }

.ff-item--gold .ff-rank { background: var(--medal-gold); color: var(--medal-gold-ink); }
.ff-item--silver .ff-rank { background: var(--medal-silver); color: var(--medal-silver-ink); }
.ff-item--bronze .ff-rank { background: var(--medal-bronze); color: var(--medal-bronze-ink); }

.ff-link {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 1rem;
  color: var(--ink);
  text-decoration: none;
}

a.ff-link:hover .ff-name,
a.ff-link:focus-visible .ff-name { text-decoration: underline; text-underline-offset: .25rem; }

.ff-logo {
  display: grid;
  flex: none;
  width: 4rem;
  height: 4rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: #fff;
}

.ff-logo img { width: 100%; height: 100%; padding: .35rem; object-fit: contain; }
/* a light-on-transparent logo (e.g. Creo's cream wordmark) needs a dark tile to be seen */
.ff-logo--dark { background: var(--cocoa-900); border-color: var(--cocoa-900); }

.ff-logo--mono {
  background: var(--paper);
  color: var(--cocoa-700);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
}

.ff-name { font-weight: 850; font-size: 1.05rem; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 520px) {
  .ff-item { gap: .7rem; padding: .65rem .75rem; }
  .ff-link { gap: .7rem; }
  .ff-logo { width: 3.25rem; height: 3.25rem; }
  .ff-rank { width: 2.2rem; height: 2.2rem; font-size: 1rem; }
  .ff-name { font-size: 1rem; }
  .ff-item--gold, .ff-item--silver, .ff-item--bronze { padding: .8rem .85rem; }
  .ff-item--gold .ff-rank, .ff-item--silver .ff-rank, .ff-item--bronze .ff-rank { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
  .ff-item--gold .ff-logo, .ff-item--silver .ff-logo, .ff-item--bronze .ff-logo { width: 3.9rem; height: 3.9rem; }
  .ff-item--gold .ff-name, .ff-item--silver .ff-name, .ff-item--bronze .ff-name { font-size: 1.1rem; }
}