/* =============================================================
   barrio_npm_prototype — announcement teaser card
   Used by the article_search view's page displays (currently
   page_by_news_or_event at /announcements/<news|events|our-stories>;
   Phase 2 adds type/pae/patai axes).

   Shares the base `.np-teaser` chrome from css/project-teaser.css —
   this file only adds the data-ct colour cascade (three warm-terracotta
   variants per D-A11), the .np-teaser-meta line, and the
   .np-teaser--featured promotion mark (D-A7).

   Per-row template: templates/views/_article-teaser.html.twig.
   ============================================================= */

/* --- Coloured top strip per class ------------------------------ */

.np-teaser[data-ct="article-news"]        .np-teaser-strip { background: var(--np-ct-article-news); }
.np-teaser[data-ct="article-events"]      .np-teaser-strip { background: var(--np-ct-article-events); }
.np-teaser[data-ct="article-our-stories"] .np-teaser-strip { background: var(--np-ct-article-our-stories); }

/* --- Badge tint per class -------------------------------------- */

.np-teaser--article .np-teaser-badge {
  color: #fff;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: .8125rem;
  font-weight: 600;
  align-self: flex-start;
}
.np-teaser[data-ct="article-news"]        .np-teaser-badge { background: var(--np-ct-article-news-dk); }
.np-teaser[data-ct="article-events"]      .np-teaser-badge { background: var(--np-ct-article-events-dk); }
.np-teaser[data-ct="article-our-stories"] .np-teaser-badge { background: var(--np-ct-article-our-stories-dk); }

/* --- CTA arrow tint per class ---------------------------------- */

.np-teaser[data-ct="article-news"]        .np-teaser-cta { color: var(--np-ct-article-news-dk); }
.np-teaser[data-ct="article-events"]      .np-teaser-cta { color: var(--np-ct-article-events-dk); }
.np-teaser[data-ct="article-our-stories"] .np-teaser-cta { color: var(--np-ct-article-our-stories-dk); }

/* --- Meta line (date / date+location / posted-date) ------------ */

.np-teaser--article .np-teaser-meta {
  font-size: .875rem;
  color: #6c6a63;
  margin: .25rem 0 .5rem;
}

/* --- Featured mark (D-A7) — small ★ pinned top-right, coloured
       with the News-tier hue since promotion is a News concept
       (Frontpage news item / Main Frontpage News Item) even when the
       article itself is bucketed as Events or Our Stories. */

.np-teaser--featured { position: relative; }
.np-teaser--featured::before {
  content: '★';
  position: absolute;
  top: 6px;
  right: 10px;
  color: var(--np-ct-article-news-dk);
  font-size: 1rem;
  line-height: 1;
  z-index: 2;
  text-shadow: 0 0 3px rgba(255,255,255,.8);
}

/* --- Article spotlight band — hero + smalls layout on the class
       listings (currently News; Events / Our Stories via Phase 2).
       Reuses the .np-spotlight-hero / .np-spotlight-small / .np-spotlight-grid
       chrome from css/patai-spotlight.css unchanged; only the article-scoped
       hue tint lives here. The hue cascade is driven by data-ct on the outer
       .np-article-spotlight wrapper — same pattern as .np-patai-spotlight[data-patai]
       in patai-spotlight.css, adapted for article classes. */

.np-article-spotlight {
  --hue:    #6c675f;
  --hue-dk: #2c2c2b;
  margin: 0 0 2rem;
  padding-block: 1.25rem 1.5rem;
  border-block: 1px solid #e4e0d8;
  background: linear-gradient(180deg, #fff, #f9f6f0);
}
.np-article-spotlight[data-ct="article-news"] {
  --hue:    var(--np-ct-article-news);
  --hue-dk: var(--np-ct-article-news-dk);
}
.np-article-spotlight[data-ct="article-events"] {
  --hue:    var(--np-ct-article-events);
  --hue-dk: var(--np-ct-article-events-dk);
}
.np-article-spotlight[data-ct="article-our-stories"] {
  --hue:    var(--np-ct-article-our-stories);
  --hue-dk: var(--np-ct-article-our-stories-dk);
}

.np-article-spotlight .np-spotlight-heading {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--hue-dk);
}
.np-article-spotlight .np-spotlight-heading-sep {
  color: #b8b0a5;
  font-weight: 400;
}

/* Image area on row tiles is deliberately omitted (both the
   background-image div and the placeholder gradient variant) — see the
   inline comment in _article-teaser.html.twig. Images + tukutuku
   fallbacks are reserved for the spotlight band above the search box
   (_article-spotlight-card.html.twig). The .np-teaser-strip coloured
   top bar still identifies the class per row. */