/**
 * TransferJet — home page (banner + payment strip).
 *
 * Ported from JetTheme _home-page.less (.amtheme-main-banner). Colours are
 * theme tokens: --color-bg-alt panel, --color-secondary title,
 * --color-ink-muted subtitle.
 *
 * Two layout modes at 1024: below, a grey rounded panel with a fixed 168px art
 * band over the card on white; above, the desktop art bleeds off the right edge
 * with the card floating over it, inset from the left.
 *
 * Vertical rhythm comes from margins rather than viewport height, which would
 * be brittle against header and footer changes.
 *
 * Layout-loaded while iterating; fold into tailwind-source.css once settled.
 */

/* --- banner: shared -------------------------------------------------------- */

.home-banner {
    background: var(--color-bg-alt);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin: 3rem 0;
}

/* --- banner: below 1024 (full-width grey panel, art bleeds to the edges) --- */

.home-banner__art {
    /* Bleeds to the left and right edges — the halftone reads right only when
       the racers run up against them — but not to the top, where the padding
       gives the helmets somewhere to sit. box-sizing keeps the band at 168. */
    border-bottom: 1px solid var(--color-border);
    box-sizing: border-box;
    display: block;
    height: 168px;
    overflow: hidden;
    padding-top: 14px;
}

.home-banner__art picture,
.home-banner__img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Cover, anchored bottom-right. The band is full content width, so it runs
 * 1.6:1 on a phone to 4.9:1 at 1023 against a fixed source: narrow viewports
 * lose the sides, wide ones the top and bottom. Bottom-right rather than
 * centred because the nearest rider sits hard against the right edge — centring
 * clips him at narrow widths — and the vertical crop then comes off the empty
 * top. At 375 the art scales 0.589 and loses 15% off the left, which is smoke. */
.home-banner__img {
    object-fit: cover;
    object-position: right bottom;
}

/* --- the no-model card ---
 * The outline is needed below 1024: the white content half would otherwise
 * dissolve into the page, and the art alone does not hold the shape. */

.home-banner {
    border: 1px solid var(--color-border);
}

.home-banner__card {
    background: #fff;
    box-sizing: border-box;
    padding: 20px 20px 22px;
}

.home-banner__eyebrow {
    color: #6b6963;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin: 0;
    text-transform: uppercase;
}

.home-banner__title {
    color: var(--color-secondary);
    display: block;
    font-size: 1.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.05;
    margin-top: 10px;
}

.home-banner__subtitle {
    color: var(--color-ink-muted);
    font-size: 1rem;
    letter-spacing: 0.02em;
    margin: 8px 0 0;
}

.home-banner__cta {
    align-items: center;
    background: var(--color-primary);
    border: 2px solid transparent;
    border-radius: 6px;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    gap: 10px;
    height: 52px;
    justify-content: center;
    margin-top: 20px;
    text-decoration: none;
    transition: background-color 0.15s ease;
    width: 100%;
}

/* 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). */
.home-banner__cta:hover,
.home-banner__cta:focus-visible {
    background: var(--color-primary-lighter);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .home-banner__cta {
        transition: none;
    }
}

/* --- banner: 1024 and up (art bleeds right, content inset left) ------------ */

@media (min-width: 1024px) {
    .home-banner {
        display: flex;
        align-items: center;
        height: 280px;
        margin: 3.5rem 0;
    }

    /* height:auto is load-bearing. The base rule sets height:168px, and inset:0
       alone does NOT override an explicit height — without this the art box
       stays 168 tall inside the 280 banner, anchored to the top. */
    /* An inset rather than padding: the picture inside is absolutely
       positioned and so resolves against this element's PADDING box, which
       means padding here would be ignored entirely. */
    .home-banner__art {
        border-bottom: 0;
        bottom: 0;
        height: auto;
        left: auto;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 20px;
        /* 260 x 1320/285 — the source's own ratio, so cover scales 0.912 on
           both axes and crops nothing. A full-width box instead grew past the
           4.63:1 source as the viewport widened and cover took the difference
           off the top, slicing the halftone into a hard line. Below ~1250 the
           box overflows left, where overflow:hidden clips it and the card
           covers it. */
        width: 1204px;
    }

    .home-banner__art picture,
    .home-banner__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* Same anchor as the stacked band: above ~1430 the box is taller than the
       source, so the vertical crop has to come off the empty top. */
    .home-banner__img {
        object-fit: cover;
        object-position: right bottom;
    }

    /* Inset far enough from the left to clear the rounded corner. The
       three-layer shadow matches the selected-vehicle card — contact, lift,
       ambient. One big blur alone reads as haze, not elevation. */
    .home-banner__card {
        border: 1px solid rgb(7 6 5 / 0.05);
        border-radius: 10px;
        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);
        margin-inline-start: 72px;
        padding: 28px 30px 30px;
        position: relative;
        width: 430px;
        z-index: 1;
    }

    .home-banner__title {
        font-size: 2.25rem;
    }

    .home-banner__subtitle {
        font-size: 1.0625rem;
        letter-spacing: 0.03em;
        margin-top: 12px;
    }

    .home-banner__cta {
        margin-top: 22px;
    }
}

/* --- payment / carrier strip ---
 * Width-governed, not height-governed, mirroring the Laravel storefront: each
 * mark fills a common max width with height auto, so differing viewBox ratios
 * yield differing heights by design. Mastercard's is nearly square and would
 * tower, so a max-height cap holds it to the others' scale.
 *
 * Wraps to a centred row when four will not fit; from 1024 space-between pins
 * the outer marks to the edges, as on the live site.
 */

.home-payments {
    display: flex;
    align-items: center;
    /* mobile: centred cluster, wrapping tidily to a second row */
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem 3.5rem;
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
}

@media (min-width: 1024px) {
    .home-payments {
        /* desktop: spread across the row, outer marks pinned to the edges */
        justify-content: space-between;
    }
}

.home-payments__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    min-width: 7rem;
}

/* width-governed: fill to the shared width cap, height follows the ratio */
.home-payments__logo {
    display: block;
    width: 100%;
    max-width: 8rem;
    height: auto;
}

/* Mastercard's near-square viewBox is capped by height so it doesn't tower */
.home-payments__item--mastercard .home-payments__logo {
    max-height: 4rem;
}