/* Tire Search — Browse by Brand
   -------------------------------------------------------------------------
   Owned entirely by /{vanity}/tire-search/brand.

   The page loads the "tire-search-brand" bundle rather than "tire-search",
   so none of tire_search/by_vehicle/index.css reaches it. That sheet also
   dresses the vehicle wizard and the home tire-finder modal, and this page
   used to borrow it wholesale; restyling in place would have moved all three.

   Every class is namespaced tsb- for the same reason in the other direction:
   generic names carry site-wide definitions already (.right-section is in
   main.css, .loading-screen and .input-icon-prefix in global.css), so a
   plainly-named rule here would collide with chrome it has nothing to do with.

   Still available without this file, since SimpleLayout always loads them:
   Bootstrap 5.3 (.visually-hidden, .spinner-border, grid + spacing utilities)
   and the master-css bundle (global.css + main.css), which is where
   .btn-cta-green and .btn-cta-blue-solid live.
   ------------------------------------------------------------------------- */

#tire-finder-brand {
    --tsb-blue: #1D4288;
    /* Bright #3EB049 reads at 2.7:1 on white, so green text takes the darker
       tone the promo card tags already use. The bright one is left to fills
       and rings. */
    --tsb-green: #3EB049;
    --tsb-green-text: #237A2E;
    --tsb-ink: #1A1A1A;
    --tsb-muted: #555;
    --tsb-band: #F3F4F6;
    --tsb-rule: #D9DCE1;
    --tsb-radius: 6px;

    /* One elevation pair and one hover ring for everything pickable on the
       page, matched to the by-vehicle sheet so the two read as one system. */
    --tsb-elevation: 0 4px 20px rgba(0, 0, 0, .1);
    --tsb-elevation-hover: 0 8px 24px rgba(0, 0, 0, .12);
    --tsb-ring: 0 0 0 3px var(--tsb-green);

    background: #fff;

    /* SimpleLayout mounts Vuetify sidebars after the page body, and Vuetify's
       .v-application__wrap carries min-height: 100vh. main.css neutralises that
       but only under #page-wrapper, which exists in Master.cshtml and not here,
       so the wrap blankets the first screenful and swallows clicks on anything
       above the fold. Positioning lifts the page over that later sibling. The
       old view got this by accident from a position-relative on its row. */
    position: relative;
    z-index: 1;

    /* SimpleLayout's body is a flex column at min-height 100vh with the footer
       pushed down by margin-top: auto, so a short result set left bare body
       background between the last band and the footer. Growing into that slack
       and handing it to the directory keeps the tint running to the footer. */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

#tire-finder-brand.is-loading {
    opacity: .4;
    pointer-events: none;
}

.tsb-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding-inline: 24px;
}

/* ---------- Breadcrumb ----------
   SimpleLayout renders the breadcrumb above this page with its own gutter
   (px-2 px-md-11) and a large top margin, so it sat on a different column from
   the heading below it. Pulled onto this page's column here.

   Not the hero-overlay-page treatment used by about, careers and warranty:
   that one turns the crumbs white to sit over a photo hero, and this page has
   none. Matched by sibling adjacency, and this sheet only loads on this page,
   so no other breadcrumb is touched. */
#breadcrumb:has(~ #tire-finder-brand) {
    background: var(--tsb-band, #F3F4F6);
    margin-bottom: 0;
}

#breadcrumb:has(~ #tire-finder-brand) > div {
    max-width: 1400px;
    margin: 0 auto !important;
    padding: 24px 24px 0 !important;
}

/* ---------- Intro band ---------- */

/* Lighter than the content bands below it, since the breadcrumb shares this
   band and already supplies clearance above the heading. Matches the step used
   on the sibling size page so the two read alike. */
/* Tinted like the other two entry points, so all three open the same way. The
   breadcrumb above shares the tint. */
.tsb-intro {
    background: var(--tsb-band);
    padding-block: 24px 40px;
}

