/* National Championships page (/national-championships).
 *
 * Loaded via layout.php's pageStylesheet mechanism, not from nastar.css --
 * that file is a matched pair with skiracing's theme_2026/css/nastar.css and
 * must not accumulate page-specific rules. See public/index.php,
 * render_content_item().
 *
 * Everything below uses the existing design tokens from nastar.css. The card
 * treatment deliberately matches .race-card / .badge-card (white surface,
 * gray-200 border, --radius, --shadow, blue border on hover) so the Nationals
 * archive reads as the same component family as the rest of the site.
 *
 * Breakpoints follow home.css's: 900px and 640px.
 */

/* --- The pause notice ------------------------------------------------- */

.nationals-notice {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--gray-100);
  border-left: 4px solid var(--nastar-gold);
  border-radius: var(--radius-sm);
  color: var(--gray-700);
}
.nationals-notice strong { color: var(--gray-900); }

/* --- Section rhythm --------------------------------------------------- */

.richtext .nationals-heading {
  margin-top: var(--space-7);
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  color: var(--nastar-blue-dark);
}
.richtext .nationals-subheading {
  margin-top: var(--space-6);
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--gray-900);
}
.nationals-lede {
  margin-top: 0;
  margin-bottom: var(--space-4);
  color: var(--gray-700);
}
.nationals-hint {
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-size: 0.92rem;
  color: var(--gray-500);
}

/* --- Year grid -------------------------------------------------------- */

.year-grid {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* The <li> stretches to the tallest cell in its row by default; the card
   inside has to be told to fill it, or a venue that wraps to two lines
   (2006, "Steamboat Springs, CO") leaves its row-mates visibly short. */
.year-grid > li { display: flex; }
.year-grid > li > * { flex: 1; }

/* The anchor is the card, so the whole tile is one tap target. min-height
   holds it at or above the 44px mobile/WebView minimum even at the smallest
   column width. */
.richtext .year-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--gray-900);
  text-decoration: none;      /* out-specifies .richtext a */
}
.richtext .year-card:hover,
.richtext .year-card:focus-visible {
  border-color: var(--nastar-blue);
  text-decoration: none;
}
.year-card__year {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--nastar-blue-dark);
}
.year-card__venue {
  font-size: 0.85rem;
  color: var(--gray-500);
}

/* 2020 belongs to neither archive -- the event was cancelled -- so it is a
   sentence between the two groups rather than a dead tile inside one. */
.nationals-gap {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--gray-100);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--gray-700);
}
.nationals-gap strong {
  font-family: var(--font-heading);
  color: var(--gray-900);
}

/* --- Recap list ------------------------------------------------------- */

.recap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.richtext .recap-list a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--gray-200);
  color: var(--nastar-blue);
  text-decoration: none;
}
.richtext .recap-list a:hover,
.richtext .recap-list a:focus-visible { text-decoration: underline; }

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 900px) {
  .year-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 640px) {
  /* Two columns rather than one: the tiles are short, and a single column
     turns 18 years into a long scroll. */
  .year-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .recap-list { grid-template-columns: 1fr; }
  .year-card__year { font-size: 1.2rem; }
  .nationals-notice { padding: var(--space-3) var(--space-4); }
}