/* =============================================================
   barrio_npm — 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: linear-gradient(rgba(217, 202, 166, 0.2), rgba(217, 202, 166, 0));
}

.view-id-projects ul > li:nth-child(even),
.view-id-taxonomy_term ul > li:nth-child(even) {
  background: linear-gradient(rgba(217, 202, 166, 0.1), rgba(217, 202, 166, 0));
}

.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: 1em;
}

.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;
}