/* =========================================
   BIOINTEL PORTFOLIO CSS
   Cleaned: Portfolio index, child pages, browse menu, and related links
   ========================================= */


/* =========================================
   GLOBAL RESETS — PORTFOLIO CONTEXT ONLY
   ========================================= */

/* Avoid global figure resets that might affect non-portfolio pages. */
.project-page figure,
ul.portfolio-grid figure {
  margin: 0;
}


/* =========================================
   PORTFOLIO INDEX PAGE
   Category cards / square image layout
   ========================================= */

.portfolio-index-page > h1 {
  margin-bottom: 10px;
}

.portfolio-intro {
  max-width: 760px;
  margin-top: -15px;
  margin-bottom: 28px;
}

.portfolio-category-feature {
  margin-bottom: 80px;
}

.portfolio-category-img,
.portfolio-category-square-img,
.portfolio-item img {
  display: block;
  width: 100%;
  height: auto;
}

.portfolio-category-img {
  margin-bottom: 8px;
}

.portfolio-category-square-img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 12px;
}

.portfolio-category-image,
.portfolio-category-image-link {
  display: block;
  margin-bottom: 12px;
}

.portfolio-category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 28px 0 40px;
}

.portfolio-category-card {
  box-sizing: border-box;
  flex: 0 0 calc(33.333% - 19px);
  max-width: calc(33.333% - 19px);
}

.portfolio-category-copy h2 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: bold;
  margin: 0 0 8px;
  color: #2a2a2a;
}

.portfolio-category-copy p {
  font-size: 16px;
  line-height: 1.5;
}

.portfolio-category-card-copy h2 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.25;
}

.portfolio-category-card-copy p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
}

.portfolio-caption {
  margin-top: 10px;
}

.portfolio-caption h3 {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
}

.portfolio-caption p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.portfolio-link {
  display: block;
  color: #000;
  text-decoration: none;
}

.portfolio-link:hover {
  color: #c00;
  text-decoration: none;
}


/* =========================================
   PORTFOLIO INDEX PAGE
   Link lists under category cards
   ========================================= */

.portfolio-category-menu-head {
  margin: 12px 0 6px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
}

.portfolio-category-link-list {
  margin: 0;
  padding-left: 18px;
}

.portfolio-category-link-list li {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.35;
}

.portfolio-category-link-list a,
.portfolio-category-link-list a:link,
.portfolio-category-link-list a:visited {
  color: #000;
}

.portfolio-category-link-list a:hover {
  color: red;
}


/* =========================================
   BROWSE PORTFOLIO / BROWSE CASE STUDIES MENU
   Shared dropdown shell
   ========================================= */

.portfolio-category-menu,
.portfolio-menu {
  background: transparent;
  border: none;
  padding: 0;
  margin: 15px 0 25px;
}

.portfolio-menu-toggle {
  display: inline-block;
  background: red;
  color: #fff;
  border: none;
  padding: 8px 10px;
  margin: 0 0 15px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  text-align: left;
}

.portfolio-menu-toggle:hover {
  opacity: .9;
}

.menu-symbol {
  margin-left: 12px;
  font-size: 18px;
  font-weight: bold;
}

/* Hidden until the Browse button adds .open to .portfolio-menu. */
.portfolio-category-panel {
  display: none;
  margin: 0;
  padding: 0;
}

.portfolio-menu.open .portfolio-category-panel,
.portfolio-category-menu.open .portfolio-category-panel {
  display: block;
}

.portfolio-menu-list {
  display: block;
  list-style: none;
  margin: 0;
  padding-left: 15px;
}

.portfolio-category {
  margin: 0 0 4px;
  padding: 0;
}


/* =========================================
   PORTFOLIO BROWSE MENU
   Category buttons and nested page links
   ========================================= */

.portfolio-filter {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  color: #000;
  text-align: left;
}

.portfolio-filter:hover,
.portfolio-category.active .portfolio-filter {
  color: red;
  text-decoration: underline;
}

/* Individual page links remain hidden until their category is active. */
.portfolio-category-list {
  display: none;
  list-style: none;
  margin: 6px 0 0;
  padding-left: 0;
}

.portfolio-category.active .portfolio-category-list {
  display: block;
}

.portfolio-category-list li {
  margin-bottom: 2px;
}

.portfolio-category-list a {
  display: block;
  font-size: 13px;
  font-weight: normal;
  color: #c00;
  padding-left: 15px;
  text-decoration: none;
}

.portfolio-category-list a:hover {
  color: #900;
  text-decoration: underline;
}


/* =========================================
   CASE STUDIES BROWSE MENU
   Makes single-level Case Studies links match Portfolio category headings
   Required HTML: <nav class="portfolio-category-menu portfolio-menu case-studies-menu">
   Required include wrapper: <div class="portfolio-category active">
   ========================================= */

.case-studies-menu .portfolio-category.active .portfolio-category-list a,
.case-studies-menu .portfolio-category.active .portfolio-category-list a:link,
.case-studies-menu .portfolio-category.active .portfolio-category-list a:visited {
  color: #000;
  font-weight: bold;
  padding-left: 0;
}

.case-studies-menu .portfolio-category.active .portfolio-category-list a:hover {
  color: #c00;
  text-decoration: underline;
}


