/*
 * STN — "Latest from STN" homepage article column  ([stn_articles])
 *
 * Sits to the right of the market-feed embed in the homepage hero, so it is
 * styled as a dark panel: a white marketing card (brand §5) next to the dark
 * feed would read as a different page. Colours are brand tokens throughout —
 * "Dark panel" #1D2530 (§3) for the surface, STN Blue #4AA3D5 for the accent.
 *
 * §3.2: no green or red anywhere here. This is a marketing surface; on this
 * product those two colours mean gains and losses.
 *
 * Everything is scoped under .stn-articles because the parent theme (Salient)
 * styles bare <ol>/<li>/<a> aggressively — see the ELEMENT RESETS block.
 */

.stn-articles {
  /* Brand tokens (§3). Kept as custom properties so the panel can be
     re-skinned for a light section later without touching the rules. */
  --stn-a-surface:  #1D2530;              /* §3 "Dark panel" */
  --stn-a-border:   rgba(255, 255, 255, .10);
  --stn-a-headline: #F8F9FA;              /* §3 Grey 50 */
  --stn-a-muted:    #9AA6B2;              /* §3 STN Grey, lifted for dark ground */
  --stn-a-blue:     #4AA3D5;              /* §3 STN Blue */
  --stn-a-ease:     cubic-bezier(.22, .61, .36, 1);   /* §5.1 */

  box-sizing: border-box;
  width: 100%;
  /* The hero row is equal_height, so the column is as tall as the feed iframe
     beside it (866px, chosen so all three columns end level at 1920 — see
     docs/homepage-articles-column). Filling it keeps this reading as a panel rather than a
     short card floating on the gradient.
     ⚠️ This only resolves because of the .wpb_text_column rule at the bottom of
     this file — the column stretches to 882px but Salient's inner wrappers do
     not, so without it `height:100%` resolves against an auto-height parent
     and the card stops at its content (measured 731px against the feed). */
  height: 100%;
  background: var(--stn-a-surface);
  border: 1px solid var(--stn-a-border);
  border-radius: 6px;                     /* §5: 6px on cards */
  overflow: hidden;
}

.stn-articles *,
.stn-articles *::before,
.stn-articles *::after { box-sizing: border-box; }

.stn-articles__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;                          /* §5: 24px card padding */
}

/* ── Heading ────────────────────────────────────────────────────────────────
   §4.4 H2 is Bebas at 32px, and §4.2 requires display faces to be all caps.
   Bebas Neue is already enqueued site-wide, so this costs no extra request.
   Roboto Condensed is the fallback because it is what the rest of this page's
   headings currently render in — if Bebas ever stops loading, the column
   degrades into the page rather than into a system sans. */
.stn-articles__title {
  margin: 0 0 4px;
  padding: 0;
  font-family: "Bebas Neue", "Roboto Condensed", Impact, sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;                       /* §4.4 */
  letter-spacing: .01em;                  /* §4 display tracking */
  text-transform: uppercase;
  color: #FFFFFF;
}

/* Hairline under the heading, the same weight as the card border (§5). */
.stn-articles__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;                            /* §5: 2–3px blue underline, nothing heavier */
  margin-top: 10px;
  background: var(--stn-a-blue);
  border-radius: 2px;
}

/* ── ELEMENT RESETS ─────────────────────────────────────────────────────────
   Salient injects margin/padding into <p> and list markers into <ol>. This
   list uses <span> rather than <p> for exactly that reason: the theme forces
   `display: flow-root` on paragraphs, which silently kills -webkit-line-clamp
   (the same bug that made the mid-page replica's excerpts run two lines). */
.stn-articles__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  /* The column is taller than six rows need. Rows share the slack rather than
     bunching at the top and leaving a hole above the footer link. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.stn-articles__item {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}
.stn-articles__item + .stn-articles__item { border-top: 1px solid var(--stn-a-border); }

/* ── Row ────────────────────────────────────────────────────────────────────
   The whole row is one link so the hit target is the full block. */
