/* ==========================================================================
   FRONTGRADE  ·  fg2 NEWS AND INSIGHTS HUB
   The hub template's own layer. Everything here was authored as the
   page-local <style> block of the news comp and is carried over with its
   class names moved into the fg- namespace; no rule in tokens.css or
   components.css is redefined, and every colour is a token.
   Requires tokens.css and components.css to be loaded first.

   LAYOUT MODEL
   One 1200px container throughout. Bands alternate by hairline rule, not by
   surface, because every card on this page is --surface-raised and needs a
   --surface-base band underneath it to stay visible and to keep the kit's
   accent-tint hover inside AA.

   COLOUR METHOD
   Every pair below carries the WCAG 2.1 ratio computed from the sRGB
   relative luminance formula against the exact surface it sits on, with any
   alpha composited first. Same method tokens.css and components.css use, and
   the values are unchanged from the comp because the colours are.

   FOCUS
   No focus rule is written here. components.css already gives every link,
   button and input a two-tone ring (white inner, near-black outer, accent
   halo) that is measured against all four surfaces including this page's
   dark hero, so a page-local override would only weaken it. The controls
   below are native <a>, <button> and <input>, which is what that rule
   selects, and the search input keeps its own hover edge separate from it.

   MOTION
   The only motion on this page is the kit's own scroll reveal, driven by
   data-reveal and already gated on prefers-reduced-motion in components.css.
   The one page-local transition, the search field's border colour, is
   neutralised for reduced motion in section 8.

   BREAKPOINTS
   390 / 768 / 1024 / 1280 / 1600. The container and the kit grids own 1280
   and 1600; the rules below add what this page needs at 1024 and under, and
   section 8 states what each of the five widths resolves to.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO
   The kit media band supplies the geometry, the scrim and the copy column.
   These two rules only swap the placeholder well for a real image, exactly
   as the capability template does.
   -------------------------------------------------------------------------- */

