/* =============================================================
   barrio_npm_prototype — views & content rendering
   View-list row tints, view-specific layouts, content image fields,
   content-block heading overrides.
   ============================================================= */

/* ---------- Content-area heading rules ----------
   Main-region linked headings styled as PT Sans underlined. Generalised
   from barrio_white's #block-barrio-white-content selectors. */

#main h2 a {
  font-family: 'PT Sans', sans-serif;
  font-weight: 400;
  font-size: 22px;
  text-decoration: underline;
  font-style: normal;
  text-align: left;
}

/* People view blocks — uppercase headings. Match any block whose machine
   name starts with views-blockpeople-, regardless of theme prefix. */
[class*='block-views-blockpeople-'] > h2 {
  text-transform: uppercase;
}

[class*='block-views-blockpeople-block-7'] .field--name-node-title h2 {
  padding-top: 0;
}

/* ---------- View-list row tints ----------
   Alternating beige/beige-lighter gradients on Projects and Taxonomy lists. */

.view-id-projects ul > li:nth-child(odd),
.view-id-taxonomy_term ul > li:nth-child(odd) {
  background: transparent;
}

.view-id-projects ul > li:nth-child(even),
.view-id-taxonomy_term ul > li:nth-child(even) {
  background: transparent;
}

.view-id-projects ul > li {
  padding-left: 1em;
}

.view-id-projects .node--view-mode-teaser {
  border: none;
}

.view-id-projects .node--view-mode-teaser.node--sticky {
  background-color: inherit;
  border-bottom: none;
}

.view-id-projects div.col-sm-3 {
  padding-top: 0;
}

div.col-sm-3 {
  padding-top: 1em;
}

/* Pager items always sit on a transparent background. Defends against any
   .view-id-X ul > li:nth-child(...) row-tint rule below leaking onto the
   pager <li class="page-item"> children inside <ul class="pagination">. */
.view .page-item {
  background-color: transparent;
}

.view-projects img {
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  border-style: none;
}

/* ---------- Embedded video / MAI group teaser row tints ---------- */

li.embedded-video:nth-child(odd),
li.mai-group-teaser:nth-child(odd) {
  background: linear-gradient(rgba(217, 202, 166, 0.1), rgba(217, 202, 166, 0));
}

li.embedded-video:nth-child(even),
li.mai-group-teaser:nth-child(even) {
  background: linear-gradient(rgba(201, 215, 209, 0.2), rgba(201, 215, 209, 0.1));
}

/* ---------- News views ---------- */

.view-id-frontpage {
  margin-left: 10px !important;
  display: none !important;
}

.view-id-news .view-display-id-block_3 {
  margin-left: 3em;
}

body.path-news-events .view-id-news div.col-sm-3 {
  background-color: white;
}

body.path-news-events .view-id-news ul li {
  padding-top: 0;
}

.block-views-exposed-filter-blocknews-page-1 {
  clear: both;
  float: right;
  padding-bottom: 2em;
}

.news-tier-1 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.news-tier-1 img {
  margin-left: 0%;
  margin-right: 25%;
}

button.btn.news-btn {
  width: 100%;
  border-bottom: 1px solid #fff;
}

.news-btn { font-weight: initial; }
.news-button-expand { color: black; }

.news-header {
  font-size: 0.8em;
}

/* ---------- NPM Grants & Awards row tints ----------
   Alternating odd/even row tints for the grants & awards listing. Scoped
   to the view itself (rather than body.path-*) so the tints apply wherever
   the view renders — /manaaki, /grants-filtered, /npm-grants-list, etc. */

.view-npm-grants-awards ul > li:nth-child(odd) {
  background: linear-gradient(rgba(217, 202, 166, 0.2), rgba(217, 202, 166, 0));
}

.view-npm-grants-awards ul > li:nth-child(even) {
  background: linear-gradient(rgba(201, 215, 209, 0.2), rgba(201, 215, 209, 0.1));
}

