/*
 * 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;
}

/* Inner card-body anchor (2026-11-12 two-sibling-anchor split — see
   documentation/e-panui-spotlight-cta-split-plan.md). Wraps the cover +
   body regions; carries the modal-trigger attrs. Inherits color + strips
   text-decoration so the card content doesn't look like a blue underlined
   link. Flex column + flex: 1 fills the wrapper's vertical space, pushing
   the sibling CTA to the bottom. */
.np-e-panui-spotlight-hero-main,
.np-e-panui-spotlight-small-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.np-e-panui-spotlight-hero-main:hover,
.np-e-panui-spotlight-small-main:hover,
.np-e-panui-spotlight-hero-main:focus,
.np-e-panui-spotlight-small-main:focus {
  color: inherit;
  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;
  /* Horizontal + bottom margin match the hero-body padding so the CTA
     (now a sibling of the main anchor at wrapper level, post-2026-11-12
     split) still visually sits within the card's interior. Negative top
     margin tightens the gap to the body quote. */
  margin: 16px 24px 24px;
  padding: 8px 16px;
  background: #2c2c2b;
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  /* Explicit text-decoration: none — CTA is now a real anchor
     (external link to field_read_online.url in a new window);
     browser default would underline it. */
  text-decoration: none;
}

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

.np-e-panui-spotlight-hero .np-cta-primary:hover,
.np-e-panui-spotlight-hero .np-cta-primary:focus {
  color: #fff;
  text-decoration: none;
}

.np-e-panui-spotlight-small .np-e-panui-spotlight-cta {
  display: inline-block;
  margin: auto 20px 20px;
  /* Horizontal + bottom margin match the small-body-wrap padding so the
     CTA sits visually inside the card interior (post-2026-11-12 split
     to sibling-anchor at wrapper level). */
  padding-top: 8px;
  font-size: 13px;
  color: #2c2c2b;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.np-e-panui-spotlight-small .np-e-panui-spotlight-cta:hover,
.np-e-panui-spotlight-small .np-e-panui-spotlight-cta:focus {
  color: #2c2c2b;
  text-decoration: underline;
}

/* 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;
  }
}