/* news-event skeleton: structure only. Paper, ink, type, rules and motion are the
   variant's (variants/*.css); everything here paints from --v-* tokens.

   The page reads like coverage: a header, a masthead with two ears, a dateline, a
   wire (ticker), then the top story (.ne-hero) where the brief's first `lore` and
   first `facts` section render in place (data-wl-slot), then the rest of the
   sections on a grid.

   Layout knobs a variant may turn (never the grid properties themselves, or the
   breakpoints below would lose to the variant's later rule). Set them on :root;
   nothing here declares them, every use carries its own fallback:
     --ne-maxw          page width                 --ne-top-h        header height
     --ne-chrome-h      chrome above the hero, so the hero fills the first screen
     --ne-mast-cols     masthead: ear | plate | ear
     --ne-hero-cols     hero columns (desktop)     --ne-hero-areas   hero areas: head fig story brief pull
     --ne-hero-rows     hero rows (desktop)        --ne-hero-colgap / --ne-hero-rowgap
     --ne-photo-ratio   the lead photo's frame
     --ne-flow-cols     section grid (desktop)     --ne-flow-gap
     --ne-span / --ne-row   set ON a section: its column / row in the section grid (desktop)
     --ne-sec-pad       a section's padding in the grid */

:root {
  /* the content column, as padding: the page edge or the centred max width */
  --ne-gutter: max(var(--v-pad-x), calc((100% - var(--ne-maxw, 1240px)) / 2));
}

.ne-page { min-height: 100vh; display: flex; flex-direction: column; }
.ne-main { flex: 1 0 auto; }

/* ---- the edge: a thin bar above the header */
.ne-edge { position: relative; height: var(--ne-edge-h, 0px); overflow: hidden; }
.ne-edge__run { position: absolute; inset: 0; }

/* ---- header */
.ne-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  min-height: var(--ne-top-h, 56px);
  padding: 0 var(--ne-gutter);
}
/* a long name gives way (ellipsis) before the bar runs off a narrow screen */
.ne-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; text-decoration: none; }
.ne-brand__mark { width: 34px; height: 34px; object-fit: cover; flex: none; }
.ne-brand__name, .ne-brand__tick { white-space: nowrap; }
.ne-brand__name { min-width: 0; overflow-x: clip; text-overflow: ellipsis; }
.ne-brand__tick { flex: none; }
.ne-live { display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap; }
.ne-live__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
/* the nav only takes the room left over (basis 0), so it gives way before the name does */
.ne-top__nav { display: flex; align-items: center; min-width: 0; flex: 1 1 0; overflow-x: auto; scrollbar-width: none; }
.ne-top__nav::-webkit-scrollbar { display: none; }
.ne-top__nav .wl-nav__link { white-space: nowrap; text-decoration: none; }
.ne-top__cta { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }

