/**
 * TransferJet — home page "etter valg" card.
 *
 * Sits in the slot the FastForward banner occupies and inherits that block's
 * vertical rhythm rather than introducing its own. The photo keeps its own
 * upper half against a neutral ground, with a grey rule separating it from the
 * name and actions — the separation language the product cards already use.
 *
 * Colours are existing tokens only: #fff card on a --color-bg-alt art well,
 * --color-border rule, --color-ink-muted label, --color-primary actions.
 *
 * Layout-loaded while iterating, like home.css.
 */

/* --- card ------------------------------------------------------------------ */

.tj-sv {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    margin: 3rem 0;
}

/* --- art ------------------------------------------------------------------- */

.tj-sv__art {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}

/* Out of the layout except where it is the roundel, so every rule at 1024 and
   up still addresses the image as a direct child of the art well. */
.tj-sv__frame {
    display: contents;
}

.tj-sv__img,
.tj-sv__placeholder {
    display: block;
}

.tj-sv__placeholder {
    color: #b9b6b3;
}

/* --- body ------------------------------------------------------------------ */

.tj-sv__body {
    padding: 1.25rem 1.25rem 1.5rem;
}

.tj-sv__label {
    margin: 0 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

/* 1.35 rather than a gap between the two lines. The brand and the model are
   one typographic unit, and leading keeps them one: a margin on the model
   spaces the brand off correctly but leaves a wrapped model name's own lines
   tight against each other, which is the common case on the longer names. */
.tj-sv__name {
    margin: 0;
    line-height: 1.35;
}

.tj-sv__brand {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    padding-top: 6px;
}

.tj-sv__model {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-fg);
    padding-top: 4px;
}

.tj-sv__years {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    color: var(--color-ink-muted);
}

/* --- actions --------------------------------------------------------------- */

.tj-sv__actions {
    margin-top: 1.25rem;
}

.tj-sv__cta,
.tj-sv__reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.tj-sv__cta {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #fff;
}

/* The theme lightens red on hover rather than darkening it — see
   web/tailwind/components/button.css, where btn-primary sets
   --btn-hover-bg: var(--color-primary-lighter). */
.tj-sv__cta:hover,
.tj-sv__cta:focus-visible {
    background: var(--color-primary-lighter);
    border-color: var(--color-primary-lighter);
}

.tj-sv__reset-form {
    margin: 1.025rem 0 0;
}

.tj-sv__reset {
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-ink-muted);
}

/* The grey hover the pagination roundels and filter chips already use
   (Magento_Theme/web/css/category-panel.css). */
.tj-sv__reset:hover,
.tj-sv__reset:focus-visible {
    background: #f7f7f7;
    border-color: #cfcdcb;
}

@media (prefers-reduced-motion: reduce) {
    .tj-sv__cta,
    .tj-sv__reset {
        transition: none;
    }
}

/* --- below 1024: roundel + centred stack ----------------------------------- */

@media (max-width: 1023px) {
    .tj-sv__art {
        padding: 1.75rem 1.25rem;
    }

    /* 240 with 20px of padding — the Laravel masthead's own selected-model
       roundel (aspect-square w-60 … p-5), which is the reference for this
       panel. overflow clips to the padding box, 118 from the centre, which the
       196 artwork square only reaches in its bare corners.

       Flat on purpose: with a drop shadow it reads as a button, and nothing
       here is clickable. */
    .tj-sv__frame {
        align-items: center;
        background: #fff;
        border: 2px solid #cfcdcb;
        border-radius: 9999px;
        box-sizing: border-box;
        display: flex;
        height: 240px;
        justify-content: center;
        overflow: hidden;
        padding: 20px;
        width: 240px;
    }

    .tj-sv__img,
    .tj-sv__placeholder {
        box-sizing: border-box;
        height: 100%;
        object-fit: contain;
        width: 100%;
    }

    /* More padding than a photograph gets, not less: a photograph fills its
       square, a glyph wants air. It does not scale linearly, because the wheel
       carries a 3.7% margin of its own inside its viewBox on top of whatever is
       set here — 16px here on the frame's 20 is the 36 that measures out at 65%
       of the roundel. */
    .tj-sv__placeholder {
        padding: 16px;
    }

    .tj-sv__body {
        text-align: center;
    }
}

/* --- 1024 and up: the card floats on the banner, art beside it ---
 * Not the stacked layout widened. The component becomes the grey banner itself
 * — the same panel the no-model state uses — with a white card inset on the
 * left, so the two states of this slot read as one component in two conditions.
 */

@media (min-width: 1024px) {
    /* Becomes the panel but keeps its border: the no-model banner sets one in
       its base rule and never drops it at this width, so dropping it here made
       the two states of the same slot differ. */
    .tj-sv {
        align-items: center;
        background: var(--color-bg-alt);
        display: flex;
        height: 300px;
        margin: 3.5rem 0;
        position: relative;
    }

    /* Source order is art-then-body for the stacked layout; here the card
       leads. Reordered in flex rather than in the template so one markup serves
       both — safe because the art is decorative and aria-hidden. */
    .tj-sv__body {
        background: #fff;
        border: 1px solid rgb(7 6 5 / 0.05);
        border-radius: 10px;
        /* The no-model card's shadow, to the value: hairline contact, mid
           lift, wide ambient. */
        box-shadow:
            0 1px 2px rgb(7 6 5 / 0.06),
            0 6px 14px -4px rgb(7 6 5 / 0.1),
            0 18px 40px -12px rgb(7 6 5 / 0.18);
        box-sizing: border-box;
        flex-shrink: 0;
        margin-inline-start: 72px;
        order: 1;
        /* Tighter than it reads: at 32/34/34 the card stood 290px in the 300px
           panel and the grey thinned to 5px, which looked like a frame drawn on
           the card rather than a surface it sits on. */
        padding: 26px 30px 28px;
        position: relative;
        width: 452px;
        z-index: 1;
    }

    .tj-sv__art {
        background: none;
        border-bottom: 0;
        flex-grow: 1;
        height: 100%;
        order: 2;
        padding: 0 28px;
    }

    /* 272 is Laravel's cap on the same photograph in its home hero (max-h-68).
       It is also written into the template's sizes attribute, which caps the
       rendered size outright — move the two together. */
    .tj-sv__img,
    .tj-sv__placeholder {
        max-height: 272px;
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    /* Square, so it needs its own pair, and both sit under the max-height
       above so that cap does not bite. */
    .tj-sv__placeholder {
        height: 200px;
        width: 200px;
    }

    .tj-sv__model {
        font-size: 1.875rem;
    }

    .tj-sv__years {
        font-size: 1.0625rem;
        margin-top: 10px;
    }

    /* Side by side: the card is 452px, wide enough for both, and stacking them
       left a tall column of button against a short column of text. */
    .tj-sv__actions {
        align-items: center;
        display: flex;
        gap: 16px;
        margin-top: 18px;
    }

    /* 48 rather than 52: below 1024 these are padding-derived and come out
       around 46, so the desktop pair were taller for no stated reason. */
    .tj-sv__cta {
        flex-grow: 1;
        height: 48px;
        width: auto;
    }

    .tj-sv__reset-form {
        flex-shrink: 0;
        margin: 0;
    }

    .tj-sv__reset {
        height: 48px;
        padding: 0 20px;
        width: auto;
    }
}