/**
 * Editorial Sections — parts/page/block-editorial-sections.php.
 *
 * A numbered, two-column editorial document: a red ordinal + title in a
 * narrow sticky left column, structured content (parts/elements/
 * panel-sections.php's palette, unchanged) in a wide right column, divided
 * by hairlines. Every section renders open — no tabs, no JS.
 *
 * Loads after css/blocks/panel-sections.css (functions.php registers this
 * file last) since .es__body's children are exactly that component's
 * output and this file adds nothing that competes with its selectors.
 *
 * Font sizes are rem against a 10px root (style.css sets html { font-size:
 * 62.5% }), matching the convention in css/blocks/panel-sections.css and
 * css/blocks/pillar-timeline.css. The --space-* tokens are already px.
 */

/* ---- intro row ------------------------------------------------------------
   Lead-in copy above the first numbered section, e.g. a contact line,
   closed off by a thick rule rather than the thin hairline used between
   sections — a stronger break to mark "front matter" ending. */

.es__intro-row {
  padding-bottom: var(--space-8);
  border-bottom: 2px solid var(--nu-cool-black);
}

.es__intro {
  font-size: 1.8rem;
  line-height: var(--leading-relaxed);
  color: var(--color-grey-700);
}

.es__intro > *:first-child {
  margin-top: 0;
}

.es__intro > *:last-child {
  margin-bottom: 0;
}

.es__intro a {
  color: var(--color-brand-red);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.es__intro a:hover {
  color: var(--color-brand-red-dark);
}

/* ---- section rhythm -------------------------------------------------------
   Hairline between sections, not above the first — .es__intro-row's rule
   (or nothing, if no intro) already closes off what precedes section 01. */

.es__section + .es__section {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-grey-300);
}

.es__intro-row + .es__section {
  margin-top: var(--space-12);
}

/* This block's content column is wider than a tab panel's, so
   .ps__rich's 68ch measure (css/blocks/panel-sections.css) leaves a lopsided
   gap on the right instead of reading as a comfortable line length. Scoped
   to .es only — tab panels keep the narrower 68ch. */
.es .ps__rich {
  max-width: none;
}

/* ---- two-column layout ----------------------------------------------------
   Narrow sticky left rail (ordinal + title) beside a wide content column —
   same sticky-offset convention as css/blocks/tabs-rail.css's nav-inner.
   --main-header-height is live-measured (set on documentElement by the
   inline script at header.php:57), so it tracks the header's real height
   across breakpoints — a hardcoded px value drifts out of sync and lets
   the header overlap the rail, obscuring a focused element underneath it
   (WCAG 2.4.11). */

@media (min-width: 992px) {
  .es__section {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
  }

  .es__head {
    position: sticky;
    top: calc(var(--main-header-height, 111px) + var(--space-4));
  }
}

.es__head {
  margin-bottom: var(--space-6);
}

@media (max-width: 991px) {
  .es__head {
    margin-bottom: var(--space-4);
  }
}

/* Same voice as .c-eyebrow (design-system.css) — bold, tracked-out, brand
   red — rather than introducing a second numeral treatment. */
.es__num {
  display: block;
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  color: var(--color-brand-red);
  margin: 0 0 var(--space-2);
}

.es__title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--nu-cool-black);
  margin: 0;
}

@media (max-width: 767px) {
  .es__title {
    font-size: 2.2rem;
  }
}

/* ---- band image ------------------------------------------------------------
   Spans the full content column (never the left rail) — a wide photo band
   inside the section, not a page-width bleed, since the block itself
   already sits inside the standard container/row/col grid. */

.es__band {
  margin: var(--space-8) 0 0;
}

/* The band is a wide letterbox. That shape used to come from the cropped
   'full-width-block' derivative (680x416), but that file was roughly a third
   of the resolution this renders at and carried no srcset, so the template
   now requests the uncropped original and the crop happens here instead.

   aspect-ratio holds exactly the 680:416 the derivative had, so the band's
   proportions and the space it reserves are unchanged. Declaring the ratio
   rather than inferring it from the file also means the box is right before
   the image loads, which removes a CLS source the height:auto version had. */
.es__band-img {
  display: block;
  width: 100%;
  aspect-ratio: 680 / 416;
  object-fit: cover;
  border-radius: var(--radius-image);
}

.es__band-caption {
  margin-top: var(--space-3);
  font-size: 1.4rem;
  font-style: italic;
  line-height: var(--leading-normal);
  color: var(--color-grey-500);
}

/* ---- mobile rhythm ---------------------------------------------------------
   Same breakpoint panel-sections.css uses for its own tightened spacing. */

@media (max-width: 767px) {
  .es__section + .es__section {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
  }

  .es__intro-row + .es__section {
    margin-top: var(--space-8);
  }

  .es__intro-row {
    padding-bottom: var(--space-6);
  }
}

/* ---- focus ------------------------------------------------------------ */

.es a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ---- motion -----------------------------------------------------------
   Nothing here animates; no reduced-motion rule is needed. */

/* ---------------------------------------------------------------------------
   Section progress rail

   Driven by data-progress in js/scroll-fx.js, which writes --progress (0..1)
   onto .es__rail-fill. The fill is scaled with transform:scaleX rather than
   sized with width — the value is rewritten as the visitor scrolls, and a
   width change on every one of those frames would relayout the section,
   where a transform composites. The scaleX rule itself lives with the other
   scroll-linked CSS in css/anim.css, on [data-progress-bar].

   Desktop only: it sits under the sticky .es__head, and below 992px that head
   is a static block above the body rather than a rail alongside it, so there
   is no column for it to belong to.
   --------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .es__rail {
    display: block;
    height: 2px;
    margin-top: var(--space-4);
    background-color: var(--border-hairline, rgba(0, 0, 0, 0.12));
    overflow: hidden;
  }

  .es__rail-fill {
    display: block;
    height: 100%;
    background-color: var(--color-brand-red);
  }
}

@media (max-width: 991px) {
  .es__rail {
    display: none;
  }
}