/* Public /z content: the area nav, the model-year spec tables, and the areas themselves. */

/* ---------------------------------------------------------------- area nav */

/* Sticks under the hero as an area is read. The site navbar is absolute over the hero and has
   scrolled away by the time this comes to rest, so the two never fight for the same strip. */
.z-area-nav {
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    background: rgba(255, 255, 255, .78);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    margin-bottom: 2rem;
    position: sticky;
    top: 0;
    z-index: 3;
}

.z-area-list {
    display: flex;
    gap: .4rem;
    list-style: none;
    margin: 0;
    overflow-x: auto;
    padding: .65rem 0;
    scrollbar-width: none;
}

.z-area-list::-webkit-scrollbar {
    display: none;
}

.z-area-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #495057;
    display: inline-flex;
    font-size: .92rem;
    font-weight: 500;
    gap: .4rem;
    padding: .42rem .95rem;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    white-space: nowrap;
}

.z-area-link:hover,
.z-area-link:focus-visible {
    background: rgba(13, 110, 253, .07);
    border-color: rgba(13, 110, 253, .25);
    color: #0d6efd;
}

.z-area-link.is-current {
    background: #0d6efd;
    border-color: #0d6efd;
    box-shadow: 0 2px 10px rgba(13, 110, 253, .28);
    color: #fff;
}

.z-area-link i {
    font-size: .95em;
    opacity: .85;
}

/* ---------------------------------------------------------------- area head */

.z-area {
    margin-bottom: 3.5rem;
}

.z-area-head {
    margin-bottom: 1.75rem;
}

.z-area-title {
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: .35rem;
}

.z-area-subtitle {
    color: #6c757d;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
    max-width: 60ch;
}

/* Whatever the dashboard has written for the model area, above its tabs. */
.z-area-intro {
    margin-bottom: 2rem;
}

/* The model tabs are links now, so each one loads only its own photographs. */
.z-model-tabs {
    border-bottom-color: rgba(15, 23, 42, .12);
    flex-wrap: wrap;
}

.z-model-pane {
    padding-top: 1.75rem;
}

/* ---------------------------------------------------------------- model pane */

.z-model-years {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    font-size: .95rem;
    gap: .5rem;
    margin-bottom: .75rem;
}

