/**
 * TransferJet — "Velg modell" (/velg-modell).
 *
 * Layout-loaded rather than compiled into styles.css: the 42 marque blocks at
 * the foot of this file are ~8KB raw and serve this one route, and a plain
 * stylesheet updates on a cache flush with no Tailwind rebuild.
 *
 * ONE card, brand-tinted, with deliberately no second neutral variant. An
 * earlier version carried both and the neutral rules won wherever the two
 * disagreed, which is how every marque ended up with the same red hover border.
 */

/* --- Page head. The trail and the <h1> are the site's own blocks, rendered
   above this page's content — see the note at the top of index.phtml. --- */

/* The grid's last row otherwise finishes hard against the footer. The page has
   no wrapper of its own to hang this on, so it sits on the component root. */
.tj-ms {
    padding-bottom: 3rem;
}

@media (min-width: 640px) {
    .tj-ms {
        padding-bottom: 4rem;
    }
}

.tj-ms__lede {
    color: var(--color-ink-muted, #4a4948);
    font-size: 15px;
    line-height: 1.55;
    margin: 8px 0 0;
    max-width: 640px;
}

/* --- Search panel.
   Red outline on grey is the site's existing panel idiom, the same treatment
   the Modellsøk block carries elsewhere. The glyph sits in a roundel beside the
   label rather than inset, where it ate the first 42px of a field people type
   long model names into. --- */

.tj-ms__panel {
    background: var(--color-bg-alt, #f7f7f7);
    border: 1px solid var(--color-primary, #c11422);
    border-radius: 6px;
    box-sizing: border-box;
    margin-top: 26px;
    padding: 20px 16px 22px;
}

.tj-ms__panel-head {
    align-items: center;
    display: flex;
    gap: 12px;
}

.tj-ms__panel-icon {
    background: #fceaec;
    border: 1px solid rgb(193 20 34 / 0.35);
    border-radius: 9999px;
    box-sizing: border-box;
    color: var(--color-primary, #c11422);
    display: grid;
    flex-shrink: 0;
    height: 38px;
    place-items: center;
    width: 38px;
}

.tj-ms__label {
    color: #171717;
    font-size: 17px;
    font-weight: 700;
}

.tj-ms__input {
    background: #fff;
    border: 2px solid #d4d4d4;
    border-radius: 8px;
    box-sizing: border-box;
    color: #070605;
    font-family: inherit;
    /* 16px, so iOS Safari does not zoom the viewport on focus. */
    font-size: 16px;
    height: 50px;
    margin-top: 18px;
    margin-bottom: 2px;
    /* 18, not 14: at 14 the placeholder sat too close to the 2px edge on a
       phone. Matches the desktop inset, so that rule need not restate it. */
    padding: 0 18px;
    width: 100%;
}

.tj-ms__input:focus {
    border-color: var(--color-secondary, #0f94c9);
    box-shadow: 0 0 0 3px rgb(15 148 201 / 0.3);
    outline: none;
}

/* Chrome and Safari draw their own clear affordance on type="search". */
.tj-ms__input::-webkit-search-decoration,
.tj-ms__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.tj-ms__count {
    color: var(--color-ink-muted, #4a4948);
    font-size: 13px;
    font-weight: 500;
    margin: 20px 0 14px;
}

/* --- Grid.
   Gutters are the product grid's, from product-card.css, so models and products
   sit on the same rhythm. Mobile first: one column of horizontal rows, becoming
   the vertical tile at 640. 375 is the narrowest width designed for. --- */

/* The form is only a wrapper for the shared form key; the grid is the ul. */
.tj-ms__form {
    margin: 0;
}

.tj-ms__grid {
    column-gap: 1rem;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
    row-gap: 1rem;
}

.tj-ms__cell.is-hidden {
    display: none;
}

/* The sprite must stay in the layout tree — display:none stops <use> resolving
   in some engines — so it is collapsed to nothing instead. */
.tj-ms__sprite {
    height: 0;
    position: absolute;
    width: 0;
}

/* --- Card.
   The marque blocks at the foot of the file set --tj-ms-acc, --tj-ms-sur/-surs
   and --tj-ms-bd per manufacturer. --tj-ms-brandfg and --tj-ms-pill default to
   the accent and are overridden only where it fails contrast. These are the
   neutral fallbacks for a slug with no block of its own. --- */

/* The card is a submit button inside the grid's single form, so it needs the
   UA button styling stripped back before anything else applies. */
:where(.tj-ms__card) {
    --tj-ms-sur: #f7f7f7;
    --tj-ms-surs: #efeeed;
    --tj-ms-acc: #4a4948;
    --tj-ms-bd: rgb(74 73 72 / 0.4);
    --tj-ms-brandfg: var(--tj-ms-acc);
    --tj-ms-pill: var(--tj-ms-acc);
}

.tj-ms__card {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid var(--tj-ms-bd);
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    letter-spacing: inherit;
    margin: 0;
    /* Pinned, or the height would come from whichever art the row holds — a
       photo and the wheel differ, and a scrolled list visibly ripples where the
       two meet. Matches the 128 art box, so the artwork stays square. */
    min-height: 128px;
    overflow: hidden;
    padding: 0;
    text-align: start;
    transition-duration: 0.3s;
    transition-property: border-color, box-shadow, transform;
    transition-timing-function: ease-in-out;
    width: 100%;
}

/*
 * The product-card hover, verbatim from product-card.css. Two details come with
 * it: (hover: hover) so a touch device never sticks, and it fires from the
 * card's PARENT — a card that lifts can move out from under the pointer near
 * its bottom edge and oscillate. The grid cell does not move.
 */
@media (hover: hover) {
    .tj-ms__cell:hover > .tj-ms__card {
        border-color: var(--tj-ms-acc);
        box-shadow: 0 6px 18px rgb(0 0 0 / 0.12);
        transform: translateY(-2px);
    }

    /* The chevron inverts rather than lighting up: it is already filled. */
    .tj-ms__cell:hover > .tj-ms__card .tj-ms__go {
        background: #fff;
        border-color: var(--tj-ms-pill);
        color: var(--tj-ms-pill);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tj-ms__cell:hover > .tj-ms__card {
        transform: none;
    }
}

.tj-ms__card:focus-visible {
    outline: 3px solid var(--color-secondary, #0f94c9);
    outline-offset: 2px;
}

/* 128 wide with 8px of padding, so the artwork draws at 112 — the Laravel
   storefront's mobile card (h-32 w-32 p-2) to the pixel. */
.tj-ms__art {
    align-items: center;
    /* Flat, and mixed back toward white: Laravel's mobile card uses the same
       surface value at 80%. The tile keeps it at full strength, and so does
       ours at 640 and up. */
    background: color-mix(in srgb, var(--tj-ms-sur) 80%, white);
    border-inline-end: 1px solid color-mix(in srgb, var(--tj-ms-bd) 60%, transparent);
    box-sizing: border-box;
    color: var(--tj-ms-pill);
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding: 8px;
    width: 128px;
}

/* The photograph. Square at every variant, and contained rather than covered
   so a cutout is never cropped. */
.tj-ms__art img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.tj-ms__art svg {
    height: auto;
    max-height: 112px;
    opacity: 0.55;
    width: 100%;
}

/* The white panel that carries the type. On the row it is simply the right-
   hand half; on the tile it becomes the inset card-in-card. */
.tj-ms__inner {
    align-items: center;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    flex-grow: 1;
    gap: 10px;
    min-width: 0;
    padding: 12px 12px 12px 14px;
}

.tj-ms__text {
    flex-grow: 1;
    min-width: 0;
}

/* 14/16/16 on the row — the Laravel mobile card's scale. The tile re-pins all
   three below, so this does not leak upward. */
.tj-ms__brand {
    color: var(--tj-ms-brandfg);
    display: block;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* 28 characters is the longest model in the catalogue
   ("SpeedFight4 50(2t) AirCooled"), so the name is allowed two lines. */
.tj-ms__model {
    color: #070605;
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 6px;
}

.tj-ms__years {
    color: var(--color-ink-muted, #4a4948);
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    margin-top: 6px;
}

/* Filled with the marque's own colour at rest. This is the single most visible
   thing an earlier build got backwards — it was grey until hovered. */
.tj-ms__go {
    align-items: center;
    background: var(--tj-ms-pill);
    border: 1px solid var(--tj-ms-pill);
    border-radius: 9999px;
    color: #fff;
    display: grid;
    flex-shrink: 0;
    height: 34px;
    place-items: center;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
    width: 34px;
}

/* --- Empty state --- */

.tj-ms__empty {
    background: var(--color-bg-alt, #f7f7f7);
    border: 1px solid var(--color-border, #dfdedd);
    border-radius: 6px;
    padding: 48px 20px;
    text-align: center;
}

.tj-ms__empty-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.tj-ms__empty-text {
    color: var(--color-ink-muted, #4a4948);
    font-size: 14px;
    line-height: 1.6;
    margin: 10px 0 0;
}

/* --- 640 and up: the card becomes a tile, the tint takes the whole card, and
   a white panel is inset inside it. That inset is the point of the arrangement
   — it lets the marque tint stay saturated without the type fighting it. The
   row keeps the simpler tinted-column version; at 375 there is no room. --- */

@media (min-width: 640px) {
    .tj-ms__grid {
        column-gap: 1.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2rem;
    }

    /* Pairs with the inner panel's flex-grow below. The grid stretches a cell
       to the tallest card in its row, but a button does not stretch with it, so
       one wrapped model name left the rest of the row 18px short and ragged.
       Laravel's tile does the same — h-full flex-col on the card, flex-1 on
       the foot. */
    .tj-ms__card {
        background: var(--tj-ms-sur);
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }

    /* A 320 square holding 300 of artwork, centred. Square rather than a band
       because a landscape band under a wider card reads as a letterbox, and 320
       rather than 256 because at 256 the tile came out 422x353. 300 needs only
       a 600 source at 2x, inside the 640 variant. max-width keeps it inside a
       narrower column; aspect-ratio shrinks the height with it. */
    .tj-ms__art {
        aspect-ratio: 1;
        background: none;
        border-inline-end: 0;
        height: auto;
        margin: 0 auto;
        max-width: 100%;
        padding: 10px;
        width: 320px;
    }

    /* Two thirds of the artwork box: a glyph wants more air around it than a
       photograph, which fills its square. Sized explicitly rather than left to
       width:100%, which swamped the type. max-height:none is load-bearing — the
       base rule caps the glyph for the row's narrower column and would
       otherwise clamp this back down. */
    .tj-ms__art svg {
        height: 200px;
        max-height: none;
        width: 200px;
    }

    /* Grows to absorb whatever height the card gained, so the extra lands in
       the white panel rather than as a gap beneath the card. The art box above
       is a fixed square and does not stretch. */
    .tj-ms__inner {
        border: 1px solid var(--tj-ms-bd);
        border-radius: 6px;
        flex-grow: 1;
        margin: 0 14px 12px;
        padding: 16px 16px 16px 18px;
    }

    /* The tile follows the Laravel tile's scale, which is smaller than the
       row's. Pinned rather than inherited so the row can be tuned alone. */
    .tj-ms__brand {
        font-size: 11px;
    }

    .tj-ms__model {
        font-size: 15px;
        line-height: 1.25;
        margin-top: 4px;
    }

    .tj-ms__years {
        font-size: 14px;
        margin-top: 4px;
    }
}

@media (min-width: 1024px) {
    .tj-ms__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tj-ms__lede {
        font-size: 16px;
    }

    .tj-ms__panel {
        margin-top: 30px;
        padding: 24px 28px 26px;
    }

    .tj-ms__panel-head {
        gap: 14px;
    }

    .tj-ms__panel-icon {
        height: 44px;
        width: 44px;
    }

    .tj-ms__label {
        font-size: 20px;
    }

    /* Indented to sit under the label rather than under the roundel: 44 + 14. */
    .tj-ms__input {
        height: 52px;
        margin-inline-start: 58px;
        margin-top: 14px;
        width: calc(100% - 58px);
    }

    .tj-ms__count {
        font-size: 14px;
        margin: 26px 0 20px;
    }

    .tj-ms__empty {
        padding: 64px 24px;
    }

    .tj-ms__empty-title {
        font-size: 19px;
    }

    .tj-ms__empty-text {
        font-size: 15px;
        margin-top: 12px;
    }
}

@media (min-width: 1280px) {
    .tj-ms__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* The 42 marque palettes live in marques.css — see the note there on why the
   fallbacks above are :where(). */