/* British Built Cars — public site: page-level composition.
   Grids, section rhythm and per-page overrides only; components live in
   components.css. Breakpoints: 1080 / 900 / 720 / 480. */

/* ─── Reading copy on a dark band ──────────────────────────────
   A step brighter than the dim chrome tokens so a long stretch of prose stays
   comfortable, leaving --bbc-page free as the emphasis step for ledes, closing
   lines and <strong>. Shared by the home intro, About and manufacturer pages. */

/* A descendant selector, not a child one: the About lede and closing lines are
   wrapped a level deeper, and legacy editor HTML nests paragraphs in divs. */
.bbc-bandprose p {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--bbc-on-dark);
    margin-bottom: 16px;
}

/* ─── Home ─────────────────────────────────────────────────── */

/* Intro band: copy beside the stat column. */
.bbc-intro {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 60px;
    align-items: start;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* The intro copy is one settings blob, and HtmlText::sanitise() strips class
   attributes, so the opening and closing lines are picked out by position
   rather than by the classes the setting's markup carries. */
.bbc-intro__body > p:first-child {
    font-size: 20px;
    line-height: 1.55;
    color: var(--bbc-page);
    margin-bottom: 20px;
}

.bbc-intro__body > p:first-child em {
    color: var(--bbc-red);
}

.bbc-intro em {
    color: var(--bbc-on-dark);
}

.bbc-intro strong {
    color: var(--bbc-page);
    font-weight: 600;
}

/* Closing "thank you" line, likewise identified by position. */
.bbc-intro__body > p:last-child {
    color: var(--bbc-page);
    font-weight: 500;
    margin-bottom: 16px;
}

.bbc-intro__note {
    font-size: 12.5px !important;
    line-height: 1.6;
    color: var(--bbc-on-dark-faint) !important;
    margin-bottom: 0 !important;
}

/* Latest Additions: feature beside the compact list. */
.bbc-home-additions {
    padding-top: 64px;
    padding-bottom: 10px;
}

.bbc-additions {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 44px;
    margin-bottom: 8px;
}

/* Video band: featured film beside the library list. */
.bbc-home-video {
    margin-top: 64px;
}

.bbc-videoband {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 44px;
    padding-top: 64px;
    padding-bottom: 70px;
}

.bbc-videoband .bbc-sechead {
    margin-bottom: 26px;
}

.bbc-home-news {
    padding-top: 60px;
    padding-bottom: 60px;
}

.bbc-home-reviews {
    padding-top: 64px;
    padding-bottom: 80px;
}

@media (max-width: 1080px) {
    .bbc-intro {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .bbc-additions {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .bbc-videoband {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

/* ─── Shared grids ─────────────────────────────────────────── */

/* Five-across news strip on the home page. */
.bbc-grid-news {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}

@media (max-width: 1080px) {
    .bbc-grid-news {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .bbc-grid-news {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .bbc-grid-news {
        grid-template-columns: 1fr;
    }
}

/* Three-across card grid: vehicles, news index, videos, related items. */
.bbc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.bbc-grid-3--wide {
    gap: 32px;
}

.bbc-grid-3--video {
    gap: 30px;
}

@media (max-width: 1080px) {
    .bbc-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .bbc-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ─── About ────────────────────────────────────────────────── */

.bbc-about {
    padding-top: 56px;
    padding-bottom: 56px;
}

/* A page of body copy rather than the home page's few lines, so it sits a step
   brighter than .bbc-intro: --bbc-on-dark against the band, leaving --bbc-page
   free as the emphasis step for the lede, closing line and <strong>. */
/* The wrappers, not the paragraphs, carry these classes: the copy comes from
   settings through HtmlText::sanitise(), which strips class attributes. */
.bbc-about .bbc-about__lede > p {
    font-size: 19px;
    line-height: 1.6;
    color: var(--bbc-page);
    margin-bottom: 22px;
}

.bbc-about .bbc-about__closing > p {
    color: var(--bbc-page);
    font-weight: 500;
    margin-bottom: 0;
}

/* The body runs far longer than four stat rows, so the column travels with the
   reader instead of leaving a hole. Overrides the component's align-self:
   stretch, which sticky cannot work against. */
.bbc-about .bbc-stats {
    position: sticky;
    top: 24px;
    align-self: start;
}

.bbc-about .bbc-stats .bbc-panel {
    margin-top: 26px;
}

/* Must follow the rule above, not join the shared 1080px block higher up: a
   media query adds no specificity, so an earlier override would lose the tie. */
@media (max-width: 1080px) {
    /* Stacked by .bbc-intro, the column would pin itself over the copy it
       follows. */
    .bbc-about .bbc-stats {
        position: static;
    }
}

/* ─── Vehicles listing ────────────────────────────────────── */

.bbc-results {
    padding-top: 36px;
    padding-bottom: 80px;
}

/* ─── Vehicle & review detail ─────────────────────────────── */

/* Image beside the title block, on the dark head. */
/* minmax(0, …) rather than a bare fr: an fr track carries min-width: auto, so
   one wide child (the gallery's thumb strip) would otherwise dictate the whole
   grid and squeeze the column beside it. */
.bbc-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    padding-top: 24px;
    padding-bottom: 56px;
}

/* The gallery stays top-aligned, but it is taller than the intro even with the
   facts strip, so the intro is centred against it rather than leaving the whole
   difference as a hole underneath. */
.bbc-detail__intro {
    align-self: center;
}

.bbc-detail__title {
    font-size: 42px;
    margin-bottom: 18px;
}

.bbc-detail__make {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bbc-navy-muted);
    margin-bottom: 10px;
}

.bbc-detail__blurb {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--bbc-on-dark);
    margin-bottom: 26px;
}

.bbc-detail__date {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bbc-navy-muted);
    margin-bottom: 20px;
}

/* Body copy beside the key-details column. */
.bbc-detailbody {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    padding-top: 56px;
    padding-bottom: 20px;
}

.bbc-detailbody p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--bbc-muted-deep);
    margin-bottom: 16px;
}

.bbc-detailbody p:last-child {
    margin-bottom: 0;
}

/* The description usually runs much longer than the spec panel, so the panel
   travels with the reader instead of leaving the column empty. Sticky works
   here because the grid item is start-aligned: it can move within its full
   height grid area. */
.bbc-detailside {
    position: sticky;
    top: 24px;
    align-self: start;
    display: grid;
    gap: 20px;
}

.bbc-related {
    padding-top: 44px;
    padding-bottom: 80px;
}

.bbc-related .bbc-sechead h2 {
    font-size: 28px;
}

@media (max-width: 1080px) {
    .bbc-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    /* Stacked, there is nothing beside the intro to centre it against. */
    .bbc-detail__intro {
        align-self: start;
    }

    .bbc-detailbody {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    /* Stacked, the panel would pin itself over the copy it follows. */
    .bbc-detailside {
        position: static;
    }
}

@media (max-width: 720px) {
    .bbc-detail__title {
        font-size: 32px;
    }
}

/* ─── News index & article ────────────────────────────────── */

.bbc-newsindex {
    padding-top: 56px;
    padding-bottom: 80px;
}

/* Narrow head above a full-measure article. */
.bbc-article__head {
    max-width: var(--bbc-prose);
    margin: 0 auto;
    padding: 26px var(--bbc-gutter) 48px;
}

.bbc-article__head h1 {
    font-size: 42px;
    line-height: 1.06;
    margin-bottom: 16px;
}

.bbc-article__standfirst {
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--bbc-on-dark);
}

/* The lead image overlaps the dark head by 24px. */
.bbc-article__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bbc-line);
    margin-top: -24px;
}

