/* ============================================================
   OnTrac — awards grid

   Replaces images/awardsimg.svg: a single 1.6 MB, 1300x5263 artwork in
   which all twelve awards — client names, descriptions, the lot — were
   outlined vector paths. None of it was selectable, searchable or
   readable by a screen reader, and the year pills down the timeline
   could not be removed without redrawing the whole thing.

   Card styling is taken from the original: #FFF4DE fill, 16px radius,
   470px card, 204x205 photo. The vertical timeline and its year pills
   are gone, which is the point — the awards now read as a body of work
   rather than as a dated chronology.
   ============================================================ */

/* The old artwork drew its own white panel (<rect rx="24" fill="white">)
   and the cards sat on that. Without it the section's own #FFF9EE shows
   through, five points away from the cards' #FFF4DE, and they all but
   vanish. Put the panel back. */
.awards-panel {
  background: #fff;
  border-radius: 24px;
  padding: 48px;
}

@media (max-width: 575px) {
  .awards-panel {
    padding: 24px 20px;
    border-radius: 16px;
  }
}

.awards-grid {
  display: grid;
  /* min(290px, 100%) rather than a bare 290px: below ~300px a fixed
     minimum would overflow the container instead of collapsing */
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.award-card {
  display: flex;
  flex-direction: column;
  background: #fff4de;
  border-radius: 16px;
  padding: 32px 32px 36px;
  text-align: left;
}

.award-shot {
  display: block;
  width: 204px;
  height: auto;
  max-width: 100%;
  margin-bottom: 26px;
  border-radius: 8px;
  background: #fff;
}

.award-name {
  margin: 0 0 12px;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #0f1b33;
}

.award-note {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #42526b;
}

/* the page centres its section content; these cards read as text */
.awards-grid,
.awards-grid .award-card,
.awards-grid .award-name,
.awards-grid .award-note {
  text-align: left;
}

@media (max-width: 575px) {
  .awards-grid {
    gap: 20px;
  }
  .award-card {
    padding: 24px 24px 28px;
  }
  .award-name {
    font-size: 18px;
  }
}