/* =========================================================
   Projects Section Slider  -  Frontend Styles
   Brand color: #04295F  |  Titles: Plus Jakarta Sans  |  Body: DM Sans
========================================================= */

.ps-projects-section{
  --ps-brand:        #04295F;
  --ps-brand-soft:   #E8EEF7;
  --ps-brand-light:  #F4F7FB;
  --ps-text-dark:    #04295F;
  --ps-text-muted:   #6B7280;
  --ps-white:        #FFFFFF;
  --ps-border:       #E5E7EB;
  --ps-shadow-sm:    0 2px 8px rgba(4, 41, 95, 0.06);
  --ps-shadow-md:    0 6px 24px rgba(4, 41, 95, 0.10);

  --ps-font-title:   'Plus Jakarta Sans', sans-serif;
  --ps-font-body:    'DM Sans', sans-serif;

  font-family: var(--ps-font-body);
  padding: 60px 20px;
  max-width: 1280px;
  margin: 0 auto;
  color: var(--ps-text-dark);
  -webkit-font-smoothing: antialiased;
}

/* TABS */
.ps-tabs-wrapper{
  display:flex; align-items:center; gap:12px;
  margin-bottom:28px; overflow-x:auto; scrollbar-width:none;
  padding-bottom:4px;
}
.ps-tabs-wrapper::-webkit-scrollbar{display:none;}

.ps-tab-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:14px; background:var(--ps-white);
  border:1.5px solid var(--ps-border);
  font-family:var(--ps-font-title); font-weight:600; font-size:15px;
  color:var(--ps-text-dark); cursor:pointer;
  transition:all .25s ease; white-space:nowrap;
}
.ps-tab-btn i{font-size:16px;}
.ps-tab-btn:hover{
  border-color:var(--ps-brand); background:var(--ps-brand-light);
}
.ps-tab-btn.active{
  background:var(--ps-brand); color:var(--ps-white);
  border-color:var(--ps-brand); box-shadow:var(--ps-shadow-sm);
}

/* SLIDER */
.ps-slider-wrap{position:relative;}
.ps-slider-track{
  display:flex; gap:20px; overflow-x:auto;
  scroll-behavior:smooth; scroll-snap-type:x mandatory;
  padding:6px 4px 14px; scrollbar-width:none;
}
.ps-slider-track::-webkit-scrollbar{display:none;}

.ps-project-card.ps-hidden{display:none;}

/* CARD */
.ps-project-card{
  flex:0 0 calc(16.666% - 17px); min-width:200px;
  background:var(--ps-white); border-radius:14px;
  border:1px solid var(--ps-border); overflow:hidden;
  scroll-snap-align:start;
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;          /* keep anchor look like card */
}
a.ps-project-card:hover,
a.ps-project-card:focus,
a.ps-project-card:visited{
  text-decoration:none; color:inherit;
}
.ps-card-linked{cursor:pointer;}
.ps-project-card:hover{
  transform:translateY(-4px); box-shadow:var(--ps-shadow-md);
}

.ps-card-image{position:relative; height:150px; overflow:hidden;}
.ps-card-image img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.ps-project-card:hover .ps-card-image img{transform:scale(1.07);}

.ps-card-icon{
  position:absolute; top:10px; left:10px;
  width:38px; height:38px; background:var(--ps-brand);
  color:var(--ps-white); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; box-shadow:var(--ps-shadow-sm);
}

.ps-card-body{padding:14px 14px 16px; display:flex; flex-direction:column; flex:1;}
.ps-card-title{
  font-family:var(--ps-font-title); font-weight:700;
  font-size:15px; color:var(--ps-text-dark); margin:0 0 6px 0;
}
.ps-card-desc{
  font-size:12.5px; line-height:1.5;
  color:var(--ps-text-muted); margin:0 0 12px 0; flex:1;
}
.ps-card-tag{
  display:inline-block; align-self:flex-start;
  padding:5px 12px; background:var(--ps-brand-soft); color:var(--ps-brand);
  font-family:var(--ps-font-title); font-weight:600;
  font-size:11px; border-radius:6px;
}

/* ARROWS */
.ps-slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  background:var(--ps-white); border:1px solid var(--ps-border);
  box-shadow:var(--ps-shadow-md);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ps-brand);
  font-size:14px; z-index:10;
  transition:background .2s ease, color .2s ease;
}
.ps-slider-arrow:hover{background:var(--ps-brand); color:var(--ps-white);}
.ps-prev{left:-8px;} .ps-next{right:-8px;}

/* RESPONSIVE */
@media (max-width: 1100px){.ps-project-card{flex:0 0 calc(25% - 15px);}}
@media (max-width: 820px) {.ps-project-card{flex:0 0 calc(33.333% - 14px);}}
@media (max-width: 600px) {
  .ps-projects-section{padding:40px 16px;}
  .ps-project-card{flex:0 0 75%;}
  .ps-tab-btn{padding:12px 16px; font-size:14px;}
  .ps-slider-arrow{display:none;}
  .ps-card-image{height:170px;}
}
@media (max-width: 400px){.ps-project-card{flex:0 0 82%;}}