/* Where to find your tire size — shared section
   -------------------------------------------------------------------------
   Styles for Views/Partials/WhereToFindTireSize.cshtml, loaded by both the
   "tire-search" and "tire-search-size" bundles so the section renders
   identically on the by-vehicle and by-size pages.

   Self-contained for the same reason as the saved-vehicles band: the two pages
   mount under different ids and name their equivalents tsv- and tss-, so the
   tokens, the shell width and the heading are declared here.
   ------------------------------------------------------------------------- */

.fts {
    --fts-blue: #1D4288;
    /* Bright #3EB049 is 2.7:1 on white, so the kicker takes this darker tone. */
    --fts-green-text: #237A2E;
    --fts-ink: #1A1A1A;
    --fts-muted: #555;
    --fts-rule: #D9DCE1;
    --fts-radius: 6px;

    /* Lighter on top than a band that opens a page: this section always follows
       something, and on the trim step it is what a shopper who cannot identify
       their trim reaches for next. */
    padding-block: 40px 72px;
    flex: 1 0 auto;
    /* Jumped to from the trim step, so the heading lands clear of the viewport
       edge rather than flush against it. */
    scroll-margin-top: 24px;
}

/* Focus lands here from the trim step's jump link, so the reading position
   follows the scroll. A section rather than a control, so no ring. */
.fts:focus {
    outline: none;
}

.fts__shell {
    max-width: 1400px;
    margin: 0 auto;
    padding-inline: 24px;
    width: 100%;
}

/* The heading tightens rather than the lede pulling itself up, so the pair
   reads as one block without a negative margin holding it together. */
.fts__heading {
    font-family: BebasNeue;
    font-size: 36px;
    line-height: 1;
    color: var(--fts-blue);
    margin: 0 0 12px;
}

.fts__lede {
    font-family: Inter;
    font-size: 16px;
    line-height: 24px;
    color: var(--fts-muted);
    max-width: 52ch;
    margin: 0 0 32px;
    /* Two sentences that wrap to a second line kept leaving one word alone on
       it; balancing evens the lines instead. */
    text-wrap: balance;
}

/* One line at desktop widths rather than wrapping inside a measure cap. */
@media (min-width: 992px) {
    .fts__lede {
        max-width: none;
    }
}

.fts__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.fts__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--fts-rule);
    border-radius: var(--fts-radius);
    padding: 20px 22px 22px;
}

.fts__img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 16px;
}

/* The placard's own artwork carries a wide margin, so at the same rendered
   width its text reads far smaller than the sidewalls beside it. Bled into the
   card's padding to bring the two back to a similar scale. */
.fts__img--placard {
    width: calc(100% + 24px);
    max-width: none;
    margin-inline: -12px;
}

.fts__kicker {
    font-family: Inter;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fts-green-text);
    margin: 0 0 6px;
}

.fts__title {
    font-family: Inter;
    font-size: 17px;
    font-weight: 700;
    color: var(--fts-blue);
    margin: 0 0 8px;
}

.fts__body {
    font-family: Inter;
    font-size: 15px;
    line-height: 22px;
    color: var(--fts-muted);
    margin: 0;
}

.fts__body strong {
    color: var(--fts-ink);
}

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

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

@media (max-width: 767px) {
    /* Full bleed: the placard's own text is the content here, and inside the
       card's padding it renders too small to read on a phone. All three bleed
       so the stacked cards stay consistent. */
    .fts__card {
        overflow: hidden;
    }

    .fts__img,
    .fts__img--placard {
        width: calc(100% + 44px);
        max-width: none;
        margin: -20px -22px 16px;
        border-radius: 0;
    }

    .fts {
        padding-block: 24px 48px;
        /* More clearance than desktop: the jump was landing past the heading
           and the first line of the lede, which on a phone wraps to three. */
        scroll-margin-top: 88px;
    }

    .fts__shell {
        padding-inline: 16px;
    }

    .fts__heading {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .fts__lede {
        margin-bottom: 24px;
    }

    .fts__grid {
        grid-template-columns: 1fr;
    }
}