/* Original SporT six-character collection. Small companions, products first. */
[data-champion-slot] { min-width: 0; }

.champion-callout {
  --champion-text: #123050;
  --champion-muted: #596f83;
  --champion-line: rgb(29 65 98 / 18%);
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  min-height: 96px;
  padding: 0 12px 0 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--champion-text);
  font-family: var(--sans, "Noto Sans TC", sans-serif);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.champion-callout__portrait {
  display: block;
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  object-fit: contain;
  transition: transform .2s ease;
}

.champion-callout__copy { display: grid; min-width: 0; gap: 5px; }
.champion-callout__title { display: flex; align-items: baseline; gap: 10px; }
.champion-callout__title b { font-size: 24px; line-height: 1.15; font-weight: 800; }
.champion-callout__title small { color: var(--champion-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.champion-callout__purpose { max-width: 20em; color: var(--champion-muted); font-size: 15px; line-height: 1.6; }
.champion-callout__hint { width: fit-content; color: var(--champion-text); font-size: 12px; line-height: 1.6; border-bottom: 1px solid var(--champion-line); }
.champion-callout:hover .champion-callout__portrait { transform: translateY(-4px) rotate(-3deg); }
.champion-callout:hover .champion-callout__hint { border-bottom-color: currentColor; }
.champion-callout:focus-visible { outline: 3px solid #6e95c6; outline-offset: 5px; }

[data-champion-theme="dark"] .champion-callout,
.super-custom [data-champion-slot] .champion-callout,
.custom-copy [data-champion-slot] .champion-callout,
.reward-newsletter [data-champion-slot] .champion-callout {
  --champion-text: #f4f2e9;
  --champion-muted: #b8c9da;
  --champion-line: rgb(203 219 236 / 27%);
}

.intro > [data-champion-slot] { grid-column: 1 / -1; margin-top: 0; }
.intro > .section-heading > [data-champion-slot] { margin-top: 24px; }
.best-header [data-champion-slot] { margin-top: 16px; }
.super-custom-intro > [data-champion-slot] { margin-top: 24px; }
.custom-copy > [data-champion-slot] { margin-top: 24px; }
.statement-copy > [data-champion-slot] { margin-top: 24px; }
.reward-newsletter-copy > [data-champion-slot] { margin-top: 20px; }

/* The product title, explanation and companion each keep a readable lane. */
#teams > .best-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); gap: 18px 48px; align-items: end; }
#teams > .best-header > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; }
#teams > .best-header > .catalog-message { grid-column: 1; grid-row: 2; max-width: 34em; margin: 0; font-size: 16px; }
#teams > .best-header > [data-champion-slot] { grid-column: 2; grid-row: 1 / span 2; justify-self: end; margin: 0; }
#teams > .best-header h2 { font-size: clamp(38px, 4.8vw, 70px); line-height: 1.15; }

@media (max-width: 899px) {
  #teams > .best-header { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #teams > .best-header > [data-champion-slot] { grid-column: 1; grid-row: 3; justify-self: start; }
  #teams > .best-header > .catalog-message { font-size: 15px; }
}

.ready-set > .section-title { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 22px 6vw; align-items: end; }
.ready-set > .section-title > .bad-kicker { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; }
.ready-set > .section-title > h2 { grid-column: 1; grid-row: 2; font-family: var(--sans, "Noto Sans TC", sans-serif); font-size: clamp(34px, 4.8vw, 60px); line-height: 1.2; letter-spacing: -.04em; }
.ready-set > .section-title > p:not(.bad-kicker) { grid-column: 1; grid-row: 3; max-width: 34em; margin: 0; font-size: 16px; line-height: 1.85; }
.ready-set > .section-title > [data-champion-slot] { grid-column: 2; grid-row: 2 / span 2; justify-self: end; }
@media (max-width: 800px) {
  .ready-set > .section-title { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ready-set > .section-title > p:not(.bad-kicker) { font-size: 15px; }
  .ready-set > .section-title > [data-champion-slot] { grid-column: 1; grid-row: 4; justify-self: start; }
}

@media (max-width: 600px) {
  .champion-callout { gap: 10px; min-height: 76px; }
  .champion-callout__portrait { flex-basis: 76px; width: 76px; height: 76px; }
  .champion-callout__title { gap: 8px; }
  .champion-callout__title b { font-size: 22px; }
  .champion-callout__title small, .champion-callout__hint { font-size: 11px; }
  .champion-callout__purpose { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .champion-callout__portrait { transition: none; }
  .champion-callout:hover .champion-callout__portrait { transform: none; }
}