/* ========================================= */
/* DEFAULT / DESKTOP             */
/* ========================================= */

.PortfolioItem_Intro_ContainerFluid{
  background-color: #efefef;
}

.PortfolioItem_Intro_Header{
  font-family: monospace;
  font-size: 40px;
  font-weight: 900;
  color:#de4a33;
}

.PortfolioItem_Intro_Subheader{
  font-family: "Montserrat";
  font-size: 30px;
  font-weight: 300;
  color:#666;
}

.PortfolioItem_github_logo{
  max-width: 150px;
  margin-top: 20px;
}

.PortfolioItem_Subheader{
  font-family: monospace;
  font-size: 25px;
  font-weight: 900;
  color:#de4a33;
  margin-bottom: 10px;
  display: inline-block;
  padding-bottom: 0.5rem;
}

.PortfolioItem_Text{
  font-family: "Montserrat";
  font-size: 15px;
  font-weight: 300;
  color:#666;
}

.portfolio-project-goals-section{
  border: solid #de4a33 1px;
  border-radius: 15px;
  padding: 15px;
  background-color: white;
  margin-bottom: 20px;
}

/* Numbered Column Section */
.portfolio-numbered-column-section {
    max-width: 1200px;
}

.two-column-list {
    column-count: 2;         
    column-gap: 4rem;        
}

.two-column-list li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    break-inside: avoid;     
    page-break-inside: avoid; 
}

/* Detailed Sections */
.portfolio_detailed_horizontal_divider{
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.PortfolioItem_Detail_ContainerFluid{
  background-color: white;
}

.portfolio_detailed_section_header{
  font-family: monospace;
  font-size: 25px;
  font-weight: 600;
  color:#de4a33;
}

.portfolio_detailed_section_text{
  font-family: "Montserrat";
  font-size: 15px;
  font-weight: 300;
  color:#666;
}

.portfolio_detailed_section_points{
  margin-left: 1.5rem;
}

.portfolio_detailed_section_points li{
  font-family: "Montserrat";
  font-size: 15px;
  font-weight: 300;
  color:#666;
}

.portfolio_detailed_section_points li b{
  font-weight: 700;
}

.detailed_points li{
  margin-bottom: 10px;
}

.portfolio_detailed_image_label{
  font-family: monospace;
  font-size: 15px;
  font-weight: 600;
  color:#de4a33;
}

.portfolio_detailed_image_1{
  margin-left: auto;
  margin-right: auto;
  max-width: 50rem;
}


/* ========================================= */
/* TABLET STYLES (768px - 991px)   */
/* ========================================= */
@media (max-width: 991px) {

    .PortfolioItem_Intro_Header {
        font-size: 32px; /* Slightly smaller header */
    }
    
    .PortfolioItem_Intro_Subheader {
        font-size: 24px;
    }
    
    .PortfolioItem_Text{
      font-family: "Montserrat";
      font-size: 13px;
      font-weight: 300;
      color:#666;
    }
    
    .two-column-list {
        column-gap: 2rem; /* Reduce gap between columns */
    }
    
    .portfolio_detailed_image_1 {
        max-width: 100%; /* Allow image to fill container width */
    }
}


/* ========================================= */
/* MOBILE STYLES (< 768px)         */
/* ========================================= */
@media (max-width: 767px) {


    /* --- Typography Adjustments --- */
    .PortfolioItem_Intro_Header {
        font-size: 24px; /* Much smaller to fit phone screen */
        line-height: 1.2;
    }

    .PortfolioItem_Intro_Subheader {
        font-size: 18px;
        line-height: 1.4;
    }
    
    .PortfolioItem_Subheader {
        font-size: 22px;
    }
    
    .PortfolioItem_Text{
      font-family: "Montserrat";
      font-size: 12px;
      font-weight: 300;
      color:#666;
    }
    
    .PortfolioItem_Detail_Container{
      padding-left: 15px;
      padding-right: 15px;
    }

    .portfolio_detailed_section_header {
        font-size: 18px;
    }
    
    .portfolio_detailed_section_text{
      font-size: 12px;
    }
    
    .portfolio_detailed_section_points li {
      font-size: 12px;
    }
    
    /* --- Layout Adjustments --- */
    
    /* Stack the numbered list into 1 column */
    .two-column-list {
        column-count: 1;
    }
    
    /* Reduce padding/margins */
    .portfolio_detailed_horizontal_divider {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    /* Ensure large images fit the screen */
    .portfolio_detailed_image_1 {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    
    .portfolio-project-goals-section {
        padding: 10px; /* Less padding inside the box */
    }
    
    /* Make points list use less left margin */
    .portfolio_detailed_section_points {
        margin-left: 0.5rem;
        padding-left: 1rem;
    }
}