.tsb-intro__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.tsb-title {
    font-family: BebasNeue;
    font-size: 48px;
    line-height: 1;
    color: var(--tsb-blue);
    margin: 0;
}

.tsb-intro__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Sits above the pair rather than beside it, so the two buttons stay a unit
   and the label reads as the question they answer. */
.tsb-intro__actions-label {
    flex-basis: 100%;
    font-family: Inter;
    font-size: 15px;
    font-weight: 600;
    text-align: right;
    color: var(--tsb-ink);
    margin-bottom: 2px;
}

/* ---------- Search ---------- */

.tsb-search {
    position: relative;
    max-width: 620px;
    margin-top: 28px;
}

.tsb-search__input {
    font-family: Inter;
    font-size: 16px;
    line-height: 24px;
    width: 100%;
    padding: 16px 48px 16px 20px;
    color: var(--tsb-ink);
    background: #fff;
    border: 1px solid var(--tsb-rule);
    border-radius: var(--tsb-radius);
}

.tsb-search__input::placeholder {
    color: var(--tsb-muted);
}

/* The border takes the darker green: bright #3EB049 is 2.7:1 on white, under
   the 3:1 a focus indicator owes its surroundings. The glow can stay bright,
   since the border is what carries the contrast. */
.tsb-search__input:focus {
    outline: none;
    border-color: var(--tsb-green-text);
    box-shadow: 0 0 0 3px rgba(62, 176, 73, .25);
}

/* Chrome draws its own clear affordance on type=search, which would sit
   alongside ours. */
.tsb-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.tsb-search__clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--tsb-muted);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.tsb-search__clear:hover {
    color: var(--tsb-ink);
    background: var(--tsb-band);
}

.tsb-search__clear:focus-visible {
    outline: 3px solid var(--tsb-green-text);
    outline-offset: 2px;
}

/* ---------- Band headings ---------- */

.tsb-band-title {
    font-family: BebasNeue;
    font-size: 36px;
    line-height: 1;
    color: #fff;
    margin: 0 0 28px;
}

.tsb-band-title--dark {
    color: var(--tsb-blue);
}

/* ---------- Platinum partners ---------- */

.tsb-platinum {
    background: var(--tsb-blue);
    padding-block: 56px;
}

.tsb-platinum__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.tsb-partner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    border-radius: var(--tsb-radius);
    padding: 28px 24px;
    text-decoration: none;
    box-shadow: var(--tsb-elevation);
    transition: box-shadow .25s ease, transform .25s ease;
}

/* A ring rather than a border, so the card does not resize on hover. */
.tsb-partner:hover,
.tsb-partner:focus-visible {
    box-shadow: var(--tsb-ring), var(--tsb-elevation-hover);
    transform: translateY(-3px);
}

/* White rather than green: this card sits on the brand band, where green on
   navy is the weaker separation. Ring width and offset match the rest. */
.tsb-partner:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.tsb-partner__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
}

/* Brand marks are never recoloured or dimmed — they sit at full strength on
   the white card, which is what the light CDN variants are for. */
.tsb-partner__logo img {
    max-width: 78%;
    max-height: 100%;
    object-fit: contain;
}

/* ---------- A–Z directory ---------- */

/* White now that the intro carries the tint: two tinted bands with only the
   partner band between them made the page read as banded top and bottom. */
.tsb-directory {
    padding-block: 44px 72px;
    flex: 1 0 auto;
}

/* Grid rather than multi-column so the letters read across each row and then
   down, which is how someone scans for a letter. Multi-column fills one column
   top to bottom first, which puts B below A rather than beside it.
   align-items: start keeps a short group from stretching to its row's height. */
.tsb-directory__cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    column-gap: 40px;
    row-gap: 32px;
}

.tsb-group__letter {
    font-family: BebasNeue;
    font-size: 28px;
    line-height: 1;
    color: var(--tsb-green-text);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tsb-rule);
}

