/* =============================================================
   Finalists — /finalists/<city>/
   Loaded only by finalists.php. Standalone for the same reason
   events.css is: the page shares tokens with the rest of the
   site, not rules, and .crumbs is redefined here because no
   other stylesheet on this page defines it.

   The creatives are 4:5 posters that carry their own headline
   and colour, so the page around them stays quiet: the grid is
   spacing and a caption, and everything loud on screen is the
   artwork itself.
   ============================================================= */

.finalists { padding-bottom: 5rem; }

/* ---------- Breadcrumb ---------- */
.finalists .crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-soft);
  margin-bottom: 1.5rem;
}
.finalists .crumbs a { color: var(--text-soft); text-decoration: none; }
.finalists .crumbs a:hover { color: var(--primary); }

/* ---------- Hero ---------- */
.finalists-hero {
  padding-block: 3.5rem 2.5rem;
  background:
    radial-gradient(80% 120% at 12% 0%, var(--accent-soft), transparent 60%),
    var(--surface);
  border-bottom: 1px solid var(--line-soft);
}

.finalists-hero__eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 0.875rem;
}

.finalists-hero__title {
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);
  margin: 0 0 1rem;
}

.finalists-hero__lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  max-width: 42rem;
}

/* ---------- The grid's block ---------- */
.finalists__body { padding-top: 2.75rem; }

/* ---------- Grid ---------- */
.finalists-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 2rem 1.5rem;
}

/* A fixed three across, for the event page's narrow column. The auto-fill above
   would give it two there and leave a column of dead space; this asks for three
   and lets the cards be as small as they need to be, down to the breakpoint
   below where three portrait posters stop being readable at all. */
.finalists-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 560px) {
  .finalists-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

.finalist { display: flex; flex-direction: column; }

/* ---------- The creative ---------- */
.finalist__shot {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-glass);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.finalist__shot:hover,
.finalist__shot:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

/* aspect-ratio rather than a fixed height, so a creative that is not exactly
   4:5 letterboxes into the same footprint instead of resizing its neighbours. */
.finalist__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ---------- Caption ---------- */
/* Grows to fill whatever height the row has, which is what pushes the button to
   the bottom of every card in that row. The awards run in one grid and the
   influencer cards carry no role line; without this, their buttons would sit a
   line higher than the finalist cards beside them. */
.finalist__meta {
  padding: 0.875rem 0.25rem 0;
  flex: 1;
}

.finalist__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  margin: 0;
}

.finalist__role {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0.1875rem 0 0;
}

/* The post link. Brand colour, because it is a LinkedIn link and reading it as
   one is the whole point of the icon. */
.finalist__li {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  /* flex-start, or the pill stretches to the card's width. */
  align-self: flex-start;
  margin-top: 0.625rem;
  padding: 0.375rem 0.75rem 0.375rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--linkedin);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s var(--ease-std), border-color 0.2s var(--ease-std);
}

.finalist__li:hover,
.finalist__li:focus-visible {
  background: rgba(10, 102, 194, 0.08);
  border-color: rgba(10, 102, 194, 0.35);
}

.finalist__li .icon { width: 1rem; height: 1rem; }

@media (max-width: 480px) {
  .finalists-grid { gap: 1.5rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .finalist__shot { transition: none; }
  .finalist__shot:hover,
  .finalist__shot:focus-visible { transform: none; }
}

/* ---------- On the event page ---------- */
/* The photo strip above ends flush with its last image and carries no bottom
   space of its own, so the gap between the two sections is this one's to make. */
.event-finalists { margin-top: 2.75rem; }

/* Smaller type on the cards to match: three across in a narrow column is a
   smaller card than four across in a full-width one. */
.event-finalists .finalist__name { font-size: 0.9375rem; }
.event-finalists .finalist__role { font-size: 0.8125rem; }
.event-finalists .finalist__li { font-size: 0.75rem; padding: 0.3125rem 0.625rem 0.3125rem 0.4375rem; }

/* ===================================================================
   Slider — the recognition page's strip of announced creatives.
   The cards are the same .finalist cards the grid uses; only the
   container differs, so a change to a card lands in both.
   =================================================================== */
.finalists-slider-section { overflow: hidden; }

/* The buttons sit against the viewport's edges, so the wrapper is the
   positioning context. */
.finalists-slider { position: relative; }

/* Padding, not margin, on the track: a card lifting on hover would be
   clipped by the scroll container otherwise, and so would its focus ring.
   The negative margin pulls that padding back off the section's gutter. */
.finalists-slider__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin: -0.75rem;
}

.finalists-slider__viewport::-webkit-scrollbar { display: none; }

.finalists-slider__viewport:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.finalists-slider__track {
  list-style: none;
  margin: 0;
  padding: 0.75rem;
  display: flex;
  gap: 1.5rem;
}

/* flex-basis, and no shrinking: a grid of auto columns compresses every card
   until all eleven fit the viewport, which is the opposite of a slider. Four
   across on a desktop width; narrower screens fit fewer of the same card
   rather than shrinking the creative. */
.finalists-slider__item {
  flex: 0 0 calc((100% - 4.5rem) / 4);
  scroll-snap-align: start;
}

@media (max-width: 900px) {
  .finalists-slider__item { flex-basis: calc((100% - 1.5rem) / 2); }
}

@media (max-width: 560px) {
  .finalists-slider__item { flex-basis: 78%; }
}

/* ---------- Paging buttons ---------- */
/* Hidden until the script has something for them to do — it removes the
   [hidden] once it knows the run overflows — and hidden again at the end
   they have reached. */
.finalists-slider__nav {
  position: absolute;
  top: calc(50% - 3rem);
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), background 0.25s var(--ease-out),
              color 0.25s var(--ease-out);
}

.finalists-slider__nav:hover,
.finalists-slider__nav:focus-visible {
  background: var(--primary);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
}

.finalists-slider__nav .icon { width: 1.125rem; height: 1.125rem; }

.finalists-slider__nav--prev { left: -1.25rem; }
.finalists-slider__nav--next { right: -1.25rem; }

@media (max-width: 1180px) {
  .finalists-slider__nav--prev { left: 0.25rem; }
  .finalists-slider__nav--next { right: 0.25rem; }
}