/* -------------------------
  Portfolio List
------------------------- */
.section-portfolio-list {padding-top:32px;}
#portfolio-projects-container {display:grid; grid-template-columns:1fr); gap:20px;}
#portfolio-projects-container {opacity:1; transition:none;}
#portfolio-projects-container.fade-in {transition:opacity 1s ease-in-out; opacity:1;}
#portfolio-projects-container.is-hidden {opacity:0;}

@media (min-width:768px) {
    #portfolio-projects-container {grid-template-columns:repeat(auto-fill, minmax(400px, 1fr));}
}
   
   
/* -------------------------
  Project Card
------------------------- */  
.project-card {background-color:var(--clr-neutral-100); color:var(--clr-primary-700); border-radius:10px; line-height:1.2; border:1px solid #dddddd;}
.project-content-container {padding:30px;}  
.project-content-grid {position:relative;}
.project-content-grid>div {display:flex; font-size:0.875rem;}
.project-content-grid>div:last-child>p:first-child {margin-top:.4rem;}
.project-card .project-img {position:relative; overflow:hidden;}
.project-card .project-img .credit {position:absolute; top:0; right:0; font-size:0.75rem; background:#00000050; padding:.4rem; color:var(--clr-neutral-100);}
.project-card .project-img img {height:250px;} 
ul.project-tags {display:flex; list-style:none; margin-left:0; gap:.5rem; flex-wrap:wrap; margin-bottom:0; align-items:flex-start;}
ul.project-tags .tag-badge {font-size:.75rem; white-space:nowrap;}
ul.project-tags .btn:not(.aqs) {background-color:var(--clr-primary-700);}   
ul.project-tags .btn.aqa {background-color:var(--clr-primary-400);}   
 
 @media (min-width: 640px) and (max-width: 859px) {
    .project-card {display:flex;}
    .project-card .project-img {flex:0 0 50%;}
    .project-card .project-img .img-fit {height:100%;}
    .project-img img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
}

@media (max-width:859px) {
    .project-content-grid>div {flex-wrap:wrap;}
    .project-content-grid>div>p {margin-bottom:.75rem;}
    .project-content-grid>div>p:first-child {flex:0 0 100%;}
    .project-content-grid>div>p:first-child {margin-bottom:0;}
    .project-content-grid>div:last-child>p:first-child {margin-bottom:.5rem;}
}
 
@media (min-width:860px) {
    .project-content-grid>div>p:first-child {flex:0 0 140px;}
    .project-card .project-img img {height:250px;} 
}
 
 
    
/* -------------------------
  Portfolio Load More
------------------------- */
#btn-load-more {font-size:1rem;}
.is-hidden {display:none;}
.load-more-wrapper {margin-top:30px;}



/* -------------------------
  Portfolio Filters
------------------------- */
.portfolio-filters {display:flex; gap:20px; flex-wrap:wrap;}
.portfolio-filters .filter-btn {font-size:1rem; background-color:var(--clr-primary-500); color:var(--clr-primary-700); font-weight:var(--fw-semibold);}
.portfolio-filters .filter-btn.active,
.portfolio-filters .filter-btn:hover {background-color:var(--clr-primary-700); color:var(--clr-neutral-100);}