/* =============================================================
   barrio_npm_prototype — secondary "browse by project type" cluster
   Ported from prototypes/research-by-patai-landing.html (the
   secondary .cluster block, lines ~580–644). Renders on
   /research/our-research below the Pātai cluster. Hue tokens
   live in css/colors.css (--np-pt-*). Selectors are .np-* prefixed.
   ============================================================= */

/* ---------- cluster head + project-type legend ---------- */
.np-pt-cluster { margin: 0 0 50px; }
.np-pt-cluster-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding-bottom: 13px; margin-bottom: 22px;
  border-bottom: 1px solid #e4e0d8;   /* lighter than primary cluster */
}
.np-pt-cluster-head h2 {
  font-weight: 500; font-size: 19px; letter-spacing: -.2px;
  line-height: 1.15; margin: 0; color: #6c675f;  /* de-emphasised */
}
.np-pt-cluster-head h2 .np-en { font-weight: 400; color: #6c675f; }
.np-pt-cluster-head p {
  font-size: 14px; color: #6c675f; max-width: 520px; margin: 5px 0 0;
}

.np-pt-legend {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  font-size: 12.5px; color: #6c675f;
}
.np-pt-legend .np-lbl {
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: 11px;
}
.np-pt-legend .np-k { display: inline-flex; align-items: center; gap: 6px; }

/* Project-type dots (reuses .np-dot from patai.css) */
.np-d-pt-full       { background: var(--np-pt-full); }
.np-d-pt-scoping    { background: var(--np-pt-scoping); }
.np-d-pt-doctoral   { background: var(--np-pt-doctoral); }
.np-d-pt-internship { background: var(--np-pt-internship); }

/* ---------- Research Programmes lead banner ---------- */
.np-lead {
  display: flex; align-items: center; gap: 20px;
  background: var(--np-pt-full-dk); color: #fff;
  border-radius: 8px;
  padding: 18px 22px; margin-bottom: 18px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(40,40,40,.05), 0 6px 18px rgba(40,40,40,.06);
  transition: transform .18s, box-shadow .18s;
}
.np-lead:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(40,40,40,.09), 0 16px 44px rgba(40,40,40,.10);
  color: #fff;
}
.np-lead .np-lead-ico {
  flex: none; width: 60px; height: 60px;
  border-radius: 10px;
  background: rgba(255,255,255,.16);
  display: grid; place-items: center;
  font-size: 20px; font-weight: 600;
}
.np-lead .np-lead-tx { flex: 1; }
.np-lead h3 {
  font-weight: 600; font-size: 18px; letter-spacing: -.2px; margin: 0; color: #fff;
}
.np-lead .np-lead-gl {
  color: #d7e7e4; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 3px; display: block;
}
.np-lead p {
  color: #e2efed; font-size: 13px; margin: 5px 0 0; max-width: 620px;
}
.np-lead .np-lead-arw { flex: none; font-size: 20px; color: #cfe3df; }

/* ---------- tile grid ----------
   Target .view-content (the Drupal Views inner container) rather than
   .np-pt-grid itself. `{{ drupal_view() }}` wraps the rendered rows in
   .views-element-container > .view > .view-content > .views-row > .np-tile,
   so the grid container has to sit at .view-content for the rows (which
   become grid items) to lay out side-by-side. .np-pt-grid stays as a
   semantic wrapper and a selector hook. */
.np-pt-grid .view-content {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}

.np-tile {
  background: #fff;
  border: 1px solid #e4e0d8;
  border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(40,40,40,.05), 0 6px 18px rgba(40,40,40,.06);
  transition: transform .18s, box-shadow .18s;
  text-decoration: none; color: inherit;
}
.np-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(40,40,40,.09), 0 16px 44px rgba(40,40,40,.10);
  color: inherit;
}

/* Strip — coloured top edge keyed to the project type */
.np-tile-strip { height: 6px; }
.np-tile[data-t="full"]       .np-tile-strip { background: var(--np-pt-full); }
.np-tile[data-t="scoping"]    .np-tile-strip { background: var(--np-pt-scoping); }
.np-tile[data-t="doctoral"]   .np-tile-strip { background: var(--np-pt-doctoral); }
.np-tile[data-t="internship"] .np-tile-strip { background: var(--np-pt-internship); }

.np-tile-body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; flex: 1;
}

/* Type badge — pill at the top of the tile body */
.np-t-badge {
  align-self: flex-start;
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 9px; border-radius: 5px;
  color: #fff; margin-bottom: 10px;
}
.np-tile[data-t="full"]       .np-t-badge { background: var(--np-pt-full); }
.np-tile[data-t="scoping"]    .np-t-badge { background: var(--np-pt-scoping-dk); }
.np-tile[data-t="doctoral"]   .np-t-badge { background: var(--np-pt-doctoral); }
.np-tile[data-t="internship"] .np-t-badge { background: var(--np-pt-internship); }

.np-tile h3 {
  font-weight: 600; font-size: 15px; line-height: 1.2; margin: 0 0 6px;
}
.np-tile-desc {
  font-size: 12.5px; color: #6c675f; flex: 1; margin: 0;
}
.np-tile-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid #e4e0d8;
  font-size: 12px;
}
.np-tile-cnt { font-weight: 600; color: #2c2c2b; }
.np-tile-go  { color: var(--np-pt-full-dk); font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .np-pt-grid .view-content { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .np-pt-grid .view-content { grid-template-columns: 1fr; }
  .np-lead { flex-wrap: wrap; }
}