/**
 * fanorate/kit-ratings-v2 — V2 redesign kit ratings (home vs away).
 *
 * A full-bleed brand-navy band: white kicker + headline (.section-title atom)
 * + muted lede, a home/away legend, then per-category rows each holding two
 * value bars (home red gradient, away gold gradient) whose fills animate to
 * their --v percentage when scrolled into view, with the numeric score on the
 * right; closed by a ruled overall row with big display numbers. Bar/legend
 * colours come from the --kr-home and --kr-away custom properties set on the
 * section root.
 */

.section-kit-ratings-v2 {
  /* Hex fallbacks keep the navy band + white text legible even where the
     theme tokens aren't loaded (e.g. the AICP admin preview), so it never
     collapses to white-on-white. When tokens exist they win (same navy). */
  background: var(--color-accent, #0a2240);
  color: var(--text-inverse, #fff);
  padding-block: clamp(56px, 8vw, 104px);
}

.section-kit-ratings-v2 .kit-ratings-v2__wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.section-kit-ratings-v2 .kit-ratings-v2__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font: var(--eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-inverse, #fff);
}

.section-kit-ratings-v2 .kit-ratings-v2__kicker::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 100px;
  background: var(--color-primary, #e5253d);
  display: inline-block;
}

.section-kit-ratings-v2 .kit-ratings-v2__title {
  color: var(--text-inverse, #fff);
  margin: 12px 0 0;
}

.section-kit-ratings-v2 .kit-ratings-v2__lede {
  font: var(--body-lg);
  font-family: var(--font-ui);
  color: rgba(255, 255, 255, 0.78);
  margin: 12px 0 0;
  max-width: 60ch;
}

/* ---------- Legend ---------- */
.section-kit-ratings-v2 .kit-ratings-v2__legend {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.section-kit-ratings-v2 .kit-ratings-v2__leg {
  display: flex;
  align-items: center;
  gap: 9px;
  font: var(--body-sm);
  font-family: var(--font-ui);
  color: rgba(255, 255, 255, 0.85);
}

.section-kit-ratings-v2 .kit-ratings-v2__sw {
  width: 18px;
  height: 10px;
  border-radius: var(--radius-pill);
}

.section-kit-ratings-v2 .kit-ratings-v2__sw--home {
  background: linear-gradient(90deg, var(--kr-home-from, var(--color-primary, #e5253d)), var(--kr-home-to, var(--color-primary-dark, #b5172a)));
}

.section-kit-ratings-v2 .kit-ratings-v2__sw--away {
  background: linear-gradient(90deg, var(--kr-away-from, var(--color-accent-light, #14315a)), var(--kr-away-to, var(--color-accent-dark, #061528)));
}

/* ---------- Rating rows ---------- */
.section-kit-ratings-v2 .kit-ratings-v2__table {
  margin-top: 32px;
  display: grid;
  gap: 12px;
}

.section-kit-ratings-v2 .kit-ratings-v2__rating {
  display: grid;
  grid-template-columns: minmax(116px, 180px) 1fr;
  gap: clamp(12px, 3vw, 32px);
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.section-kit-ratings-v2 .kit-ratings-v2__label {
  font: var(--h4);
  font-family: var(--font-ui);
  color: var(--text-inverse, #fff);
}

.section-kit-ratings-v2 .kit-ratings-v2__bars {
  display: grid;
  gap: 9px;
}

.section-kit-ratings-v2 .kit-ratings-v2__bar {
  display: grid;
  grid-template-columns: 46px 1fr 38px;
  align-items: center;
  gap: 10px;
}

.section-kit-ratings-v2 .kit-ratings-v2__who {
  font: var(--caption);
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.section-kit-ratings-v2 .kit-ratings-v2__track {
  height: 10px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.section-kit-ratings-v2 .kit-ratings-v2__fill {
  display: block;
  height: 100%;
  width: var(--v, 0%);
  border-radius: var(--radius-pill);
  transition: width .9s var(--ease-out);
}

.section-kit-ratings-v2 .kit-ratings-v2__fill--home {
  background: linear-gradient(90deg, var(--kr-home-from, var(--color-primary, #e5253d)), var(--kr-home-to, var(--color-primary-dark, #b5172a)));
}

.section-kit-ratings-v2 .kit-ratings-v2__fill--away {
  background: linear-gradient(90deg, var(--kr-away-from, var(--color-accent-light, #14315a)), var(--kr-away-to, var(--color-accent-dark, #061528)));
}

/* Bars start collapsed while armed-but-unrevealed, then grow to --v. */
.section-kit-ratings-v2.is-reveal-armed [data-reveal]:not(.is-in) .kit-ratings-v2__fill {
  width: 0;
}

.section-kit-ratings-v2 .kit-ratings-v2__val {
  font: var(--body-sm);
  font-family: var(--font-ui);
  font-weight: 800;
  color: var(--text-inverse, #fff);
  text-align: right;
}

/* ---------- Overall ---------- */
.section-kit-ratings-v2 .kit-ratings-v2__overall {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: clamp(16px, 4vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-lg) clamp(16px, 4vw, 32px);
  background: rgba(255, 255, 255, 0.05);
}

.section-kit-ratings-v2 .kit-ratings-v2__overall-label {
  font: var(--h3);
  font-family: var(--font-ui);
  color: var(--text-inverse, #fff);
}

.section-kit-ratings-v2 .kit-ratings-v2__score {
  text-align: center;
}

.section-kit-ratings-v2 .kit-ratings-v2__score-who {
  font: var(--caption);
  font-family: var(--font-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
}

.section-kit-ratings-v2 .kit-ratings-v2__score-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 68px);
  line-height: .9;
}

.section-kit-ratings-v2 .kit-ratings-v2__score--home .kit-ratings-v2__score-num {
  color: var(--kr-home-from, var(--color-primary, #e5253d));
}

.section-kit-ratings-v2 .kit-ratings-v2__score--away .kit-ratings-v2__score-num {
  color: var(--kr-away-to, var(--color-accent-light, #14315a));
}

/* ---------- Reveal-on-scroll (armed by view.js) ---------- */
.section-kit-ratings-v2 [data-reveal] {
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

.section-kit-ratings-v2.is-reveal-armed [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(18px);
}

@media (prefers-reduced-motion: reduce) {
  .section-kit-ratings-v2.is-reveal-armed [data-reveal]:not(.is-in) {
    opacity: 1;
    transform: none;
  }

  .section-kit-ratings-v2.is-reveal-armed [data-reveal]:not(.is-in) .kit-ratings-v2__fill {
    width: var(--v, 0%);
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .section-kit-ratings-v2 {
    padding-block: clamp(40px, 9vw, 56px);
  }

  .section-kit-ratings-v2 .kit-ratings-v2__rating {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}