.bbc-article__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bbc-article__body {
    padding: 36px 0 20px;
}

.bbc-article__body p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--bbc-line-dark-mid);
    margin-bottom: 20px;
}

.bbc-article__body p:last-child {
    margin-bottom: 0;
}

.bbc-article__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--bbc-line-warm);
    padding: 24px 0 70px;
}

@media (max-width: 720px) {
    .bbc-article__head h1 {
        font-size: 30px;
    }
}

/* ─── Videos ───────────────────────────────────────────────── */

.bbc-videoindex {
    padding-top: 56px;
    padding-bottom: 80px;
}

/* Player column beside the "Up next" list. */
.bbc-videodetail {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 44px;
    align-items: start;
    padding-top: 24px;
    padding-bottom: 56px;
}

.bbc-videodetail__stage {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bbc-ink-strong);
}

.bbc-videodetail__stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.6;
}

/* The real player, when the stored embed could be parsed. */
.bbc-videodetail__stage iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.bbc-videodetail__title {
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 26px 0 12px;
    color: var(--bbc-white);
}

.bbc-videodetail__meta {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bbc-navy-muted);
    margin-bottom: 18px;
}

.bbc-videodetail__blurb {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--bbc-on-dark);
}

.bbc-videodetail__aside .bbc-tag {
    margin-bottom: 18px;
}

@media (max-width: 1080px) {
    .bbc-videodetail {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 720px) {
    .bbc-videodetail__title {
        font-size: 26px;
    }
}

/* ─── Reviews ──────────────────────────────────────────────── */

.bbc-reviewindex {
    padding-top: 36px;
    padding-bottom: 80px;
}

.bbc-reviewbody {
    padding-top: 56px;
    padding-bottom: 80px;
}

.bbc-reviewbody p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--bbc-line-dark-mid);
    margin-bottom: 20px;
}

