/* =================================================================================================
   LFD news article

   The approved layout: a sticky left rail carrying the back link, eyebrow, headline, byline and
   share; the body on the right. Full width, tokens only, canonical breakpoints.

   THE BODY KEEPS A READING MEASURE. --lfd-width-text is 68ch. A full-width shell without one
   produces 1400px lines, which is about 200 characters and unreadable - and an article is the
   one surface where that matters most.
   ================================================================================================= */

.lfd-article {
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  padding-block: var(--lfd-space-section);
  background: var(--lfd-color-paper);
  color: var(--lfd-color-ink);
  box-sizing: border-box;
}

.lfd-article * {
  box-sizing: border-box;
}

.lfd-article__inner,
.lfd-article__more-inner {
  inline-size: 100%;
  max-inline-size: var(--lfd-measure, 97.5rem);
  margin-inline: auto;
  padding-inline: var(--lfd-gutter, 2.625rem);
}

.lfd-article__inner {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--lfd-space-gap-lg);
  align-items: start;
}

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

/* A STICKY BOX STICKS TO ITS NEAREST SCROLL CONTAINER, and Manon makes two that never scroll:
   `body { overflow-x: hidden !important }` (with `html { overflow-y: scroll !important }`, so
   body's overflow is not handed to the viewport and body becomes a scroll container) and
   `.edgtf-wrapper-inner { overflow: hidden }`. Neither moves when the page scrolls, so nothing
   inside them could stick - which is why the approved archive pinned its panel with JavaScript.
   overflow-x: clip keeps what `hidden` was there for - no sideways scroll - without making a
   scroll container. Scoped with :has() to a page that carries the rail; a browser without
   overflow: clip keeps Manon's `hidden` and the rail simply scrolls, as before. */
body:has(.lfd-article__sticky) {
  overflow-x: clip !important;
}

.edgtf-wrapper-inner:has(.lfd-article__sticky) {
  overflow-x: clip;
  overflow-y: visible;
}

/* STRETCHED, so the sticky child has somewhere to stick. The grid aligns items to the start, which
   made the rail only as tall as its own content - and a sticky box cannot move outside its parent,
   so the rail scrolled away with the page (measured: top -428px after scrolling 600px at 1440). */
.lfd-article__rail {
  align-self: stretch;
}

/* 6.5rem (104px) of room above the rail while it is pinned. The LFD header is not fixed - it
   scrolls away - so this is spacing, not a header clearance. */
.lfd-article__sticky {
  position: sticky;
  inset-block-start: 6.5rem;
}

/* BOUNDED TO THE VIEWPORT WHILE IT IS PINNED, as the approved News panel is
   (news-single-entry.css: max-height: calc(100vh - 124px); overflow: auto). Pinned at 6.5rem, a
   box taller than the rest of the viewport kept its lower part below the bottom edge until the
   article ended: Tab put focus on the share links where nobody could see it (WCAG 2.2 SC 2.4.11), and a pointer
   could not reach it. Bounded, it scrolls within itself and the browser scrolls a focused control
   into view. Only where it pins; below 834px it is static. The padding, taken back by the margin,
   is room for the focus ring (outline plus offset), which a box that scrolls would clip - and the
   inset is taken back by the same amount, because the margin is not once the box sticks: the inset
   places the border box, so the content would pin 6px below its 6.5rem.
   NO overscroll-behavior. `contain` stopped scroll chaining, so once the panel reached its end a
   wheel or trackpad gesture over the left column moved nothing at all. The approved panel has none. */
@media (width > 834px) {

  .lfd-article__sticky {
    max-block-size: calc(100vh - 6.5rem - var(--lfd-space-md, 1.5rem));
    overflow-y: auto;
    padding: 0.375rem;
    margin: -0.375rem;
    inset-block-start: calc(6.5rem - 0.375rem);
  }
}

.lfd-article__back {
  margin: 0 0 var(--lfd-space-lg);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-xs, 0.6875rem);
  font-weight: var(--lfd-weight-bold);
  letter-spacing: var(--lfd-tracking-label);
  text-transform: uppercase;
}

.lfd-article__back a,
.lfd-article__eyebrow a {
  color: inherit;
}

