/* ============================================================
   GENE HEW v5 — THE BUILDS
   Outcome-grouped project gallery. Generative card visuals
   (no per-card screenshot) for cohesion + honesty about what's
   deployed vs internal. Reuses v3/v4 tokens.
   ============================================================ */

.builds { padding: clamp(80px, 10vw, 140px) 0; background: var(--paper); }

/* intro row under the section head */
.builds-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 22px; }
.builds-legend .lg { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.builds-legend .lg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.builds-legend .lg.is-static::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-soft); }

/* ---------- theme group ---------- */
.bld-theme { margin-top: clamp(46px, 6vw, 78px); }
.bld-theme-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--line); }
.bld-theme-head h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.95rem); font-weight: 720; letter-spacing: -0.018em; color: var(--ink); }
.bld-theme-head .bt-no { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--green-deep); }
.bld-theme-head .bt-line { color: var(--ink-soft); font-size: 15px; margin-left: auto; max-width: 46ch; }
@media (max-width: 720px) { .bld-theme-head .bt-line { margin-left: 0; flex-basis: 100%; } }

/* ---------- grid ---------- */
.bld-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); }
@media (max-width: 1000px) { .bld-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .bld-grid { grid-template-columns: 1fr; } }

/* ---------- card ---------- */
.bld {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: white;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease, border-color 0.4s ease;
}
.bld.is-live { cursor: pointer; }
.bld.is-live:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px color-mix(in oklab, var(--green-deep), transparent 38%);
  border-color: color-mix(in oklab, var(--green), transparent 45%);
}

/* generative visual panel — theme-tinted gradient + line glyph */
.bld-viz {
  position: relative; aspect-ratio: 5 / 2.4; overflow: hidden;
  background:
    radial-gradient(120% 120% at 12% 0%, color-mix(in oklab, var(--accent), white 30%) 0%, transparent 55%),
    linear-gradient(140deg, color-mix(in oklab, var(--accent), white 12%), color-mix(in oklab, var(--accent), var(--black) 30%));
  display: grid; place-items: center;
}
.bld-viz::after { /* faint contour rings for texture, recalls the hero field */
  content: ""; position: absolute; inset: -40%; opacity: 0.28; pointer-events: none;
  background: repeating-radial-gradient(circle at 78% 18%, transparent 0 13px, color-mix(in oklab, white, transparent 78%) 13px 14px);
  mask: radial-gradient(circle at 78% 18%, black, transparent 70%);
}
.bld-viz svg { width: 46px; height: 46px; stroke: rgba(255,255,255,0.92); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 1; transition: transform 0.6s var(--ease-out); filter: drop-shadow(0 2px 8px rgba(4,24,16,0.3)); }
.bld.is-live:hover .bld-viz svg { transform: scale(1.12) rotate(-3deg); }
.bld-badge {
  position: absolute; top: 11px; left: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(4px);
}
.bld-badge.live { background: var(--green); color: var(--black); display: inline-flex; align-items: center; gap: 6px; }
.bld-badge.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--black); animation: nowPulse 2.4s ease infinite; }
.bld-badge.static { background: rgba(8,18,12,0.42); color: rgba(255,255,255,0.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); }
.bld-badge.flagship { background: var(--green-deep); color: var(--paper); letter-spacing: 0.14em; }
.bld.is-flagship { border-color: color-mix(in oklab, var(--green), transparent 50%); box-shadow: 0 1px 0 color-mix(in oklab, var(--green), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .bld-badge.live::before { animation: none; } }

/* body */
.bld-body { padding: 16px 17px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.bld-name { font-family: var(--font-display); font-weight: 680; font-size: 18px; letter-spacing: -0.012em; color: var(--ink); line-height: 1.1; }
.bld-desc { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; flex: 1; }
.bld-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.bld-chips .chip { font-size: 10.5px; padding: 4px 10px; }

/* foot — live url + arrow, or static tag */
.bld-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 17px; border-top: 1px solid var(--line); background: var(--paper); }
.bld-url { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.bld-arrow { font-size: 14px; color: var(--green-deep); flex: 0 0 auto; transition: transform 0.4s var(--ease-out); }
.bld.is-live:hover .bld-arrow { transform: translate(3px, -3px); }
.bld-go { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--green-deep); white-space: nowrap; text-decoration: none; transition: color 0.3s ease; }
.bld-go:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* per-theme accent (kept inside the green family for brand cohesion) */
.bld-theme[data-theme="agents"]   { --accent: var(--green-deep); }
.bld-theme[data-theme="rag"]      { --accent: color-mix(in oklab, var(--green-deep), #0b6cff 18%); }
.bld-theme[data-theme="creative"] { --accent: color-mix(in oklab, var(--green), #f0a000 16%); }
.bld-theme[data-theme="apps"]     { --accent: color-mix(in oklab, var(--green), #00c2b2 22%); }

/* closing note */
.builds-note { margin-top: clamp(40px, 5vw, 60px); font-size: 14px; color: var(--ink-soft); max-width: 76ch; }
.builds-note a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- hero centering fix ----------
   v4.css `.hero-core { margin: auto 0 }` zeroes the inline margins, pinning the
   1280px block to the left of the viewport — so the (text-align:center) hero reads
   left-shifted, worse the wider the screen. Restore horizontal centering. */
.hero-core { margin-inline: auto; }

/* ---------- screenshot variant of the viz (live, showcase-ready builds) ---------- */
.bld-viz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 1; transition: transform 0.7s var(--ease-out); }
.bld-viz:has(img) { background: var(--green-ghost); }
.bld-viz:has(img)::after { display: none; }
.bld.is-live:hover .bld-viz img { transform: scale(1.045); }

/* ---------- live-site cards: browser-chrome capture + scroll tour ---------- */
.bld-viz.is-web { display: block; padding: 0; background: #fff; }
.bld-chrome { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; background: var(--green-ghost); border-bottom: 1px solid var(--line); }
.bld-chrome i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.bld-chrome i:nth-child(1) { background: #ff5f57; }
.bld-chrome i:nth-child(2) { background: #febc2e; }
.bld-chrome i:nth-child(3) { background: #28c840; }
.bld-chrome-url { margin-left: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld-viz.is-web .bld-shot { position: absolute; left: 0; right: 0; top: 26px; bottom: 0; overflow: hidden; }
.bld-viz.is-web .bld-shot img { object-position: 50% 0%; transition: object-position 6.5s ease-in-out; }
.bld.is-web:hover .bld-viz.is-web .bld-shot img { transform: none; object-position: 50% 100%; }
.bld.is-web:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px color-mix(in oklab, var(--green-deep), transparent 38%); border-color: color-mix(in oklab, var(--green), transparent 45%); }
@media (prefers-reduced-motion: reduce) { .bld-viz.is-web .bld-shot img { transition: none; } }
/* keep the live badge legible over a bright screenshot */
.bld-viz:has(img) .bld-badge.live { box-shadow: 0 2px 10px rgba(4, 24, 16, 0.35); }