.fg-news-media { position: absolute; inset: 0; overflow: hidden; }
.fg-news-media__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Breadcrumb ----------------------------------------------------------
   Sits in the hero copy column, over the media-band scrim. Measured against
   the worst case that scrim can produce (0.90 ink over the lightest point
   the image can reach, composited backdrop #0d0f17):
     --text-muted    5.45:1  AA   links and separators
     --text-primary 15.87:1  AAA  current page
   An 11px label plus 7px padding-block gives a 29px hit area.             */
.fg-news-crumbs { margin-bottom: var(--space-6); }
.fg-news-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  font-size: var(--fs-2xs);
  line-height: 1.4;
  letter-spacing: var(--ls-chip);
}
.fg-news-crumbs li { display: inline-flex; align-items: center; gap: var(--space-3); }
.fg-news-crumbs li + li::before { content: "/"; color: var(--text-muted); }
.fg-news-crumbs a,
.fg-news-crumbs [aria-current="page"] {
  display: inline-block;
  padding-block: 7px;
  text-decoration: none;
}
.fg-news-crumbs a { color: var(--text-muted); transition: var(--t-color); }
.fg-news-crumbs a:hover { color: var(--text-primary); }
.fg-news-crumbs [aria-current="page"] { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* --- Current-page marker -------------------------------------------------
   aria-current="page" belongs on the links that ARE this page: the News &
   Insights item in the primary navigation, which the kit already styles, and
   the All News & Insights entry in the footer, which it does not. Both
   states pair colour with a second cue.
     --accent on --surface-base, the footer                   5.22:1  AA   */
.fg-footer__link[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* In-page destinations clear the fixed header when jumped to. */
.fg-news-anchor { scroll-margin-top: calc(var(--header-offset) + var(--space-6)); }

/* --------------------------------------------------------------------------
   2. FEATURED STORIES
   One lead story beside two stacked briefs. The side column divides its
   height evenly so the three cards share one outer edge on both sides.
   -------------------------------------------------------------------------- */

.fg-news-featured {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
  align-items: stretch;
}
.fg-news-featured__side {
  display: grid;
  gap: var(--grid-gap);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

/* The lead is only wider than the briefs while there is room for both; at
   1024 the three cards stack into one column of full-width lead plus a pair,
   and at 640 into a single file. */
@media (max-width: 1024px) {
  .fg-news-featured { grid-template-columns: minmax(0, 1fr); }
  .fg-news-featured__side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
}
@media (max-width: 640px) {
  .fg-news-featured__side { grid-template-columns: minmax(0, 1fr); }
}

/* Image frame. Holds a fixed aspect box so real art and the kit placeholder
   are interchangeable without moving anything below the fold. */
.fg-news-lead__media {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-bottom: var(--border-hairline-w) solid var(--border-hairline);
}
.fg-news-lead__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.fg-news-lead .fg-card__body { gap: var(--space-4); padding: clamp(20px, 1.1rem + 1vw, 30px); }
/* The lead story's title takes the h3 role, which is what the element is. It
   used to state a bespoke 22 -> 32 clamp that matched no token on the scale.
   The lead still reads ahead of the briefs beside it, which sit at the --fs-h4
   role, so the editorial order of the page is unchanged. */
.fg-news-lead .fg-card__title { font-size: var(--fs-h3); }

/* Category badge over date, on one wrapping line. */
.fg-news-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

/* Lead dek. --text-muted on --surface-raised 5.31:1 AA, and 5.11:1 under the
   kit's 5% accent hover tint on the same card, so it clears AA in both
   resting and hover states. */
.fg-news-lead__dek {
  font-size: var(--fs-xs);
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 64ch;
  text-wrap: pretty;
}

.fg-news-brief .fg-card__body { gap: var(--space-3); }
.fg-news-brief .fg-card__title {
  font-size: var(--fs-h4);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}
.fg-news-brief:hover .fg-card__title,
.fg-news-brief:focus-within .fg-card__title { color: var(--accent); }

/* --------------------------------------------------------------------------
   3. FILTER BAR
   Search field left, category chips right, result count on its own row
   beneath both so the count never squeezes the chips at 768px.
   -------------------------------------------------------------------------- */

.fg-news-filters {
  display: grid;
  gap: clamp(16px, 0.9rem + 1vw, 28px);
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  align-items: end;
}
@media (max-width: 900px) {
  .fg-news-filters { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
}

.fg-news-search { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
/* Form label. The kit's .fg-label is a muted column title; a field label
   earns the lift, for the same reason a form field is not a column.
     --text-primary on --surface-base  16.22:1  AAA */
.fg-news-search .fg-label { color: var(--text-primary); }
.fg-news-search__field { position: relative; display: flex; align-items: center; }
.fg-news-search__icon {
  position: absolute;
  left: 13px;
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  color: var(--stroke-quiet);              /* 4.04:1 on --surface-panel, decorative glyph */
  pointer-events: none;
}
/* The field sits on --surface-panel, so the placeholder token computes 4.99:1
   and the entered value 14.55:1. The boundary is a functional stroke at
   3.50:1, clearing the 3:1 non-text minimum. */
.fg-news-search__input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  background: var(--surface-panel);
  border: var(--border-hairline-w) solid var(--border-ui);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.2;
  color: var(--text-primary);
  transition: var(--t-color);
  -webkit-appearance: none;
  appearance: none;
}
.fg-news-search__input::placeholder { color: var(--text-muted); opacity: 1; }
.fg-news-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.fg-news-search__input:hover { border-color: var(--border-strong); }

/* Chip group. The kit already styles .fg-chip and its aria-pressed state
   (accent fill, --text-on-accent label at 5.22:1). The check glyph below is
   the second, non-colour cue the selected state needs. */
.fg-news-chipgroup { min-width: 0; }
.fg-news-chip__check { width: 12px; height: 12px; flex: none; display: none; }
.fg-chip[aria-pressed="true"] .fg-news-chip__check { display: block; }

/* Result row. The count is the live region, so it is a single text node that
   is rewritten whole rather than a set of spans. */
.fg-news-resultbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-top: clamp(24px, 1.3rem + 1.2vw, 36px);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-hairline-w) solid var(--border-hairline);
}
/* --text-muted on --surface-base 5.57:1 AA, --text-primary 16.22:1 AAA. */
.fg-news-count {
  font-size: var(--fs-2xs);
  line-height: 1.4;
  letter-spacing: var(--ls-chip);
  color: var(--text-muted);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   4. ARTICLE GRID
   -------------------------------------------------------------------------- */

.fg-news-grid { margin-top: clamp(24px, 1.3rem + 1.2vw, 36px); }
/* .fg-card sets display:flex, which outranks the [hidden] default, so the
   filtered-out state needs an explicit rule. */
.fg-news-grid .fg-card[hidden] { display: none; }

.fg-news-item .fg-card__body { gap: var(--space-3); }
.fg-news-item .fg-card__title {
  font-size: var(--fs-h4);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  line-height: 1.42;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}
.fg-news-item:hover .fg-card__title,
.fg-news-item:focus-within .fg-card__title { color: var(--accent); }
.fg-news-item__dek {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-muted);               /* 5.31:1 on --surface-raised */
}
.fg-news-item .fg-chip-row { margin-top: var(--space-1); }

/* Empty state. Sits in the grid's place, so it spans the full container. It
   is rendered hidden when the page has articles and revealed by script when a
   filter narrows to nothing; with the archive itself empty it is rendered
   without the attribute and is the page's answer on its own. */
.fg-news-empty {
  margin-top: clamp(24px, 1.3rem + 1.2vw, 36px);
  padding: clamp(32px, 1.8rem + 2vw, 56px) var(--gutter);
  background: var(--surface-raised);
  border: var(--border-hairline-w) solid var(--border-hairline);
  text-align: center;
}
.fg-news-empty[hidden] { display: none; }
.fg-news-empty__text {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);               /* 5.31:1 on --surface-raised */
}

/* --------------------------------------------------------------------------
   5. PAGINATION
   Server-side. Every control is a real link to a real page of the archive, so
   the pager works with script off; script only steps it aside while a filter
   is narrowing the current page, because the totals it states are the
   archive's and not the filtered set's.
   -------------------------------------------------------------------------- */

.fg-news-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-top: clamp(28px, 1.5rem + 1.4vw, 44px);
  padding-top: clamp(20px, 1.1rem + 1vw, 28px);
  border-top: var(--border-hairline-w) solid var(--border-hairline);
}
.fg-news-pager[hidden] { display: none; }
.fg-news-pager__range {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-chip);
  text-transform: uppercase;
  color: var(--text-muted);               /* 5.57:1 on --surface-base */
}
.fg-news-pager__pages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* 36px square minimum on every control. Label --text-primary 16.22:1 AAA on
   --surface-base; the resting edge is the kit's decorative hairline and the
   state is carried by fill and by aria-current, not by the edge. */
