/* CAR1: car chooser + car pages. Bootstrap does the layout; this only covers what it has no utility for. */
.car-chooser select:disabled { opacity: .6; }
.car-chooser-js [data-car-submit]:disabled { cursor: not-allowed; }
.car-size-list { list-style: none; padding-left: 0; margin-bottom: 0; }
.car-size-list li { padding: .25rem 0; border-top: 1px solid var(--bs-border-color); }
.car-size-list li:first-child { border-top: 0; }
.car-size-derived { color: var(--bs-secondary-color); }
.car-hero { background: var(--bs-tertiary-bg); border-radius: .5rem; }
.car-index a { text-decoration: none; }
.car-index-letter { scroll-margin-top: 5rem; }

/* FIT6: car page header photo (about half the homepage hero's height) */
.car-head { display: flex; flex-direction: column; gap: .75rem; }
.car-head-photo { margin: 0; align-self: stretch; background: #ECECEA; border-radius: .75rem; padding: .35rem; text-align: center; }
.car-head-photo img { display: block; margin: 0 auto; max-width: 100%; height: auto; max-height: 130px; width: auto; object-fit: contain; border-radius: .5rem; }
@media (min-width: 768px) {
    .car-head { flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
    .car-head-text { flex: 1 1 auto; min-width: 0; }
    .car-head-photo { flex: 0 0 auto; align-self: flex-start; width: 300px; padding: .5rem; }
    .car-head-photo img { max-height: 170px; }
}
/* FIT6: position blocks side by side again: 1 per row on phones, 2 on tablets, 3 on desktop; dedicated blocks span the row */
.car-positions { display: grid; grid-template-columns: 1fr; gap: 1rem; grid-auto-flow: row dense; }
@media (min-width: 768px) { .car-positions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .car-positions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.car-positions > .car-position-wide { grid-column: 1 / -1; }