/* /rent-a-{brand}/{city} and the choose-a-state page (SER-597, boards/Brand.html + City hero).
   Body class "crl": tokens and components (.tbl, .hbar, .chip, .mchip, .car, .card, .make-mark,
   .hero-bg) come from base.css; page-only rules here. */
.bc-hero { position: relative; overflow: hidden; padding: 28px 0 56px; border-bottom: 1px solid var(--line); }
.bc-hero-photo { display: flex; align-items: flex-end; min-height: 520px; }
.bc-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.bc-hero-photo::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(10,10,11,.95) 0%, rgba(10,10,11,.6) 50%, rgba(10,10,11,.2) 80%), linear-gradient(0deg, var(--bg) 0%, rgba(10,10,11,0) 40%); }
.bc-hero-in { position: relative; z-index: 1; width: 100%; }
.bc-hero-mark { display: flex; align-items: center; height: 64px; margin-bottom: 18px; color: var(--tx); }
.bc-hero h1 { margin: 14px 0 0; font-size: var(--fs-h1); max-width: 980px; overflow-wrap: anywhere; }
.bc-updated { margin: 12px 0 0; font-size: 14px; }
.bc-sub { margin: 16px 0 0; max-width: 680px; font-size: var(--fs-lead); color: var(--tx-2); }
.bc-stats { display: flex; flex-wrap: wrap; gap: 20px 44px; margin-top: 28px; }
.bc-stats .price { font-size: 36px; line-height: 1.1; }
.bc-stats .bc-low { color: var(--accent); }
.bc-hero .bc-chips { margin-top: 24px; }

.bc-sec { padding-top: 72px; }
.bc-sec > h2, .bc-links h2 { margin: 0 0 18px; font-size: var(--fs-h2-sm); }
.bc-links h2 + .bc-chips + h2 { margin-top: 48px; }
.bc-tbl-wrap { overflow-x: auto; }
.bc-tbl td { vertical-align: middle; }
.bc-tbl .bc-model { display: inline-block; padding: 6px 0; color: var(--tx); font-weight: 700; text-decoration: none; }
.bc-tbl .bc-model:hover { color: var(--accent); }
.bc-tbl .price { white-space: nowrap; }
.bc-cfp { font: 500 14px var(--font-body); }
.bc-range-col { width: 240px; }
.bc-tbl .hbar { width: 220px; max-width: 100%; }

.bc-cos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.bc-co { display: flex; flex-direction: column; gap: 4px; padding: 22px; min-width: 0; }
.bc-co h3 { margin: 0; font-size: 18px; }
.bc-co h3 a { color: var(--tx); text-decoration: none; overflow-wrap: anywhere; }
.bc-co h3 a:hover { color: var(--accent); }
.bc-co .muted { font-size: 14px; }
.bc-co-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; font-size: 14px; font-weight: 700; }
.bc-co-links a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }
.bc-more { margin-top: 16px; }
.bc-more summary { display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; font-weight: 700; color: var(--link); }
.bc-more[open] summary { margin-bottom: 16px; }

.bc-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.bc-cars .car:hover { border-color: var(--accent); color: var(--tx); }
.bc-noimg { aspect-ratio: 4 / 3; background: var(--s2); }
.bc-car-body { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; }
.bc-car-name { font-weight: 700; overflow-wrap: anywhere; }
.bc-car-co { font-size: 14px; }
.bc-car-price { margin-top: 6px; font-size: 14px; }
.bc-car-price .price { font-size: 18px; }

.bc-about .prose { max-width: 820px; }
.bc-about .chunk h3 { margin-top: 28px; }
.bc-about .chunk:first-child h3 { margin-top: 0; }
.bc-about .chunk p, .bc-about .chunk ul { margin: 0 0 14px; }

.bc-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.bc-chips .chip { min-height: var(--tap); }
.bc-links { padding-bottom: 96px; }
.bc-sec a:focus-visible, .bc-hero a:focus-visible, .bc-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 700px) {
  .bc-range-col { display: none; }
  .bc-hero-photo { min-height: 460px; }
  .bc-stats .price { font-size: 28px; }
}
@media (max-width: 600px) { .bc-hero h1 { font-size: clamp(26px, 7.6vw, 40px); overflow-wrap: normal; } }
@media (max-width: 600px) {
  .bc-sec > h2, .bc-links h2 { font-size: 24px; }
  .bc-hero-photo::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(10,10,11,.8) 55%, rgba(10,10,11,.6) 100%); }
}