/* Shared layout for the 2 roundup pages */

.roundup-hero { padding-top: var(--space-xl); padding-bottom: var(--space-lg); }
.roundup-hero__lead { font-size: 18px; color: var(--on-surface-variant); max-width: 720px; }
.roundup-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.roundup-hero__stat {
  background: rgba(184, 134, 59, 0.1);
  border: 1px solid var(--brass-solid);
  color: var(--on-surface);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}
.roundup-hero__frame {
  border: 1px solid var(--hairline);
  background: var(--surface-container-low);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
  font-size: 15px;
}

section.block { padding-top: var(--space-xl); padding-bottom: var(--space-xl); border-top: 1px solid var(--hairline); }
section.block:first-of-type { border-top: none; }

.category-grid {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
@media (min-width: 640px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
}
.category-card {
  border: 1px solid var(--hairline);
  background: var(--surface-container-lowest);
  padding: var(--space-lg);
}
.category-card h3 { font-size: 18px; margin-bottom: var(--space-sm); }
.category-card ul { margin: 0; padding-left: 1.1em; color: var(--on-surface-variant); font-size: 14px; }
.category-card li { margin-bottom: var(--space-xs); }

.matchup-grid {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
@media (min-width: 768px) {
  .matchup-grid { grid-template-columns: repeat(2, 1fr); }
}
.matchup-card {
  border: 1px solid var(--hairline);
  background: var(--surface-container-lowest);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.matchup-card h3 { font-size: 18px; margin-bottom: 0; }
.matchup-card p { color: var(--on-surface-variant); flex-grow: 1; }

.operator-profile {
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-lg) 0;
}
.operator-profile:last-child { border-bottom: none; }
.operator-profile h3 { margin-bottom: var(--space-sm); }

td[data-status="yes"] { color: var(--primary); font-weight: 600; }
td[data-status="no"] { color: var(--outline); }
td[data-status="extra"] { color: var(--secondary); }