.fg-news-pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding-inline: var(--space-3);
  background: transparent;
  border: var(--border-hairline-w) solid var(--border-hairline-strong);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-chip);
  color: var(--text-primary);
  text-decoration: none;
  transition: var(--t-color);
}
.fg-news-pager__link:hover { border-color: var(--border-accent); color: var(--accent); }  /* 5.22:1 */
/* Current page. --text-on-accent on --accent 5.22:1 AA. */
.fg-news-pager__link[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}
.fg-news-pager__link[aria-current="page"]:hover { color: var(--text-on-accent); }
/* Unavailable step. Out of the tab order because it is a span, not a link.
   --stroke-quiet on --surface-base computes 4.50:1, so the label stays
   legible even though no minimum applies to an inactive control. */
.fg-news-pager__step[aria-disabled="true"] {
  color: var(--stroke-quiet);
  border-color: var(--border-hairline-faint);
}

/* --------------------------------------------------------------------------
   6. UTILITY BAND
   Three panels across: media contact, an organizational perspective, and the
   upcoming events list.
   -------------------------------------------------------------------------- */

.fg-news-panel .fg-card__body { gap: var(--space-5); padding: clamp(22px, 1.2rem + 1vw, 30px); }

.fg-news-role {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
  color: var(--text-display);             /* 17.08:1 on --surface-raised */
}
.fg-news-role__note {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-muted);               /* 5.31:1 on --surface-raised */
}

