/*
 * Article, archive and the rail beside them.
 *
 * Loaded after main.css on every template except the front page. Kept separate
 * from main.css deliberately - see inc/article.php.
 */

/* ---------------------------------------------------------------- layout -- */

/*
 * Article + rail. The measure stays 68ch: the rail exists to use the space a
 * readable column leaves over, not to make the column wider.
 *
 * minmax(0, ...) on the text track, because a wide table inside .table-scroll
 * would otherwise push the grid past the viewport - a grid item's default
 * min-width is auto, not zero, and that is the classic overflow.
 */
.article-shell {
  display: grid;
  gap: var(--s-6) var(--s-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1080px) {
  .article-shell--railed {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

/* A data page (JoomSport, WPTM tables) wants the whole width, so it opts out
   of the rail entirely rather than squeezing a 17-column table into 1fr. */
.article-shell--full { grid-template-columns: minmax(0, 1fr); }

.article-shell__main { min-width: 0; }

/* ------------------------------------------------------------------ rail -- */

.rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

@media (min-width: 1080px) {
  .rail {
    position: sticky;
    top: calc(var(--s-5) + 60px); /* clears the sticky masthead */
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

.rail__block {
  border-top: 2px solid var(--navy);
  padding-top: var(--s-3);
}

.rail__title {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s-3);
}

.rail__list,
.rail__ranked { list-style: none; margin: 0; padding: 0; }

.rail__list li {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
.rail__list a {
  display: block;
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  text-wrap: pretty;
}
.rail__list a:hover,
.rail__ranked a:hover { color: var(--accent); }
.rail__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* The ranked list is the one place on an article page that gets to shout. */
.rail__ranked li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
.rail__num {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.rail__ranked a {
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  text-wrap: pretty;
}

/*
 * Playwire's container. Reserved height so the rail does not reflow when a
 * unit arrives; collapses to nothing if RAMP never fills it, so an empty box
 * is never left sitting in the page.
 */
.rail__ad { min-height: 250px; }
.rail__ad:empty { min-height: 0; }
@media (max-width: 1079px) { .rail__ad { display: none; } }

/* ----------------------------------------------------------- empty state -- */

.emptystate {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
  max-width: var(--measure);
}
.emptystate__lead { font-size: var(--t-md); color: var(--ink); margin: 0 0 var(--s-2); }
.emptystate p:last-child { margin: 0; color: var(--ink-2); }

/* --------------------------------------------------------------- article -- */

/*
 * Small typographic corrections that only show once the page is wide: a
 * headline that balances rather than orphaning its last word, and figures and
 * tables that are allowed past the measure into the full text column.
 */
.entry-title,
.article-shell h1 { text-wrap: balance; }

.prose h2 {
  margin-top: var(--s-7);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.prose h3 { margin-top: var(--s-6); }

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink-muted);
}

/* Tables are the point of this site: give them room to breathe on a wide
   screen without letting them widen the page. */
.prose > .table-scroll,
.entry-content > .table-scroll { max-width: 100%; }

/* ------------------------------------------------------------ ad slots -- */

/*
 * A slot reserves its height so the page does not jump when a unit lands, but
 * collapses entirely when nothing fills it - an empty grey box is worse than
 * no box. :empty only matches when there is no house ad AND Playwire has not
 * injected, which is exactly the case we want to hide.
 */
.ad-slot {
  min-height: var(--slot-min, 250px);
  margin: var(--s-6) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-slot:empty { min-height: 0; margin: 0; }
.ad-slot img { max-width: 100%; height: auto; }

/* Inside a reading column the slot stays within the measure, so an ad never
   makes the article look wider than it is. */
.prose .ad-slot,
.entry-content > .ad-slot { max-width: var(--measure); margin-inline: auto; }

/* In the rail the slots are already the column width. */
.rail .ad-slot { margin: 0; }

/* In a card grid the slot occupies one cell so the grid rhythm holds. */
.grid > .ad-slot { margin: 0; min-height: 0; align-self: stretch; }
.grid > .ad-slot:empty { display: none; }

@media (max-width: 640px) {
  .ad-slot { margin: var(--s-5) 0; }
}

/* Belt and braces: if a house-ad placeholder is rendered but stays unfilled,
   collapse the slot around it rather than leaving a reserved blank box. */
.ad-slot:has(> .mff-ad-empty:only-child) { min-height: 0; margin: 0; }