/* ---- masthead: ear | nameplate | ear */
.ne-mast {
  display: grid; align-items: center;
  grid-template-columns: var(--ne-mast-cols, minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr));
  gap: 28px;
  margin: 0 var(--ne-gutter);
}
.ne-ear { min-width: 0; }
.ne-mast__plate { min-width: 0; text-align: center; }
.ne-mast__name { margin: 0; }
.ne-ear__cta { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- dateline */
.ne-dateline {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 24px;
  margin: 0 var(--ne-gutter);
}
.ne-dateline__cell { min-width: 0; }
.ne-dateline__date:empty { display: none; }

/* ---- wire: a label and the scrolling track */
.ne-wire { display: flex; align-items: stretch; min-height: var(--ne-wire-h, 40px); overflow: hidden; }
.ne-wire__label { flex: none; display: flex; align-items: center; }
.ne-wire__track { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }

/* ---- the top story */
.ne-hero {
  display: grid;
  grid-template-columns: var(--ne-hero-cols, minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr));
  grid-template-areas: var(--ne-hero-areas, "head head head" "brief fig story" "brief pull story");
  grid-template-rows: var(--ne-hero-rows, auto auto 1fr);
  column-gap: var(--ne-hero-colgap, 32px);
  row-gap: var(--ne-hero-rowgap, 24px);
  align-items: start;
  min-height: calc(100vh - var(--ne-chrome-h, 0px));
  padding: var(--ne-hero-pad-t, 28px) var(--ne-gutter) var(--ne-hero-pad-b, 48px);
}
.ne-hero__head { grid-area: head; min-width: 0; }
.ne-hero__fig { grid-area: fig; min-width: 0; margin: 0; }
.ne-hero__story { grid-area: story; min-width: 0; }
.ne-hero__brief { grid-area: brief; min-width: 0; }
.ne-pull { grid-area: pull; min-width: 0; margin: 0; }
.ne-hero__story:empty, .ne-hero__brief:empty, .ne-hero__cap:empty, .ne-updated:empty { display: none; }
.ne-pull:not([data-ne-pull="quote"]):not([data-ne-pull="post"]) { display: none; }

.ne-hero__flags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; }
.ne-hero__headline { margin: 0; text-wrap: balance; }
.ne-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }

.ne-photo { position: relative; overflow: hidden; aspect-ratio: var(--ne-photo-ratio, 2 / 1); }
.ne-photo .wl-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ne-photo.wl-media--post { aspect-ratio: auto; overflow: visible; }
.ne-photo.wl-media--none, .ne-hero__fig:has(> .wl-media--none) { display: none; }

/* a slotted section sits in the hero grid, not in the flow's rhythm */
.ne-hero .wl-sec { padding: 0; }
.ne-hero .wl-sec__inner { max-width: none; margin: 0; }
.ne-hero .wl-sec__head { max-width: none; }

/* ---- the rest of the coverage: a grid of sections */
.ne-flowwrap { padding: 0 var(--ne-gutter) var(--ne-flow-pad-b, 96px); }
.ne-flow {
  display: grid;
  grid-template-columns: var(--ne-flow-cols, minmax(0, 1fr));
  column-gap: var(--ne-flow-gap, 48px);
  grid-auto-flow: row dense;
  align-items: start;
}
.ne-flow > .wl-sec {
  grid-column: var(--ne-span, 1 / -1);
  grid-row: var(--ne-row, auto);
  min-width: 0;
  padding: var(--ne-sec-pad, var(--v-sec-gap) 0 0);
}
.ne-flow > .wl-sec > .wl-sec__inner { max-width: none; margin: 0; }

.ne-foot { padding: 40px var(--ne-gutter) 56px; }

/* The breakpoints below are written one class deeper (.ne-page ...) than anything a
   skin writes, so they win over a skin's rule for the same element whatever the order. */

/* ---- tablet: two columns, the section grid collapses */
@media (max-width: 1080px) {
  .ne-page .ne-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    grid-template-areas: "head head" "fig fig" "story brief" "pull brief";
    grid-template-rows: auto auto auto 1fr;
    min-height: 0;
  }
  .ne-page .ne-flow { grid-template-columns: minmax(0, 1fr); }
  .ne-page .ne-flow > .wl-sec { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 900px) {
  .ne-page .ne-mast { grid-template-columns: minmax(0, 1fr); }
  .ne-page .ne-ear { display: none; }
}

/* ---- phone: one column in reading order. A flex column, not a grid, so a part the
   brief left empty costs no gap: head, photo, glance box, story, pull. */
@media (max-width: 760px) {
  .ne-page .ne-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ne-hero-rowgap, 24px);
  }
  .ne-page .ne-hero__brief { order: 1; }
  .ne-page .ne-hero__story { order: 2; }
  .ne-page .ne-pull { order: 3; }
  .ne-page .ne-top { gap: 12px; }
  .ne-page .ne-dateline { justify-content: center; }
}