/* ============================================================
   BUILD PAGES (build-*.html)
   Loads after pages/modification.css (builds, route, contact) and uses the
   shared poster hero from hero-b.css (.hb-poster). Same light theme, one accent,
   16px surfaces + pill buttons.
   Sections: poster hero / specs row / photo grid / next-build poster / contact.
   ============================================================ */

.bd-back { display: inline-flex; align-items: center; gap: 0.45em; }

/* ---------- specs: one row of label + value, accent rule on top ---------- */
.bd-specs { padding-bottom: 0; }
.bd-spec-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 2px solid var(--accent);
}
.bd-spec-list dt { font-size: 0.9rem; color: var(--text-dim); }
.bd-spec-list dd {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
@media (max-width: 800px) {
  .bd-spec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s3); }
}

/* ---------- photo wall: 4-column grid, wide shots span two, every row filled ---------- */
.bd-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s2);
  margin-top: var(--s4);
}
.bd-wall img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-surface);
  background: var(--bg-3);
}
/* the wide shot takes the row height the portraits set, never its own */
.bd-wall .bd-wide { grid-column: span 2; aspect-ratio: auto; align-self: stretch; contain: size; }
.bd-credit { margin-top: 0.75rem; font-size: 0.9rem; color: var(--text-dim); }
@media (max-width: 800px) {
  .bd-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .bd-wall .bd-wide { aspect-ratio: 16 / 10; align-self: start; contain: none; }
}

/* ---------- credits + press ---------- */
.bd-credits-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s4) clamp(2.5rem, 6vw, 5rem); align-items: start; }
.bd-credits .lead { margin-top: 1rem; }
.bd-cr-list { display: grid; gap: 0.9rem; margin-top: var(--s3); padding-top: var(--s3); border-top: 2px solid var(--accent); }
.bd-cr-list dt { font-size: 0.88rem; color: var(--text-dim); }
.bd-cr-list dd { margin-top: 0.2rem; font-weight: 600; }
.bd-press { list-style: none; margin-top: var(--s3); border-top: 2px solid var(--accent); }
.bd-press li + li { border-top: 1px solid var(--line); }
.bd-press a { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: 0.85rem 0; color: inherit; }
.bd-press-outlet { font-weight: 700; font-size: 0.92rem; }
.bd-press-title { color: var(--text-dim); }
.bd-press .ph { color: var(--accent); transition: transform 0.2s; }
@media (hover: hover) {
  .bd-press a:hover .bd-press-title { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
  .bd-press a:hover .ph { transform: translate(2px, -2px); }
}
@media (max-width: 900px) { .bd-credits-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .bd-press a { grid-template-columns: minmax(0, 1fr) auto; } .bd-press-outlet { grid-column: 1 / -1; } }

/* ---------- next build: the other car as a full-bleed poster link ---------- */
.bd-next {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  min-height: min(80svh, 50vw);
  background: rgb(var(--scrim));
  color: #fff;
}
.bd-next img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.bd-next::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--scrim), 0.7) 0%, rgba(var(--scrim), 0.35) 30%, rgba(var(--scrim), 0) 50%),
    linear-gradient(90deg, rgba(var(--scrim), 0.45) 0%, rgba(var(--scrim), 0) 50%);
}
.bd-next .wrap { display: block; width: 100%; padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.bd-next .g-eyebrow, .bd-next-name { display: block; }
.bd-next .g-eyebrow { color: rgba(255, 255, 255, 0.85); }
.bd-next-name {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.bd-next-go { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 1.1rem; padding: 0.7em 1.35em; border-radius: var(--r-pill); background: #fff; color: var(--text); font-weight: 600; }
.bd-next-go .ph { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.bd-next:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (hover: hover) {
  .bd-next:hover img { transform: scale(1.03); }
  .bd-next:hover .bd-next-go .ph { transform: translateX(4px); }
}
@media (max-width: 700px) {
  .bd-next { min-height: 72svh; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-next img, .bd-next-go .ph { transition: none; }
}