/* ==========================================================================
   Van Alen Archive — redesign component layer (Figma node 183-684).
   Loads AFTER style.css so it wins the cascade. Design tokens live in
   style.css :root; this file only styles the new/redesigned components.
   Start scope: featured carousel + a light pass on the individual item page.
   ========================================================================== */

/* -- Featured carousel block ---------------------------------------------- */
/* Framed to the same content frame as the header/footer (--vai-max + gutter)
   so padding is symmetric on both sides. The track fills this frame. */
.vai-carousel {
    width: 100%;
    max-width: var(--vai-max);
    margin-inline: auto;
    padding: 3rem var(--vai-gutter);
}
.vai-carousel__head {
    margin-bottom: 1.25rem;
}
.vai-carousel__title {
    margin: 0;
    font-family: var(--vai-font-mono);
    font-size: var(--vai-fs-heading, 1.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* The track is a scroll-snap row; JS adds paging + dots on top. */
.vai-carousel__track {
    list-style: none;
    margin: 0;
    padding-block: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2rem) / 3);
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.vai-carousel__track::-webkit-scrollbar {
    display: none;
}
.vai-carousel__slide {
    scroll-snap-align: start;
    min-width: 0;
}
.vai-carousel__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.vai-carousel__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--vai-surface);
    border: 1px solid var(--vai-line-soft);
}
.vai-carousel__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vai-carousel__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        var(--vai-cream),
        var(--vai-cream) 10px,
        var(--vai-band) 10px,
        var(--vai-band) 20px
    );
}
.vai-carousel__caption {
    margin-top: 0.6rem;
    font-family: var(--vai-font-mono);
    font-size: var(--vai-fs-meta, 0.8125rem);
    line-height: 1.4;
    color: var(--vai-black);
}
.vai-carousel__caption-author {
    color: var(--vai-muted);
}
/* Captions are rich text: strip the editor's wrapping <p> margins so the label
   stays tight to the image. */
.vai-carousel__caption > :first-child {
    margin-top: 0;
}
.vai-carousel__caption > :last-child {
    margin-bottom: 0;
}
.vai-carousel__link:hover .vai-carousel__caption,
.vai-carousel__link:focus-visible .vai-carousel__caption {
    color: var(--vai-accent);
    text-decoration: underline;
}

.vai-carousel__dots {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 1.25rem;
}
.vai-carousel__dot {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--vai-line);
    background: transparent;
    cursor: pointer;
}
.vai-carousel__dot.is-active {
    background: var(--vai-accent);
    border-color: var(--vai-accent);
}

@media (max-width: 900px) {
    .vai-carousel__track {
        grid-auto-columns: calc((100% - 1rem) / 2);
    }
}
@media (max-width: 600px) {
    .vai-carousel__track {
        grid-auto-columns: 85%;
    }
    .vai-carousel__title {
        font-size: 1.4rem;
    }
}

