/* 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;
    --tsb-blue-deep: #16346C;
    --tsb-green: #3EB049;
    /* Green reads at 2.7:1 on white, so text links take the darker tone the
       promo card tags already use. The bright green stays for fills. */
    --tsb-green-text: #237A2E;
    --tsb-ink: #1A1A1A;
    --tsb-muted: #555;
    --tsb-band: #F3F4F6;
    --tsb-rule: #D9DCE1;
    --tsb-radius: 6px;

    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;
}

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

.tsb-intro {
    padding-block: 8px 48px;
}

.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;
}

/* ---------- 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);
}

.tsb-search__input:focus {
    outline: none;
    border-color: var(--tsb-blue);
    box-shadow: 0 0 0 3px rgba(29, 66, 136, .15);
}

/* 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);
}

/* ---------- 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;
    background: #fff;
    border-radius: var(--tsb-radius);
    padding: 28px 24px 20px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    transition: box-shadow .25s ease, transform .25s ease;
}

.tsb-partner:hover,
.tsb-partner:focus-visible {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1), 0 8px 28px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
}

.tsb-partner:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

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

/* 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;
}

.tsb-partner__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--tsb-rule);
}

.tsb-partner__name {
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    color: var(--tsb-ink);
}

.tsb-partner__cta {
    font-family: Inter;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--tsb-green-text);
}

.tsb-partner:hover .tsb-partner__cta {
    color: var(--tsb-blue);
}

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

.tsb-directory {
    background: var(--tsb-band);
    padding-block: 56px 72px;
    flex: 1 0 auto;
}

/* Multi-column rather than a grid so the letter groups flow down one column
   and on to the next, which is what keeps the ragged group heights from
   leaving holes across a row. */
.tsb-directory__cols {
    column-count: 4;
    column-gap: 40px;
}

.tsb-group {
    break-inside: avoid;
    margin-bottom: 32px;
}

.tsb-group__letter {
    font-family: BebasNeue;
    font-size: 22px;
    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);
}

.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 {
        column-count: 3;
    }
}

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

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

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

    .tsb-intro__actions {
        width: 100%;
    }

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

    .tsb-directory__cols {
        column-count: 2;
    }

    .tsb-platinum,
    .tsb-directory {
        padding-block: 40px;
    }
}

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

    .tsb-directory__cols {
        column-count: 1;
    }
}