/* The YULLR season-two article (/news/yullr-nastar-season-two).
 *
 * Loaded via layout.php's pageStylesheet mechanism, keyed by slug in
 * public/index.php, render_content_item(), the same way the National
 * Championships page gets nationals.css. It is NOT in nastar.css, which is a
 * matched pair with skiracing's theme_2026/css/nastar.css and must not
 * accumulate page-specific rules.
 *
 * Everything below uses the existing design tokens. Nothing here introduces a
 * second visual direction: the stat row and the resort grid deliberately
 * reuse the site's card treatment (white surface, gray-200 border, --radius)
 * so the article reads as NASTAR, not as a sponsor microsite. YULLR's own
 * orange lives inside its artwork and nowhere else on the page.
 *
 * Breakpoints follow home.css and nationals.css: 900px and 640px.
 */

/* --- Dek --------------------------------------------------------------- */

/* Sits directly under the hero, above the first body paragraph: the one line
   that says what changed since last year's article. */
.richtext .yullr-dek {
  margin: 0 0 var(--space-5);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--nastar-blue-dark);
}

/* --- Season-one stat row ----------------------------------------------- */

/* Rebuilt as HTML rather than using YULLR's supplied stats graphic. The
   graphic was a 450 KB PNG of text: unreadable at phone width, unselectable,
   invisible to a screen reader, and carrying YULLR's palette into the middle
   of a NASTAR page. Same four numbers, a tenth of the weight. */
.yullr-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-2);
}
.yullr-stat {
  padding: var(--space-4) var(--space-3);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}
.yullr-stat__value {
  display: block;
  font-family: var(--font-heading);
  /* Proportional figures on purpose. tabular-nums gives every digit the
     width of a zero, which makes a value like "347" look loose at this size.
     Tabular belongs in columns of numbers that must align, not here. */
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--nastar-blue-dark);
}
.yullr-stat__label {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--gray-500);
}

@media (max-width: 640px) {
  .yullr-stats { grid-template-columns: repeat(2, 1fr); }
  .yullr-stat__value { font-size: 1.7rem; }
}

/* --- Shared caption ----------------------------------------------------- */

.richtext .yullr-caption {
  margin: var(--space-2) 0 var(--space-5);
  font-size: 0.85rem;
  color: var(--gray-500);
}

/* --- Resort grid -------------------------------------------------------- */

/* 21 resorts. A plain <ul> of 21 bullets is a wall; three columns of
   name-over-town reads at a glance and still wraps to one column on a phone.
   Only the 14 with a NASTAR resort page are links. The rest are YULLR
   mountains that do not run NASTAR, and the caption under the list says so
   rather than leaving the mixture looking like an oversight. */
.yullr-resorts {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--space-5);
}
.yullr-resorts > li {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--gray-200);
}
.yullr-resort__name {
  display: block;
  font-weight: 500;
  color: var(--gray-900);
}
.yullr-resort__where {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--gray-500);
}

@media (max-width: 900px) {
  .yullr-resorts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .yullr-resorts { grid-template-columns: 1fr; }
}

/* --- Resort group headings ---------------------------------------------- */

/* The 21 are split into the eight that run NASTAR and the thirteen that do
   not. The split only earns its keep because the second group has a call to
   action under it. Without that it would just be a slight against the
   sponsor's own network. Set tighter than a section h2: these subdivide one
   section, they do not start new ones. */
.richtext .yullr-group {
  margin-top: var(--space-6);
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--gray-900);
}
/* The caption directly under a group heading introduces the list rather than
   trailing it, so it loses the standalone caption's top gap. */
.richtext .yullr-group + .yullr-caption { margin-top: 0; margin-bottom: 0; }

/* --- Racer call to action ----------------------------------------------- */

/* Asks racers at the non-NASTAR mountains to tell their hill they want
   NASTAR. Blue rather than the editorial note's gold: this one is for
   readers and stays in the published article. */
.yullr-cta {
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--gray-100);
  border-left: 4px solid var(--nastar-blue);
  border-radius: var(--radius-sm);
}
.yullr-cta > p:first-child { margin-top: 0; }
.yullr-cta > p:last-child { margin-bottom: 0; }
.yullr-cta__head {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--nastar-blue-dark);
}

/* --- Full-width artwork ------------------------------------------------- */

/* YULLR's 16:9 pieces are compositions with their own type in them, so they
   want the full column width and their own breathing room, not the
   inline-image treatment the migrated Drupal bodies get. */
.richtext .yullr-figure {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--space-5) 0;
  border-radius: var(--radius);
}

/* --- Benefit list ------------------------------------------------------- */

.yullr-benefits {
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
}
.yullr-benefits > li {
  position: relative;
  margin-bottom: var(--space-3);
  padding-left: var(--space-5);
}
/* A gold tick in the brand accent rather than a bullet glyph. These are
   four things a racer gets, not four items of prose. */
.yullr-benefits > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 10px;
  height: 6px;
  border-left: 2.5px solid var(--nastar-gold-dark);
  border-bottom: 2.5px solid var(--nastar-gold-dark);
  transform: rotate(-45deg);
}

/* --- The NASTAR racer discount ------------------------------------------ */

/* One concrete action with a code in it, so it gets a block of its own
   rather than a fifth benefit bullet. Gold to echo the benefit ticks just
   above it, and so it does not read as a second copy of the blue .yullr-cta
   further up the page. */
.yullr-offer {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--gray-100);
  border-left: 4px solid var(--nastar-gold);
  border-radius: var(--radius-sm);
}
.yullr-offer > p:first-child { margin-top: 0; }
.yullr-offer > p:last-child { margin-bottom: 0; }
.yullr-offer__head {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--nastar-gold-dark);
}

/* A promo code is something to copy, not to read. Monospace and a quiet
   chip make it findable on a page skim. */
.yullr-code {
  display: inline-block;
  padding: 1px var(--space-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}

/* --- Quote attribution -------------------------------------------------- */

/* .richtext blockquote already carries the gold left rule and italics. This
   just stops the attribution line reading as another sentence of the quote. */
.richtext blockquote .yullr-attrib {
  margin: var(--space-2) 0 0;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--gray-500);
}