/* -- Search bar + quick filters block ------------------------------------- */
.vai-searchbar-block {
    background: var(--vai-band);
    border-bottom: 1px solid var(--vai-line);
    /* Kept compact: the collapsed block stays at or under the navbar height. */
    padding-block: 0.6rem;
}
.vai-searchbar-block__title {
    margin: 0 0 0.35rem;
    font-family: var(--vai-font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.vai-searchbar__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.vai-searchbar {
    position: relative;
}
/* One row: search field + GO + the Filters toggle inline, so the collapsed
   panel adds no vertical height at all. */
.vai-searchbar__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem 1rem;
}
.vai-searchbar__main {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}
.vai-searchbar__input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--vai-font-mono);
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    color: var(--vai-black);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--vai-line);
    padding: 0.3rem 0.25rem;
    border-radius: 0;
}
.vai-searchbar__input::placeholder {
    color: var(--vai-muted);
}
.vai-searchbar__input:focus {
    outline: none;
    border-bottom-color: var(--vai-accent);
}
.vai-searchbar__go {
    flex: none;
    font-family: var(--vai-font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vai-btn-ink);
    background: var(--vai-btn-bg);
    border: 1px solid var(--vai-btn-bg);
    padding: 0 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.vai-searchbar__go:hover:not(:disabled),
.vai-searchbar__go:focus-visible:not(:disabled) {
    background: var(--vai-accent);
    border-color: var(--vai-accent);
}
.vai-searchbar__go:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Collapsible facet panel (native <details>). The toggle sits inline in the bar
   (zero height when collapsed); opening drops the panel as an overlay below. */
.vai-searchbar__facets {
    flex: none;
}
.vai-searchbar__facets-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--vai-font-mono);
    font-size: var(--vai-fs-meta, 0.8125rem);
    text-transform: uppercase;
    letter-spacing: var(--vai-track-label, 0.04em);
    color: var(--vai-black);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.vai-searchbar__facets-toggle::-webkit-details-marker {
    display: none;
}
.vai-searchbar__facets-toggle::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
.vai-searchbar__facets[open] .vai-searchbar__facets-toggle::after {
    transform: rotate(-135deg);
}
.vai-searchbar__facets-toggle:focus-visible {
    outline: 2px solid var(--vai-accent);
    outline-offset: 2px;
}
.vai-searchbar__filters {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.55rem);
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--vai-band);
    border: 1px solid var(--vai-line);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
/* Condensed: label sits inline with its control on one line. */
.vai-searchbar__filter {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}
.vai-searchbar__filter-label {
    font-family: var(--vai-font-mono);
    font-size: var(--vai-fs-meta, 0.8125rem);
    text-transform: uppercase;
    letter-spacing: var(--vai-track-label, 0.04em);
    color: var(--vai-muted);
    white-space: nowrap;
}
.vai-searchbar__year {
    width: 5.5em;
    font-family: var(--vai-font-mono);
    font-size: 0.9rem;
    color: var(--vai-black);
    background: var(--vai-surface);
    border: 1px solid var(--vai-line);
    padding: 0.35rem 0.5rem;
    border-radius: 0;
}
.vai-searchbar__year-sep {
    color: var(--vai-muted);
}
.vai-searchbar__select {
    font-family: var(--vai-font-mono);
    font-size: 0.9rem;
    color: var(--vai-black);
    background: var(--vai-surface);
    border: 1px solid var(--vai-line);
    padding: 0.4rem 2rem 0.4rem 0.5rem;
    border-radius: 0;
    min-width: 12ch;
    max-width: 22ch;
    /* Custom caret so the control reads as part of the mono system. */
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--vai-black) 50%),
        linear-gradient(135deg, var(--vai-black) 50%, transparent 50%);
    background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
    background-repeat: no-repeat;
}
.vai-searchbar__year:focus,
.vai-searchbar__select:focus {
    outline: none;
    border-color: var(--vai-accent);
}

@media (max-width: 600px) {
    .vai-searchbar__filters {
        flex-direction: column;
        align-items: stretch;
    }
    .vai-searchbar__filter {
        width: 100%;
        justify-content: space-between;
    }
    .vai-searchbar__select {
        flex: 1 1 auto;
        max-width: none;
    }
}

