/* JMDA — portfolio page styles. Loaded after css/jmda-core.css */

/* ── stat strip ── */
.stat-item{padding:1.3rem .4rem;text-align:center}
.stat-item .n{font-family:var(--display);font-variation-settings:'wght' 700;
  font-size:clamp(26px,3.6vw,40px);line-height:1;letter-spacing:-.025em;color:var(--green);display:block}
.bg-brand .stat-item .n{color:var(--gold-l)}
.stat-item .l{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);display:block;margin-top:.45rem}

/* ── module chips ── */
.mod{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:.32rem .58rem;border:1px solid var(--line);border-radius:99px;display:inline-block;
  margin:0 .22rem .32rem 0;color:var(--ink-2)}
.bg-brand .mod{border-color:rgba(255,255,255,.24);color:#EDF5F1}

/* ── filter chips ── */
.chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:99px;
  padding:.55rem .95rem;min-height:38px;transition:.15s}
.chip.active{background:var(--green);border-color:var(--green);color:#fff}
.bg-brand .chip{border-color:rgba(255,255,255,.3);color:#EDF5F1}
.bg-brand .chip.active{background:var(--gold);border-color:var(--gold);color:#1a1200}

/* ── case study block ── */
.case{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;margin-bottom:1.5rem}
.bg-brand .case{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.case-head{padding:1.4rem 1.5rem;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.bg-brand .case-head{border-bottom-color:rgba(255,255,255,.16)}
.case-head .who{flex:1 1 auto}
.case-head .sector{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-t);display:block;margin-bottom:.3rem}
.bg-brand .case-head .sector{color:var(--gold-l)}
.case-head h2{margin:0;font-size:clamp(20px,2.6vw,28px)}
.case-body{padding:1.5rem}
.case-metrics{display:flex;flex-wrap:wrap;gap:1.6rem;margin-bottom:1.2rem}
.case-metrics div{min-width:92px}
.case-metrics .n{font-family:var(--display);font-variation-settings:'wght' 700;font-size:1.7rem;
  line-height:1;color:var(--green);display:block}
.bg-brand .case-metrics .n{color:var(--gold-l)}
.case-metrics .l{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);display:block;margin-top:.3rem}

/* ── numbered project list ── */
.projlist{list-style:none;margin:0;padding:0;counter-reset:pj}
.projlist li{position:relative;padding-left:40px;margin-bottom:.9rem;font-size:.94rem;line-height:1.55;color:var(--ink-2)}
.projlist li::before{counter-increment:pj;content:counter(pj,decimal-leading-zero);position:absolute;left:0;top:.05rem;
  font-family:var(--mono);font-size:10px;color:var(--gold-t);border:1px solid var(--line);
  border-radius:5px;padding:3px 6px;line-height:1}
.projlist li strong{color:var(--ink);display:block}
.bg-brand .projlist li{color:#EDF5F1}
.bg-brand .projlist li strong{color:#fff}
.bg-brand .projlist li::before{color:var(--gold-l);border-color:rgba(255,255,255,.28)}

/* ── project-type cards ── */
.ptype{display:block;text-decoration:none;color:inherit;height:100%}
.ptype .cat{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-t);display:block;margin-bottom:.35rem}
.ptype h3{font-size:1rem;margin-bottom:.3rem}
.ptype p{font-size:.84rem;color:var(--slate);margin:0}
.ptype:hover h3{color:var(--green)}
.ptype-col[hidden]{display:none}

/* ── client roster ── */
.roster{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}
.roster div{border:1px solid var(--line);border-radius:9px;padding:1rem .7rem;text-align:center;
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 600;font-size:.88rem;
  background:var(--surface);transition:.18s}
.roster div:hover{background:var(--green);color:#fff;border-color:var(--green);transform:translateY(-2px)}

/* ── showcase image ── */
.showcase{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 40px rgba(18,33,27,.14))}
.photo-cap{font-size:.78rem;color:var(--slate);margin-top:.5rem}
.bg-brand .photo-cap{color:#D6E6DD}

@media (max-width:991.98px){
  .roster{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767.98px){
  .roster{grid-template-columns:repeat(2,1fr)}
  .case-head{padding:1.1rem 1.1rem}
  .case-body{padding:1.1rem}
  .case-metrics{gap:1.1rem}
  .projlist li{padding-left:34px;font-size:.9rem}
}