.tsb-group__list {
    margin: 0;
    padding: 0;
}

/* Qualified by the mount id on purpose. main.css carries a site-wide
   "ul:not(...):not(...) li { list-style: disc; padding: 5px 20px }" that sets
   the marker on the li rather than the ul, so list-style on the ul above is
   only inherited and loses to it — and its five :not() classes outscore a
   plain .tsb-group__list li. The id outranks the lot without touching a
   shared file or growing that exclusion chain. */
#tire-finder-brand .tsb-group__list li {
    list-style: none;
    padding: 0;
}

#tire-finder-brand .tsb-group__list li + li {
    margin-top: 10px;
}

.tsb-group__link {
    font-family: Inter;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--tsb-ink);
    text-decoration: none;
}

.tsb-group__link:hover,
.tsb-group__link:focus-visible {
    color: var(--tsb-green-text);
}

/* A colour shift alone is not a focus indicator: someone tabbing the directory
   needs the same ring every other control here gives them. */
.tsb-group__link:focus-visible {
    outline: 3px solid var(--tsb-green-text);
    outline-offset: 2px;
}

.tsb-empty {
    font-family: Inter;
    font-size: 16px;
    color: var(--tsb-muted);
    margin: 0;
}

/* ---------- Loading ---------- */

.tsb-loading {
    display: flex;
    justify-content: center;
    padding-block: 80px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
    .tsb-platinum__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tsb-directory__cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .tsb-shell {
        padding-inline: 16px;
    }

    #breadcrumb:has(~ #tire-finder-brand) > div {
        padding: 16px 16px 0 !important;
    }

    .tsb-title {
        font-size: 36px;
    }

    .tsb-band-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    /* The intro steps down with everything else. It used to sit outside this
       block, which left it tight while the bands around it loosened. */
    .tsb-intro {
        padding-block: 16px 28px;
    }

    .tsb-intro__top {
        gap: 16px;
    }

    .tsb-intro__actions {
        width: 100%;
    }

    .tsb-intro__actions > * {
        flex: 1;
        justify-content: center;
    }

    .tsb-intro__actions-label {
        flex-basis: 100%;
        text-align: center;
    }

    .tsb-search {
        margin-top: 20px;
    }

    .tsb-directory__cols {
        grid-template-columns: repeat(2, 1fr);
        /* 40px between two columns costs a third of the usable width once the
           page gutter is taken out at this size. */
        column-gap: 24px;
    }

    .tsb-platinum {
        padding-block: 36px;
    }

    .tsb-directory {
        padding-block: 36px 48px;
    }
}

@media (max-width: 479px) {
    /* Side by side, the second label wraps to two lines while the first stays
       on one, so the pair reads as two different buttons. */
    .tsb-intro__actions {
        flex-direction: column;
    }

    .tsb-intro__actions > * {
        width: 100%;
    }

    /* Held at 2x2 rather than dropping to a single column: four partners in one
       stack pushed the directory a long way down the page. The card tightens to
       pay for it, with a shorter logo well and less padding at roughly 150px of
       card. */
    .tsb-platinum__grid {
        gap: 12px;
    }

    .tsb-partner {
        padding: 16px 14px;
    }

    .tsb-partner__logo {
        height: 64px;
    }

    .tsb-partner__logo img {
        max-width: 92%;
    }

    /* Two per-brand nudges at this size only. Nexen's mark is nearly square so
       it fills the well's height and is height-bound, which is why it takes a
       max-height rather than a width. Hankook's is very wide and therefore
       width-bound, so it takes the width. Same six points, opposite
       directions. */
    .tsb-partner__logo--nexen img {
        max-height: 94%;
    }

    .tsb-partner__logo--hankook img {
        max-width: 98%;
    }

    .tsb-directory__cols {
        grid-template-columns: 1fr;
    }
}