/* -- Featured list block --------------------------------------------------- */
.vai-flist {
    padding-block: 3rem;
}
.vai-flist__title {
    margin: 0 0 1rem;
    font-family: var(--vai-font-mono);
    font-size: var(--vai-fs-heading, 1.75rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    /* Override the base h1–h6 uppercase so the heading reads as typed. */
    text-transform: none;
}
/* Thumbnail size from the shared media scale (--vai-media-*); min(..., 42vw)
   keeps large steps from overflowing on narrow screens. */
.vai-flist {
    --flist-thumb: min(var(--vai-media-md), 42vw);
}
.vai-flist--thumb-xs {
    --flist-thumb: min(var(--vai-media-xs), 42vw);
}
.vai-flist--thumb-sm {
    --flist-thumb: min(var(--vai-media-sm), 42vw);
}
.vai-flist--thumb-md {
    --flist-thumb: min(var(--vai-media-md), 42vw);
}
.vai-flist--thumb-lg {
    --flist-thumb: min(var(--vai-media-lg), 42vw);
}
.vai-flist--thumb-xl {
    --flist-thumb: min(var(--vai-media-xl), 42vw);
}
.vai-flist__items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.vai-flist__item {
    display: flex;
    gap: 1.5rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--vai-line);
}
.vai-flist__item:last-child {
    border-bottom: 1px solid var(--vai-line);
}
.vai-flist__thumb {
    flex: none;
    display: block;
    width: var(--flist-thumb);
    height: var(--flist-thumb);
}
.vai-flist__thumb img {
    width: var(--flist-thumb);
    height: var(--flist-thumb);
    object-fit: cover;
    display: block;
    border: 1px solid var(--vai-line-soft);
}
.vai-flist__placeholder {
    display: block;
    width: var(--flist-thumb);
    height: var(--flist-thumb);
    background: repeating-linear-gradient(
        45deg,
        var(--vai-cream),
        var(--vai-cream) 8px,
        var(--vai-band) 8px,
        var(--vai-band) 16px
    );
}
.vai-flist__body {
    flex: 1 1 auto;
    min-width: 0;
}
.vai-flist__item-title {
    margin: 0 0 0.75rem;
    font-family: var(--vai-font-mono);
    font-size: var(--vai-fs-title, 1.5rem);
    font-weight: 500;
    line-height: 1.15;
    text-transform: none;
}
.vai-flist__item-title a {
    color: var(--vai-black);
    text-decoration: none;
}
.vai-flist__item-title a:hover,
.vai-flist__item-title a:focus-visible {
    color: var(--vai-accent);
    text-decoration: underline;
}
.vai-flist__meta {
    margin: 0;
}
.vai-flist__meta-row {
    display: flex;
    gap: 1rem;
    padding: 0.35rem 0;
    border-top: 1px solid var(--vai-line-soft);
}
.vai-flist__meta-row dt {
    flex: none;
    width: 11rem;
    margin: 0;
    font-family: var(--vai-font-mono);
    font-size: var(--vai-fs-meta, 0.8125rem);
    text-transform: uppercase;
    letter-spacing: var(--vai-track-label, 0.04em);
    color: var(--vai-muted);
}
.vai-flist__meta-row dd {
    margin: 0;
    font-family: var(--vai-font-mono);
    font-size: var(--vai-fs-meta, 0.8125rem);
    line-height: 1.4;
}
.vai-flist__meta-link {
    color: var(--vai-accent);
    text-decoration: underline;
}
.vai-flist__meta-link:hover,
.vai-flist__meta-link:focus-visible {
    text-decoration: none;
}
@media (max-width: 600px) {
    .vai-flist__item {
        gap: 1rem;
    }
    .vai-flist__meta-row {
        flex-direction: column;
        gap: 0.1rem;
    }
    .vai-flist__meta-row dt {
        width: auto;
    }
}

