/* ─────────────────────────────────────────────
   1.  Accent underline on the heading block
───────────────────────────────────────────────*/
.portfolio-header{
  position:relative;                     /* for ::after positioning  */
}
.portfolio-header::after{                /* thin centred gold bar    */
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-1.25rem;
  width:84px;                            /* width of the bar         */
  height:4px;
  background:#b89759;                    /* brand accent colour      */
  border-radius:4px;
}

/* ─────────────────────────────────────────────
   2.  Fade-up stagger animation on cards
───────────────────────────────────────────────*/
@keyframes fadeUpCard{
  0%  { opacity:0; transform:translateY(22px); }
  100%{ opacity:1; transform:translateY(0);    }
}

.category-card{
  /* keep your existing look … */
  display:flex; flex-direction:column; text-align:center;
  background:#f8f8f8; border-radius:8px; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  transition:transform .3s ease;

  /* …and add the animation */
  animation:fadeUpCard .7s ease-out both;
}

/* stagger the cards with tiny delays */
.category-card:nth-child(1){ animation-delay:.05s; }
.category-card:nth-child(2){ animation-delay:.10s; }
.category-card:nth-child(3){ animation-delay:.15s; }
.category-card:nth-child(4){ animation-delay:.20s; }
.category-card:nth-child(5){ animation-delay:.25s; }
.category-card:nth-child(6){ animation-delay:.30s; }

/* ─────────────────────────────────────────────
   3.  Slightly deeper lift on hover (optional)
───────────────────────────────────────────────*/
.category-card:hover{
  transform:translateY(-8px);            /* was -5px                 */
}

/* (the rest of your existing break-points and rules stay untouched) */


/* ---------- optional centred wrapper ---------- */
.page-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(1rem,4vw,2rem);   /* fluid side-gutters */
  box-sizing:border-box;
}

/* ---------- heading block ---------- */
.portfolio-header{
  margin:clamp(2rem,5vw,3rem) 0 2rem;
}
.portfolio-header h1{
  margin:0 0 .65rem;
  font-size:clamp(1.8rem,4.5vw,2.4rem);
}
.portfolio-header p{
  margin:0;
  font-size:clamp(1rem,2.3vw,1.15rem);
  color:#555;
}

/* ---------- CARD GRID  (your original rules) ---------- */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
  padding:2rem 4vw;
  box-sizing:border-box;
}

.category-card{
  display:flex;
  flex-direction:column;
  text-align:center;
  text-decoration:none;
  background:#f8f8f8;
  border-radius:8px;
  overflow:hidden;
  transition:transform .3s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.category-card:hover{ transform:translateY(-5px); }

.category-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.category-card h3{
  margin:0;
  padding:1rem;
  color:#333;
  font-size:1.1rem;
}

/* ---------- NEW: fine-tuned break-points ---------- */
@media (min-width:992px){   /* desktops → 3 per row */
  .portfolio-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:991px) and (min-width:600px){ /* tablets → 2 per row */
  .portfolio-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem;
  }
}

@media (max-width:599px){   /* phones → still 2 per row, tighter gap */
  .portfolio-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
  }
}

@media (max-width:360px){   /* very small phones → single column */
  .portfolio-grid{
    grid-template-columns:1fr;
  }
}