/* MoJo Diecast — page layouts. Builds on tokens.css + components.css. */

.section { padding-block: var(--s-8); }
.narrow > * { max-width: 46rem; }   /* column lines up with the header's left edge */
.narrow h2 { margin-top: var(--s-7); }
.narrow h2:first-of-type { margin-top: var(--s-6); }
.logo-link { display: block; }

/* ---------------- home */
.hero { padding-block: var(--s-7) var(--s-8); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-7); align-items: center; }
.hero-copy .lead { max-width: 34em; }
.hero-copy .btn-row { margin-top: var(--s-5); }
.hero-plate { width: min(100%, 440px); justify-self: end; }

.band-shelf { padding-block: var(--s-7); }
.shelf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-7); }
.shelf h2 { margin-bottom: var(--s-3); }
.shelf .lead { margin: 0; max-width: 38em; }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-7); }
.trio article { border-top: 4px solid var(--navy); padding-top: var(--s-5); }
.trio article p:last-child { margin-bottom: 0; font-weight: 600; }

.follow { padding-top: 0; }
.follow p { font-size: var(--fs-lg); }

/* ---------------- about */
.about-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-4); margin: var(--s-5) 0 var(--s-6); }
.about-photos figure { margin: 0; }
.about-photos img { width: 100%; height: auto; border-radius: 8px; border: 3px solid var(--navy); }
.signoff { font-weight: 600; font-style: italic; color: var(--navy); font-size: var(--fs-lg); }

/* ---------------- condition guide + contact: label / meaning pairs */
.grades, .contact-list { margin: 0 0 var(--s-5); padding: 0; }
.grades > div, .contact-list > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-4);
  border-bottom: 1px solid rgb(14 42 68 / 0.18);
}
.grades > div:first-child, .contact-list > div:first-child { border-top: 1px solid rgb(14 42 68 / 0.18); }
.grades dt { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; line-height: 1.1; color: var(--navy); }
.contact-list dt { font-weight: 600; color: var(--navy); }
.grades dd, .contact-list dd { margin: 0; }
.contact-email { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); font-weight: 600; margin-block: var(--s-5) var(--s-6); }

/* ---------------- privacy */
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: var(--s-3); }

/* ---------------- form pages */
.form-page { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-7) var(--s-8); align-items: start; }
.form-intro { position: sticky; top: var(--s-5); }
.form-intro h2 { margin-top: var(--s-6); }
.steps, .helps { padding-left: 1.3em; }
.steps li, .helps li { margin-bottom: var(--s-2); }
.mojo-form { background: var(--surface); border: 2px solid var(--navy); border-radius: 10px; padding: var(--s-6) clamp(1rem, 0.5rem + 2vw, 2rem); }
.mojo-form .field { max-width: none; }
.mojo-form > .btn { margin-top: var(--s-2); }
.mojo-form .form-status { margin-top: var(--s-5); max-width: none; background: var(--bg); }

/* Choice chips: radio buttons that look like small tags. The native radio stays for keyboard + screen readers. */
.choices .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1rem;
  border: var(--border-w) solid var(--navy); border-radius: 999px; background: var(--paper);
  color: var(--navy); font-weight: 600; font-size: var(--fs-sm);
}
.chip input:checked + span { background: var(--navy); color: var(--cream); }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.field[data-invalid] .chip span { border-color: var(--error); }

/* Segmented control (Rough idea / Exact car) */
.mode-toggle { border: 0; padding: 0; margin: 0 0 var(--s-6); }
.mode-toggle legend { font-weight: 600; color: var(--navy); margin-bottom: var(--s-3); padding: 0; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; border: var(--border-w) solid var(--navy); border-radius: var(--radius-field); overflow: hidden; }
.segmented label { position: relative; }
.segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.5rem 1rem;
  font-family: var(--font-display); font-style: italic; font-size: 1.4rem; letter-spacing: 0.02em;
  color: var(--navy); background: var(--paper);
}
.segmented label + label span { border-left: var(--border-w) solid var(--navy); }
.segmented input:checked + span { background: var(--navy); color: var(--cream); }
.segmented input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -5px; }
[data-mode][hidden] { display: none; }

/* Photo picker */
.photo-field input[type="file"] { padding: 0.6rem; background: var(--paper); }
.photo-list { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.photo-list li { position: relative; width: 96px; }
.photo-list img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 2px solid var(--navy); }
.photo-list .photo-name { display: block; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-list button {
  position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--cream); background: var(--navy); color: var(--cream); font: 700 0.9rem/1 var(--font-body);
  cursor: pointer;
}
.turnstile { margin: var(--s-4) 0 var(--s-5); min-height: 65px; }
.mojo-form button[disabled] { opacity: 0.6; cursor: progress; }

/* ---------------- responsive */
@media (max-width: 900px) {
  .form-page { grid-template-columns: 1fr; }
  .form-intro { position: static; }
  .trio { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-plate { display: none; }           /* the header badge already carries the logo on phones */
  .grades > div, .contact-list > div { grid-template-columns: 1fr; }
  .section { padding-block: var(--s-7); }
}

/* Phones: keep all five nav items on one row under the badge (badge stays at its 140 px minimum). */
@media (max-width: 480px) {
  .site-header .logo { width: 140px; }
  .site-nav { width: 100%; }
  .site-nav ul { justify-content: space-between; gap: var(--s-1) var(--s-3); flex-wrap: nowrap; }
  .site-nav a { font-size: 0.875rem; white-space: nowrap; }
}
@media (max-width: 374px) {
  .site-nav a { font-size: 0.8125rem; }
}