/* -- Featured image block (full image + Title/author overlay + corner CTA) -- */
.vai-feature-image {
    position: relative;
}
.vai-feature-image__media {
    display: block;
    width: 100%;
}
/* Full image, uncropped — shown at its natural aspect ratio. */
.vai-feature-image__media img {
    width: 100%;
    height: auto;
    display: block;
}
.vai-feature-image__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: repeating-linear-gradient(
        45deg,
        var(--vai-cream),
        var(--vai-cream) 12px,
        var(--vai-band) 12px,
        var(--vai-band) 24px
    );
}
.vai-feature-image__overlay {
    position: absolute;
    left: clamp(1rem, 4vw, 3rem);
    bottom: clamp(1rem, 4vw, 2.5rem);
    max-width: min(90%, 40rem);
    padding: 0.9rem 1.1rem;
    background: var(--vai-surface);
    color: var(--vai-black);
    font-family: var(--vai-font-mono);
    font-size: var(--vai-fs-meta, 0.8125rem);
    line-height: 1.45;
}
.vai-feature-image__title {
    display: block;
    font-weight: 500;
}
.vai-feature-image__author {
    display: block;
    color: var(--vai-muted);
}
/* Strip the wrapping <p> margins from a rich-text caption override. */
.vai-feature-image__overlay > :first-child {
    margin-top: 0;
}
.vai-feature-image__overlay > :last-child {
    margin-bottom: 0;
}
/* Optional "view in archive" link, bottom-right corner. */
.vai-feature-image__cta {
    position: absolute;
    right: clamp(1rem, 4vw, 3rem);
    bottom: clamp(1rem, 4vw, 2.5rem);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    font-family: var(--vai-font-mono);
    font-size: var(--vai-fs-meta, 0.8125rem);
    text-transform: uppercase;
    letter-spacing: var(--vai-track-label, 0.04em);
    color: var(--vai-btn-ink);
    background: var(--vai-btn-bg);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.vai-feature-image__cta:hover,
.vai-feature-image__cta:focus-visible {
    background: var(--vai-accent);
    color: var(--vai-white);
}

/* -- Individual item page: light pass to the warm-paper / orange system ---- */
/* The token swap already recolours the record; these tune the accents to
   match the design (orange category tag + tag-link hover). */
.vai-record__category.vai-badge {
    background: var(--vai-accent);
    color: var(--vai-white);
}
/* Same mono face as the homepage for the item title + section headings
   (base h1–h6 make these the display face + uppercase). */
.vai-record__title,
.vai-related h2 {
    font-family: var(--vai-font-mono);
    text-transform: none;
}
.vai-record__details h2 {
    font-family: var(--vai-font-mono);
}
/* Related thumbnails use the large media step (min(token, 100%) avoids
   overflow on narrow screens). */
.vai-related .vai-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--vai-media-lg), 100%), 1fr));
}
/* Swap columns on desktop: media on the left, metadata on the right. Mobile
   (≤60rem) already stacks media first, so only the two-column layout changes. */
@media (min-width: 60.01rem) {
    .vai-record {
        grid-template-columns: 7fr 5fr;
    }
    .vai-record__media {
        order: 1;
    }
    .vai-record__meta {
        order: 2;
    }
}
.vai-tag:hover,
.vai-tag:focus-visible {
    background: var(--vai-accent);
    color: var(--vai-white);
    border-color: var(--vai-accent);
}

/* -- Search results page: align to the homepage look & feel ---------------- */
/* Same pale band + condensed height as the homepage search block (was peach
   with tall padding and an oversized input). */
.vai-search__band {
    background: var(--vai-band);
    padding-block: 0.7rem;
}
/* Mono type throughout, matching the homepage blocks (base h1–h6 are display). */
.vai-search__eyebrow {
    font-family: var(--vai-font-mono);
    margin-bottom: 0.35rem;
}
.vai-facet__title {
    font-family: var(--vai-font-mono);
}
.vai-search__prompt h2,
.vai-browse__empty h2 {
    font-family: var(--vai-font-mono);
    text-transform: none;
}
.vai-browse__count,
.vai-search__sort {
    font-family: var(--vai-font-mono);
}
/* Echo the homepage search bar: mono input on a black-underlined field, and a
   solid accent-on-hover submit that reads like the "Go" button. */
.ais-SearchBox-input {
    font-family: var(--vai-font-mono);
    /* Match the homepage input size (was clamp(1.1rem, 2.5vw, 1.5rem)). */
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    padding-block: 0.35rem;
}
.ais-SearchBox-submit:hover,
.ais-SearchBox-reset:hover {
    color: var(--vai-accent);
}
/* Result thumbnails track the media baseline (was a fixed 16rem minimum).
   min(token, 100%) keeps a large baseline from overflowing narrow screens. */
#vai-is-hits .ais-Hits-list {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--vai-media-md), 100%), 1fr));
}
/* Result card titles in the homepage's mono face (base h1–h6 make them the
   display face + uppercase). Also covers the item page's related cards. */
.vai-card__title {
    font-family: var(--vai-font-mono);
    text-transform: none;
}