/**
 * Competitions Component Styles
 *
 * Competition cards reuse the project card layout (.projects-grid,
 * .project-card, .project-content, …), so the only styles here are the two
 * pieces a project card has no equivalent for: the award badge and the
 * date/organizer/location meta line.
 *
 * Colours come only from the shared tokens that dark-mode.css redefines, so
 * this file needs no separate dark-mode block.
 */

/* Award badge. The rank modifiers tint it gold/silver/bronze; entries with no
   rank keep the neutral primary colour. */
.competition-award {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  /* Right margin so an entry with several awards keeps its badges apart. */
  margin: 0 0.4rem 0.5rem 0;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
  background: var(--primary-color, #0563bb);
}

.competition-award.rank-1 {
  color: #4a3800;
  background: #f5c542;
}

.competition-award.rank-2 {
  color: #3d3d3d;
  background: #cfd4d9;
}

.competition-award.rank-3 {
  color: #4a2c14;
  background: #d9a066;
}

.competition-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted, #8b949e);
}

.competition-meta i {
  margin-right: 0.25rem;
}

/* Detail-page gallery: the lightbox anchors wrap each image, so they have to
   behave as blocks or they add inline descender gaps and break the grid cells. */
.project-gallery a.portfolio-lightbox,
.gallery-grid a.portfolio-lightbox {
  display: block;
  line-height: 0;
  cursor: zoom-in;
}

.gallery-grid a.portfolio-lightbox picture,
.project-gallery > a.portfolio-lightbox picture {
  display: block;
}