.stn-articles__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 12px 8px 12px 0;
  text-decoration: none;
  border-bottom: 0;
  transition: transform 160ms var(--stn-a-ease),
              opacity   160ms var(--stn-a-ease);   /* §5.1: 120–320ms */
}
.stn-articles__link:hover,
.stn-articles__link:focus-visible { transform: translateY(-1px); border-bottom: 0; }  /* §5.1: lift 1px */
.stn-articles__link:focus-visible {
  outline: 2px solid var(--stn-a-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Meta line: category eyebrow + date. */
.stn-articles__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}

/* §4.4 Eyebrow — Open Sans 700, 12px, caps, +0.14em, blue. */
.stn-articles__cat {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stn-a-blue);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stn-articles__date {
  margin-left: auto;
  flex: none;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  color: var(--stn-a-muted);
  font-variant-numeric: tabular-nums;     /* §4.3 */
}

/* §4.4 sits this between H4 (Open Sans 600 / 18) and Body (400 / 16): a
   headline in a 380px rail needs the weight but not the size. */
.stn-articles__headline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--stn-a-headline);
  transition: color 160ms var(--stn-a-ease);
}
.stn-articles__link:hover .stn-articles__headline,
.stn-articles__link:focus-visible .stn-articles__headline { color: var(--stn-a-blue); }

/* Optional one-liner (excerpt="yes"). Off by default. */
.stn-articles__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.5;                       /* §4.4 body leading */
  color: var(--stn-a-muted);
}

/* ── Footer link ────────────────────────────────────────────────────────────
   A text link, not a button: §5 reserves filled buttons for primary actions
   and this is a secondary path off the hero. */
.stn-articles__more {
  /* align-self, not inline-flex: the parent is a flex column, so an inline-flex
     child is still stretched to the full line box by the theme's own <a> rules. */
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--stn-a-border);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 0;
  color: var(--stn-a-blue);
  transition: color 160ms var(--stn-a-ease);
}
.stn-articles__more:hover { border-bottom: 0; }
.stn-articles__more:hover,
.stn-articles__more:focus-visible { color: #FFFFFF; }
.stn-articles__more-arrow { transition: transform 160ms var(--stn-a-ease); }
.stn-articles__more:hover .stn-articles__more-arrow { transform: translateX(3px); }

/* ── Salient wrapper plumbing ───────────────────────────────────────────────
   The hero column is a stretched flex item at the row's full height, but the
   .wpb_text_column / .wpb_wrapper pair Salient nests inside it are auto-height
   block boxes. `height:100%` on the card therefore resolves against an
   auto-height parent and collapses to content height — measured 731px against
   the 882px feed beside it. Giving the two wrappers a height restores the
   chain. Verified live: 882 = 882.

   ⚠️ Scoped with :has() rather than a class on the row. Salient's vc_row
   SILENTLY DROPS `el_class` — the attribute is stored in the page content and
   never reaches the markup (verified on production 2026-09-02), so any rule
   hung off it is dead. Don't "simplify" this back to a class selector without
   checking the rendered DOM first. */
.wpb_text_column:has(> .wpb_wrapper > .stn-articles),
.wpb_text_column:has(> .wpb_wrapper > .stn-articles) > .wpb_wrapper { height: 100%; }

/* ── Responsive ─────────────────────────────────────────────────────────────
   Salient's vc_col-sm-* columns only stack below its own small breakpoint, so
   between roughly 690px and 1000px the hero would otherwise try to hold three
   columns. Force the row that contains this component to one column below
   1000px; :has() keeps it scoped so no other row on the site is affected.
   Browsers without :has() fall back to Salient's own stacking, which is the
   behaviour the page had before this component existed. */
@media (max-width: 999px) {
  .wpb_row:has(.stn-articles) .vc_column_container {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .stn-articles { margin-top: 24px; }
}

@media (max-width: 690px) {
  .stn-articles__inner { padding: 20px; }
  .stn-articles__title { font-size: 28px; }
  .stn-articles__headline { font-size: 15px; }
}

/* §5.1 — respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .stn-articles__link,
  .stn-articles__headline,
  .stn-articles__more,
  .stn-articles__more-arrow { transition: none; }
  .stn-articles__link:hover,
  .stn-articles__link:focus-visible { transform: none; }
}