/* ============================================================
   work.css — Selected Work section: case cards
   ============================================================ */

.section{
  padding-top:112px;
  padding-bottom:16px;
}
@media (max-width:900px){ .section{ padding-top:88px; } }
@media (max-width:640px){ .section{ padding-top:64px; } }

.sec-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-bottom:40px;
}

.work-grid{ display:grid; gap:20px; }
.work-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
@media (max-width:820px){ .work-grid-2{ grid-template-columns:1fr; } }

.case-card{
  display:block; width:100%; text-align:left;
  background:var(--bg-surface);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius);
  overflow:hidden; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
@media (prefers-reduced-motion: no-preference){
  .case-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px -22px rgba(26,26,23,.28);
    border-color:#dcd7cd;
  }
}

/* ---- Featured card (VITAL): two columns ---- */
.case-featured{ display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:820px){ .case-featured{ grid-template-columns:1fr; } }

.case-body{ padding:40px; display:flex; flex-direction:column; }
@media (max-width:640px){ .case-body{ padding:24px; } }

.case-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.case-title{ margin-bottom:12px; }
.case-desc{ color:var(--text-muted); max-width:42ch; margin-bottom:auto; }
.case-link{
  display:flex; align-items:center; gap:8px;
  margin-top:28px; font-weight:500; color:var(--brand-accent);
}
.case-link .arrow{ transition:transform .3s var(--ease); }
.case-card:hover .case-link .arrow{ transform:translateX(5px); }

.case-visual{
  position:relative; min-height:300px;
  background-size:cover; background-position:center;
  background-color:#23564a; /* fallback while image loads */
}
.case-visual.sm{ min-height:200px; }

#vital-visual{ background-image:url('../img/vital-cover.png'); }
#veridash-visual{ background-image:url('../img/veridash-cover.png'); }
#changewatcher-visual{ background-image:url('../img/change-watcher-cover.png'); }

/* ---- Small cards ---- */
.case-sm .case-body{ padding:28px; }