/* =============================================================================
   Brand index (/Tyre/)

   Shares the homepage palette so the two landing pages read as one design.
   Prefixed .bi- rather than reusing .fp- because the two pages are edited
   independently and a shared class would couple them by accident.
   ========================================================================== */

.bi {
    /* Aliases onto the shared palette in style.css, so the prefixed
       names every rule below already uses keep working. */
    --bi-ink: var(--tr-ink);
    --bi-paper: var(--tr-paper);
    --bi-mist: var(--tr-mist);
    --bi-line: var(--tr-line);
    --bi-text: var(--tr-text);
    --bi-muted: var(--tr-muted);
    --bi-muted-on-ink: var(--tr-muted-on-ink);
    --bi-cyan: var(--tr-cyan);
    --bi-mono: var(--tr-mono);

    /* Matches --tf-wrap / --fp-wrap: the brand index ran 1320px until
       2026-09-01, noticeably wider than every other new-look page. */
    --bi-wrap: 1180px;
}

.bi-wrap {
    max-width: var(--bi-wrap);
    margin: 0 auto;
    padding: 0 20px;
}

/* The page card has to stop being a card so the header and the tier bands can
   run to the viewport edge; each section re-establishes its own .bi-wrap.
   ID selector because #whitebg in style.css beats a class on its own. */
#whitebg.bi-whitebg {
    max-width: none;
    width: 100%;
    /* margin-top is deliberately not set. ad_settings.php emits a responsive
       #whitebg margin (77px, 65px on small screens) that clears the fixed
       navbar at every breakpoint, and a single hand-picked figure could only
       ever be right at one width. */
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* The wide-site branch in index.php opens a .container inside #whitebg, which
   would put the 1140px cap straight back. */
#whitebg.bi-whitebg > main > .row > .container {
    max-width: none;
    width: 100%;
}

/* Bootstrap's .row carries negative side gutters that the parent's padding
   normally absorbs. Zeroing #whitebg's padding for the full-bleed header took
   that padding away, so the row hung 12px past the viewport and put a
   horizontal scrollbar on the page. Each section supplies its own padding
   through .bi-wrap, so the gutters are simply not wanted here. */
#whitebg.bi-whitebg > main > .row,
#whitebg.bi-whitebg > main > .row > .container {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    --bs-gutter-x: 0;
}



/* ==========================================================================
   Header
   ========================================================================== */

.bi-head {
    background: var(--bi-ink);
    color: #fff;
    padding: 28px 0 26px;
    margin-bottom: 0;
    /* Containing block for the optional hero photo (.tr-headphoto in
       style.css). Deliberately NOT overflow:hidden - this band ends with the
       search box, and its suggestions dropdown hangs below it. */
    position: relative;
}

.bi-head > .bi-wrap {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    /* The band's scrim thins mid-frame so the photo can read; the small copy
       carries its own shadow against bright patches, same as the tf- and sr-
       bands. The H1 is big enough not to need it. */
    .tr-headphoto ~ .bi-wrap .bi-head__lede,
    .tr-headphoto ~ .bi-wrap .bi-facts,
    .tr-headphoto ~ .bi-wrap .bi-jump__label {
        text-shadow: 0 1px 3px rgba(11, 14, 18, 0.65);
    }

    /* Uncapped over a flat ink band like every other lede (--tr-measure), but
       a photograph sits right-of-centre and needs the right-hand strip the
       copy used to leave it. Same gate as .tf-head__lede in tyres-for.css. */
    .tr-headphoto ~ .bi-wrap .bi-head__lede {
        max-width: 76ch;
    }
}

.bi-head__title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.bi-head__lede {
    margin: 10px 0 0;
    max-width: var(--tr-measure);
    font-size: 1rem;
    line-height: 1.55;
    color: #c6d0d8;
}

.bi-head__search { margin: 18px 0 0; max-width: 640px; }

/* Jump links. The old page had these and the page is long enough to need
   them: 238 brands over four tiers plus the A-Z. */
.bi-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 8px;
    margin: 18px 0 0;
}

.bi-jump__label {
    font-family: var(--bi-mono);
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--bi-muted-on-ink);
    margin-right: 2px;
}

.bi-jump a {
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: #e6ecf1;
    text-decoration: none;
    white-space: nowrap;
}

.bi-jump a:hover,
.bi-jump a:focus-visible {
    background: var(--bi-cyan);
    border-color: var(--bi-cyan);
    color: #fff;
}

/* Without this the fixed navbar sits over whatever you jumped to. */
.bi-tier,
#bi-tests,
#bi-az { scroll-margin-top: 78px; }

.bi-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 38px;
    margin: 20px 0 0;
    padding: 0;
}

