/* ── Awards — Winner of / Finalist for ─────────────────────────
   Sits between the pricing section and the closing CTA.
   Mirrors the .trusted section from platform.css for consistency.
   Images are already black/monochrome so no grayscale filter —
   just opacity for the grey→black hover transition.
────────────────────────────────────────────────────────────────── */
.awards {
  background: var(--color-bg);
  padding: var(--space-xl) var(--gutter) var(--space-xl);
}

/* Each group: "Winner of" or "Finalist for" */
.awards__group {
  max-width: var(--content-width);
  margin: 0 auto var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(26,10,20,0.08);
}

/* No line or extra top space needed before the first group —
   the colour shift from the pricing section already signals the break */
.awards__group:first-child {
  border-top: none;
  padding-top: 0;
}
.awards__group:last-child {
  margin-bottom: 0;
}

/* Label — identical to .trusted__label */
.awards__label {
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--space-md); /* reduced from xl → md */
}

/* Finalist label — one step smaller */
.awards__label--finalist {
  font-size: var(--text-xs);
  margin-bottom: var(--space-md); /* reduced from lg → md */
}

/* Logo row — mirrors .trusted__logos */
.awards__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg) var(--space-2xl);
  list-style: none;
}

.awards__logos--finalist {
  gap: var(--space-md) var(--space-xl);
}

/* Item — square badges need enough room to be legible */
.awards__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px; /* doubled from 160px */
}

.awards__item--finalist {
  height: 220px; /* doubled from 130px */
}

.awards__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Grey at rest, full black on hover — images are already black */
.awards__item img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  opacity: 0.35;
  transition: opacity var(--duration-base) var(--ease-out);
}

.awards__item a:hover img,
.awards__item a:focus-visible img {
  opacity: 1;
}

.awards__item a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
  border-radius: var(--border-radius-sm);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .awards__item          { height: 220px; }
  .awards__item--finalist { height: 180px; }
}

@media (max-width: 768px) {
  .awards__logos           { gap: var(--space-md) var(--space-lg); }
  .awards__item            { height: 160px; }
  .awards__logos--finalist { gap: var(--space-sm) var(--space-md); }
  .awards__item--finalist  { height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .awards__item img { transition: none; }
}