/*
 * E-Pānui spotlight band (2026-07-14) — hero + 2 smalls above the
 * /publications/e-panui row grid. Rendered from $np_epanui_spotlight
 * in preprocess_views_view__e_panui_search.
 *
 * Text-only cards — e-pānui bundle has no cover image. Simpler than
 * the announcement / Whakaaweawe spotlight bands (which have photo
 * covers + tukutuku fallbacks).
 *
 * Layout: hero-left spanning both rows, 2 smalls stacked in the right
 * column at desktop; single-column stack at <768px.
 *
 * See documentation/e-panui-spotlight-landing-plan.md §8.
 */

.np-e-panui-spotlight {
  margin-bottom: 32px;
}

.np-e-panui-spotlight-head {
  margin-bottom: 16px;
}

.np-e-panui-spotlight-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #2c2c2b;
  letter-spacing: -0.2px;
}

/* Grid — hero-left + 2-smalls-right at desktop.
   Hero (first child) spans both rows so it takes the full left column.
   Smalls fill the right column stacked. Extra children (beyond 3) would
   spill into the right column's third row — currently the builder caps
   at 3 tiles, so this is defensive. */
.np-e-panui-spotlight-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-auto-rows: 1fr;
  gap: 20px;
}

.np-e-panui-spotlight-grid > *:first-child {
  grid-row: 1 / span 2;
}

.np-e-panui-spotlight-hero,
.np-e-panui-spotlight-small {
  display: flex;
  flex-direction: column;
  padding: 0;                     /* tukutuku cover caps the top flush */
  background: #f7f5ee;
  border-radius: 8px;
  overflow: hidden;               /* clip cover corners to card radius */
  color: #2c2c2b;
  text-decoration: none;
  transition: background-color .15s;
  height: 100%;
}

.np-e-panui-spotlight-hero:hover,
.np-e-panui-spotlight-small:hover {
  background: #efe9d9;
  color: #2c2c2b;
  text-decoration: none;
}

/* Body regions — pad here now that the outer anchor is padding: 0
   (moved so the tukutuku cover can flush against the top edge). */
.np-e-panui-spotlight-hero-body {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 24px;
  flex: 1 1 auto;
}

.np-e-panui-spotlight-small-body-wrap {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  flex: 1 1 auto;
}

/* Tukutuku cover — hero + small padding + label-size overrides.
   The shared .np-e-panui-cover base rules (background gradient +
   tukutuku PNG overlay + .np-cover-word label chrome) live in
   css/e-panui-teaser.css so both row cards and spotlight cards share
   them. Load order in barrio_npm_prototype.libraries.yml puts teaser
   BEFORE spotlight so the base is defined before these overrides.
   Same-file base + overrides split moved 2026-07-14 per the per-
   content-type file convention (css-organisation.md §2). */
.np-e-panui-spotlight-hero .np-e-panui-cover {
  padding: 22px 24px;
}
.np-e-panui-spotlight-hero .np-cover-word {
  font-size: 20px;
}

.np-e-panui-spotlight-small .np-e-panui-cover {
  padding: 14px 18px;
}
.np-e-panui-spotlight-small .np-cover-word {
  font-size: 15px;
}

.np-e-panui-spotlight-hero h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: #2c2c2b;
}

.np-e-panui-spotlight-small h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #2c2c2b;
}

.np-e-panui-spotlight-date {
  display: block;
  font-size: 13px;
  color: #8a8377;
  margin-bottom: 8px;
}

.np-e-panui-spotlight-quote {
  margin: 12px 0;
  padding: 0;
  border: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #575349;
  font-style: normal;
  flex: 1 1 auto;
}

/* Hero body_hero uses BodyTextExtractor::summaryOrTeaser — Markup with
   <p> wrappers when the summary sub-field is populated, plain text
   fallback otherwise. Normalise paragraph margins inside the blockquote
   so the Markup branch matches the plain-text branch visually. */
.np-e-panui-spotlight-quote p {
  margin: 0 0 8px;
}
.np-e-panui-spotlight-quote p:last-child {
  margin-bottom: 0;
}

/* Small-card body snippet — tighter than the hero pull-quote. Uses the
   same 140-char teaser as the row cards + hero for consistency. */
.np-e-panui-spotlight-small-body {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #575349;
  flex: 1 1 auto;
}

.np-e-panui-spotlight-hero .np-cta-primary {
  align-self: flex-start;
  margin-top: 16px;
  padding: 8px 16px;
  background: #2c2c2b;
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
}

.np-e-panui-spotlight-hero:hover .np-cta-primary {
  background: #4c4842;
}

.np-e-panui-spotlight-small .np-e-panui-spotlight-cta {
  display: inline-block;
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  color: #2c2c2b;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Contextual pen positioning — the outer .np-tile-region .contextual
   sits top-right; adjust if it overlaps the card's own top padding. */
.np-e-panui-spotlight .np-tile-region {
  position: relative;
  height: 100%;
}

@media (max-width: 767.98px) {
  /* Collapse to single column: hero on top, smalls stacked below. */
  .np-e-panui-spotlight-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .np-e-panui-spotlight-grid > *:first-child {
    grid-row: auto;
  }
  .np-e-panui-spotlight-hero {
    padding: 20px;
  }
  .np-e-panui-spotlight-hero h3 {
    font-size: 20px;
  }
}