.bi-facts li { display: flex; flex-direction: column; }

.bi-facts__n {
    font-family: var(--bi-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.1;
    color: #fff;
}

.bi-facts__label {
    margin-top: 3px;
    font-size: 0.76rem;
    color: var(--bi-muted-on-ink);
}


/* ==========================================================================
   Sections
   ========================================================================== */

/* Each band paints its own ground: #whitebg is transparent above, so anything
   without a background shows the dark page backdrop through. */
.bi-sec { padding: 26px 0; background: var(--bi-paper); }
.bi-sec--mist { background: var(--bi-mist); }

.bi-sec__title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bi-text);
}

.bi-sec__lede {
    margin: 8px 0 20px;
    max-width: var(--tr-measure);
    color: var(--bi-muted);
    line-height: 1.55;
}

.bi-more { margin: 18px 0 0; }

.bi-more a {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--bi-cyan);
    text-decoration: none;
}

.bi-more a:hover { text-decoration: underline; }


/* ==========================================================================
   Tiers
   ========================================================================== */

.bi-tier { margin-bottom: 26px; }

.bi-tier__title {
    margin: 0;
    padding: 0 0 2px;
    border: 0;
    border-top: 2px solid var(--bi-ink);
    padding-top: 12px;
    background: none;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--bi-text);
}

/* Numbers, not adjectives: the tier gradient is the point and the counts
   make it without anyone having to assert it. */
.bi-tier__record {
    margin: 3px 0 14px;
    font-family: var(--bi-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.76rem;
    color: var(--bi-muted);
}


/* ==========================================================================
   Brand cards
   ========================================================================== */

.bi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.bi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 17px 17px 15px;
    background: var(--bi-paper);
    border: 1px solid var(--bi-line);
    border-radius: 7px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.bi-card:hover,
.bi-card:focus-visible {
    border-color: var(--bi-bc, var(--bi-cyan));
    box-shadow: 0 3px 14px rgba(14, 18, 22, 0.09);
}

.bi-card__bar {
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--bi-bc, var(--bi-cyan));
}

.bi-card__logo {
    height: 40px;
    display: flex;
    align-items: center;
    margin: 4px 0 2px;
}

.bi-card__logo img {
    max-height: 40px;
    max-width: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.bi-card__name {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--bi-text);
}

.bi-card:hover .bi-card__name { color: var(--bi-bc, var(--bi-cyan)); }

/* Stretched rather than shrink-to-fit: a three-part record wraps to two lines
   on most cards, and a shrink-wrapped background makes that look ragged. */
.bi-card__record {
    align-self: stretch;
    font-family: var(--bi-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.74rem;
    color: var(--bi-text);
    background: var(--bi-mist);
    padding: 4px 8px;
    border-radius: 3px;
}

.bi-card__meta {
    font-size: 0.78rem;
    color: var(--bi-muted);
    line-height: 1.45;
}

.bi-card__best {
    margin-top: 3px;
    padding-top: 8px;
    border-top: 1px solid var(--bi-line);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--bi-muted);
}

.bi-card__best b { color: var(--bi-text); font-weight: 700; }


/* ==========================================================================
   Tests
   ========================================================================== */

.bi-tests {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px 28px;
}

.bi-tests__head {
    margin: 0 0 8px;
    padding: 0 0 6px;
    border: 0;
    border-bottom: 1px solid var(--bi-line);
    background: none;
    font-family: var(--bi-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bi-muted);
}

.bi-tests__group ul { list-style: none; margin: 0; padding: 0; }
.bi-tests__group li { margin-bottom: 6px; }

.bi-tests__group a {
    font-size: 0.89rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bi-text);
    text-decoration: none;
}

.bi-tests__group a:hover { color: var(--bi-cyan); }


/* ==========================================================================
   A-Z of everything else
   ========================================================================== */

.bi-az {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 16px 22px;
}

.bi-az__letter {
    margin: 0 0 5px;
    padding: 0 0 4px;
    border: 0;
    border-bottom: 1px solid var(--bi-line);
    background: none;
    font-family: var(--bi-mono);
    font-size: 0.88rem;
    color: var(--bi-cyan);
}

.bi-az__group ul { list-style: none; margin: 0; padding: 0; }
.bi-az__group li { margin-bottom: 3px; }

.bi-az__group a {
    font-size: 0.84rem;
    color: var(--bi-text);
    text-decoration: none;
}

.bi-az__group a:hover { color: var(--bi-cyan); text-decoration: underline; }


@media (min-width: 768px) {
    .bi-head { padding: 36px 0 34px; }
    .bi-sec { padding: 34px 0; }
    .bi-sec__title { font-size: 1.7rem; }
}