.lfd-article__eyebrow {
  margin: 0 0 var(--lfd-space-2xs);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-2xs, 0.625rem);
  font-weight: var(--lfd-weight-bold);
  letter-spacing: var(--lfd-tracking-label-lg);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-article__title {
  margin: 0 0 var(--lfd-space-lg);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-display-md);
  font-weight: var(--lfd-weight-bold);
  line-height: var(--lfd-leading-tight);
  letter-spacing: var(--lfd-tracking-snug);
  text-transform: uppercase;
}

/* --- byline ------------------------------------------------------------------------------------- */

.lfd-article__byline {
  margin-block-end: var(--lfd-space-lg);
  padding-block: var(--lfd-space-md);
  border-block: var(--lfd-border-rule);
}

.lfd-article__author,
.lfd-article__date,
.lfd-article__modified,
.lfd-article__reading {
  margin: 0 0 var(--lfd-space-3xs);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-xs, 0.6875rem);
  font-weight: var(--lfd-weight-medium);
  letter-spacing: var(--lfd-tracking-label-sm);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-article__author {
  font-weight: var(--lfd-weight-bold);
  color: var(--lfd-color-ink);
}

.lfd-article__author-link {
  color: inherit;
}

/* --- share --------------------------------------------------------------------------------------- */

.lfd-article__share-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lfd-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lfd-article__share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: var(--lfd-space-sm);
  border: var(--lfd-border-line);
  border-radius: 1.375rem;
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-2xs, 0.625rem);
  font-weight: var(--lfd-weight-bold);
  letter-spacing: var(--lfd-tracking-label-sm);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}

.lfd-article__share-link:hover,
.lfd-article__share-link:focus-visible {
  background: var(--lfd-color-ink);
  color: var(--lfd-color-paper);
}

/* --- the body -------------------------------------------------------------------------------------- */

.lfd-article__figure {
  margin: 0 0 var(--lfd-space-xl);
}

.lfd-article__figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.lfd-article__caption {
  margin-block-start: var(--lfd-space-2xs);
  font-size: var(--lfd-size-label-sm, 0.75rem);
  line-height: var(--lfd-leading-label);
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-article__standfirst {
  margin: 0 0 var(--lfd-space-lg);
  max-inline-size: var(--lfd-width-text);
  font-family: var(--lfd-font-editorial);
  font-size: var(--lfd-size-lead, 1.0625rem);
  line-height: var(--lfd-leading-body);
}

.lfd-article__content {
  max-inline-size: var(--lfd-width-text);
  font-size: var(--lfd-size-body-lg, 1.0625rem);
  line-height: var(--lfd-leading-relaxed);
}

.lfd-article__content > * {
  margin-block: 0 var(--lfd-space-md);
}

.lfd-article__content > *:last-child {
  margin-block-end: 0;
}

/* A link in running text is underlined - the approved single's rule (news-single-entry.css,
   `.lfd-news-content a`). Manon sets `a { text-decoration: none }` and a colour one step from the
   text's, so without this a link in the body could not be told from the sentence around it
   (WCAG 1.4.1). */
.lfd-article__content a {
  color: var(--lfd-color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lfd-article__content h2,
.lfd-article__content h3,
.lfd-article__content h4 {
  margin-block-start: var(--lfd-space-xl);
  font-family: var(--lfd-font-display);
  font-weight: var(--lfd-weight-bold);
  line-height: var(--lfd-leading-snug);
  text-transform: uppercase;
}

.lfd-article__content h2 { font-size: var(--lfd-size-display-sm); }

.lfd-article__content h3 { font-size: var(--lfd-size-body-lg, 1.0625rem); }

.lfd-article__content h4 { font-size: var(--lfd-size-label-lg, 0.875rem); }

.lfd-article__content blockquote {
  margin-inline: 0;
  padding-inline-start: var(--lfd-space-md);
  border-inline-start: var(--lfd-border-thick) solid var(--lfd-color-ink);
  font-family: var(--lfd-font-editorial);
  font-size: var(--lfd-size-display-sm);
  font-variant-caps: small-caps;
  line-height: var(--lfd-leading-snug);
}

/* An embed, a gallery and a caption keep working: nothing here changes their structure, it only
   stops media overflowing the measure. An IFRAME keeps its own height: it has no natural size,
   so `block-size: auto` resolves to the 150px default and overrides its height attribute -
   which is what it did to every video embed (measured: 150px for a 500x281 YouTube iframe). */
.lfd-article__content img,
.lfd-article__content video {
  max-inline-size: 100%;
  block-size: auto;
}

.lfd-article__content iframe {
  max-inline-size: 100%;
}

.lfd-article__content figcaption,
.lfd-article__content .wp-element-caption {
  margin-block-start: var(--lfd-space-2xs);
  font-size: var(--lfd-size-label-sm, 0.75rem);
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

/* A wide or full-width block inside the article may escape the measure, which is what those
   alignments are for. */
.lfd-article__content .alignwide,
.lfd-article__content .alignfull {
  max-inline-size: none;
}

/* --- tags --------------------------------------------------------------------------------------------- */

.lfd-article__tags {
  margin-block-start: var(--lfd-space-2xl);
  padding-block-start: var(--lfd-space-lg);
  border-block-start: var(--lfd-border-rule);
}

.lfd-article__tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lfd-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lfd-article__tag a {
  display: inline-block;
  min-block-size: 1.5rem;
  padding: var(--lfd-space-3xs) var(--lfd-space-sm);
  border: var(--lfd-border-line);
  border-radius: 1rem;
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-2xs, 0.625rem);
  font-weight: var(--lfd-weight-bold);
  letter-spacing: var(--lfd-tracking-label-sm);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}

/* --- related and adjacent ------------------------------------------------------------------------------- */

.lfd-article__more {
  margin-block-start: var(--lfd-space-section);
  padding-block-start: var(--lfd-space-2xl);
  border-block-start: var(--lfd-border-rule);
}

.lfd-article__related-title {
  margin: 0 0 var(--lfd-space-lg);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-display-sm);
  font-weight: var(--lfd-weight-bold);
  letter-spacing: var(--lfd-tracking-snug);
  text-transform: uppercase;
}

.lfd-article__related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lfd-space-gap);
}

