/* ============================================================
   AXL's Game Lab — the EPISODE-ONLY sections.

   The reusable half of this design (card, bighead, icon row, tile, button,
   field, tabs, countdown, newsletter band, and the whole core-block bridge)
   now lives in axl-ui.css, which loads FIRST and is scoped
   `:is(.axl-ui, .axl-episode)`. What remains here is only the pieces that
   reproduce a specific Episode 001 section: the hero, the mission log, the
   full-width downloads panel, the sidebar teaser + countdown cards and the age
   guide.

   Everything is scoped under `.axl-episode`. That scope is mandatory, not
   tidiness: the file is also loaded as an editor style (functions.php), where
   styles are global, and generic-class rules would otherwise leak over the whole
   admin canvas. The episode pattern's root group carries .axl-episode, and
   single-episode.php wraps the page in it.

   Because this file loads after axl-ui.css, an episode rule at equal specificity
   wins — that is how `.mlog` widens the card radius and `.aside .cd` reflows the
   countdown to the sidebar column.

   Two parts, as before:
     1. DESIGN      — the Episode 001 rules, as authored (legacy partials).
     2. CORE BRIDGE — the same look expressed for core-block markup, used by the
                      episode pattern.
   ============================================================ */

/* ============================================================
   1. DESIGN
   ============================================================ */

