/**
 * @file
 * Project Profiles listing styles.
 *
 * Mirrors the layout used on /articles so both listings share the same
 * 3-column grid, page title underline, and pager treatment.
 */

/* Wrapper column matches Articles listing */
.view-project-profiles {
  max-width: 960px;
  margin: 0 auto;
  padding: 30px 15px 0;
}

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

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

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

/* Grid layout */
.view-project-profiles .view-content .project-profiles-grid,
.view-project-profiles .view-content .project-profiles-grid ul,
.view-project-profiles .view-content {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.view-project-profiles .view-content .project-profiles-grid > li,
.view-project-profiles .view-content .project-profiles-grid ul > li,
.view-project-profiles .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-project-profiles .view-content .project-profiles-grid > li,
  .view-project-profiles .view-content .project-profiles-grid ul > li,
  .view-project-profiles .view-content > .views-row {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
}

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

/* Card content styling */

.view-project-profiles .view-header {
  margin-bottom: 30px;
}

.view-project-profiles .views-field-title {
  color: #000;
  font-size: 14px;
  margin-bottom: 5px;
  margin-top: 10px;
}

.view-project-profiles .views-field-title h4 {
  font-weight: 600;
}

.view-project-profiles .views-field-title a {
  color: #000;
  text-decoration: none;
}

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

.view-project-profiles .views-field-field-prjt-address {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.view-project-profiles .views-field-field-learn-more {
  font-size: 12px;
  margin-top: 5px;
}

.view-project-profiles .views-field-field-learn-more a {
  color: #1D5D8B;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
}

.view-project-profiles .views-field-field-learn-more a:hover {
  text-decoration: underline;
}

/* Pager (matches Articles) */
.view-project-profiles nav.pager {
  margin-top: 40px;
  width: 100%;
}

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

.view-project-profiles .pager__item a,
.view-project-profiles .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-project-profiles .pager__item a:hover,
.view-project-profiles .pager__item.is-active a {
  background-color: #1D5D8B;
  color: white;
}

.page-item .page-link {
  color: #1D5D8B;
}

.page-item.is-active .page-link {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #428bca;
  border-color: #428bca;
}