/* JBit overrides on top of the mirrored style.css.
 *
 * REMOVED 2026-09-24: the #instruction .instructor__image placement rules.
 * They positioned the instructor cut-out, and that element no longer exists --
 * the homepage's layered sections became single-photo slots (tools/lib/photo-
 * slots.js), so the cut-out layer is gone from every one of them. The rules
 * were four iterations of work and it is worth saying why they went rather
 * than letting them rot: they were correct, and their subject was removed.
 */

/* ---------------------------------------------------------------------------
 * Photo slots: crop, never stretch.
 *
 * Below 1000px the vendor sizes `.parallax--image img` by width only, with no
 * object-fit, and `#instruction` then forces it to `height: 110vw`. That was
 * fine for the art-directed `instruction-background--mobile.jpg` it was drawn
 * for. A slot holds one landscape photograph at every width, so on a 390px
 * iPhone a 1600x957 photo was drawn into a 390x429 box: squeezed to 54% of its
 * width, the rider and bike visibly tall and thin. `cover` crops instead; the
 * slot's "focus" in content/slots.json (assets/photo-focus.css) says where.
 *
 * Harmless where the box already has the photo's ratio (`all-in`, `community`
 * size by height:auto), and what the vendor already does at >= 1000px.
 * ------------------------------------------------------------------------- */
.parallax--image [data-photo-slot] img {
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * #circuit: keep the heading legible over ANY photograph.
 *
 * The section's scrim is 150px tall and strongest at its TOP, while the heading
 * sits at roughly y=100-138 -- the transparent end. That was invisible as long
 * as the background was the deliberately motion-blurred, almost black plate the
 * cut-out bike sat in front of. The moment this became a photo slot, the first
 * real photograph put red text on a bright kerb.
 *
 * So the scrim now covers where the text actually is, and fades out below it.
 * Tuning it to one image is exactly what broke: the next photo is unknown.
 * ------------------------------------------------------------------------- */
#circuit .pov_text--gradient {
  padding-bottom: 90px;
  background: linear-gradient(
    180deg,
    rgb(10 10 10 / 0.94) 0%,
    rgb(10 10 10 / 0.88) 62%,
    rgb(10 10 10 / 0) 100%
  );
}