/* Case Studies — showcase builds (2026-09-23).
   Each card is a real build, redrawn from its structure with sample data
   (cv-content/templates/showcase), on a Canvas Mute panel. The whole card links
   to the matching service (.is-linked, styles.css §15). Provenance is always
   labelled: Runs my business · Built in-house (director role) · Client build. */

.section-head h2{color:#fff}
.section-head .eyebrow{color:var(--accent)}
.section-head__sub{margin:12px 0 0; max-width:62ch; color:#B9C6DC; font-size:16px; line-height:1.6}

.build-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  margin-top:var(--space-6);
}
.build-card{
  display:flex; flex-direction:column;
  border-radius:18px; overflow:hidden; padding:0;
}
.build-card__shot{
  position:relative; overflow:hidden;
  background:#0A1836; aspect-ratio:16/10;
  border-bottom:1px solid var(--panel-rule);
}
.build-card__shot img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:scale var(--dur) var(--ease-out);
}
.build-card:hover .build-card__shot img{scale:1.035}
.build-card__body{display:flex; flex-direction:column; flex:1; padding:22px 24px 22px}
.build-card__eb{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--green-ink); margin:0 0 10px;
}
.build-card__hd{
  font-family:var(--font-display); font-size:22px; line-height:1.2; letter-spacing:-.015em;
  color:var(--ink-text); margin:0 0 14px; text-wrap:balance;
}
.build-card__hd .g{color:var(--green-ink)}
.build-card__tags{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0 0 16px; padding:0}
.btag{
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.06em;
  padding:4px 9px; border-radius:999px; border:1px solid transparent; line-height:1.3;
}
/* measured on the white-ish tag fills: all ≥ 4.5:1 */
.btag--own {background:#E8EDF7; border-color:#CDD6E4; color:#15265C} /* was purple; orchid is reserved for the trace node (2026-09-26) */

.btag--cli {background:#E6EFFB; border-color:#CADBF3; color:#1F5AAE}
.btag--live{background:#E3F6EE; border-color:#BFE8D6; color:var(--green-ink)}
.btag--live::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:6px; vertical-align:1px}
/* Outcome line (2026-09-25): one real, owner-supplied result per build. No number is shown where there isn't one. */
.build-card__out{margin:0 0 12px; padding:10px 14px; border:1px solid #BFE8D6; background:var(--green-soft); border-radius:10px; font-size:14.5px; line-height:1.45; color:var(--ink-text); font-weight:600}
.build-card__out-k{display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--green-ink); font-weight:600; margin-bottom:2px}

.build-card__caps{margin:0 0 14px; padding:0; list-style:none; display:grid; gap:7px}
.build-card__caps li{position:relative; padding-left:20px; font-size:14.5px; line-height:1.5; color:var(--text-body)}
.build-card__caps li::before{content:"\2713"; position:absolute; left:0; top:0; color:var(--green-ink); font-weight:700}
.build-card__rep{margin:0 0 18px; font-size:13.5px; line-height:1.55; color:var(--text-muted)}
.build-card__rep b{color:var(--text-strong); font-weight:600}
.build-card__more{
  padding-top:14px; border-top:1px solid var(--panel-rule);
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:.02em;
  text-decoration:none; display:flex; align-items:center; min-height:44px;
}
.panel a.build-card__more{color:var(--green-ink)}

/* Featured: the first build spans the grid, shot left / copy right. */
.build-card--feat{grid-column:1 / -1; flex-direction:row}
.build-card--feat .build-card__shot{flex:0 0 58%; aspect-ratio:auto; min-height:100%; border-bottom:0}
.build-card--feat .build-card__body{padding:32px 32px 26px; justify-content:center}
.build-card--feat .build-card__hd{font-size:clamp(24px,2.4vw,32px)}

.client-strip{margin-top:24px; border-radius:18px; padding:22px 24px}
.client-strip__row{display:flex; gap:24px; align-items:flex-start; justify-content:space-between}
.client-strip__hd{font-family:var(--font-display); font-size:20px; color:var(--ink-text); margin:0 0 8px}
.client-strip p{margin:0; font-size:14.5px; line-height:1.6; max-width:70ch}
.client-strip .build-card__tags{margin:0; flex:none}

@media (max-width:900px){
  .build-card--feat{flex-direction:column}
  .build-card--feat .build-card__shot{flex:none; aspect-ratio:16/10; min-height:0}
  .build-card--feat .build-card__body{padding:22px 24px}
}
@media (max-width:780px){
  .build-grid{grid-template-columns:1fr; gap:16px}
  .client-strip__row{flex-direction:column; gap:14px}
}
@media (prefers-reduced-motion:reduce){ .build-card__shot img{transition:none} }
/* .section-head p (styles.css) outranks a bare class — scope it. */
.section-head .section-head__sub{color:#B9C6DC}

/* "How it works" expander (2026-09-27): the extra confirmed capabilities, one tap away.
   Sits above the whole-card link layer (.is-linked .card-link::after, z-index 1). */
.build-card__how{position:relative; z-index:2; margin:-4px 0 14px}
.build-card__how summary{list-style:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer;
  font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--green-ink)}
.build-card__how summary::-webkit-details-marker{display:none}
.build-card__how summary::before{content:"+"; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%;
  border:1.5px solid currentColor; font-size:14px; line-height:1}
.build-card__how[open] summary::before{content:"\2013"}
.build-card__how summary:hover{text-decoration:underline; text-underline-offset:3px}
.build-card__how summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.build-card__how .build-card__caps{margin:4px 0 0}

/* Result + Replaces anchor to the foot of every card (2026-09-27), so they line up across a
   row whatever the bullets or an open "How it works" add above. The first of the pair takes
   the auto margin: Result when a card has one, otherwise Replaces. */
.build-card__out{margin-top:auto}
.build-card__rep:not(.build-card__out + .build-card__rep){margin-top:auto}
/* Cards with neither (Home teasers without a Result) anchor the link itself. */
.build-card__body > .build-card__more:not(.build-card__out ~ .build-card__more):not(.build-card__rep ~ .build-card__more){margin-top:auto}

/* Featured build: a neon trace between the screen and the copy (2026-09-27), the same
   green line as the hero/footer dividers. Vertical beside the shot; horizontal once the
   card stacks (≤900px, in the media query above). */
.build-card--feat .build-card__shot::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:2px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(46,224,154,.15),#2EE09A 18%,#2EE09A 82%,rgba(46,224,154,.15));
  box-shadow:0 0 10px rgba(46,224,154,.6),0 0 22px rgba(46,224,154,.25);
}
@media (max-width:900px){
  .build-card--feat .build-card__shot::after{top:auto; left:0; width:auto; height:2px;
    background:linear-gradient(90deg,rgba(46,224,154,.15),#2EE09A 18%,#2EE09A 82%,rgba(46,224,154,.15))}
}