/**
 * TransferJet — home page (finder spacing + banner + payment strip).
 *
 * Ported from JetTheme web/css/views/modules/_home-page.less (.amtheme-main-banner)
 * and tuned against speedoptions.no. Values that were LESS variables there:
 *
 *   banner bg       --color-bg-alt (#f7f7f7)        @amtheme__background-secondary__color
 *   title           --color-secondary (#0f94c9)     the FastForward blue
 *   subtitle        --color-ink-muted
 *
 * The banner has two layout modes at the 1024 breakpoint:
 *
 *   below 1024  — a full-width grey rounded panel mirroring the finder panel
 *                 above. The mobile art (470x285) sits in normal flow at its
 *                 natural ratio and sets the panel height. No text: at this width
 *                 there isn't room for the heading over the art without it
 *                 reading as cramped.
 *   1024 and up — the desktop art (1320x285) bleeds off the right edge behind
 *                 the "FastForward" / "SpeedOptions - Since 2005" content, which
 *                 sits inset on the left (the original JetTheme arrangement).
 *
 * Vertical rhythm: rather than tie the three blocks to viewport height (brittle
 * against header/footer height changes), they are spaced with generous margins
 * tuned to read as centred at common desktop heights. Simple and robust.
 *
 * Loaded via layout XML (cms_index_index.xml) while iterating; fold into
 * tailwind-source.css once settled.
 */

/* --- vertical rhythm ------------------------------------------------------- */
.home__finder {
    margin-top: 2.5rem;
}

@media (min-width: 1024px) {
    .home__finder {
        margin-top: 3.5rem;
    }
}

/* --- 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 {
    /* the art bleeds to the panel edges: the halftone/pixelated effect reads
       right only when the racers run up against the edge, not inset. A fixed
       band height keeps the panel tidy — without it the image grows tall enough
       to loosen the halftone. */
    display: block;
    height: 280px;
    overflow: hidden;
}

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

/* cover so the art fills the band edge-to-edge (cropping top/bottom as needed)
   rather than shrinking to fit */
.home-banner__img {
    object-fit: cover;
    object-position: center;
}

/* text hidden below 1024 — the mobile banner is a pure visual element */
.home-banner__content {
    display: none;
}

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

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

    .home-banner__art {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

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

    .home-banner__img {
        object-fit: cover;
        object-position: right center;
    }

    .home-banner__content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        /* inset from the left so the text clears the rounded corner */
        padding: 0 1.5rem 0 4.5rem;
    }

    .home-banner__title {
        color: var(--color-secondary);
        font-weight: 700;
        line-height: 1;
        letter-spacing: var(--tracking-base);
        font-size: 2.75rem;
        margin-bottom: 6px;
    }

    .home-banner__subtitle {
        color: var(--color-ink-muted);
        letter-spacing: var(--tracking-base);
        font-size: 1.5rem;
    }
}

/* --- payment / carrier strip ----------------------------------------------- *
 * The four brand marks below the banner. A wrapping flex row.
 *
 * Sizing mirrors the Laravel storefront: width-governed, not height-governed.
 * Each mark fills to a common max width (max-w-32 = 8rem there) with height
 * auto, so the shared width box — not a shared height — sets the scale. Because
 * the four viewBoxes have very different ratios, that yields different heights
 * by design (Visa reads wide and short, Bring tall, Vipps medium). Mastercard is
 * the exception: its viewBox is nearly square, so at 8rem wide it would tower;
 * a max-height cap (max-h-16 = 4rem there) holds it to the others' scale.
 *
 * They wrap to a centred row when the viewport can't hold four; from 1024 they
 * spread across the full row (space-between) rather than clustering centred, so
 * the outer marks pin 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;
}