.view-npm-grants-awards div.row {
  padding-left: 0px;
}

.view-npm-grants-awards ul li {
  padding-top: 0;
}

#views-exposed-form-npm-grants-awards-page-1 > div > fieldset > label {
  font-size: 1.2rem;
  font-weight: 100;
  text-transform: uppercase;
}

/* ---------- Card-image overrides on view rows ---------- */

.view-projects img {
  vertical-align: middle;
  border-style: none;
}

.view-projects .card-img-top,
.view-news .card-img-top {
  margin-left: 0;
  min-height: 180px;
  max-height: 180px;
  overflow: hidden;
}

.view-frontpage .card-img {
  margin-left: 20px;
}

.view-projects .field--name-node-title h2 {
  font-size: 1.275rem;
}

.view-id-block_6.row {
  color: lightgray;
}

/* ---------- Teaser modes ---------- */

.node--view-mode-teaser.node--sticky {
  border: none;
  border-bottom: 1px solid #d3d7d9;
  margin-bottom: 30px;
  padding-bottom: 15px;
  background-color: #fff;
  padding: 0;
}

/* ---------- Image fields (people, featured, media) ---------- */

.field--name-field-person-image,
.field--name-field-featured-image {
  width: 100%;
  height: auto;
}

.field--name-field-person-image img,
.field--name-field-featured-image img {
  width: 100%;
  height: auto;
}

.field--name-field-media-image img {
  padding: 0.5em;
}

/* ---------- content_menu_block view ----------
   Shared typography rules apply to every display of the view (Knowledge
   Portal / Footer Sitemap / Research Block). Display-specific rules below
   are scoped via .view-display-id-block_N. */

.view-id-content_menu_block h2 {
  text-transform: uppercase;
  font-weight: 100;
}

.view-id-content_menu_block {
  font-weight: 100;
  font-size: 1rem;
  margin-left: 1em;
}

/* Research Block (block_3) — alternating odd/even row tints. Scoped to
   the view + display so the rule survives wherever the block is placed,
   regardless of which theme machine name Drupal bakes into the block
   plugin instance ID. */

.view-id-content_menu_block.view-display-id-block_3 ul > li:nth-child(odd) {
  background: linear-gradient(rgba(217, 202, 166, 0.1), rgba(217, 202, 166, 0));
}

.view-id-content_menu_block.view-display-id-block_3 ul > li:nth-child(even) {
  background: linear-gradient(rgba(165, 158, 150, 0.1), rgba(217, 202, 166, 0));
}

/* ---------- Other content miscellany ---------- */

#block-enquiries { margin-left: -5px; }

.annual-report-image {
  padding-top: 1.5em;
  padding-left: 5em;
}

/* News default view-mode image inside content layout — full-bleed. */
.layout__region--second .field--name-field-image > img {
  width: 100%;
  height: auto;
}

/* Centre the Views pager. .pagination is already display:flex from
   Bootstrap; only the justify-content needs setting. Scoped to .view so
   non-Views Bootstrap pagination elsewhere on the site keeps its default
   alignment. */
.view .pagination {
  justify-content: center;
}

/* ---- Listing headings + exposed search forms (moved from detail.css) ----
   .np-listing-title view header, and the people_search / project_search /
   global_search exposed-filter forms + the global-search result rows. */
/* Listing page heading — rendered as the view header (see the
   page_by_person_type header area); the type name is the page <h1>. */
.np-listing-title {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: clamp(23px, 3.4vw, 32px);
  line-height: 1.15;
  color: #2c2c2b;
}

/* Optional descriptive band under the listing heading, rendered when the
   backing term (person_type, publication_type, project_type, article
   news_or_event) carries a non-empty description. Peer of .np-listing-title;
   travels through the #np-browse-modal fetch because the modal extracts the
   whole view wrapper (browse-modal.js LISTING_SELECTOR). Text-format-rendered
   content, so `.np-listing-blurb p` needs its own margins. */
