/* ════════════════════════════════════════════════════════════════
   NEWSROOM ARCHIVE Widget (self-scoped, no body class needed)
   Reference render: html/Newsroom Article Index Summary Page/newsroom-index.html
   Class prefix: hec-nr-* (filter pills, featured lead, grid cards, load more)
   Layout-only CSS: background, outer padding, and section spacing are
   controlled by Elementor (drop the widget into a section and set those
   there). Card / featured layout (image-left vs image-top) and the grid
   column count + gap are driven by CSS custom properties that Elementor
   sets per breakpoint via responsive controls — no hardcoded breakpoints
   for layout here.
   ════════════════════════════════════════════════════════════════ */

.hec-nr-root{
  /* Cream surface tokens — match chassis CSS exactly */
  --hec-nr-cream:#F6EEDE;
  --hec-nr-cream-deep:#F0E4D4;
  --hec-nr-rule:rgba(166,106,61,0.22);
  --hec-nr-rule-strong:rgba(166,106,61,0.45);
  /* Brand tokens — values pulled verbatim from html/.../home.css */
  --hec-nr-navy:#1E2A38;
  --hec-nr-mesa:#E8D9C5;
  --hec-nr-buffalo:#5A3E2B;
  --hec-nr-saddle:#A66A3D;
  --hec-nr-saddle-deep:#8A5631;
  --hec-nr-gold:#C9A84C;
  --hec-nr-gold-bright:#D4B060;
  --hec-nr-gold-dark:#9E7C2E;
  --hec-nr-gold-soft:#AA7E37;
  /* Typography surface */
  --hec-nr-txt-warm:#2B1F14;
  --hec-nr-txt-warm-m:#5A4632;
  --hec-nr-txt-warm-f:#8A7560;
  /* Font stacks — chassis loads these globally; widget never enqueues */
  --hec-nr-display:'Playfair Display',Georgia,serif;
  --hec-nr-body:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  --hec-nr-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* .hec-nr-inner ships no width or background — Elementor section /
   container holds the wrapper width, padding, and background. */

/* ── FILTER BAR (lives inside .hec-nr-inner) ── */
.hec-nr-filter{margin-bottom:48px}
.hec-nr-filter-inner{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding-bottom:34px;border-bottom:1px solid var(--hec-nr-rule)}
.hec-nr-pill{font-family:var(--hec-nr-mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--hec-nr-saddle-deep);background:rgba(255,255,255,0.5);border:1px solid var(--hec-nr-rule-strong);padding:9px 18px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.hec-nr-pill:hover{background:rgba(255,255,255,0.9);color:var(--hec-nr-gold-dark)}
.hec-nr-pill[aria-pressed="true"],
.hec-nr-pill.is-active,
.hec-nr-pill[aria-current="page"]{background:var(--hec-nr-navy);color:var(--hec-nr-mesa);border-color:var(--hec-nr-navy)}
.hec-nr-pill:focus-visible{outline:2px solid var(--hec-nr-gold-bright);outline-offset:2px}
/* Anchor pills behave like buttons but never carry underline. */
a.hec-nr-pill{text-decoration:none}

/* ── FEATURED LEAD CARD
   Columns + image aspect/min-height/border come from CSS variables that
   Elementor's "Featured Layout" responsive control rewrites per breakpoint
   via selectors_dictionary. */
.hec-nr-feature{
  display:grid;
  grid-template-columns:var(--hec-nr-feat-cols, 1.42fr 1fr);
  background:rgba(255,255,255,0.55);
  border:1px solid var(--hec-nr-rule-strong);
  text-decoration:none;
  margin-bottom:40px;
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
}
.hec-nr-feature:hover{transform:translateY(-3px);box-shadow:0 18px 46px rgba(30,42,56,0.16)}
.hec-nr-feature-img{
  overflow:hidden;
  aspect-ratio:var(--hec-nr-feat-img-aspect, auto);
  min-height:var(--hec-nr-feat-img-min, 340px);
  border-style:solid;
  border-color:var(--hec-nr-rule);
  border-width:var(--hec-nr-feat-img-border-w, 0 1px 0 0);
}
.hec-nr-feature-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.hec-nr-feature:hover .hec-nr-feature-img img{transform:scale(1.035)}
.hec-nr-feature-body{padding:clamp(28px,3.4vw,52px) clamp(26px,3.2vw,48px);display:flex;flex-direction:column;justify-content:center}
.hec-nr-feature-eyebrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.hec-nr-feature-flag{font-family:var(--hec-nr-mono);font-size:0.64rem;font-weight:400;letter-spacing:0.16em;text-transform:uppercase;color:var(--hec-nr-gold-bright);background:rgba(201,168,76,0.10);border:1px solid rgba(201,168,76,0.55);padding:5px 12px}
.hec-nr-feature-cat{font-family:var(--hec-nr-mono);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--hec-nr-gold-dark)}
.hec-nr-feature-title{font-family:var(--hec-nr-display);font-weight:500;font-size:clamp(1.55rem,2.7vw,2.35rem);line-height:1.13;letter-spacing:-0.012em;color:var(--hec-nr-txt-warm);margin:0 0 18px}
.hec-nr-feature-dek{font-family:var(--hec-nr-body);font-weight:300;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.62;color:var(--hec-nr-txt-warm-m);margin:0 0 28px;max-width:50ch}
.hec-nr-feature-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:16px}
.hec-nr-feature-date{font-family:var(--hec-nr-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--hec-nr-txt-warm-f)}
.hec-nr-feature-more{font-family:var(--hec-nr-mono);font-size:0.74rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--hec-nr-saddle-deep);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hec-nr-feature-more::after{content:'→';font-size:1.05rem;letter-spacing:0;line-height:1;transition:transform .3s ease}
.hec-nr-feature:hover .hec-nr-feature-more{color:var(--hec-nr-buffalo)}
.hec-nr-feature:hover .hec-nr-feature-more::after{transform:translateX(4px)}
.hec-nr-feature:focus-visible{outline:2px solid var(--hec-nr-gold-bright);outline-offset:3px}

