/* =========================================================
   portfolio.css
   Portfolio index layout
   4-column flex card grid on desktop
   2-column tablet / 1-column mobile
   Button styling lives in ug.css
   Dreamweaver-safe
   ========================================================= */

/* --- Intro block --- */

.portfolio-intro{
  margin-top:4px;
  margin-bottom:18px;
}

.portfolio-intro p{
  margin:0;
}

/* =========================================================
   Portfolio card grid
   ========================================================= */

.portfolio-list{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:18px;
}

/* Four columns on desktop */
.portfolio-card{
  display:flex;
  flex-direction:column;
  flex:0 1 calc(25% - 17px);
  min-width:0;

  background:#fff;
  border:0px solid #CCC;
  border-radius:18px;
  overflow:hidden;

    
}

/* Image/link wrapper */
.portfolio-card-media{
  display:block;
  text-decoration:none;
  background:#FFF;
}

.portfolio-img{
  display:block;
  width:100%;
  height:auto;
  transition:opacity .2s ease;
}

.portfolio-card-media:hover .portfolio-img,
.portfolio-card-media:focus .portfolio-img{
  opacity:.86;
}

/* Card text */
.portfolio-card-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:16px 16px 18px;
}

.portfolio-card-title{
  margin:0 0 10px;
  font-family:"widescreen-ex", sans-serif;
  font-size:16px;
  line-height:1.2;
  font-weight:400;
  letter-spacing:.2px;
  border-bottom:1px solid #CCC;
  padding-bottom:8px;
}

.portfolio-copy{
  margin:0;
  font-size:14px;
  line-height:1.45;
  flex:1 1 auto;
}

/* Button placement only — visual button styling lives in ug.css */
.portfolio-card .portfolio-link{
  align-self:flex-start;
  float:none;
  margin-top:16px;
  margin-left:0;
}

/* Keep the bottom Back button centred */
.portfolio-back{
  text-align:center;
  margin:2.5rem 0 0;
}

.portfolio-back .portfolio-link{
  float:none;
  margin-left:0;
}

/* Existing separator no longer used on card layout */
.portfolio-sep{
  display:none;
}

/* =========================================================
   Portfolio sub-nav
   ========================================================= */

.portfolio-subnav{
  margin:10px 0 18px;
  text-align:center;
}

.portfolio-subnav-inner{
  display:inline-block;
}

.portfolio-subnav-line{
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:18px;
  margin:6px 0;
  text-align:left;
}

.portfolio-subnav-head{
  width:120px;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.1px;
  text-transform:uppercase;
  opacity:0.55;
  white-space:nowrap;
}

.portfolio-subnav-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px 18px;
}

.portfolio-subnav-a{
  text-decoration:none;
  font-weight:400;
  letter-spacing:0.5px;
  text-transform:uppercase;
  font-size:13px;
  opacity:0.92;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}

.portfolio-subnav-a:hover,
.portfolio-subnav-a:focus{
  border-bottom-color:rgba(0,0,0,0.65);
  opacity:1;
}

/* =========================================================
   Responsive
   ========================================================= */

/* Two columns on medium screens */
@media (max-width:980px){

  .portfolio-card{
    flex-basis:calc(50% - 11px);
  }

}

/* Stack subnav nicely */
@media (max-width:780px){

  .portfolio-subnav-inner{
    display:block;
  }

  .portfolio-subnav-line{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
    margin:10px 0;
  }

  .portfolio-subnav-head{
    width:auto;
  }

  .portfolio-subnav-links{
    justify-content:center;
  }

}

/* One column on phones */
@media (max-width:620px){

  .portfolio-list{
    gap:18px;
  }

  .portfolio-card{
    flex-basis:100%;
  }

  .portfolio-card-body{
    padding:15px 15px 17px;
  }

  .portfolio-card-title{
    font-size:17px;
  }

  .portfolio-copy{
    font-size:15px;
  }

}

/* =========================================================
   PORTFOLIO CARD FADE-IN
   ========================================================= */

.portfolio-card{
  opacity:0;
  animation:portfolioFade .7s ease forwards;
}

/* stagger timing */

.portfolio-card:nth-child(1){ animation-delay:.08s; }
.portfolio-card:nth-child(2){ animation-delay:.14s; }
.portfolio-card:nth-child(3){ animation-delay:.20s; }
.portfolio-card:nth-child(4){ animation-delay:.26s; }
.portfolio-card:nth-child(5){ animation-delay:.32s; }
.portfolio-card:nth-child(6){ animation-delay:.38s; }
.portfolio-card:nth-child(7){ animation-delay:.44s; }
.portfolio-card:nth-child(8){ animation-delay:.50s; }

@keyframes portfolioFade{

  from{
    opacity:0;
    transform:translateY(10px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}