/* Rentals page, round 28 (2026-10-17). Loaded only on /rentals/ through the
   template's head block. Everything here reuses site.css components (the
   Home photo band and slab, the rock band, split sections, link rows, the
   About team tiles, the machine-page FAQ) and tokens.css values; nothing
   introduces a new colour, family or spacing value. 8px grid throughout
   (4 only inside a component). */

/* ---------- 1. Hero: the Home Rentals band, continued ----------
   The component (white h1, soft sub-title, 4:3 photo on phones) is shared
   in site.css since round 32. Only this photo's focal point lives here.
   Round 31 (Chris): Get a Quote is the card's only link. */
.rentals-hero .h15-rentals-band__bg img { object-position: 50% 62%; }
@media (max-width: 640px) {
  .rentals-hero .h15-rentals-band__bg img { object-position: 58% 50%; }
}

/* ---------- 2. Tell us the job ----------
   5/7 split from 990: the heading, lead and the four terms on the left, the
   job card on the right. The card is the site's white card (1px card edge,
   the raised card shadow). Fields 48 tall, square, the charcoal outline.
   Below 990 it stacks: head, card. */
.rj__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); align-items: start; }
.rj__lead { margin-top: var(--s-3); font-size: var(--fs-lead); line-height: var(--lh-snug); max-width: 40ch; }
.rj__terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-3); margin-top: var(--s-5); padding-top: var(--s-3); border-top: var(--hairline); }
.rj__terms dt { font-family: var(--f-display); font-weight: 800; font-size: 20px; line-height: 1; text-transform: uppercase; color: var(--c-charcoal); }
.rj__terms dd { margin-top: var(--s-1); font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--c-muted); }
.rj__card {
  padding: var(--s-6); background: var(--c-white);
  border: var(--stroke-w) solid var(--c-card-edge); box-shadow: var(--shadow-card-raised);
}
.rj__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); counter-reset: job; }
.rj__item { counter-increment: job; display: flex; flex-direction: column; gap: var(--s-1); }
.rj__label { font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; color: var(--c-charcoal); }
.rj__label::before { content: counter(job) ". "; color: var(--c-red); }
.rj__hint { font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--c-muted); }
.rj__input {
  width: 100%; min-height: var(--control-h); margin-top: var(--s-half); padding: 0 var(--s-2);
  border: var(--stroke); border-radius: 0; background: var(--c-white); font-size: var(--fs-body); color: var(--c-charcoal);
}
.rj__input:focus-visible { outline: var(--focus); outline-offset: 0; }
.rj__act { margin-top: var(--s-5); }
.rj__act > [hidden], .rj__act-row > [hidden] { display: none; }
/* Round 31: "Not sure? Talk to Dan" beside the button from 641 up (24
   apart, centred on the button), under it on phones (16 below). */
.rj__act-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.rj__act-row + .rj__nojs { margin-top: var(--s-2); }
.rj__act-row + .rj__nojs[hidden] { display: none; }
.rj__nojs { font-size: var(--fs-body); line-height: var(--lh-snug); max-width: 48ch; }
@media (max-width: 989px) {
  .rj__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  .rj__terms { max-width: 560px; }
}
@media (max-width: 640px) {
  .rj__card { padding: var(--s-3); }
  .rj__list { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .rj__terms { gap: var(--s-3) var(--s-2); }
  .rj__act { margin-top: var(--s-4); }
  .rj__act .btn { width: 100%; }
  .rj__act-row { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}

/* ---------- 3. Every rental includes: one slab on the rock ----------
   The card and its red-dash list are shared in site.css since round 32
   (Parts & Service uses them). Round 31 (Chris): the kicker became the h2
   and the old h2 line is gone. */

/* ---------- 4. What we rent ----------
   The split section with the photo over the three link rows (the Parts &
   service layout). The sale line is quiet body text with two text arrows,
   under a hairline. */
.rfleet__sale { margin-top: var(--s-1); padding-top: var(--s-3); border-top: var(--hairline); font-size: var(--fs-body); max-width: 36ch; }
.rfleet__sale-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); }
.rfleet__photo { margin-bottom: var(--s-5); }
/* Round 31: the fleet photo (round 41: the review alternates are gone). */

/* ---------- 5. Go to the source: removed in round 35 (Chris). ---------- */

/* ---------- 6. Rental questions ---------- */
.rfaq__title { margin-bottom: var(--s-3); }

/* ---------- Split sections on this page ----------
   The display head on the left of a split, as About's Our Team. Below 990
   the split stacks (site.css); the head keeps its lead measure. */
@media (max-width: 989px) {
  .rfleet .split__head { grid-column: 1 / -1; padding-right: 0; margin-bottom: var(--s-5); }
  .rfleet .split__body { grid-column: 1 / -1; }
}

/* Round 41 (UI #4): 16px in the job card fields too, so iOS Safari never zooms */
.rj__input { font-size: 16px; }