/* =============================================================
   barrio_npm_prototype — landing submenu (spotlight cards)

   The <div id="submenu"> block on landing/section pages
   (menu--main--landing.html.twig): a grid of L2 "spotlight" cards — a coloured
   header band (per-L2 --cluster-hue gradient + tukutuku frieze + bullet +
   title) over a white body (description + browse cue). L3 children reuse the
   same band treatment in the parent's hue: full mini-cards in the desktop
   active-row, compact band strips inline on mobile.

   HUE: one knob, --cluster-hue. Per-L2 colours come from
   css/landing-submenu-groups.css (name-based np-landing-group--<slug>, loaded
   after this file so it overrides); un-coloured items fall back to the single
   dark neutral set below. L3 carries its PARENT's np-landing-group--<slug>, so
   its band inherits the parent's hue. Everything (band gradient, active tint)
   derives from --cluster-hue via color-mix().

   Extracted from proto.css and restyled to the spotlight look — see
   landing-submenu-spotlight-restyle-plan.md (+ landing-submenu-color-groups-plan.md).
   ============================================================= */

.np-landing-submenu {
  margin: 2rem 0;
}

.np-landing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1rem;
}

/* Hue fallback — a single dark neutral ("awaiting colour") so every band stays
   legible with white text. Seeded groups override via
   css/landing-submenu-groups.css (specificity (0,2,0), loaded after). Replaces
   the old :nth-child blue/beige parity (restyle plan D-1). */
.np-landing-item { --cluster-hue: #6c675f; }

/* ---------- L2 spotlight card ---------- */
.np-landing-item--parent {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e0d8;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(40, 40, 40, .05), 0 6px 18px rgba(40, 40, 40, .06);
  transition: box-shadow .18s ease, transform .18s ease;
}
.np-landing-item--parent:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(40, 40, 40, .09), 0 16px 44px rgba(40, 40, 40, .10);
}

.np-landing-link {
  display: block;
  text-decoration: none;
  color: #1a1a1a;
}
.np-landing-item--parent > .np-landing-link {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Header band — hue gradient + tukutuku frieze + bullet + title. */
.np-landing-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.1rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cluster-hue), black 18%), var(--cluster-hue));
  overflow: hidden;
}
.np-landing-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/npm-pattern-white.png');
  background-repeat: no-repeat;
  background-position: 100% center;
  background-size: auto 260%;
  opacity: .18;
  pointer-events: none;
}
.np-landing-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
}
.np-landing-head .np-landing-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

/* White body — description + browse cue (cue pinned to the bottom). */
.np-landing-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
  padding: .85rem 1.1rem 1rem;
}
.np-landing-cue {
  margin-top: auto;
  align-self: flex-start;
  color: color-mix(in srgb, var(--cluster-hue), black 18%);
  font-weight: 700;
  font-size: .95rem;
}

/* Base title/desc. */
.np-landing-title {
  display: block;
  line-height: 1.25;
}
.np-landing-desc {
  display: block;
  font-size: .85rem;
  line-height: 1.4;
  color: rgba(0, 0, 0, .66);
}

/* Active trail — deepen the band + card border. */
.np-landing-item--parent.is-active-trail .np-landing-head {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cluster-hue), black 34%),
    color-mix(in srgb, var(--cluster-hue), black 12%));
}
.np-landing-item--parent.is-active-trail {
  border-color: color-mix(in srgb, var(--cluster-hue), black 12%);
}

/* ---------- L3 children — mini spotlight cards ----------
   Each L3 carries its parent L2's np-landing-group--<slug>, so its band shows
   the PARENT's --cluster-hue. Two presentations (viewport-exclusive):
     • Desktop active-row → full mini-card (band + white body).
     • Mobile inline (inside the L2 card) → compact band strip (body hidden). */
.np-landing-item--child > .np-landing-link {
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Scaled-down band (inherits the L2 .np-landing-head gradient + tukutuku). */
.np-landing-item--child .np-landing-head {
  padding: .45rem .7rem;
  gap: .45rem;
}
.np-landing-item--child .np-landing-head .np-landing-title {
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
}
.np-landing-item--child .np-landing-dot {
  width: 7px;
  height: 7px;
}
/* Softer, smaller tukutuku on the small band. */
.np-landing-item--child .np-landing-head::before {
  background-size: auto 170%;
  opacity: .14;
}

/* White body (desktop mini-card; hidden on the mobile strips). */
.np-landing-item--child .np-landing-body {
  padding: .5rem .7rem .6rem;
  gap: .3rem;
}
.np-landing-item--child .np-landing-desc {
  font-size: .78rem;
}

/* Active-trail L3 — deepen the band (matches the L2 treatment). */
.np-landing-item--child.is-active-trail .np-landing-head {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cluster-hue), black 34%),
    color-mix(in srgb, var(--cluster-hue), black 12%));
}
.np-landing-item.is-active-trail > .np-landing-link {
  font-weight: 600;
}

/* ---- Mobile inline children = compact band strips (no white body) ----
   White gap between strips separates same-hue siblings. */
.np-landing-children {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
}
.np-landing-children .np-landing-body {
  display: none;
}

/* Desktop: hide inline children — L3 discovery is via the active-row. */
@media (min-width: 992px) {
  .np-landing-children { display: none; }
}

/* ---------- Desktop active-row — full-width grid of mini-cards ---------- */
.np-landing-active-row {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .75rem;
}
.np-landing-active-row .np-landing-item--child {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e0d8;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(40, 40, 40, .05), 0 4px 12px rgba(40, 40, 40, .05);
  transition: box-shadow .2s ease, transform .2s ease;
}
.np-landing-active-row .np-landing-item--child > .np-landing-link {
  flex: 1;
}
.np-landing-active-row .np-landing-item--child:hover {
  box-shadow: 0 4px 10px rgba(40, 40, 40, .09), 0 12px 30px rgba(40, 40, 40, .08);
  transform: translateY(-2px);
}

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
  .np-landing-submenu { margin: 1rem 0; }
  .np-landing-list { grid-template-columns: 1fr; }
  /* Active row is redundant on mobile — cards render children inline. */
  .np-landing-active-row { display: none; }
}