/*
 * TTF Nav: the car generation page (Hub Run Sheet H4.2).
 *
 * Page 1 of /fitment/{generation}/: the count line under the H1, then the category rows with their
 * subcategory chips, the engine table and the car's top brands, and after the products the model's other
 * generations. The light archive frame of the category pages (hub-header.css): the theme's container,
 * colours and font. ttf-nav/cars-page.php enqueues this file on page 1 of a generation page only.
 * Class prefix ttf-car.
 */

/* The count line: "3 categories · 589 products". */
.ttf-car__summary {
    margin: .3rem 0 .85rem;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-description, #868E96);
    font-variant-numeric: tabular-nums;
}

.ttf-car { margin: 0 0 1.75rem; }
.ttf-car > section + section { margin-top: 1.5rem; }
.ttf-car .ttf-car__heading {
    --ttf-h2: 1.0625rem; /* ttf-page-zoom.php sizes every h2 through this property, with !important */
    margin: 0 0 .75rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-primary, #212529);
}
.ttf-car__n {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--color-text-description, #868E96);
    font-variant-numeric: tabular-nums;
}

/* Category rows: the heading links the category for this car; its subcategories follow as chips. */
.ttf-car__row {
    padding: .8rem 1rem;
    background: #fff;
    border: 1px solid var(--color-info-dark, #DEE2E6);
    border-radius: var(--theme-theme-radius-small, 8px);
}
.ttf-car__row + .ttf-car__row { margin-top: .6rem; }
.ttf-car .ttf-car__row-title {
    --ttf-h3: .9375rem;
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
}
.ttf-car__row-title a { color: var(--color-text-primary, #212529); text-decoration: none; }
.ttf-car__row-title a:hover,
.ttf-car__row-title a:focus-visible { color: var(--color-primary, #EF233C); }
.ttf-car__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.ttf-car__chips > li { margin: 0; padding: 0; }
.ttf-car__chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: var(--color-info-light, #F1F3F5);
    color: var(--color-text-primary, #212529);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.ttf-car__chip:hover,
.ttf-car__chip:focus-visible {
    background: var(--color-primary-lighter, #FFF4F6);
    color: var(--color-primary, #EF233C);
}
.ttf-car__brands .ttf-car__chips { margin-top: 0; }

/* The engine table: 30 rows shown, the rest inside "Show all". */
.ttf-car__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ttf-car__engines {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: .875rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
.ttf-car__engines th,
.ttf-car__engines td {
    padding: .45rem .75rem;
    border: 0;
    border-bottom: 1px solid var(--color-info-dark, #DEE2E6);
    text-align: left;
    vertical-align: top;
}
.ttf-car__engines th {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-text-description, #868E96);
    background: var(--color-info-light, #F1F3F5);
}
.ttf-car__engines td:not(:first-child) { white-space: nowrap; color: var(--color-text-description, #868E96); }
.ttf-car__engines a { color: var(--color-text-primary, #212529); font-weight: 600; text-decoration: none; }
.ttf-car__engines a:hover,
.ttf-car__engines a:focus-visible { color: var(--color-primary, #EF233C); }
.ttf-car__more { margin-top: .5rem; }
.ttf-car__more > summary {
    display: inline-block;
    padding: .35rem 0;
    color: var(--color-primary, #EF233C);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}
.ttf-car__more[open] > summary { margin-bottom: .4rem; }
.ttf-car__engines--rest thead { display: none; }

/* After the products: the model's other generations and the make. */
.ttf-car__family { margin: 2rem 0 1rem; }
.ttf-car__gens { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.ttf-car__gens > li { margin: 0; padding: 0; }
.ttf-car__gens a { font-weight: 600; color: var(--color-text-primary, #212529); }
.ttf-car__gens a:hover { color: var(--color-primary, #EF233C); }
.ttf-car__gen { font-weight: 600; color: var(--color-text-primary, #212529); }
.ttf-car__up { margin: .9rem 0 0; font-size: .9375rem; }
.ttf-car__up a { font-weight: 600; color: var(--color-primary, #EF233C); }

/* Phones: chips scroll sideways in one row. */
@media (max-width: 767.98px) {
    .ttf-car { margin-bottom: 1.25rem; }
    .ttf-car__row { padding: .7rem .75rem; }
    .ttf-car__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .ttf-car__chips::-webkit-scrollbar { display: none; }
    .ttf-car__engines th, .ttf-car__engines td { padding: .4rem .5rem; }
}