/* ── GRID
   `grid-template-columns` + `gap` are driven by Elementor responsive controls
   (Columns + Gap). The fallbacks here cover the case where Elementor hasn't
   set the variables (preview mode, no settings saved). */
.hec-nr-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
}
.hec-nr-grid .hec-nr-card[hidden]{display:none}

/* ── GRID CARD
   Card layout (image-top vs image-left) is set per breakpoint by Elementor's
   responsive Card Layout control; the dictionary writes CSS variables onto
   the card element. The default values here render "image_top" layout. */
.hec-nr-card{
  display:flex;
  flex-direction:var(--hec-nr-card-direction, column);
  background:rgba(255,255,255,0.55);
  border:1px solid var(--hec-nr-rule-strong);
  text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease;
}
.hec-nr-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(30,42,56,0.16)}
.hec-nr-card-img{
  overflow:hidden;
  flex:var(--hec-nr-card-img-flex, 0 0 auto);
  aspect-ratio:var(--hec-nr-card-img-aspect, 3 / 2);
  min-height:var(--hec-nr-card-img-min, 0);
  border-style:solid;
  border-color:var(--hec-nr-rule);
  border-width:var(--hec-nr-card-img-border-w, 0 0 1px 0);
}
.hec-nr-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.hec-nr-card:hover .hec-nr-card-img img{transform:scale(1.04)}
.hec-nr-card-body{
  display:flex;
  flex-direction:column;
  flex:var(--hec-nr-card-body-flex, 1 1 auto);
  padding:22px 22px 26px;
}
.hec-nr-card-cat{font-family:var(--hec-nr-mono);font-size:0.64rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--hec-nr-gold-dark);margin-bottom:11px}
.hec-nr-card-title{font-family:var(--hec-nr-display);font-weight:500;font-size:var(--hec-nr-card-title-size, 1.18rem);line-height:1.22;letter-spacing:-0.005em;color:var(--hec-nr-txt-warm);margin:0}
.hec-nr-card-foot{margin-top:auto;padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.hec-nr-card-date{font-family:var(--hec-nr-mono);font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--hec-nr-txt-warm-f)}
.hec-nr-card-more{font-family:var(--hec-nr-mono);font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--hec-nr-saddle-deep);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hec-nr-card-more::after{content:'→';font-size:1rem;letter-spacing:0;line-height:1;transition:transform .3s ease}
.hec-nr-card:hover .hec-nr-card-more{color:var(--hec-nr-buffalo)}
.hec-nr-card:hover .hec-nr-card-more::after{transform:translateX(3px)}
.hec-nr-card:focus-visible{outline:2px solid var(--hec-nr-gold-bright);outline-offset:3px}

/* ── EMPTY STATE ── */
.hec-nr-empty{display:none;text-align:center;padding:60px 20px 30px;font-family:var(--hec-nr-body);font-weight:300;font-size:1.1rem;color:var(--hec-nr-txt-warm-m)}
.hec-nr-empty.is-on{display:block}

/* ── LOAD MORE ── */
.hec-nr-more{margin-top:48px;text-align:center}
.hec-nr-more-btn{font-family:var(--hec-nr-mono);font-size:0.76rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--hec-nr-saddle-deep);background:rgba(255,255,255,0.5);border:1px solid var(--hec-nr-rule-strong);padding:14px 38px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.hec-nr-more-btn:hover{background:var(--hec-nr-navy);color:var(--hec-nr-mesa);border-color:var(--hec-nr-navy)}
.hec-nr-more-btn:focus-visible{outline:2px solid var(--hec-nr-gold-bright);outline-offset:2px}
.hec-nr-more[hidden]{display:none}
.hec-nr-end{margin-top:20px;text-align:center;font-family:var(--hec-nr-mono);font-size:0.74rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--hec-nr-txt-warm-f)}
.hec-nr-end[hidden]{display:none}

/* ── RESPONSIVE (cosmetic refinements ONLY — column counts and layout
   directions are NOT controlled here; Elementor responsive controls
   handle those per breakpoint). */
@media (max-width:620px){
  .hec-nr-filter-inner{gap:8px}
  .hec-nr-pill{font-size:0.66rem;padding:8px 13px}
  .hec-nr-feature-body{padding:26px 24px 30px}
}