.fg-news-contact { display: grid; gap: var(--space-3); }
.fg-news-contact li { display: flex; align-items: center; gap: var(--space-3); }
.fg-news-contact svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  color: var(--accent);                   /* 4.98:1 on --surface-raised, decorative glyph */
}
.fg-news-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--fs-small);
  color: var(--text-primary);             /* 15.47:1 on --surface-raised */
  text-decoration: none;
  transition: var(--t-color);
  overflow-wrap: anywhere;
}
.fg-news-contact a:hover { color: var(--accent); }   /* 4.98:1 */

/* Pull quote. --text-primary at 15.47:1 on --surface-raised. */
.fg-news-quote {
  font-size: clamp(0.9375rem, 0.88rem + 0.24vw, 1.125rem);
  line-height: 1.62;
  font-style: italic;
  color: var(--text-primary);
  text-wrap: pretty;
}
/* The quote's words sit in a paragraph inside the blockquote, and the legacy
   global sheet carries `body p { color: rgb(18,18,18) }` and
   `body blockquote p:first-child { font-size: 2.25rem }`. Both outrank what the
   blockquote hands down by inheritance, so the paragraph resolved to #121212 at
   36px on the card's #0e1220 ground: 1.00:1, invisible, measured on /news at
   1440 and at 390 on 2026-08-17. Taking the quote's own colour and type back
   puts it at 15.47:1. */
.fg-news-quote p,
body blockquote.fg-news-quote p:first-child {
  font: inherit;
  color: inherit;
}

.fg-news-quote__cite {
  display: block;
  margin-top: var(--space-5);
  font-style: normal;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);               /* 5.31:1 on --surface-raised */
}

.fg-news-events { display: grid; gap: var(--space-5); }
/* A 2px accent edge, not a bullet. --accent against --surface-raised is
   4.98:1, well clear of the 3:1 non-text minimum. */
.fg-news-events li { padding-left: var(--space-4); border-left: 2px solid var(--accent); }
.fg-news-events__name {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--text-primary);             /* 15.47:1 on --surface-raised */
}
.fg-news-events__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin-top: var(--space-2);
}
.fg-news-events__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-2xs);
  line-height: 1.4;
  color: var(--text-muted);               /* 5.31:1 on --surface-raised */
}
.fg-news-events__meta svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: currentColor;
  color: var(--stroke-quiet);             /* 4.30:1 on --surface-raised, decorative */
}

/* --------------------------------------------------------------------------
   7. SMALL SCREENS
   At 560 and under the two rows that space their contents apart have nothing
   left to space them with, so they close up to the leading edge instead of
   leaving a gap the eye reads as a missing control.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .fg-news-resultbar { justify-content: flex-start; }
  .fg-news-pager { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   8. WHAT EACH WIDTH RESOLVES TO, AND REDUCED MOTION

   1600 and 1280  the container is at its 1200px cap and the page is the comp:
                  lead plus two stacked briefs, four cards across, search
                  beside chips, count opposite the sort note.
   1024           the featured band stacks to lead over a pair of briefs; the
                  kit's own grid rules take the article grid down from four
                  columns. The filter bar is still two columns until 900.
   768            the filter bar is one column, search over chips, both full
                  width; the article grid is at the kit's tablet count.
   390            single file everywhere; the result row and the pager close
                  up to the leading edge and the pager wraps its controls onto
                  a second line rather than shrinking them below 36px.

   REDUCED MOTION. The kit disables the scroll reveal globally. The one
   page-local transition left is the search field's hover edge, which is a
   colour change on a control and not motion, but it is dropped here anyway so
   that this page adds nothing at all under the preference.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fg-news-crumbs a,
  .fg-news-search__input,
  .fg-news-contact a,
  .fg-news-pager__link { transition: none; }
}