/* ══════════════════════════════════════════════════════════════
   News index. Type only hero, one lead post, then a three across
   grid. The lead media and the card media share a 16:10 ratio, so
   a single export at 1600 x 1000 works in either position.
   ══════════════════════════════════════════════════════════════ */

/* Background classes. homepage.css does not define these, so a section
   carrying on-ivory or on-stone silently falls through to the body colour
   and the whole page reads as one flat field. Every page sheet declares
   its own set. The ghost and eyebrow variables ride along, so buttons and
   eyebrows invert correctly on the dark sections. */
.on-green{background:var(--green);color:var(--ivory);
  --ghost:var(--ivory);--ghost-hb:var(--ivory);--ghost-hf:var(--green-deep);
  --alink-c:var(--brand-accent);--eyb-c:var(--brand-accent)}
.on-deep{background:var(--green-deep);color:var(--ivory);
  --ghost:var(--ivory);--ghost-hb:var(--ivory);--ghost-hf:var(--green-deep);
  --alink-c:var(--brand-accent);--eyb-c:var(--brand-accent)}
.on-ivory{background:var(--ivory)}
.on-stone{background:var(--stone)}
.on-white{background:#fff}

/* Shared bits every page stylesheet declares for itself. homepage.css loads
   sitewide and supplies the tokens, but not the placeholder system, and its
   section padding has to be neutralised on heroes that sit under the fixed
   navigation. */
.ph{position:relative;background:repeating-linear-gradient(45deg,rgba(31,91,71,.10) 0 14px,rgba(31,91,71,.03) 14px 28px);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.ph span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#7A6224;
  line-height:1.7;background:rgba(242,239,230,.86);border:1px dashed rgba(201,162,74,.75);padding:11px 15px}
img.ph{display:block;width:100%;height:100%;object-fit:cover;padding:0;background:none;border:0}
.ph.dark{background:repeating-linear-gradient(45deg,#20463a 0 14px,#1c4034 14px 28px)}
.ph.dark span{color:var(--brand-accent);background:rgba(23,63,50,.8)}

/* ══ 01 HERO ══ */
.nhero{padding:calc(var(--nav-h) + 86px) 0 60px;background:var(--green-deep);
  border-bottom:1px solid rgba(201,162,74,.4)}
.nhero h1{font-size:clamp(34px,4.4vw,60px);color:var(--ivory);max-width:16ch;margin-top:16px}
.nhero .eyebrow{color:var(--brand-accent)}
.nhero .dek{font-size:17px;color:rgba(242,239,230,.84);max-width:52ch;margin-top:20px}

/* ══ EMPTY ══ */
.nempty{padding:96px 0}
.nempty-copy{font-size:18px;color:var(--muted);max-width:52ch}
.nempty-copy a{color:var(--green);font-weight:700}

/* ══ 02 LEAD ══ */
.lead{padding:76px 0 0}
.lead-card{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border:1px solid rgba(31,91,71,.2);
  background:#fff;transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.lead-card:hover{border-color:rgba(201,162,74,.65);box-shadow:0 20px 44px rgba(23,63,50,.10)}
.lead-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--stone)}
.lead-media img{width:100%;height:100%;object-fit:cover}
.lead-media .ph{position:absolute;inset:0}
.lead-flag{position:absolute;top:0;left:0;z-index:2;background:var(--green-deep);color:var(--ivory);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;padding:8px 12px}
.lead-body{padding:52px 48px;display:flex;flex-direction:column;justify-content:center}
.lead-body h2{font-size:clamp(24px,2.8vw,36px);color:var(--green);max-width:20ch}
.lead-body .dek{font-size:16px;color:var(--muted);margin-top:16px;max-width:46ch}

.jmi-news .meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--quiet);margin-top:20px}
.jmi-news .alink{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--green)}
.jmi-news .alink .ar{transition:transform .35s var(--ease)}
.lead-card:hover .alink .ar,.ncard:hover .alink .ar{transform:translateX(7px)}

/* ══ 03 GRID ══ */
.nlist{padding:66px 0 96px}
.nlist-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:20px;border-bottom:1px solid rgba(31,91,71,.22);flex-wrap:wrap}
.nlist-head h2{font-size:clamp(20px,2.1vw,26px);color:var(--green)}
.nlist-count{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--quiet)}
.ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px;margin-top:40px}
.ncard{background:#fff;border:1px solid rgba(31,91,71,.18);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.ncard:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(23,63,50,.12);
  border-color:rgba(201,162,74,.6)}
.ncard-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--stone)}
.ncard-media img{width:100%;height:100%;object-fit:cover}
.ncard-media .ph{position:absolute;inset:0}
.ncard-body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.ncard h3{font-size:20px;color:var(--green);line-height:1.25}
.ncard .dek{font-size:15px;color:var(--muted);margin-top:11px;flex:1}

/* ══ PAGER ══ */
.pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:56px;flex-wrap:wrap}
.pager .page-numbers{min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(31,91,71,.34);font-size:13px;font-weight:700;color:var(--green);padding:0 12px;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.pager .page-numbers:hover,.pager .page-numbers.current{background:var(--green);color:var(--ivory);
  border-color:var(--green)}
.pager .page-numbers.dots{border:0}

/* ══ 04 CLOSE ══ */
.nclose{padding:0;position:relative;height:clamp(300px,32vw,420px);overflow:hidden;background:var(--green-deep)}
.nclose img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nclose::after{content:"";position:absolute;inset:0;background:rgba(23,63,50,.58)}
.nclose-over{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:0 var(--pad)}
.nclose-over h2{font-size:clamp(24px,3vw,40px);color:var(--ivory);max-width:22ch;margin-top:14px}
.nclose-over .eyebrow{color:var(--brand-accent)}
.nclose-over .btns{justify-content:center}
.nclose-over .btn-ghost{color:var(--ivory)}
.nclose-over .btn-ghost:hover{background:var(--ivory);color:var(--green-deep)}

@media(max-width:1024px){
  .lead-card{grid-template-columns:1fr}
  .lead-body{padding:40px var(--pad)}
  .ngrid{grid-template-columns:1fr 1fr}
  .nlist{padding:52px 0 72px}
}
@media(max-width:640px){
  .nhero{padding:calc(var(--nav-h) + 56px) 0 44px}
  .ngrid{grid-template-columns:1fr}
  .lead{padding:52px 0 0}
}