/* Case studies generated by work-src/build.mjs — shared components.
   Mirrors the page-scoped .cp-* styles of the hand-built case pages. */
.cg-frame { background: var(--paper); border: 1px solid var(--hairline); overflow: hidden; box-shadow: var(--shadow-tile); }
.cg-frame__bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: var(--canvas); border-bottom: 1px solid var(--hairline); }
.cg-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--wire-stroke); }
.cg-frame__url { min-width: 0; margin-left: 12px; overflow: hidden; color: var(--graphite); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.cg-frame img { display: block; width: 100%; height: auto; }
.cg-cap { margin-top: 16px; color: var(--graphite); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; letter-spacing: .02em; }
.cg-cap b { color: var(--ink); font-weight: 500; }

/* Who designed it — stated plainly, right under the meta row. */
.cg-credit { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: 24px 28px; border: 1px solid var(--hairline); border-left: 3px solid var(--ink); background: var(--canvas); max-width: 860px; }
.cg-credit--troiana { border-left-color: var(--signal); }
.cg-credit__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); padding-top: 3px; white-space: nowrap; }
.cg-credit p { margin: 0; font-size: 17px; line-height: 1.55; }

.cg-built { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.cg-built article { padding: 28px; background: var(--canvas); }
.cg-built span { color: var(--signal); font-family: var(--font-mono); font-size: 12px; }
.cg-built h3 { margin: 22px 0 8px; font-size: 18px; font-weight: 500; }
.cg-built p { margin: 0; color: var(--graphite); font-size: 15px; line-height: 1.6; }

.cg-gallery { display: grid; grid-template-columns: 1fr 1fr .62fr; gap: clamp(20px, 2.6vw, 34px); align-items: start; }
.cg-gallery figure { min-width: 0; margin: 0; }
.cg-gallery .cg-frame { box-shadow: none; }
.cg-gallery .cg-frame__bar { height: 32px; }
.cg-gallery .cg-frame__bar i { width: 8px; height: 8px; }
.cg-gallery .cg-frame img { height: clamp(300px, 34vw, 480px); object-fit: cover; object-position: top; }

.cg-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.cg-kpi { border-top: 1.5px solid var(--ink); padding-top: 18px; }
.cg-kpi--perfect { border-top-color: var(--signal); }
.cg-kpi__n { font-size: clamp(30px, 3.4vw, 44px); font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.cg-kpi--perfect .cg-kpi__n { color: var(--signal); }
.cg-kpi__l { margin-top: 10px; color: var(--graphite); font-size: 14px; line-height: 1.4; }
.cg-note { margin-top: 22px; color: var(--graphite); font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }

.cg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.cg-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cg-chip { border: 1px solid var(--hairline); padding: 9px 16px; background: var(--canvas); font-family: var(--font-mono); font-size: 13px; }

@media (max-width: 900px) {
  .cg-gallery { grid-template-columns: 1fr 1fr; }
  .cg-gallery figure:last-child { grid-column: 1 / -1; max-width: 360px; }
  .cg-kpis { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}
@media (max-width: 560px) {
  .cg-built, .cg-gallery, .cg-stats { grid-template-columns: 1fr; }
  .cg-credit { grid-template-columns: 1fr; gap: 10px; }
}