/* =========================================================================
   Article layout — full node pages for News (/news/*) and Events (/events/*).
   Contained header (kicker + title + meta) and a readable body column.
   Rendered by node--news--full / node--event--full; loaded via ngf/article.
   ========================================================================= */
.ngf-article {
  padding: var(--ngf-sp-12) 0 var(--ngf-sp-20);
}

/* Detail pages (news, events, geophysical events) read as a single
   contained column rather than stretching to the site's full page width. */
.ngf-article .ngf-container {
  max-width: 1000px;
}

.ngf-article__back {
  display: inline-block;
  margin-bottom: var(--ngf-sp-6);
  font-family: var(--ngf-font-body);
  font-size: var(--ngf-fs-sm);
  font-weight: var(--ngf-w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ngf-tr-caps);
  color: var(--ngf-link);
  text-decoration: none;
}
.ngf-article__back:hover { color: var(--ngf-link-hover); }
.ngf-article__back::before { content: "\2039\00a0"; }

.ngf-article__head { margin-bottom: var(--ngf-sp-8); }
.ngf-article__kicker {
  margin-bottom: var(--ngf-sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ngf-sp-2);
}
.ngf-article__title {
  font-family: var(--ngf-font-display);
  font-size: clamp(2rem, 4vw, var(--ngf-fs-4xl));
  font-weight: var(--ngf-w-bold);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ngf-ink-900);
  margin: 0;
  text-wrap: balance;
}
.ngf-article__byline {
  margin-top: var(--ngf-sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ngf-sp-3);
  align-items: center;
}
.ngf-article__author {
  font-family: var(--ngf-font-body);
  font-size: var(--ngf-fs-sm);
  font-weight: var(--ngf-w-bold);
  color: var(--ngf-ink-900);
}

/* Event facts (When / Where) */
.ngf-article__facts {
  margin: var(--ngf-sp-6) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ngf-sp-4) var(--ngf-sp-10);
}
.ngf-article__fact { margin: 0; }
.ngf-article__fact dt {
  font-family: var(--ngf-font-mono);
  font-size: var(--ngf-fs-xs);
  letter-spacing: var(--ngf-tr-caps);
  text-transform: uppercase;
  color: var(--ngf-fg-3);
  margin-bottom: var(--ngf-sp-1);
}
.ngf-article__fact dd {
  margin: 0;
  font-size: var(--ngf-fs-lg);
  line-height: 1;
  color: var(--ngf-ink-900);
}

.ngf-article__actions { margin-top: var(--ngf-sp-6); }

/* Featured image (news) */
.ngf-article__media {
  margin: var(--ngf-sp-8) 0;
  border-radius: var(--ngf-r-md);
  overflow: hidden;
  text-align: center;
}
.ngf-article__media img,
.ngf-article__media video,
.ngf-article__media iframe { display: block; width: 100%; height: auto; margin: 0 auto; }

.ngf-article__rule {
  height: 1px;
  background: var(--ngf-border);
  border: 0;
  margin: var(--ngf-sp-8) 0;
}

/* Body prose — the field renders raw <p>/<a>/<ul>…, so style descendants. */
.ngf-prose {
  font-family: var(--ngf-font-serif);
  font-size: var(--ngf-fs-base);
  line-height: 1.7;
  color: var(--ngf-ink-700);
}
.ngf-prose > :first-child { margin-top: 0; }
.ngf-prose > :last-child { margin-bottom: 0; }
.ngf-prose p { margin: 0 0 1.1em; text-wrap: pretty; }
.ngf-prose a {
  color: var(--ngf-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ngf-prose a:hover { color: var(--ngf-link-hover); }
.ngf-prose h2, .ngf-prose h3, .ngf-prose h4 {
  font-family: var(--ngf-font-display);
  color: var(--ngf-ink-900);
  line-height: 1.2;
  margin: 1.6em 0 0.5em;
}
.ngf-prose h2 { font-size: var(--ngf-fs-3xl); }
.ngf-prose h3 { font-size: var(--ngf-fs-2xl); }
.ngf-prose h4 { font-size: var(--ngf-fs-xl); }
.ngf-prose ul, .ngf-prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.ngf-prose li { margin: 0.3em 0; }
.ngf-prose img { max-width: 100%; height: auto; }
.ngf-prose iframe { max-width: 100%; }
/* filter_align (core) adds these classes to the data-align'd element —
   images, embedded videos, blockquotes, etc. — but ships no CSS of its own. */
.ngf-prose .align-center { text-align: center; }
/* Images/videos are forced to display:block sitewide (base.css), which takes
   them out of inline flow — text-align on the wrapper has no effect on them,
   so center them directly via margin instead. */
.ngf-prose .align-center,
.ngf-prose .align-center img,
.ngf-prose .align-center video {
  margin-left: auto;
  margin-right: auto;
}
.ngf-prose .align-left { float: left; margin: 0 var(--ngf-sp-6) var(--ngf-sp-4) 0; }
.ngf-prose .align-right { float: right; margin: 0 0 var(--ngf-sp-4) var(--ngf-sp-6); }
/* filter_caption (core) wraps data-caption'd media in <figure>/<figcaption>;
   ships no CSS of its own. Match the .ngf-image__caption pattern. */
.ngf-prose figure { margin: 0 0 1.1em; }
.ngf-prose figcaption {
  margin-top: var(--ngf-sp-2);
  font-family: var(--ngf-font-mono);
  font-size: var(--ngf-fs-xs);
  color: var(--ngf-fg-3);
  /* No text-align of its own — inherits from the figure, so a caption on a
     centered image (.align-center) centers with it; left-aligned/unaligned
     images keep the default left alignment. */
}
.ngf-prose blockquote {
  margin: 1.4em 0;
  padding-left: var(--ngf-sp-5);
  border-left: 3px solid var(--ngf-border-strong);
  color: var(--ngf-ink-900);
}

/* Tags */
.ngf-article__tags {
  margin-top: var(--ngf-sp-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ngf-sp-2) var(--ngf-sp-3);
  align-items: center;
}
.ngf-article__tags-label {
  font-family: var(--ngf-font-mono);
  font-size: var(--ngf-fs-xs);
  letter-spacing: var(--ngf-tr-caps);
  text-transform: uppercase;
  color: var(--ngf-fg-3);
}
.ngf-article__tag {
  font-size: var(--ngf-fs-sm);
  color: var(--ngf-link);
  text-decoration: none;
  border: 1px solid var(--ngf-border-strong);
  border-radius: var(--ngf-r-sm);
  padding: 4px 10px;
}
.ngf-article__tag:hover { background: var(--ngf-bone); }

/* Inline moderation control (editors only) sits clear of the content. */
.ngf-article .content-moderation-entity-moderation-form { margin-top: var(--ngf-sp-12); }