/* ================================================================
   Tuesdays — CASE STUDIES (grid/listing) page styles
   Shared tokens/nav/footer/buttons/crumb live in shared.css.
   Card component (.cs-card) is also reused, unmodified, on the
   case-study detail template for the "related case studies" row —
   if you retire this file, that row breaks too.
   ================================================================ */

:root{
  --cs-tone-a:#f3e5b1; --cs-tone-a-tint:#faf3de;
  --cs-tone-b:#e6eee5; --cs-tone-b-tint:#eff6f1;
  --cs-tone-c:#eae4ee; --cs-tone-c-tint:#f5f0f6;
  --cs-tone-d:#dfeaf1; --cs-tone-d-tint:#edf6f9;
}

/* ---------- HERO ---------- */
.cs-hero{padding-top:clamp(110px,14vw,160px);padding-bottom:clamp(40px,5vw,64px)}
.cs-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.05;letter-spacing:-.02em;max-width:16ch}
.cs-hero p{margin-top:22px;max-width:54ch;font-size:1.08rem;line-height:1.6;color:var(--ink-soft)}

/* ---------- FILTER BAR (built, hidden until there's enough to filter) ---------- */
.cs-filters{display:none;gap:10px;flex-wrap:wrap;margin-top:32px}
.cs-filters.is-active{display:flex}
.cs-filter{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:9px 18px;border-radius:100px;border:1px solid var(--line);background:none;color:var(--ink-soft);cursor:pointer;transition:all .3s var(--ease)}
.cs-filter.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ---------- GRID ---------- */
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-top:8px;padding-bottom:clamp(60px,8vw,110px)}
@media(max-width:960px){.cs-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.cs-grid{grid-template-columns:1fr}}

.cs-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cs-card:hover{transform:translateY(-8px);box-shadow:0 34px 66px -34px rgba(22,24,29,.28)}
.cs-card:hover .cs-card-img img{transform:scale(1.05)}

.cs-card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--tone-tint,var(--paper-2))}
.cs-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cs-card-tag{position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.88);padding:6px 13px;border-radius:100px;backdrop-filter:blur(6px)}

.cs-card-body{padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.cs-card-date{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-faint)}
.cs-card-body h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;line-height:1.18;letter-spacing:-.01em}
.cs-card-body p{font-size:.98rem;line-height:1.55;color:var(--ink-soft);flex:1}
.cs-card-body .arrowlink{margin-top:6px;align-self:flex-start}

/* ---------- EMPTY STATE (no results for a filter) ---------- */
.cs-empty{grid-column:1/-1;padding:60px 24px;text-align:center;color:var(--ink-faint);font-size:1rem}