/* ============================================================================
   th-projects.css — Projects index on the theme-lab shell ($th_lab_layout).
   Binds tokens.css only. Zero raw brand hex.
   Card classes (.cs-card*) are shared with project_card_lab.php / case studies.
   ============================================================================ */

/* ---- Masthead ---- */
.pj-masthead{position:relative;overflow:hidden;background:var(--bg);
    border-bottom:1px solid var(--gray-line)}
.pj-masthead-inner{position:relative;z-index:1;
    padding-top:clamp(64px,9vw,110px);padding-bottom:clamp(48px,7vw,84px)}
.pj-masthead-inner .th-giant{max-width:10ch;margin:0}
.pj-masthead-inner .lede{margin-top:1.4rem;max-width:54ch;color:var(--gray);
    font-size:clamp(1rem,1.3vw,1.14rem);font-weight:300;line-height:1.75}
.pj-masthead-inner .lede a{color:var(--blue);font-weight:600;text-decoration:none}
.pj-masthead-inner .lede a:hover{color:var(--blue-light)}

/* ---- Filters ---- */
.pj-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pj-filters a{
    display:inline-flex;align-items:center;padding:8px 16px;
    font-family:var(--font-data);font-size:.68rem;letter-spacing:1.4px;text-transform:uppercase;
    font-weight:600;text-decoration:none;border-radius:999px;
    border:1px solid var(--gray-line);background:var(--bg-2);color:var(--gray);
    transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)
}
.pj-filters a:hover{color:var(--blue);border-color:var(--blue-a20)}
.pj-filters a.is-active{
    color:var(--bg);background:var(--white);border-color:transparent
}
.pj-filters a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.pj-filter-bar{padding-top:clamp(28px,4vw,40px);padding-bottom:0}
.pj-filter-bar .wrap{padding-bottom:0}

.pj-service-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.4rem;padding:0;list-style:none}
.pj-service-chips a{
    display:inline-flex;align-items:center;padding:6px 12px;
    font-size:.78rem;font-weight:600;text-decoration:none;border-radius:999px;
    border:1px solid var(--gray-line);background:transparent;color:var(--gray);
    transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)
}
.pj-service-chips a:hover{color:var(--blue);border-color:var(--blue-a20)}
.pj-service-chips a.is-active{
    color:var(--blue);background:var(--blue-a08);border-color:var(--blue-a20)
}
.pj-service-chips a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---- Card grid ---- */
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1020px){.pj-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pj-grid{grid-template-columns:1fr}}

/* Shared lab project card (project_card_lab.php) */
.cs-card{min-width:0}
.cs-card>a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
    border-radius:16px;overflow:hidden;background:var(--bg-2);border:1px solid var(--gray-line);
    transition:transform .45s var(--ease-spring),border-color .3s var(--ease)}
@media(hover:hover){.cs-card>a:hover{transform:translateY(-3px);border-color:var(--blue-a20)}}
.cs-card>a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.cs-card-media{aspect-ratio:16/10;overflow:hidden;background:var(--bg-card)}
.cs-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
@media(hover:hover){.cs-card>a:hover .cs-card-media img{transform:scale(1.04)}}
.cs-card-media--empty{display:flex;align-items:center;justify-content:center}
.cs-card-media--empty span{font-family:var(--font-headline);font-size:2.2rem;color:var(--gray-dark);letter-spacing:.06em}

.cs-card-body{display:flex;flex-direction:column;gap:.5rem;padding:18px 20px 22px;flex:1 1 auto}
.cs-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0;
    font-family:var(--font-data);font-size:.64rem;letter-spacing:1.6px;text-transform:uppercase}
.cs-card-type{color:var(--blue);padding:4px 9px;border:1px solid var(--blue-a20);border-radius:999px;background:var(--blue-a08)}
.cs-card-featured-tag{color:var(--white);padding:4px 9px;border:1px solid var(--gray-line);border-radius:999px;background:var(--bg-card)}
.cs-card h3{margin:0;font-family:var(--font-display);font-weight:700;
    font-size:1.02rem;letter-spacing:-.2px;line-height:1.35;color:var(--white)}
.cs-card-excerpt{margin:0;font-size:.86rem;color:var(--gray);line-height:1.6;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cs-card-scope{margin:0;font-family:var(--font-data);font-size:.68rem;letter-spacing:.8px;
    text-transform:uppercase;color:var(--gray)}
.cs-card-pills{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.cs-card-pills li{font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:999px;
    border:1px solid var(--gray-line);color:var(--gray)}
.cs-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-top:auto;padding-top:.55rem}
.cs-card-price{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--blue)}
.cs-card-cta{margin-left:auto;font-family:var(--font-data);font-size:.68rem;
    letter-spacing:1.5px;text-transform:uppercase;color:var(--blue)}

.cs-card--featured>a{flex-direction:row;align-items:stretch}
.cs-card--featured .cs-card-media{aspect-ratio:auto;width:min(42%,420px);flex:0 0 min(42%,420px);min-height:240px}
.cs-card--featured .cs-card-body{padding:clamp(22px,3vw,32px);justify-content:center}
.cs-card--featured h3{font-size:clamp(1.15rem,2vw,1.45rem)}
.cs-card--featured .cs-card-excerpt{-webkit-line-clamp:4}
@media(max-width:720px){
    .cs-card--featured>a{flex-direction:column}
    .cs-card--featured .cs-card-media{width:100%;flex:none;aspect-ratio:16/10;min-height:0}
}

/* Empty / muted note */
.pj-empty{margin:0;padding:22px 24px;border-radius:16px;background:var(--bg-2);
    border:1px solid var(--gray-line);color:var(--gray);font-size:.95rem;line-height:1.65;max-width:56ch}
.pj-empty a{color:var(--blue);font-weight:600;text-decoration:none}
.pj-empty a:hover{color:var(--blue-light)}

@media(max-width:600px){
    .pj-masthead-inner .home-hero-actions{flex-direction:column;align-items:stretch}
    .pj-masthead-inner .home-hero-actions .btn{width:100%}
}