/* Awards additions (sections/awards.php).
   pages.css styles the mockup's arch cards with an emoji; this file loads
   after it and adds the artwork version: a square tile with the award's own
   artwork, and a grid that stays even for seven awards.
   Tokens only (tokens.css). Author: SSO, 30 September 2026. */

/* Title and awarding body share a group in both versions of the card. With
   the same gap and alignment as the card itself, the emoji card looks
   exactly as the mockup drew it. */
.award-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

/* ================= ARTWORK CARD =================
   Square corners with a radius instead of the arch. The card's padding and
   the two radii are concentric: --radius-l less --space-xs is --radius-m. */
.award-card.award-card--art {
  align-items: stretch;
  gap: var(--space-s);
  padding: var(--space-xs);
}

/* Every card in an artwork grid loses the arch, including one that still
   shows its emoji because it has no artwork yet. */
.awards__grid--art > .award-card {
  border-radius: var(--radius-l);
}

/* Some of the artwork files are partly transparent, so the tile carries its
   own paper colour rather than showing the dark band through. */
.award-card__art {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-m);
  background: var(--bg-ultra-light);
}

.award-card--art .award-card__text {
  padding: 0 var(--space-xs) var(--space-s);
}

/* ================= GRID =================
   Phones and tablets: two columns. With an odd number of awards the first
   takes the full row, so the rest pair up (seven: one, then three pairs). */
.awards__grid.awards__grid--art {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
}

@media (max-width: 991px) {
  .awards__grid--art > .award-card:first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
  }
}

/* The full-row card turns on its side once there is room for the artwork
   and the text to sit together. */
@media (min-width: 576px) and (max-width: 991px) {
  .awards__grid--art > .award-card--art:first-child:nth-last-child(odd) {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    gap: var(--space-m);
    text-align: start;
  }
  .awards__grid--art > .award-card--art:first-child:nth-last-child(odd) .award-card__text {
    align-items: flex-start;
    padding: 0 var(--space-s) 0 0;
  }
  .awards__grid--art > .award-card--art:first-child:nth-last-child(odd) .award-card__title {
    font-size: var(--h4);
  }
}

@media (min-width: 768px) {
  .awards__grid.awards__grid--art { gap: var(--space-m); }
}

/* Desktop: three to a row on a twelve-column grid. When the count leaves a
   remainder, the last row takes it up instead of leaving a hole:
   one over (4, 7, 10 awards) ends on a row of four,
   two over (5, 8, 11 awards) ends on a row of two. */
@media (min-width: 992px) {
  .awards__grid.awards__grid--art {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .awards__grid--art > .award-card { grid-column: span 4; }

  .awards__grid--art > .award-card:nth-child(3n + 1):nth-last-child(4),
  .awards__grid--art > .award-card:nth-child(3n + 1):nth-last-child(4) ~ .award-card {
    grid-column: span 3;
  }

  .awards__grid--art > .award-card:nth-child(3n + 1):nth-last-child(2),
  .awards__grid--art > .award-card:nth-child(3n + 1):nth-last-child(2) ~ .award-card {
    grid-column: span 6;
  }
}