/* --- hero --------------------------------------------------------------- */
.axl-episode .hero { display: block; }
.axl-episode .metarow { display: flex; gap: 30px; margin: 24px 0 0; flex-wrap: wrap; }
.axl-episode .meta { display: flex; gap: 13px; }
.axl-episode .meta b { display: block; font-size: 15px; font-weight: 600; color: #1A2547; }
.axl-episode .meta span { font-size: 14px; color: #6B7484; }
.axl-episode .video { border-radius: 16px; overflow: hidden; margin-top: 26px; }
.axl-episode .video img { width: 100%; }
.axl-episode .video iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; }
.axl-episode .vidcap { color: #6B7484; font-size: 13px; margin-top: 16px; }
.axl-episode .vidlinks { display: flex; gap: 14px; align-items: center; margin-top: 10px; font-size: 13px; flex-wrap: wrap; }
.axl-episode .vidlinks a { color: #1245C4; font-weight: 600; text-decoration: none; display: inline-flex; gap: 5px; align-items: center; }

/* --- sidebar: next-episode card ----------------------------------------- */
.axl-episode .ep2 { background: #F3F4F8; border-radius: 12px; text-align: center; padding: 26px 12px; margin-top: 16px; font-size: 14px; }
.axl-episode .ep2 b { display: block; font-weight: 600; margin-bottom: 4px; }
.axl-episode a.ep2 { display: block; color: inherit; text-decoration: none; }

/* --- sidebar: age guide -------------------------------------------------- */
.axl-episode .age-title { margin-top: 14px; font-size: 14.5px; font-weight: 600; }
.axl-episode .age-text { margin-top: 8px; font-size: 13.5px; line-height: 1.6; }

/* --- mission log --------------------------------------------------------- */
.axl-episode .mlog { margin-top: 18px; border-radius: 20px; }
.axl-episode .dlog { display: block; }
/* Log-book page: cream stock, faint blue ruling, a red margin rule with punched
   binder holes down the left, and a second sheet peeking out underneath. All
   gradients — no image asset — so it scales with the card. */
.axl-episode .paper {
  position: relative;
  margin-top: 20px;
  padding: 28px 22px 28px 54px;
  border: 1px solid #E2D6B8;
  border-radius: 3px 10px 10px 3px;
  background-color: #FBF5E3;
  background-image:
    /* punched holes, in the margin */
    radial-gradient(circle at 18px 50%, #E6DAB9 0 5px, rgba(120, 95, 40, .18) 5px 6px, transparent 6.5px),
    /* red margin rule */
    linear-gradient(90deg, transparent 36px, rgba(212, 92, 92, .5) 36px 37.5px, transparent 37.5px),
    /* blue ruled lines */
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(92, 128, 190, .2) 27px 28px),
    /* soft aging toward the edges */
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(170, 135, 60, .1) 100%);
  background-size: 100% 96px, auto, auto, auto;
  background-repeat: repeat-y, no-repeat, repeat, no-repeat;
  /* Ruling offset 22px: with the 28px top padding, each rule lands 21px into a
     28px line box — just under the text baseline (see the grid block below). */
  background-position: 0 30px, 0 0, 0 22px, 0 0;
  box-shadow:
    0 1px 2px rgba(70, 50, 20, .08),
    0 10px 22px -14px rgba(70, 50, 20, .35),
    4px 4px 0 -1px #F4ECD4,
    4px 4px 0 0 #E2D6B8;
}
/* Baseline grid: every line of text on the page is a 28px box (the ruling pitch)
   and every gap is a whole number of lines, so the writing sits on the rules.
   Covers both the pattern (.logrows table) and legacy (.logrow divs) markup. */
.axl-episode .paper .paper-top,
.axl-episode .paper .logrows,
.axl-episode .paper .paper-top p { margin-block: 0; }
.axl-episode .paper .paper-top { min-height: 28px; row-gap: 0; line-height: 28px; }
.axl-episode .paper .lognum {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace; letter-spacing: .02em;
  line-height: 28px; position: relative; top: -3px; /* the 26px numerals would otherwise sink through the rule */
}
.axl-episode .paper .classif { line-height: 14px; margin-block: 1px; } /* 26px tall + 2px = one line */
.axl-episode .paper .logrows { margin-top: 28px; }
/* :first-/:last-child in both selectors so these out-rank the bridge's cell rules below. */
.axl-episode .paper .logrows tr > td:last-child { padding: 0; line-height: 28px; }
.axl-episode .paper .logrows tr > td:first-child { padding: 0 14px 0 0; line-height: 28px; position: relative; top: 1px; }
.axl-episode .paper .logrow { margin-top: 0; line-height: 28px; }
.axl-episode .paper .paper-top + .logrow { margin-top: 28px; }
.axl-episode .paper .logrow label { padding-top: 0; line-height: 28px; position: relative; top: 1px; }
.axl-episode .paper .stamp { margin-top: 28px; }
.axl-episode .paper-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.axl-episode .lognum { font-size: 26px; font-weight: 800; color: #151D40; }
.axl-episode .classif { border: 1.5px solid #3F9145; color: #3F9145; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 5px 11px; transform: rotate(4deg); white-space: nowrap; }
.axl-episode .logrow { display: flex; gap: 14px; margin-top: 15px; font-size: 14.5px; line-height: 1.65; }
.axl-episode .logrow label { flex: 0 0 88px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #49536B; text-transform: uppercase; padding-top: 3px; }
.axl-episode .stamp { width: 150px; height: 150px; border: 2.5px solid #4E9B52; border-radius: 50%; color: #3F9145; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; transform: rotate(-6deg); margin: 16px auto 4px; }
.axl-episode .stamp .s0 { font-size: 17px; line-height: 1; }
.axl-episode .stamp .s1 { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }
.axl-episode .stamp .s2 { font-size: 13.5px; font-weight: 700; display: flex; gap: 5px; align-items: center; }
.axl-episode .stamp .s3 { font-size: 7.5px; font-weight: 600; letter-spacing: .05em; margin-top: 5px; }
.axl-episode .stamp .s4 { font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.axl-episode .tl { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.axl-episode .tl div { display: flex; gap: 24px; font-size: 14.5px; position: relative; }
.axl-episode .tl b { color: #1245C4; flex: 0 0 46px; font-variant-numeric: tabular-nums; margin-right: 28px; }
/* Legacy markup gets the same rail + dots as .tlrows; the rail bridges the 16px gap. */
.axl-episode .tl div::before {
  content: ""; position: absolute; left: 76px; top: 11px; bottom: -27px; width: 2px;
  background: var(--axl-tl-rail, rgba(18, 69, 196, .18));
}
.axl-episode .tl div:last-child::before { display: none; }
.axl-episode .tl div::after {
  content: ""; position: absolute; left: 72px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--axl-tl-dot, #1245C4); box-shadow: 0 0 0 3px var(--axl-tl-halo, rgba(18, 69, 196, .15));
}
.axl-episode .mapbtn { display: flex; justify-content: center; margin-top: 28px; }
.axl-episode .mapview { display: none; margin-top: 22px; }
.axl-episode .mapview.on { display: block; }
.axl-episode .mapview img { width: 100%; border-radius: 10px; border: 1px solid #E3E7F0; image-rendering: pixelated; }
.axl-episode .mapview .cap { color: #6B7484; font-size: 12.5px; margin-top: 10px; text-align: center; }
.axl-episode .mapview .mapbtn { margin-top: 18px; }

/* --- downloads — one full-width panel under the mission log --------------- */
.axl-episode .dlpack { margin-top: 18px; }

/* --- shared sections in the main column ------------------------------------
   The episode's own sections each carry their margin (.mlog, .dlpack) because
   the main column has no `.stack` gap. A section from the shared design system
   (an `.axl-ui` group, e.g. the downloads permissions band) has none, so it gets
   the same rhythm here wherever an editor drops it in. */
.axl-episode .main > .axl-ui:not(:first-child) { margin-top: 18px; }

/* --- teaser + countdown — stacked sidebar cards --------------------------- */
/* Both were one full-width band under the layout; in a 320px column they stack,
   so the teaser still fills the card width and the copy runs as wrapped prose
   rather than the design's hand-broken lines. */
.axl-episode .teaser { display: flex; flex-direction: column; gap: 14px; }
.axl-episode .teaser img.tsr { border-radius: 10px; width: 100%; height: 140px; object-fit: cover; margin: 0; }
.axl-episode .teaser .t-copy { font-size: 13.5px; line-height: 1.7; }
.axl-episode .teaser .hr,
.axl-episode .teaser .vdiv { display: none; }

/* The sidebar countdown's sizing lives in axl-ui.css (next to .cdz), because the
   Downloads page puts the same card in a non-episode sidebar. */

/* Sidebar card buttons are centred, even where saved content still has btn-row--start. */
.axl-episode .aside .btn-row { justify-content: center; }

/* ---------- ≥640px ---------- */
@media (min-width: 640px) {
  .axl-episode .metarow { gap: 52px; }
  .axl-episode .logrow label { flex-basis: 100px; }
}

/* ---------- ≥1080px ---------- */
@media (min-width: 1080px) {
  .axl-episode .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 56%); gap: 28px; align-items: start; }
  .axl-episode .hero .video { margin-top: 0; }
  .axl-episode .metarow { gap: 52px; margin-top: 34px; }
  .axl-episode .mlog { margin-top: 26px; }
  .axl-episode .dlog { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 30px; margin-top: 4px; }
  .axl-episode .dlog .paper { margin-top: 16px; }
  .axl-episode .dlog .tabs { margin-top: 16px; }
  .axl-episode .stamp { margin-right: 40px; }
  .axl-episode .dlpack { margin-top: 26px; }
  .axl-episode .main > .axl-ui:not(:first-child) { margin-top: 26px; }
}

/* ============================================================
   2. CORE BRIDGE — the same episode sections, for core-block markup.

   Core blocks add wrappers and swap elements, and wp-block-library ships its own
   defaults. Everything here is one class deeper than those defaults, so it wins
   without !important. (The SHARED bridge — group inner containers, editor width,
   equal-height columns, icon headings, tiles, buttons — is in axl-ui.css.)
   ============================================================ */

/* -------------------------------------------------- Mission Log paper + timeline */
.axl-episode .logrows table,
.axl-episode .tlrows table { width: 100%; border-collapse: collapse; }
.axl-episode .logrows td,
.axl-episode .tlrows td { border: 0; padding: 0; vertical-align: top; }
/* Core gives .wp-block-table overflow-x:auto (which forces overflow-y:auto too). The
   baseline nudges and timeline dots poke a pixel or two outside, so that showed a
   scrollbar — these tables never need to scroll. */
.axl-episode .logrows,
.axl-episode .tlrows { overflow: visible; }
/* Widths include the gutter the design got from flex gap: 88 + 14, 100 + 14, 46 + 24. */
.axl-episode .logrows tr > td:first-child { width: 102px; padding: 18px 14px 0 0; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #49536B; text-transform: uppercase; }
.axl-episode .logrows tr > td:last-child { padding-top: 15px; font-size: 14.5px; line-height: 1.65; }
.axl-episode .tlrows { margin-top: 22px; }
.axl-episode .tlrows tr > td:first-child { width: 70px; padding: 16px 24px 0 0; color: #1245C4; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.axl-episode .tlrows tr > td:last-child { padding-top: 16px; font-size: 14.5px; }
.axl-episode .tlrows tr:first-child > td { padding-top: 0; }

/* Vertical timeline: a rail down the left of the text column with a dot per entry.
   The rail sits in each row's cell and runs edge to edge, so the rows join into one
   continuous line; the first starts and the last stops at their dot. */
.axl-episode .tlrows tr > td:last-child { position: relative; padding-left: 28px; }
.axl-episode .tlrows tr > td:last-child::before {
  content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px;
  background: var(--axl-tl-rail, rgba(18, 69, 196, .18));
}
.axl-episode .tlrows tr > td:last-child::after {
  content: ""; position: absolute; left: 2px; top: 22px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--axl-tl-dot, #1245C4); box-shadow: 0 0 0 3px var(--axl-tl-halo, rgba(18, 69, 196, .15));
}
.axl-episode .tlrows tr:first-child > td:last-child::before { top: 11px; }
.axl-episode .tlrows tr:first-child > td:last-child::after { top: 6px; }
.axl-episode .tlrows tr:last-child > td:last-child::before { bottom: auto; height: 27px; }
.axl-episode .tlrows tr:only-child > td:last-child::before { display: none; }
.axl-episode .mapview .mapimg img { width: 100%; border-radius: 10px; border: 1px solid #E3E7F0; image-rendering: pixelated; }

/* -------------------------------------------------- Downloads panel */
/* The tile labels are 11.5px in axl-ui.css, sized for the 440px column this panel
   used to sit in. Full width, they read at the tile's own size. */
.axl-episode .dlpack .tiles--dl .tile__title { font-size: 13.5px; }
.axl-episode .dl-title { margin-top: 12px; font-size: 14.5px; font-weight: 600; }
.axl-episode .dl-sub { margin-top: 4px; font-size: 13px; }

/* -------------------------------------------------- Teaser card (core blocks) */
.axl-episode .teaser .tsr img { width: 100%; height: 140px; border-radius: 10px; object-fit: cover; }

@media (min-width: 640px) {
  /* Matches the design's wider label column at this breakpoint (100px + gutter). */
  .axl-episode .logrows tr > td:first-child { width: 114px; }
}

/* -------------------------------------------------- About panel (archive sidebar) */
/* Left-aligned throughout: an icon + title .bighead, the blurb, a full-width
   divider, then a stack of axl/section-heading "row" rows (icon + value + note).
   The separator carries is-style-wide so core's 100px centred default doesn't
   win the width — .hr only restyles the border. */
.axl-episode .about { text-align: left; }
.axl-episode .about .bighead + p { margin-top: 12px; }
.axl-episode .about .hr { margin: 12px 0; }

/* ------------------------------------------------ CTA panels (archive sidebar) */
/* "New Episodes" and "Start Here": the icon+title/copy rhythm of .about, closed
   by a full-width call to action. The sidebar is 320px at its widest and
   narrower again in the two-up range at 640px, where .axl-btn's default nowrap
   would push "Subscribe on YouTube" past the card edge — so the label wraps
   here and the button fills the column. */
.axl-episode .ctacard .bighead + p { margin-top: 12px; }
.axl-episode .ctacard .btn-row { margin-top: 16px; }
.axl-episode .ctacard .axl-btn { width: 100%; }
.axl-episode .ctacard .axl-btn > .wp-block-button__link { width: 100%; padding-left: 16px; padding-right: 16px; white-space: normal; }

/* ============================================================
   3. EDITOR ONLY

   The map panel is hidden until the Mission Map tab is clicked, which would leave
   it uneditable in the canvas. Both ancestors below exist only in the block
   editor; .block-editor-writing-flow is listed too because WordPress may re-scope
   editor styles under .editor-styles-wrapper, which would stop that selector
   matching. (The canvas width cap is lifted in axl-ui.css.)
   ============================================================ */
.editor-styles-wrapper .axl-episode .mapview,
.block-editor-writing-flow .axl-episode .mapview { display: block; }