.np-listing-blurb {
  margin: -8px 0 20px;
  max-width: 62ch;
  color: #4b4a48;
  font-size: 1rem;
  line-height: 1.55;
}
.np-listing-blurb p { margin: 0 0 0.75rem; }
.np-listing-blurb p:last-child { margin-bottom: 0; }

/* Exposed search form on the per-role listing (people_search view) — sits
   between the <h1> and the card grid; a search input + Apply / Clear. Works
   the same standalone and inside the /our-people modal. */
.view-people-search .views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 0 0 24px;
}
.view-people-search .views-exposed-form .js-form-item {
  flex: 1 1 260px;
  margin: 0;
}
.view-people-search .views-exposed-form .form-actions {
  display: flex;
  gap: 8px;
  margin: 0;
}
.view-people-search .form-search,
.view-people-search .views-exposed-form input[type="text"] {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid #d8d2c6;
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
}
.view-people-search .form-search:focus,
.view-people-search .views-exposed-form input[type="text"]:focus {
  outline: none;
  border-color: var(--hue, #6c675f);
  box-shadow: 0 0 0 3px rgba(108, 103, 95, .14);
}
.view-people-search .views-exposed-form .button {
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.view-people-search .views-exposed-form .form-submit {
  background: #2c2c2b;
  color: #fff;
}
.view-people-search .views-exposed-form .form-submit:hover {
  background: #4c4842;
}
.view-people-search .views-exposed-form [id*="reset"] {
  background: #ece7dd;
  color: #2c2c2b;
}
.view-people-search .views-exposed-form [id*="reset"]:hover {
  background: #ddd6c8;
}

/* Pae / Pātai selects (Phase 3, Surface B) — derived research-area filters,
   sit beside the search box in the people_search exposed form. */
.view-people-search .views-exposed-form .form-item-search {
  flex: 1 1 240px;
}
.view-people-search .views-exposed-form .form-item-pae,
.view-people-search .views-exposed-form .form-item-patai {
  flex: 0 1 190px;
}
.view-people-search .views-exposed-form .form-item-pae > label,
.view-people-search .views-exposed-form .form-item-patai > label {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #6c675f;
}
.view-people-search .views-exposed-form select {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid #d8d2c6;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.3;
  background: #fff;
  color: #2c2c2b;
  cursor: pointer;
}
.view-people-search .views-exposed-form select:focus {
  outline: none;
  border-color: var(--hue, #6c675f);
  box-shadow: 0 0 0 3px rgba(108, 103, 95, .14);
}

/* Project listing exposed form (project_search, Phase 2) — search box + the
   Type / Pae / Pātai / Theme / Priority selects, laid out like the people one. */
.view-project-search .views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 0 0 24px;
}
.view-project-search .views-exposed-form .js-form-item {
  flex: 0 1 160px;
  margin: 0;
}
.view-project-search .views-exposed-form .form-item-search {
  flex: 1 1 220px;
}
.view-project-search .views-exposed-form .js-form-item > label {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #6c675f;
}
.view-project-search .views-exposed-form select,
.view-project-search .views-exposed-form input[type="text"] {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid #d8d2c6;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.3;
  background: #fff;
  color: #2c2c2b;
}
.view-project-search .views-exposed-form select {
  cursor: pointer;
}
.view-project-search .views-exposed-form select:focus,
.view-project-search .views-exposed-form input[type="text"]:focus {
  outline: none;
  border-color: var(--hue, #6c675f);
  box-shadow: 0 0 0 3px rgba(108, 103, 95, .14);
}
.view-project-search .views-exposed-form .form-actions {
  display: flex;
  gap: 8px;
  margin: 0;
}
.view-project-search .views-exposed-form .button {
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.view-project-search .views-exposed-form .form-submit {
  background: #2c2c2b;
  color: #fff;
}
.view-project-search .views-exposed-form [id*="reset"] {
  background: #ece7dd;
  color: #2c2c2b;
}

/* Cross-bundle global search results (/search-research, global_search view). */
.view-global-search .views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 0 0 24px;
}
.view-global-search .views-exposed-form .js-form-item-search {
  flex: 1 1 260px;
}
.view-global-search .views-exposed-form select,
.view-global-search .views-exposed-form input[type="text"] {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid #d8d2c6;
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
}
.view-global-search .views-exposed-form .form-actions {
  display: flex;
  gap: 8px;
}
.view-global-search .views-exposed-form .button {
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.view-global-search .views-exposed-form .form-submit {
  background: #2c2c2b;
  color: #fff;
}
.np-search-results {
  margin: 0;
  padding: 0;
  list-style: none;
}
.np-search-row {
  margin: 0 0 8px;
}
.np-search-result {
  display: block;
  padding: 13px 16px;
  border: 1px solid #e7e2d8;
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
.np-search-result:hover {
  border-color: var(--hue, #6c675f);
  box-shadow: 0 1px 6px rgba(44, 44, 43, .08);
}
.np-sr-type {
  display: inline-block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a8377;
}
.np-sr-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: #2c2c2b;
}
.np-sr-summary {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: #575349;
}

/* =============================================================
   .np-report-grid — shared report-tile grid

   Container only; the tiles are the `_report-card` partial and their
   chrome lives in css/publication-listing.css. Moved here from
   css/person-detail.css on 2026-08-20 when the project canonical's
   "Ētahi atu · Other projects" section became a second consumer.

   Consumers:
     - .np-person-report-grid  — person canonical §11, uncapped list of
       the projects that name this person
     - .np-project-report-grid — project canonical, capped at 3 by
       ProjectDetail\RelatedProjectsBuilder
   ============================================================= */
/* Third consumer added 2026-08-21: /publications/reports, via
   templates/views/views-view-list--project-reports--page.html.twig.
   That template emits this class directly rather than the CSS reaching
   into Views' `item-list` / `ul` / `li` markup, so there is no
   base-theme wrapper chain to depend on and no Bootstrap `mb-3` to
   neutralise. The listing also travels into the browse modal on
   /publications/landing, which extracts the view wrapper — `auto-fit`
   handles the narrower modal-xl (~1100px) on its own, landing both
   surfaces on 3 columns. */
.np-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
/* Small-N cap: 1-2 project tiles -> max 380px each, matching the ~366px
   natural width a tile gets in the default 3-up row at container width.
   Prevents a person with a single related project from stretching one
   report tile across the full container. `auto-fit` still collapses the
   empty tracks, but with a fixed max the freed space stays as trailing
   whitespace instead of being absorbed by the surviving track. Same
   data-count mechanism as .np-project-people-grid (project-detail.css);
   300px floor kept (vs that grid's 280px) because report tiles carry
   meta rows + a file list and are denser than person cards. */
.np-report-grid[data-count="1"],
.np-report-grid[data-count="2"] {
  grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
}

/* Section wrappers for the two consumers. Kept together so the pair
   cannot drift; the person one previously lived in person-detail.css. */
.np-project-report-grid {
  margin-top: 40px;
  margin-bottom: 24px;
}
.np-project-report-grid-head {
  margin: 0 0 16px;
  font-size: 20px; font-weight: 700;
  color: #2c2c2b;
}

/* "Ngā Whakaputanga · Publications" curated grid on the project canonical
   — same section-chrome shape as .np-project-report-grid above. Grid layout
   reuses .np-report-grid; this block only supplies wrapper spacing + heading
   style. Tiles are the shared `_publication-card` partial. Mirror wrapper
   .np-person-publication-grid lives in css/person-detail.css. */
.np-project-publication-grid {
  margin-top: 40px;
  margin-bottom: 24px;
}
.np-project-publication-grid-head {
  margin: 0 0 16px;
  font-size: 20px; font-weight: 700;
  color: #2c2c2b;
}