/* =========================================================
   BIPVT Capstone – Project-Specific Styles
   Scoped to .project-bipvt to avoid global conflicts
   ========================================================= */

/* -----------------------------
   Theme Variables (Project-only)
   Change --accent-color to test themes
   ----------------------------- */
   
/* =========================================================
   BIPVT Capstone – Project-Specific Styles
   Scoped to .project-bipvt
========================================================= */

.project-bipvt {
    /* Project theme variables */
    --accent-color: #4a6fa5; /* muted blue */
    --bg-light: #ffffff;
    --bg-alt: #f5f7f9;
    --text-main: #222;
    --text-muted: #555;
  
    color: var(--text-main);
    background: var(--bg-light);
  }
  
  /* =========================================================
     Sections & Layout
  ========================================================= */
  
  .project-bipvt .section {
    padding: 4rem 1.5rem;
  }
  
  .project-bipvt .section.alt {
    background: var(--bg-alt);
  }

  .project-bipvt .section.h1 {
    background: var(--bg-alt);
    margin-top: 0;
    margin-bottom: 0;
    padding: 1%;
  }
  
  .project-bipvt .container {
    max-width: 1100px;
    margin: 0 auto;
  }
  
  /* =========================================================
     Two-Column Layout
  ========================================================= */
  
  .project-bipvt .two-col {
    display: flex;
    gap: 3rem;
    align-items: center;
  }
  
  .project-bipvt .two-col .text {
    flex: 1.2;
  }
  
  .project-bipvt .two-col .image-placeholder {
    flex: 1;
  }
  
  /* =========================================================
     Typography
  ========================================================= */
  
  .project-bipvt h1 {
    text-align: center;
    color: #123769;
 
  }


  .project-bipvt h2,
  .project-bipvt h3 {
    color: var(--accent-color);
    margin-top: 0;
  }
  
  .project-bipvt .subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
  }
  
  /* =========================================================
     Image Placeholders (temporary) **remove once done adding all images**
  ========================================================= */
  
  .project-bipvt .image-placeholder {
    min-height: 220px;
    background: #e53935;
    border: 2px solid #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
  }
  
/* =========================================================
   Research Site Banner
========================================================= */

.project-bipvt .site-banner {
    overflow: hidden;
    border-bottom: 1px solid #e0e0e0;
    object-fit: cover;
    width: 100%;
               /*max vertical height to make banner size*/
    max-height: 35vh;
    object-position: center 80%;
    display: block;
  }
  
  .project-bipvt .site-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  
  /* =========================================================
   Figures & Images
========================================================= */

.project-bipvt .figure {
    margin: 0;
  }
  
  .project-bipvt .figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
  }
  
  .project-bipvt .figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  
  .project-bipvt .graph img {
    width: 100%;      /* fill container */
    height: auto;     /* maintain aspect ratio */
    max-width: 500px; /* caps max size for layout, adjust as needed */
    display: flex;   /* prevents inline spacing issues, change to flex if needed */
    flex-direction: column;
    align-items: center;

}

    /* Horizontal image rows */
    .project-bipvt .image-row {
        display: flex;
        gap: 2rem;
        margin-top: 2rem;
        justify-content: center;
      }

    .project-bipvt .image-row .figure {
        flex: 1;
        max-width: 480px;   /*adjust value as needed*/
    }

  /* =========================================================
   Simulation Legend
========================================================= */

    .project-bipvt .legend {
        font-size: 0.9rem;
        color: var(--text-muted);
        margin-top: 1rem;
        margin-bottom: 2rem;
    }
    
    .project-bipvt .legend .cold {
        color: #2c7be5; /* cool blue */
        font-weight: 500;
    }
    
    .project-bipvt .legend .hot {
        color: #d9534f; /* warm red */
        font-weight: 500;
    }
    
  /* =========================================================
     Design Concept Grid
  ========================================================= */
  
  .project-bipvt .concept-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
  }
  
  .project-bipvt .concept h3 {
    margin-bottom: 0.25rem;
  }

  .project-bipvt .concept {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .project-bipvt .concept .figure {
    width: 100%;
  }
  
  .project-bipvt .concept .figure img {
    width: 100%;
    height: 550px;        /* keep consistent image height - adjust value later if need tweaking*/
    object-fit: cover;   /* crops excess, preserves aspect */
    border-radius: 6px;
  }

  .project-bipvt .concept figcaption {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-muted);
    max-height: none;  /* 5.6em = ~4 lines for text box */
    overflow: clip;  /*can change to visble, hidden, clip, auto or scroll type, */
    text-align: left;
  }
  
  /* =========================================================
     Results List
  ========================================================= */
  
  .project-bipvt .results {
    list-style: none;
    padding-left: 0;
  }
  
  .project-bipvt .results li::before {
    content: "• ";
    color: var(--accent-color);
  }
  
  /* =========================================================
     Footer (override visuals only)
  ========================================================= */
  
  .project-bipvt footer.footer {
    background: var(--bg-alt);

  }
  .project-bipvt .back-link {
    font-weight: 500;
    color: var(--accent-color);
    text-decoration: none;
}

.project-bipvt .back-link:hover {
    text-decoration: underline;
}

  
  /* =========================================================
     Responsive
  ========================================================= */
  
  @media (max-width: 800px) {
    .project-bipvt .two-col {
      flex-direction: column;
    }
  }
  
  @media (max-width: 600px) {
    .project-bipvt .concept-grid {
      grid-template-columns: 1fr;
    }
  }

    /* =========================================================
     Slider Comparison (JS for graphs)
  ========================================================= */
  .project-bipvt .slider-compare {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.project-bipvt .slider-compare input[type="range"] {
    width: 280px;
    cursor: pointer;
}

  /*removed header comments duplicates and footer font+padding*/