/* /awards - same white-canvas convention as about.css/faqs.css (scoped to
   this page). */
body.page-awards main { background: #fff; }

.awards-hero { max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-8); }

.awards-hero-inner { max-width: 980px; margin: 0 auto; }

.awards-eyebrow {
  display: block;
  font: 700 var(--text-sm) var(--font-heading);
  letter-spacing: -0.01em;
  color: var(--isun-orange);
  margin: 0;
}

.awards-heading {
  font: 600 clamp(2rem, 4vw, 2.65rem)/1.15 var(--font-heading);
  letter-spacing: -0.02em;
  color: var(--isun-ink);
  margin: var(--space-2) 0 var(--space-5);
}

/* Floated, not a flex sibling, so admin-edited text long enough to wrap
   still flows as one block under the bar instead of splitting into
   jumbled side-by-side fragments. */
.awards-heading-bar {
  float: left;
  width: 7px;
  height: 0.85em;
  margin: 0.15em var(--space-3) 0 0;
  background: var(--isun-orange);
  border-radius: 3px;
}

.awards-intro {
  max-width: 760px;
  color: var(--isun-body);
  font-size: var(--text-base);
  line-height: 1.7;
  margin: 0 0 var(--space-6);
}

.awards-tiers-intro {
  font: 700 var(--text-md) var(--font-heading);
  color: var(--isun-ink);
  margin: 0 0 var(--space-7);
}

/* ===== Podium - a Winner card raised and layered over two shorter
   Runner-up cards, matching the awarded-designs mockup. Falls back to a
   plain stacked list (DOM order: Winner, 1st, 2nd) on narrow screens where
   there's no room for the overlap. ===== */
.awards-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  margin: 0 0 var(--space-7);
}
.awards-podium.is-visible { opacity: 1; transform: translateY(0); }

.awards-tier-card {
  flex: 0 0 232px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--isun-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 6px 18px rgba(13, 16, 74, 0.06);
}

.awards-tier-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 36px rgba(13, 16, 74, 0.14);
  border-color: var(--isun-orange);
}

.awards-tier-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--isun-cream);
  color: var(--isun-orange);
  margin-bottom: var(--space-4);
  flex: none;
}
.awards-tier-icon svg { width: 26px; height: 26px; }

.awards-tier-amount {
  font: 700 var(--text-3xl) var(--font-heading);
  color: var(--isun-ink);
  letter-spacing: -0.02em;
}

.awards-tier-rule {
  width: 36px;
  height: 2px;
  background: var(--isun-line);
  margin: var(--space-4) 0 var(--space-3);
}

.awards-tier-label {
  font: 700 var(--text-md) var(--font-heading);
  color: var(--isun-ink);
}

/* 1st / 2nd Runner-up flank the Winner card and tuck slightly behind it. */
.awards-tier-card-runner_up_1 { order: 1; z-index: 1; margin-right: -1.1rem; }
.awards-tier-card-runner_up_2 { order: 3; z-index: 1; margin-left: -1.1rem; }

/* Winner - raised, dark, two-tone card (dark body + light footer band for
   the label), echoing the podium centre-stage treatment in the mockup. */
.awards-tier-card-winner {
  order: 2;
  z-index: 2;
  flex-basis: 260px;
  padding: 0;
  border: none;
  overflow: hidden;
  background: var(--isun-navy);
  box-shadow: 0 20px 40px rgba(13, 16, 74, 0.28);
}
.awards-tier-card-winner:hover {
  box-shadow: 0 26px 48px rgba(13, 16, 74, 0.34);
  border-color: transparent;
}
.awards-tier-card-winner .awards-tier-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-7) var(--space-5) var(--space-5);
}
.awards-tier-card-winner .awards-tier-icon {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.awards-tier-card-winner .awards-tier-amount { color: #fff; font-size: var(--text-4xl); }
.awards-tier-card-winner .awards-tier-foot {
  width: 100%;
  background: var(--isun-cream);
  color: var(--isun-navy);
  font: 700 var(--text-md) var(--font-heading);
  padding: var(--space-3);
}

.awards-footnote {
  color: var(--muted);
  font-style: italic;
  font-size: var(--text-sm);
  margin: 0;
}

@media (max-width: 720px) {
  .awards-podium { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .awards-tier-card,
  .awards-tier-card-winner {
    order: initial;
    margin: 0;
    flex-basis: auto;
    width: 100%;
  }
}