.z-model-years-label {
    color: #6c757d;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.z-model-description {
    font-size: 1.02rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------- spec table */

.z-specs {
    margin-bottom: 1rem;
}

.z-specs-legend {
    align-items: center;
    color: #6c757d;
    display: flex;
    font-size: .78rem;
    gap: .4rem;
    margin-bottom: .6rem;
}

.z-specs-key {
    background: rgba(13, 110, 253, .1);
    border: 1px solid rgba(13, 110, 253, .35);
    border-radius: .25rem;
    display: inline-block;
    height: .85rem;
    width: 1.6rem;
}

/* The table scrolls sideways on its own; the page never grows a horizontal scrollbar. */
.z-specs-wrap {
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: .85rem;
    overflow-x: auto;
}

.z-specs-public {
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
    margin: 0;
    width: 100%;
}

.z-specs-public th,
.z-specs-public td {
    border-bottom: 1px solid rgba(15, 23, 42, .07);
    padding: .55rem .85rem;
    text-align: left;
    vertical-align: top;
}

.z-specs-public tbody tr:last-child th,
.z-specs-public tbody tr:last-child td {
    border-bottom: 0;
}

.z-specs-public thead th {
    background: #f8fafc;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    position: sticky;
    top: 0;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
}

/* The specification name stays in view while the year columns scroll under it. */
.z-specs-public tbody th[scope="row"],
.z-specs-public thead th:first-child {
    background: #fff;
    font-weight: 600;
    left: 0;
    min-width: 10rem;
    position: sticky;
    z-index: 1;
}

.z-specs-public thead th:first-child {
    background: #f8fafc;
    z-index: 3;
}

.z-specs-public tbody th[scope="row"] {
    box-shadow: inset -1px 0 0 rgba(15, 23, 42, .06);
}

.z-specs-public td {
    min-width: 8rem;
}

.z-specs-public-group th {
    background: rgba(13, 110, 253, .05);
    color: #0b5ed7;
    font-size: .7rem;
    font-weight: 700;
    left: 0;
    letter-spacing: .1em;
    position: sticky;
    text-transform: uppercase;
}

/* A value the model year changed, rather than one inherited from the base spec. */
.z-specs-public td.is-override {
    background: rgba(13, 110, 253, .07);
    box-shadow: inset 2px 0 0 rgba(13, 110, 253, .5);
    font-weight: 600;
}

/* A value that belongs to this version alone, not to the whole model year. */
.z-specs-public td.is-variant {
    background: rgba(13, 110, 253, .12);
    box-shadow: inset 3px 0 0 rgba(13, 110, 253, .8);
}

/* The year picker hides the other years' columns rather than dropping them from the page. */
.z-spec-col.is-hidden-col {
    display: none;
}

.z-specs-years {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .75rem;
}

.z-specs-year {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 999px;
    color: #343a40;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    padding: .35rem .85rem;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.z-specs-year:hover,
.z-specs-year:focus-visible {
    border-color: rgba(13, 110, 253, .55);
    color: #0d6efd;
}

.z-specs-year.is-active {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

/* The year repeats quietly in each column head, so a printed or scrolled table stays unambiguous. */
.z-specs-col-year {
    color: #6c757d;
    display: block;
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .04em;
}

.z-specs-public tbody tr:hover th[scope="row"],
.z-specs-public tbody tr:hover td {
    background-color: rgba(13, 110, 253, .03);
}

/* ---------------------------------------------------------------- sections */

.z-section {
    scroll-margin-top: 5rem;
}

.z-section-block + .z-section-block {
    margin-top: 2rem;
}

.z-section-block-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: .6rem;
}

.z-section-body {
    line-height: 1.75;
}

.z-section-body > :last-child {
    margin-bottom: 0;
}

.z-section-body img {
    border-radius: .75rem;
    height: auto;
    max-width: 100%;
}

/* A photo dropped into the text keeps its caption with it. */
.z-section-body .z-figure {
    margin: 1.5rem 0;
}

.z-section-body .z-figure figcaption {
    color: #6c757d;
    font-size: .82rem;
    margin-top: .5rem;
}

.z-section-body blockquote {
    border-left: 3px solid rgba(13, 110, 253, .35);
    color: #495057;
    font-style: italic;
    margin: 1.5rem 0;
    padding-left: 1rem;
}

.z-section-body table {
    border-collapse: collapse;
    width: 100%;
}

.z-section-body table th,
.z-section-body table td {
    border: 1px solid rgba(15, 23, 42, .12);
    padding: .5rem .75rem;
}

/* The gallery inside a section already has a rule above it from the section heading. */
.z-section .z-gallery {
    border-top: 0;
    padding-top: 0;
}

/* A gallery that belongs to one subsection sits right under that subsection's text. */
.z-gallery-inline {
    border-top: 0;
    margin-top: 1rem;
    padding-top: 0;
}

/* ---------------------------------------------------------------- link lists */

/* Grouped links (the NewZletter years, say) lay themselves out in as many columns as fit. */
.z-links {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    margin-top: 1.5rem;
}

.z-link-heading {
    color: #6c757d;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    margin-bottom: .6rem;
    text-transform: uppercase;
}

.z-link-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.z-link {
    align-items: center;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: .65rem;
    color: #343a40;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    padding: .55rem .8rem;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.z-link:hover,
.z-link:focus-visible {
    background: #fff;
    border-color: rgba(13, 110, 253, .4);
    color: #0d6efd;
    transform: translateX(2px);
}

.z-link-label {
    font-size: .95rem;
}

.z-link-icon {
    color: #adb5bd;
    flex-shrink: 0;
    font-size: .85rem;
    transition: color .2s ease;
}

.z-link:hover .z-link-icon,
.z-link:focus-visible .z-link-icon {
    color: #0d6efd;
}

/* ---------------------------------------------------------------- videos */

.z-videos {
    margin-top: 1.5rem;
}

.z-video-card {
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 1rem;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

.z-video-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, .1);
    transform: translateY(-2px);
}

.z-video-card video,
.z-video-card iframe {
    background: #0f172a;
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.z-video-card .card-title {
    font-weight: 600;
}

.z-video-card .card-text {
    color: #495057;
    font-size: .94rem;
    line-height: 1.6;
    margin-bottom: 0;
}