/* ═══════════════════════════════════════════════════════════════════════════
   Homepage "News" section
   ───────────────────────────────────────────────────────────────────────────
   SiteOrigin row #pg-7-2: a post-loop widget rendering
   template-parts/content-news-teaser.php. The markup is left alone and the
   cards are restyled here, scoped to #pg-7-2 so the archive is unaffected.

   Card anatomy (unchanged markup):
     .col-md-3 > article.teaser-loop
        .image > a > img            wide cover
        .entry-meta                 .post-type ("news -") + .posted-on (date)
        h3.entry-title > a          headline

   Design intent: same language as the Resources shelf (#pg-7-3): white card,
   hairline border, 8px radius, short red tab, quiet "Read more" cue. The
   "news -" label repeats the section heading, so it is hidden; the date is
   the only meta. The whole card is one link (stretched from the title anchor).

   The Customizer "Additional CSS" styles .teaser-loop with !important
   (glow, progress bar, scale hover, Arial). The properties below that fight
   it use !important, scoped to #pg-7-2#pg-7-2#pg-7-2.
   ═══════════════════════════════════════════════════════════════════════════ */

#pg-7-2#pg-7-2#pg-7-2 {
  --nws-ink:    #2c4143;
  --nws-slate:  #58707b;
  --nws-line:   #d8d8cd;
  --nws-face:   #ffffff;
  --nws-red:    #d60000;
  --nws-gap:    24px;
  --nws-radius: 8px;
  --nws-ease:   cubic-bezier(.2, .8, .2, 1);
}

/* ── Section frame ──────────────────────────────────────────────────────── */
#pg-7-2#pg-7-2#pg-7-2 > .post-loop {
  background:var(--nws-face) !important;
  padding-top:64px !important;
  padding-bottom:72px !important;
}

#pg-7-2#pg-7-2#pg-7-2 #panel-7-2-0-1 {
  margin-bottom:40px !important;
}

/* ── The row: even gutters, equal heights, fills the row for 3 or 4 cards ── */
#pg-7-2#pg-7-2#pg-7-2 .panel-widget-style-for-7-2-0-1 {
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap:var(--nws-gap) !important;
  max-width:1200px !important;
  margin:0 auto !important;
  padding:0 16px !important;
}

#pg-7-2#pg-7-2#pg-7-2 .panel-widget-style-for-7-2-0-1::before,
#pg-7-2#pg-7-2#pg-7-2 .panel-widget-style-for-7-2-0-1::after {
  content:none !important;
}

#pg-7-2#pg-7-2#pg-7-2 .panel-widget-style-for-7-2-0-1 > [class*="col-"] {
  width:auto !important;
  max-width:none !important;
  flex:none !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop {
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:var(--nws-face) !important;
  border:1px solid var(--nws-line) !important;
  border-radius:var(--nws-radius) !important;
  overflow:hidden !important;
  box-shadow:0 1px 2px rgba(44, 65, 67, .06) !important;
  filter:none !important;
  transition:transform .25s var(--nws-ease), box-shadow .25s var(--nws-ease), border-color .25s var(--nws-ease) !important;
}

/* Legacy glow overlay is neutralised. */
#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop::before {
  content:none !important;
  display:none !important;
}

#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop:hover,
#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop:focus-within {
  transform:translateY(-3px) !important;
  border-color:color-mix(in srgb, var(--nws-ink) 35%, var(--nws-line)) !important;
  box-shadow:0 10px 24px rgba(44, 65, 67, .12) !important;
}

/* ── Cover: wide, like the banners they are ─────────────────────────────── */
#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop .image {
  position:relative !important;
  flex:none !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  aspect-ratio:2 / 1 !important;
  overflow:hidden !important;
  background:color-mix(in srgb, var(--nws-ink) 6%, var(--nws-face)) !important;
  border-bottom:1px solid var(--nws-line) !important;
  border-radius:0 !important;
}

#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop .image a {
  display:block !important;
  position:absolute !important;
  inset:0 !important;
}

#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop .image img {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:0 !important;
  display:block !important;
  transition:transform .5s var(--nws-ease) !important;
}

#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop:hover .image img {
  transform:scale(1.03) !important;
}

/* ── Meta: just the date, with a short red tab ──────────────────────────── */
#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop .entry-meta {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
  padding:18px 20px 0 !important;
  background:none !important;
  font:600 11px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:var(--nws-slate) !important;
}

#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop .entry-meta::before {
  content:"" !important;
  flex:none !important;
  width:20px !important;
  height:3px !important;
  background:var(--nws-red) !important;
  border-radius:2px !important;
}

#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop .entry-meta .post-type {
  display:none !important;
}

#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop .entry-meta .posted-on,
#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop .entry-meta time {
  font:inherit !important;
  letter-spacing:inherit !important;
  text-transform:inherit !important;
  color:inherit !important;
}

/* ── Headline ───────────────────────────────────────────────────────────── */
#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop h3.entry-title {
  position:static !important;
  flex:1 1 auto !important;
  margin:0 !important;
  padding:12px 20px 56px !important;
  max-height:none !important;
  min-height:0 !important;
  background:none !important;
  font-family:"Lato", Helvetica, Arial, sans-serif !important;
  font-size:1.125rem !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
  text-align:left !important;
  text-transform:none !important;
  color:var(--nws-ink) !important;
}

/* Legacy animated progress bar is neutralised. */
#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop h3.entry-title::after {
  content:none !important;
  display:none !important;
}

#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop h3.entry-title a {
  font:inherit !important;
  color:inherit !important;
  text-decoration:none !important;
}

/* Whole-card link, stretched from the title anchor over the article. */
#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop h3.entry-title a::before {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
}

#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop h3.entry-title a:focus-visible {
  outline:none !important;
}

#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop h3.entry-title a:focus-visible::before {
  outline:3px solid var(--nws-ink) !important;
  outline-offset:-3px !important;
  border-radius:var(--nws-radius) !important;
}

/* Visible cue at the foot, aligned across cards of different title length. */
#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop::after {
  content:"Read more \2192" !important;
  display:block !important;
  position:absolute !important;
  left:20px !important;
  bottom:20px !important;
  top:auto !important;
  width:max-content !important;
  height:auto !important;
  margin:0 !important;
  padding:0 0 3px !important;
  font:700 .8125rem/1 "Lato", Helvetica, Arial, sans-serif !important;
  letter-spacing:.04em !important;
  white-space:nowrap !important;
  color:var(--nws-ink) !important;
  background:none !important;
  border-bottom:2px solid var(--nws-red) !important;
  opacity:1 !important;
  transform:none !important;
  transition:letter-spacing .25s var(--nws-ease) !important;
}

#pg-7-2#pg-7-2#pg-7-2 article.teaser-loop:hover::after {
  letter-spacing:.08em !important;
}

@media (prefers-reduced-motion: reduce) {
  #pg-7-2#pg-7-2#pg-7-2 article.teaser-loop,
  #pg-7-2#pg-7-2#pg-7-2 article.teaser-loop .image img,
  #pg-7-2#pg-7-2#pg-7-2 article.teaser-loop::after {
    transition:none !important;
  }
  #pg-7-2#pg-7-2#pg-7-2 article.teaser-loop:hover,
  #pg-7-2#pg-7-2#pg-7-2 article.teaser-loop:hover .image img {
    transform:none !important;
  }
}