/* ============================================================
   responsive-wide.css — Ultra-wide desktop layout corrections
   Loaded last (after base.css / style.css / light.css).

   Problem addressed (reported at ~2880px viewport):
     * home sections stretched edge-to-edge, so the "最近更新" date
       badge floated to the far right of the viewport while the
       intro paragraph stayed in a narrow left column;
     * auto-fill card grids produced 6-7 very narrow columns.

   Strategy: one shared content container (--home-max-width) that
   every home section aligns to, explicit column counts for the card
   grids above 1200px, and a two-column editorial header for the
   "最近更新" block on very wide screens. Nothing here changes below
   1200px, so the 1024 / 768 / 390 breakpoints are untouched.
   ============================================================ */

:root {
  /* Main reading/content container for the home page. */
  --home-max-width: 1440px;
  /* Horizontal gutter that scales with the viewport. */
  --home-gutter: clamp(1.5rem, 3vw, 4rem);
}

/* ---------- 1. Shared centred container for home sections ---------- */
/* These sections keep their full-bleed background (roadmap / links),
   but their inner content is capped and centred. */
.home-page > section,
.home-page > .site-footer {
  /* padding-inline gives the gutter; max-width caps the inner content
     via the child containers below. */
  padding-inline: var(--home-gutter);
}

.hero-content,
.modules-grid,
.links-grid,
.table-wrapper,
.roadmap {
  max-width: var(--home-max-width);
  margin-inline: auto;
}

/* Hero text measure stays comfortable for CJK reading. */
.hero-content { max-width: 900px; }

/* ---------- 1b. Hero KPI strip centring ---------- */
/* Root cause: style.css `.hero-stats` is `display:flex` with the initial
   `justify-content:flex-start`. The panel itself is centred (it is a block
   inside the centred .hero-content), and `.hero-section{text-align:center}`
   centres the *text* inside each item, but text-align has no effect on the
   main-axis distribution of flex items — so all four KPI groups packed
   against the left edge of a very wide panel.

   The fix sets the main-axis alignment explicitly. Selectors are scoped
   `.home-page .hero-content .hero-stats` (specificity 0,3,0) so they beat
   the single-class rules in style.css (0,1,0) and light.css (0,1,0)
   regardless of the order the stylesheets end up in on the production
   build — no !important needed. */
.home-page .hero-content .hero-stats {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-6) clamp(1.75rem, 4vw, 4.5rem);
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.home-page .hero-content .hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
}

.home-page .hero-content .hero-stat-num,
.home-page .hero-content .hero-stat-label {
  display: block;
  text-align: center;
}

/* Mobile: keep a 2x2 block, centred as a unit inside the panel. */
@media (max-width: 640px) {
  .home-page .hero-content .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    justify-items: center;
    gap: var(--space-5) var(--space-4);
    max-width: 20rem;
  }
}

/* ---------- 2. 最近更新 block ---------- */
/* The section box includes its own gutter padding, so its cap is the
   container width plus both gutters — that keeps its inner content
   flush with the other sections' 1440px columns. */
.recent-updates {
  max-width: calc(var(--home-max-width) + var(--home-gutter) * 2);
  margin-inline: auto;
}

/* Title + date badge and the intro paragraph share one measure so the
   badge can never drift to the viewport edge. */
.recent-updates .section-subtitle {
  max-width: 68ch;
}

/* Above 1500px, switch the header into two columns: heading + badge on
   the left, intro prose on the right. The card grid spans both. */
@media (min-width: 1500px) {
  .recent-updates {
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.7fr);
    column-gap: var(--space-10);
    align-items: start;
  }
  .recent-updates-header {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: 0;
  }
  .recent-updates .section-subtitle {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    max-width: 74ch;
  }
  .recent-updates-list {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: var(--space-10);
  }
}

/* ---------- 3. Card grids: explicit column counts ---------- */
/* auto-fill + minmax(300px) produced 6-7 columns at 2880px. Cap the
   track count instead, and let each card grow to a readable width. */
@media (min-width: 1200px) {
  .recent-updates-list,
  .modules-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1800px) {
  .recent-updates-list,
  .modules-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* The roadmap is a single horizontal track (~2360px for 12 modules).
   Below this width it stays horizontally scrollable as before; above it
   there is room to show the whole path without clipping. */
@media (min-width: 2100px) {
  .roadmap { max-width: 100%; }
}

/* Quick links stay denser but still bounded. */
@media (min-width: 1200px) {
  .links-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 4. Lesson pages on ultra-wide screens ---------- */
/* The article column is already centred by --content-max-width; the
   fixed TOC, however, was pinned to the viewport edge, ~700px away
   from the text. Anchor it just to the right of the article instead. */
@media (min-width: 1800px) {
  /* Centre the article in the content area instead of letting it hug
     the sidebar with ~1500px of empty space on the right. */
  .lesson-main {
    margin-left: auto;
    margin-right: auto;
  }
  .lesson-toc {
    right: auto;
    left: calc(
      var(--sidebar-width) + (100vw - var(--sidebar-width)) / 2 +
      (var(--content-max-width) / 2) + var(--space-6)
    );
  }
}