/* =========================
   Awards Section (awards.css)
   Design System (section-scoped)
   ========================= */

/* Fonts (use only provided WOFF2 assets) */
@font-face {
  font-family: "Arizona Flare";
  src: url("../fonts/arizona_flare_300_normal_headings_h1-h6.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arizona Flare";
  src: url("../fonts/arizona_flare_300_italic_headings_h1-h6.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti UI";
  src: url("../fonts/helveesti_400_normal_body_ui.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti UI";
  src: url("../fonts/helveesti_400_italic_body_ui.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti UI Bold";
  src: url("../fonts/helveesti_700_normal_body_labels.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti UI Bold";
  src: url("../fonts/helveesti_700_italic_body_labels.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Section tokens (scoped) */
.awards {
  --awards-bg: #F8F2E9;
  --awards-ink: #170B01;
  --awards-accent: #AE1B74;
  --awards-accent-soft: #ECBDFB;
  --awards-accent-warm: #FDF18B;

  --awards-maxw: 1280px;
  --awards-pad-x: 100px;    /* matches visual left/right breathing */
  --awards-pad-t: 100px;
  --awards-pad-b: 100px;

  --awards-title-size: 64px;  /* large display from reference */
  --awards-title-lh: 1.06;

  --awards-label-size: 16px;
  --awards-label-lh: 1.4;

  background: var(--awards-bg);
  color: var(--awards-ink);
  margin: 40px 0px;
}

/* container aligns with single primary .page wrapper (not defined here) */
.awards__container {
  max-width: var(--awards-maxw);
  margin-inline: auto;
  padding: var(--awards-pad-t) var(--awards-pad-x) var(--awards-pad-b);
}

/* Heading */
.awards__title {
  font-family: "Arizona Flare", serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0 0 20px 0;
  color: var(--awards-ink);
}

/* List layout = 5 columns like the reference */
.awards__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 64px;
  align-items: start;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Individual item */
.awards__item {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 16px;
}

/* Thin top rule (hairline) */
.awards__rule {
  display: block;
  width: auto;
  height: 1px;
  background: rgba(23, 11, 1, 0.6); /* #170B01 @60% to match subtle line */
}

/* Row with logo + label */
.awards__item-row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  align-items: center;
}

.awards__logo {
  display: block;
  object-fit: contain;
}

/* Fine-tuned sizes per logo for pixel match */
.awards__logo--badge { width: 75px; height: 75px; }
.awards__logo--pledge { width: 75px; height: 75px; }
.awards__logo--cnbc  { width: 75px; height: 75px; }
.awards__logo--best  { width: 75px; height: 75px; }
.awards__logo--bcorp { width: 75px; height: 75px; }

.awards__label {
  font-family: "Helveesti UI", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  color: var(--awards-ink);
  margin: 0;
}

/* Responsive tweaks (no global impact) */
@media (max-width: 1200px) {
  .awards__list { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}
@media (max-width: 820px) {
  .awards__title { font-size: 44px; }
  .awards__list { grid-template-columns: 1fr 1fr; gap: 40px; }
  .awards__rule { width: 140px; }
}
@media (max-width: 430px) {
  .awards {margin: 10px 0px; }
  .awards__title { font-size: 18px; }
  .awards__list { grid-template-columns: 1fr; gap: 20px; }
  .awards__rule { width: auto; }
}