/* =========================================
   PORTFOLIO CHILD PAGE HEADER
   Positions Browse menu beside small red H1 on child pages
   ========================================= */

.portfolio-child-header {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  margin: 0 0 35px 0;
  padding: 0;
}

.portfolio-child-header .portfolio-category-menu {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.project-page .portfolio-child-header h1 {
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  position: relative;
  top: 4px;
  color: #c00;
}


/* =========================================
   PORTFOLIO CHILD PAGE TYPE / BREADCRUMBS
   ========================================= */

.project-page > h1 {
  margin: 20px 0 30px;
  text-align: left;
  color: #2a2a2a;
}

#portfolio .project-page h1,
#portfolio .project-page .bread-on {
  text-align: left;
}

.project-page > .bread-on {
  text-align: left;
  display: block;
  width: 100%;
  float: none;
  font-size: 14px;
  margin-bottom: 20px;
}

.project-page .bread-on a,
.project-page .bread-on a:link,
.project-page .bread-on a:visited,
.project-page .bread-on a:hover,
.project-page .bread-on a:focus {
  color: red !important;
  text-decoration: none;
}

.project-page .sub-sub-heading {
  border-bottom: 1px solid #ddd;
  padding-bottom: 6px;
  margin-bottom: 15px;
}


/* =========================================
   TWO-COLUMN PORTFOLIO LAYOUT
   ========================================= */

.bi-portfolio-split {
  margin-top: 30px;
}

/* If split follows breadcrumbs, let breadcrumb spacing control the gap. */
.project-page .bi-portfolio-split {
  margin-top: 0;
}

.text-measure {
  max-width: 520px;
}

.text-measure figcaption {
  width: 100%;
}


/* =========================================
   PROJECT FIGURES / IMAGE CARDS
   ========================================= */

.project-page figure {
  margin: 0 0 30px;
  background: #f3f3f3;
  border: 1px solid #ddd;
  padding: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.project-page figure img {
  display: block;
  width: 100%;
  height: auto;
}

.project-page figcaption {
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.5em;
}


/* =========================================
   AD TEXT MODULE
   ========================================= */

.project-page .ad-label {
  font-weight: normal;
  border-bottom: 1px solid #ddd;
  padding-bottom: 6px;
  margin-bottom: 10px;
  color: #333;
}

.project-page .ad-text h3 {
  border: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 8px;
  margin-bottom: 10px;
}

.project-page .ad-end {
  border-bottom: 1px solid #ddd;
  margin-top: 12px;
  margin-bottom: 18px;
}


/* =========================================
   RELATED LINKS / MORE EXAMPLES MODULE
   Used at bottom of portfolio child pages
   ========================================= */

.more-examples ul,
.more-examples li {
  list-style: none !important;
}

.more-examples .portfolio-category-head {
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: #000;
  margin: 0 0 6px;
}

.more-examples ul.portfolio-category-list,
.more-examples .portfolio-category-list {
  display: block !important;
  list-style: none !important;
  margin: 0;
  padding-left: 0;
}

.more-examples ul.portfolio-category-list li,
.more-examples .portfolio-category-list li {
  list-style: none !important;
  margin: 0 0 2px 0;
  padding: 0;
}

.more-examples a,
.more-examples .portfolio-category-list a {
  display: block;
  font-size: 13px;
  font-weight: normal;
  color: #c00;
  text-decoration: none;
padding-left: 5px;
}

.more-examples .portfolio-category-list a:hover,
.more-examples ul.portfolio-category-list a:hover,
.more-examples a:hover {
  color: #900;
  text-decoration: underline;
}

/* Alternate related-link list used by some newer includes. */
.more-examples .portfolio-example-list {
  display: block;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.more-examples .portfolio-example-list li {
  margin: 0 0 2px;
  padding: 0;
}

.more-examples .portfolio-example-list a {
  display: block;
  font-size: 13px;
  font-weight: normal;
  color: #c00;
  text-decoration: none;
  padding-left: 15px;
}

.more-examples .portfolio-example-list a:hover {
  color: #900;
  text-decoration: underline;
}


/* =========================================
   PORTFOLIO INDEX ONLY
   Keep only if the portfolio index page uses id="portfolio"
   ========================================= */

#portfolio .main {
  padding-top: 24px;
}


/* =========================================
   RESPONSIVE BREAKPOINTS
   ========================================= */

@media (max-width: 1199px) {
  ul.portfolio-grid > li.portfolio-item {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

@media (max-width: 991px) {
  .portfolio-category-card {
    flex: 0 0 calc(50% - 14px);
    max-width: calc(50% - 14px);
  }
}

@media (max-width: 767px) {
  ul.portfolio-grid > li.portfolio-item {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .portfolio-child-header {
    display: block;
    margin-bottom: 15px;
  }

  .portfolio-child-header .portfolio-category-menu {
    margin-bottom: 10px;
  }

  .portfolio-child-header .portfolio-category-panel {
    display: none;
    margin-bottom: 0;
  }

  .portfolio-child-header .portfolio-menu.open .portfolio-category-panel {
    display: block;
  }

  .project-page .portfolio-child-header h1 {
    margin-top: 10px;
    margin-bottom: 15px;
  }
}

@media (max-width: 600px) {
  .portfolio-category-grid {
    gap: 24px;
  }

  .portfolio-category-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 479px) {
  ul.portfolio-grid > li.portfolio-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}