/**
 * @file
 * Article page and listing styles.
 */

/* Articles page title with blue underline */
.view-articles {
  max-width: 960px;
  margin: 0 auto;
  /* No bottom padding: the 60px gap before the footer is applied to main, so
   * repeating it here doubled the white space under the listing. */
  padding: 30px 15px 0;
}

.page-node-type-article .page-header,
.view-articles .view-header h1,
.view-articles .view-header h2 {
  font-weight: 300;
  font-size: 32px;
  padding-bottom: 20px;
  position: relative;
  border-bottom: none;
}

/* Page title blue underline (Articles page) */
.path-articles .block-page-title-block {
  margin-bottom: 0;
  padding: 0;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.path-articles .block-page-title-block h1 {
  font-weight: 400;
  font-size: 38px;
  color: #000;
  position: relative;
  padding-bottom: 15px;
  margin-top: 30px;
  margin-bottom: 15px;
  margin-left: -10px;
}

.path-articles .block-page-title-block h1:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: #1D5D8B;
}

/* Reduce top padding on articles page */
.path-articles .main-container,
.path-articles main > .container {
  padding-top: 0;
}

/* Article listing grid */
.view-articles .view-content .articles-grid,
.view-articles .view-content .articles-grid ul,
.view-articles .view-content {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.view-articles .view-content .articles-grid > li,
.view-articles .view-content .articles-grid ul > li,
.view-articles .view-content > .views-row {
  flex: 0 0 calc(33.333% - 20px);
  max-width: calc(33.333% - 20px);
  list-style: none;
}

@media only screen and (max-width: 768px) {
  .view-articles .view-content .articles-grid > li,
  .view-articles .view-content .articles-grid ul > li,
  .view-articles .view-content > .views-row {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
}

@media only screen and (max-width: 500px) {
  .view-articles .view-content .articles-grid > li,
  .view-articles .view-content .articles-grid ul > li,
  .view-articles .view-content > .views-row {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Article list item styling */
.view-articles .views-field-field-published-on {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.view-articles .views-field-field-art-feature-image img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.view-articles .views-field-title a {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.view-articles .views-field-title a:hover {
  text-decoration: underline;
}

/* Pager */
.view-articles nav.pager {
  margin-top: 40px;
  width: 100%;
}

.view-articles .pager__items {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  gap: 5px;
}

.view-articles .pager__item a,
.view-articles .pager__item.is-active a {
  display: inline-block;
  padding: 6px 12px;
  color: #1D5D8B;
  text-decoration: none;
  border: 1px solid #1D5D8B;
  border-radius: 3px;
  font-size: 14px;
}

.view-articles .pager__item a:hover,
.view-articles .pager__item.is-active a {
  background-color: #1D5D8B;
  color: white;
}

/* Individual article page
 *
 * The title is rendered by the page title block, which sits outside the node
 * and therefore outside the 800px column below. Give it the same column so the
 * heading lines up with the date and body, and restore the blue underline the
 * legacy h1.page-header carried. */
.page-node-type-article .block-page-title-block {
  max-width: 930px;
  margin: 0 auto;
}

.page-node-type-article .block-page-title-block h1 {
  font-size: 38px;
  font-weight: 300;
  color: #000;
  position: relative;
  margin-top: 10px;
  /* Legacy h1.page-header sat 15px below the top of its wrapper and left 30px
   * before the Published line. Without both, the date sat almost flush against
   * the heading. */
  padding-top: 15px;
  margin-bottom: 30px;
  padding-bottom: 20px;
}

.page-node-type-article .block-page-title-block h1:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: #1D5D8B;
}

.node--type-article {
  max-width: 930px;
  margin: 0 auto;
}

/* The gap between the heading and the Published line comes from the h1's own
 * 30px bottom margin, as it did on the legacy site. Adding wrapper padding on
 * top of that pushed the byline 20px further down than live. */
.node--type-article .node__content {
  padding-top: 0;
}

.node--type-article .field--name-field-art-feature-image {
  /* The Published and Author lines above are floats, so without a clear this
   * wrapper starts alongside them and only the image itself gets pushed down —
   * landing flush against the date. The spacing has to be padding, not margin:
   * an element that clears a float has its top margin absorbed by the
   * clearance, so margin-top left the gap at 0. */
  clear: both;
  padding-top: 20px;
  margin-bottom: 20px;
}

.node--type-article .field--name-field-art-feature-image img {
  max-width: 100%;
  height: auto;
}

.node--type-article .field--name-field-published-on {
  float: left;
  margin-right: 40px;
  /* 16px matches the legacy field output, which inherited the body size. */
  font-size: 16px;
  color: #666;
}

/* Both fields render label and value as block elements, which stacked them on
 * two lines inside a shrink-to-fit float and made the byline row twice as tall
 * as live. */
.node--type-article .field--name-field-published-on .field__label,
.node--type-article .field--name-field-published-on .field__item,
.node--type-article .field--name-field-authored-by .field__label,
.node--type-article .field--name-field-authored-by .field__item {
  display: inline;
}

.node--type-article .field--name-field-authored-by {
  float: left;
  /* Matches the Published line beside it. At 14px the shrink-to-fit float was
   * narrow enough to wrap "Author <name>" onto a second line, which pushed the
   * body down and made the byline row look ragged next to live. */
  font-size: 16px;
  color: #666;
}

.node--type-article .field--name-body {
  clear: both;
  padding-top: 20px;
}

.node--type-article .field--name-body img {
  max-width: 100%;
  height: auto;
}

@media only screen and (max-width: 768px) {
  .node--type-article .field--name-field-published-on {
    float: none;
    margin-right: 0;
    margin-bottom: 5px;
  }

  .node--type-article .field--name-field-authored-by {
    float: none;
    margin-bottom: 15px;
  }
}