/* ==========================================================================
   PROJECTS PAGE — additional styles
   Loaded after style.css
   ========================================================================== */

/* ---------- PAGE HERO ---------- */
.page-hero{
  position:relative;
  padding:96px 0 84px;
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);
  overflow:hidden;
}
.page-hero::after{
  content:'';
  position:absolute; right:-120px; top:-120px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(230,57,70,.22),transparent 68%);
  pointer-events:none;
}
.page-hero__inner{ position:relative; z-index:1; max-width:800px; }
.page-hero h1{ color:#fff; margin-bottom:16px; font-size:clamp(2rem,4.4vw,3.4rem); font-weight:800; line-height:1.15; }
.page-hero p{ color:rgba(255,255,255,.80); font-size:1.06rem; margin:0; max-width:62ch; }

.breadcrumb{
  display:flex; align-items:center; gap:10px;
  font-size:.82rem; color:rgba(255,255,255,.62); margin-bottom:18px;
}
.breadcrumb a{ color:rgba(255,255,255,.78); transition:color var(--t-fast); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span[aria-hidden]{ color:var(--accent); font-size:1.05rem; }

/* =========================================================
   PROJECT FILTERS
   ========================================================= */
.project-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:52px;
}
.project-filter{
  display:inline-flex;
  align-items:center;
  padding:11px 22px;
  font-family:var(--font-head);
  font-size:.87rem;
  font-weight:600;
  color:var(--navy);
  background:#fff;
  border:1.5px solid var(--line-strong);
  border-radius:100px;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.project-filter:hover{
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-2px);
}
.project-filter.is-active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 10px 24px rgba(230,57,70,.28);
}

/* =========================================================
   PROJECTS GRID
   ========================================================= */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}

/* Card */
.project-item{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t), opacity .4s var(--ease);
}
.project-item:hover{
  transform:translateY(-8px);
  box-shadow:var(--sh-lg);
  border-color:transparent;
}

/* Media */
.project-item__media{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#e9eef3;
}
.project-item__img{
  position:absolute; inset:0;
  background-image:var(--img);
  background-size:cover;
  background-position:center;
  transition:transform .8s cubic-bezier(.22,.7,.25,1);
}
.project-item:hover .project-item__img{
  transform:scale(1.08);
}

/* Overlay on hover */
.project-item__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(11,31,51,.85) 0%, rgba(11,31,51,.20) 60%, transparent 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity var(--t);
}
.project-item:hover .project-item__overlay{ opacity:1; }

.project-item__btn{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  box-shadow:0 10px 26px rgba(230,57,70,.45);
  transform:scale(.85);
  transition:transform var(--t), background var(--t);
}
.project-item:hover .project-item__btn{
  transform:scale(1);
}
.project-item__btn:hover{
  background:var(--accent-dark);
}
.project-item__btn svg{
  width:22px; height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Category badge */
.project-item__badge{
  position:absolute;
  top:16px; left:16px;
  z-index:2;
  font-family:var(--font-head);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(11,31,51,.72);
  backdrop-filter:blur(6px);
  padding:6px 12px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.18);
}

/* Body */
.project-item__body{
  padding:26px 26px 28px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.project-item__cat{
  display:inline-block;
  font-family:var(--font-head);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
}
.project-item__body h3{
  font-size:1.15rem;
  font-weight:700;
  color:var(--navy);
  margin:0 0 10px;
  line-height:1.3;
}
.project-item__body p{
  font-size:.91rem;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 20px;
  flex:1;
}
.project-item__body .link-arrow{
  align-self:flex-start;
}

/* ---------- Empty state ---------- */
.projects-empty{
  text-align:center;
  padding:64px 24px;
  background:#fff;
  border:1px dashed var(--line-strong);
  border-radius:var(--r-lg);
  margin-top:20px;
}
.projects-empty__icon{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  margin:0 auto 22px;
  border-radius:50%;
  background:rgba(230,57,70,.10);
}
.projects-empty__icon svg{
  width:32px; height:32px;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.projects-empty h3{
  font-size:1.15rem;
  margin-bottom:8px;
}
.projects-empty p{
  font-size:.94rem;
  color:var(--muted);
  margin-bottom:22px;
}

/* =========================================================
   PROJECT PROCESS STRIP
   ========================================================= */
.project-process{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:22px;
  position:relative;
}
.project-process::before{
  content:'';
  position:absolute;
  top:32px; left:8%; right:8%;
  height:2px;
  background:linear-gradient(to right, rgba(230,57,70,.35), rgba(18,59,93,.25));
  z-index:0;
}
.project-process__step{
  position:relative;
  z-index:1;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px 22px;
  text-align:center;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
}
.project-process__step:hover{
  transform:translateY(-8px);
  box-shadow:var(--sh);
  border-color:transparent;
  background:#fff;
}
.project-process__num{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin:0 auto 18px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--line-strong);
  font-family:var(--font-head);
  font-size:.9rem;
  font-weight:700;
  color:var(--navy-2);
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.project-process__step:hover .project-process__num{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  transform:scale(1.06);
  box-shadow:0 12px 26px rgba(230,57,70,.34);
}
.project-process__step h3{
  font-size:.98rem;
  margin-bottom:7px;
}
.project-process__step p{
  font-size:.82rem;
  line-height:1.55;
  color:var(--muted);
  margin:0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .page-hero{ padding:84px 0 72px; }
  .projects-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .project-process{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .project-process::before{ display:none; }
  .project-filter{ padding:10px 18px; font-size:.82rem; }
}

@media (max-width:768px){
  .page-hero{ padding:72px 0 62px; }
  .page-hero h1{ font-size:clamp(1.6rem,6vw,2.2rem); }
  .page-hero p{ font-size:.96rem; }

  .project-filters{
    gap:8px;
    margin-bottom:40px;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .project-filters::-webkit-scrollbar{ display:none; }
  .project-filter{ flex:none; }

  .project-item__body{ padding:22px 20px 24px; }
  .project-item__body h3{ font-size:1.05rem; }
  .project-item__body p{ font-size:.87rem; }

  .project-process{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
}

@media (max-width:560px){
  .page-hero{ padding:62px 0 54px; }
  .breadcrumb{ font-size:.76rem; margin-bottom:14px; }

  .projects-grid{ grid-template-columns:1fr; gap:20px; }

  .project-item__btn{ width:50px; height:50px; }
  .project-item__btn svg{ width:18px; height:18px; }

  .project-process{ grid-template-columns:1fr; }

  .projects-empty{ padding:44px 20px; }
}