.lfd-article__related-media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 25%;
}

/* Sentence case, like the adjacent-story titles beside it. Manon's h3 is uppercase with -1px
   tracking, and without a reset the serif related headlines came out in capitals. */
.lfd-article__related-heading {
  margin: var(--lfd-space-sm) 0 var(--lfd-space-3xs);
  font-family: var(--lfd-font-editorial);
  font-size: var(--lfd-size-display-sm);
  font-weight: var(--lfd-weight-regular);
  line-height: var(--lfd-leading-tight);
  letter-spacing: var(--lfd-tracking-display);
  text-transform: none;
}

.lfd-article__related-heading a {
  color: inherit;
  text-decoration: none;
}

.lfd-article__related-heading a:hover,
.lfd-article__related-heading a:focus-visible {
  text-decoration: underline;
}

.lfd-article__related-date {
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-2xs, 0.625rem);
  letter-spacing: var(--lfd-tracking-label);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-article__adjacent-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lfd-space-gap);
  margin-block-start: var(--lfd-space-2xl);
}

.lfd-article__adjacent {
  display: block;
  padding: var(--lfd-space-md);
  border: var(--lfd-border-line);
  text-decoration: none;
  color: inherit;
}

.lfd-article__adjacent--next {
  text-align: end;
}

.lfd-article__adjacent-label {
  display: block;
  margin-block-end: var(--lfd-space-3xs);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-2xs, 0.625rem);
  font-weight: var(--lfd-weight-bold);
  letter-spacing: var(--lfd-tracking-label);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-article__adjacent-title {
  display: block;
  font-family: var(--lfd-font-editorial);
  font-size: var(--lfd-size-body-lg, 1.0625rem);
  line-height: var(--lfd-leading-snug);
}

/* --- breakpoints -------------------------------------------------------------------------------------------- */

@media (max-width: 1180px) {

  .lfd-article__inner {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  }

  .lfd-article__related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 834px) {

  .lfd-article__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .lfd-article__sticky {
    position: static;
  }

  .lfd-article__related-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lfd-article__adjacent-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .lfd-article__adjacent--next {
    text-align: start;
  }
}