/* Case studies: list (/case-studies/), Elias Beach (/case-studies/elias-beach/), Green Padel (/greenpadelclub/).
   Shared components live in neura.css; charts are in cases.js. */

/* ---------- list ---------- */
.csl-hero .figrow{margin-top:clamp(48px,6vw,80px)}
.csl-hero .figrow .v small{font-size:.36em;letter-spacing:0;color:var(--mute);margin-left:.12em;font-weight:400}
.csl-list{display:grid;gap:clamp(20px,2.4vw,28px)}
.csl-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:var(--panel);border-radius:20px;overflow:hidden;text-decoration:none;transition:background .3s,box-shadow .35s var(--ease),transform .35s var(--ease)}
.csl-card:hover{background:var(--white);transform:translateY(-3px);box-shadow:0 30px 60px -36px rgba(28,28,26,.35)}
.csl-card.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.csl-card.rev .csl-img{order:2}
.csl-img{position:relative;min-height:440px;background:var(--paper-2);overflow:hidden}
.csl-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:saturate(.8);transition:transform .8s var(--ease)}
.csl-card:hover .csl-img img{transform:scale(1.03)}
.csl-body{padding:clamp(28px,3.2vw,44px);display:flex;flex-direction:column;gap:16px}
.csl-tags{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--mute)}
.csl-tags b{font-weight:500;color:var(--acc-ink)}
.csl-body h2{font-size:clamp(24px,2.3vw,32px);line-height:1.12;letter-spacing:-.025em;max-width:20ch}
.csl-body>p{font-size:15.5px;color:var(--ink-2);max-width:46ch;line-height:1.6}
.csl-metric{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:22px;border-top:1px solid var(--ink)}
.csl-metric strong{font-size:clamp(52px,5.4vw,76px);line-height:.9;letter-spacing:-.05em;font-weight:450;color:var(--acc-fig);font-variant-numeric:tabular-nums}
.csl-metric span{font-size:14px;color:var(--ink-2);max-width:18ch}
.csl-facts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;font-size:13.5px;color:var(--mute)}
.csl-facts li+li::before{content:"·";margin:0 10px;color:var(--soft)}
.csl-body .more{margin-top:4px}

/* ---------- detail pages ---------- */
.cs-hero .phero-grid{align-items:end}
.cs-hero h1{max-width:13ch}
.cs-photo{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:21/9;background:var(--paper-2)}
.cs-photo img{width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:saturate(.82)}
.cs-study{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.cs-study h2{font-size:clamp(22px,2vw,28px);letter-spacing:-.022em;line-height:1.15;margin-bottom:18px}
.cs-study .prose{font-size:16.5px}
.cs-study .expert{margin-top:32px}
.cs-out .figrow{margin-bottom:clamp(40px,5vw,64px)}
.cs-quote{display:grid;justify-items:center;text-align:center}
.cs-quote .pull{max-width:860px;justify-items:center}
.cs-quote blockquote{text-wrap:balance}
.cs-quote blockquote::before{content:"“";display:block;font-size:1.6em;line-height:.6;color:var(--acc-deep);margin-bottom:.15em}
.cs-season{font-size:14px;color:var(--mute)}
.cs-season b{font-weight:450;color:var(--ink)}

/* lead form (case_studies/partials/lead_form.html) */
.lead .ticks{margin-top:28px;gap:14px}
.lead .ticks li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px}
.lead .ticks li b{font-weight:500;color:var(--ink);display:block}
.lead .ticks li span{grid-column:2}
.fld .opt{color:var(--soft)}
fieldset.fld{border:0;margin:0;padding:0;min-width:0}
fieldset.fld legend{font-size:12.5px;color:var(--mute);padding:0;margin-bottom:6px}
.usage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.unit{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--paper-2)}
.unit label{position:relative;cursor:pointer}
.unit input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.unit span{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--mute);transition:background .2s,color .2s,box-shadow .2s}
.unit input:checked+span{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(28,28,26,.08),0 0 0 1px rgba(28,28,26,.04)}
.unit input:focus-visible+span{outline:2px solid var(--acc-deep);outline-offset:2px}

/* ---------- Green Padel ---------- */
.gp-logo{height:30px;width:auto;filter:brightness(0);opacity:.78}
.gp-head-row{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.gp-head-row .label{margin:0}
.gp-display{margin:0;border-radius:18px;overflow:hidden;background:#0d0f13;box-shadow:0 40px 80px -44px rgba(28,28,26,.55),0 0 0 1px rgba(28,28,26,.06)}
.gp-display img{width:100%;height:auto}
.gp-figs{margin-top:clamp(48px,6vw,80px)}
.gp-photos{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px}
.gp-photos figure{position:relative;margin:0;border-radius:18px;overflow:hidden;background:var(--paper-2)}
.gp-photos img{width:100%;height:100%;object-fit:cover;filter:saturate(.82)}
.gp-photos .wide{aspect-ratio:16/10}
.gp-photos .tall{min-height:100%}
.gp-photos .tall img{position:absolute;inset:0}
.gp-photos figcaption{position:absolute;left:14px;bottom:14px;background:rgba(251,250,247,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:7px 13px;font-size:13px;color:var(--ink)}
.gp-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}

@media (max-width:980px){
  .csl-card,.csl-card.rev{grid-template-columns:minmax(0,1fr)}
  .csl-card.rev .csl-img{order:0}
  .csl-img{min-height:0;aspect-ratio:16/10}
  .cs-study,.gp-why{grid-template-columns:minmax(0,1fr)}
  .cs-photo{aspect-ratio:16/9}
}
@media (max-width:600px){
  .csl-body{padding:22px 20px 24px}
  .csl-metric strong{font-size:52px}
  .gp-photos{grid-template-columns:minmax(0,1fr)}
  .gp-photos .tall{aspect-ratio:4/5}
  .cs-photo{aspect-ratio:4/3;border-radius:16px}
  .usage{grid-template-columns:minmax(0,1fr)}
  .usage .unit{justify-self:start}
}

/* ---------- list v2: clean rows with small thumbnails ---------- */
.csr-list{display:grid;border-top:1px solid var(--line)}
.csr{display:grid;grid-template-columns:168px minmax(0,1fr) 200px 28px;gap:clamp(20px,3vw,40px);align-items:center;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:background .3s}
.csr-img{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--paper-2)}
.csr-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8);transition:transform .6s var(--ease)}
.csr:hover .csr-img img{transform:scale(1.05)}
.csr-body{display:grid;gap:6px;min-width:0}
.csr-tag{font-size:13px;color:var(--mute)}
.csr h2{font-size:clamp(20px,1.8vw,24px);line-height:1.2;letter-spacing:-.02em;transition:color .2s}
.csr p{font-size:14.5px;color:var(--ink-2);max-width:60ch}
.csr-metric{display:grid;gap:4px;justify-items:end;text-align:right}
.csr-metric strong{font-size:clamp(30px,3vw,42px);line-height:1;letter-spacing:-.04em;font-weight:450;color:var(--acc-fig)}
.csr-metric span{font-size:12.5px;color:var(--mute);max-width:22ch}
.csr-arr{font-size:18px;color:var(--soft);transition:transform .25s var(--ease),color .25s}
.csr:hover .csr-arr{transform:translateX(4px);color:var(--ink)}
@media (max-width:860px){
  .csr{grid-template-columns:112px minmax(0,1fr);row-gap:14px}
  .csr-metric{grid-column:2;justify-items:start;text-align:left}
  .csr-arr{display:none}
}