.bbc-reviewbody__foot {
    border-top: 1px solid var(--bbc-line-warm);
    margin-top: 20px;
    padding-top: 24px;
}

.bbc-detail__title--review {
    font-size: 38px;
    margin-bottom: 14px;
}

/* ─── Contact ──────────────────────────────────────────────── */

.bbc-contact {
    padding-top: 56px;
    padding-bottom: 80px;
}

.bbc-contact__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: start;
}

.bbc-contact__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.bbc-contact__note {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--bbc-muted-dark);
    margin-top: 22px;
}

@media (max-width: 1080px) {
    .bbc-contact__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 720px) {
    .bbc-contact__pair {
        grid-template-columns: 1fr;
    }
}

/* ─── Manufacturer detail ──────────────────────────────────── */

/* The description band under a manufacturer's head. Its paragraphs take the
   shared .bbc-bandprose treatment; this only sets the rhythm and the measure. */
.bbc-makeintro {
    padding-top: 48px;
    padding-bottom: 48px;
}

.bbc-makeintro p {
    max-width: 820px;
}

/* ─── Simple content pages (CMS, makes, types, search) ────── */

.bbc-section {
    padding-top: 56px;
    padding-bottom: 80px;
}

.bbc-content h2,
.bbc-content h3 {
    margin: 28px 0 12px;
    color: var(--bbc-ink-strong);
}

.bbc-content p,
.bbc-content li {
    font-size: 16px;
    line-height: 1.75;
    color: var(--bbc-muted-deep);
}

.bbc-content p {
    margin-bottom: 16px;
}

.bbc-content ul,
.bbc-content ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.bbc-content img {
    height: auto;
    margin: 8px 0;
}

/* Keyword search bar, sharing the navy band with the vehicles filters. */
.bbc-searchbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 20px;
    padding-top: 26px;
    padding-bottom: 26px;
}

.bbc-searchbar .bbc-label {
    color: var(--bbc-navy-muted);
}

/* A–Z letter filter above the manufacturer index. */
.bbc-azfilter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 32px;
}

.bbc-azfilter a {
    display: block;
    min-width: 38px;
    padding: 9px 10px;
    text-align: center;
    border: 1px solid var(--bbc-line);
    background: var(--bbc-white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--bbc-ink-strong);
}

.bbc-azfilter a:hover {
    border-color: var(--bbc-red);
    color: var(--bbc-red);
}

.bbc-azfilter a.is-active {
    background: var(--bbc-red);
    border-color: var(--bbc-red);
    color: var(--bbc-white);
}

/* A–Z index of manufacturers. */
.bbc-azgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 28px;
}

.bbc-azgrid a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bbc-line);
    font-family: var(--bbc-font-display);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--bbc-ink-strong);
}

.bbc-azgrid__count {
    font-family: var(--bbc-font-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--bbc-muted);
}

/* Legacy news/video embeds arrive as raw iframe markup from the CMS. */
.bbc-videoembed {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bbc-ink-strong);
}

.bbc-videoembed iframe,
.bbc-videoembed object,
.bbc-videoembed embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bbc-azgrid a:hover {
    color: var(--bbc-red);
}

@media (max-width: 1080px) {
    .bbc-azgrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .bbc-azgrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .bbc-azgrid {
        grid-template-columns: 1fr;
    }
}

/* Pagination for the DB-backed listings. */
.bbc-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
    font-size: 13px;
    font-weight: 600;
}

.bbc-pagination a,
.bbc-pagination span {
    display: block;
    padding: 10px 14px;
    border: 1px solid var(--bbc-line);
    background: var(--bbc-white);
    color: var(--bbc-ink-strong);
}

.bbc-pagination a:hover {
    border-color: var(--bbc-red);
    color: var(--bbc-red);
}

.bbc-pagination .is-current {
    background: var(--bbc-red);
    border-color: var(--bbc-red);
    color: var(--bbc-white);
}

/* ─── Error pages (404, 403, 419, 500) ─────────────────────── */

.bbc-errorpage {
    text-align: center;
}

.bbc-errorpage__label {
    margin-top: 44px;
    color: var(--bbc-muted);
}

.bbc-errorlinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.bbc-errorlinks a {
    display: block;
    padding: 11px 18px;
    border: 1px solid var(--bbc-line);
    background: var(--bbc-white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bbc-ink-strong);
}

.bbc-errorlinks a:hover {
    border-color: var(--bbc-red);
    color: var(--bbc-red);
}