/*
 * Shop landing page - hero banner, trust bar, "Onze favoriete
 * producten" row, category cards, account CTA and feature cards. Loaded only
 * on the home page.
 */

.home-section {
    margin-top: 56px;
}

.home-heading {
    margin: 0 0 22px;
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--color-text-primary);
}

/* ============================================================ Hero carousel (full-bleed)

   The hero breaks out of the centred, padded `main` to span the whole viewport
   width and sit flush under the category nav (`margin-inline: calc(50% - 50vw)`
   pulls each edge out to the viewport; main's symmetric padding cancels out).
   Banners lay out as a horizontal track of full-width slides; each slide's
   `.home-hero__overlay` re-establishes the container width + gutter so the copy
   still lines up with the trust bar below, over an absolute photo + gradient.

   Progressive enhancement: with no JS (or before hydration) only the first slide
   shows, so the page still leads with one banner. Once hero-carousel.js marks
   the root `data-hero-ready`, the track slides between banners. */

/* Stop the 100vw full-bleed from adding a sliver of horizontal scroll on
   platforms with classic (space-taking) scrollbars. `clip` does not create a
   scroll container, so the page's vertical scroll and the header stay intact.
   Scoped to the home page (this sheet is only loaded there). */
body[data-app='shop'] {
    overflow-x: clip;
}

.home-hero {
    position: relative;
    margin-inline: calc(50% - 50vw);
    margin-bottom: 48px;
    overflow: hidden;
    background: var(--color-bg-inverse);
    isolation: isolate;
}

/* Pull flush to the top under the nav, but only when the hero opens the page: if
   a flash message precedes it the hero is no longer :first-child and keeps the
   normal top gap, so the banner and the flash never overlap. */
.home-hero:first-child {
    margin-top: -32px;
}

.home-hero__track {
    display: flex;
    min-height: clamp(380px, 40vw, 540px);
}

@media (prefers-reduced-motion: no-preference) {
    /* The slide transition kicks in only once JS drives the track (no transform
       flash on a no-JS load) and only when motion is allowed - reduced-motion
       users still get instant jumps from the dots/arrows. */
    [data-hero-ready] .home-hero__track {
        transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }
}

.home-hero__slide {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 100%;
    overflow: hidden;
}

/* No-JS / pre-hydration fallback: hide every slide after the first so the row
   never shows as a broken stack; the ready carousel re-shows them all. */
.home-hero:not([data-hero-ready]) .home-hero__slide:not(:first-child) {
    display: none;
}

.home-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Two stacked washes per slide: a left-to-right gradient that keeps the copy
   legible over any photo, plus a soft bottom vignette. */
.home-hero__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(22, 9, 28, 0.92) 0%, rgba(40, 14, 49, 0.7) 38%, rgba(60, 20, 73, 0.18) 72%, rgba(60, 20, 73, 0) 100%),
        linear-gradient(0deg, rgba(14, 7, 19, 0.45) 0%, rgba(14, 7, 19, 0) 42%);
}

.home-hero__overlay {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--shop-container);
    margin: 0 auto;
    padding: 48px 64px;
    color: #fff;
}

.home-hero__title {
    margin: 0;
    max-width: 17ch;
    font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.home-hero__subtitle {
    margin: 18px 0 0;
    max-width: 46ch;
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

.home-hero__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 9px;
    margin-top: 30px;
    padding: 15px 28px;
    border-radius: var(--radius-md);
    background: #fff;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-brand);
    text-decoration: none;
    box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.6);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.home-hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.65);
}

.home-hero__cta svg {
    transition: transform 150ms ease;
}

.home-hero__cta:hover svg {
    transform: translateX(3px);
}

/* ----- Carousel controls (only rendered when there is more than one banner) - */

.home-hero__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background-color 150ms ease;
}

.home-hero__nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.home-hero__nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.home-hero__nav--prev {
    left: clamp(12px, 2.4vw, 30px);
}

.home-hero__nav--next {
    right: clamp(12px, 2.4vw, 30px);
}

.home-hero__dots {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: clamp(14px, 2vw, 22px);
    display: flex;
    justify-content: center;
    gap: 8px;
}

.home-hero__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: width 200ms ease, background-color 200ms ease;
}

.home-hero__dot.is-active {
    width: 24px;
    background: #fff;
}

.home-hero__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Calm one-time reveal of the lead slide on load: the photo settles from a
   slight zoom and the copy rises in, then stops (no looping motion on a utility
   shop). `backwards` fill holds the start frame during each item's stagger delay
   and hands back to the base style when done, so the CTA hover transform is
   free. Only the first slide animates (the rest are off-screen). Skipped
   entirely for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
    .home-hero__slide:first-child .home-hero__image {
        animation: home-hero-settle 1200ms ease-out backwards;
    }

    .home-hero__slide:first-child .home-hero__overlay > * {
        animation: home-hero-rise 700ms ease-out backwards;
    }

    .home-hero__slide:first-child .home-hero__title {
        animation-delay: 80ms;
    }

    .home-hero__slide:first-child .home-hero__subtitle {
        animation-delay: 160ms;
    }

    .home-hero__slide:first-child .home-hero__cta {
        animation-delay: 240ms;
    }

    @keyframes home-hero-settle {
        from {
            transform: scale(1.06);
        }
    }

    @keyframes home-hero-rise {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
    }
}

/* Hero responsive: keep the flush-to-top pull and the copy's left edge matched
   to `main`'s shrinking padding (32px at <=900, 16px at <=600) so the banner
   stays aligned with the content below it; the arrows would crowd the copy on a
   phone, so drop them there and lean on the dots + swipe. */
@media (max-width: 900px) {
    .home-hero:first-child {
        margin-top: -28px;
    }

    .home-hero__overlay {
        padding-inline: 32px;
    }
}

@media (max-width: 720px) {
    .home-hero__nav {
        display: none;
    }
}

@media (max-width: 600px) {
    .home-hero__track {
        min-height: clamp(300px, 56vw, 420px);
    }

    .home-hero:first-child {
        margin-top: -20px;
    }

    .home-hero__overlay {
        padding: 36px 16px;
    }
}

/* ============================================================ Trust bar */

.home-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 760px) {
    .home-trust {
        grid-template-columns: repeat(2, 1fr);
    }
}

.home-trust__item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
    padding: 18px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
}

.home-trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-bg-brand-subtle);
    color: var(--color-text-brand);
}

/* Let the text column shrink inside the flex row so a long single word
   (e.g. "Staffelprijzen") can never widen the card and blow out the grid. */
.home-trust__item > div {
    min-width: 0;
}

.home-trust__title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.home-trust__text {
    margin: 2px 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* ============================================================ Featured row */

.home-featured {
    margin-top: 56px;
}

.home-featured__row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ============================================================ Category cards */

.home-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 900px) {
    .home-categories {
        grid-template-columns: repeat(2, 1fr);
    }
}

.home-categories a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 20px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.home-categories a:hover {
    border-color: var(--color-bg-brand);
    box-shadow: var(--shadow-sm);
}

.home-categories__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--color-bg-brand-subtle);
    color: var(--color-text-brand);
}

.home-categories__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.home-categories__arrow {
    color: var(--color-text-muted);
}

/* ============================================================ Account CTA */

.home-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 56px;
    padding: 34px 40px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-bg-brand) 0%, #4a1659 100%);
    color: #fff;
}

.home-cta__title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
}

.home-cta__text {
    margin: 8px 0 0;
    max-width: 60ch;
    font-size: var(--text-base);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}

.home-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.home-cta__solid {
    background: #fff;
    color: var(--color-text-brand);
}

.home-cta__solid:hover {
    background: rgba(255, 255, 255, 0.88);
}

.home-cta__ghost {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}

.home-cta__ghost:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ============================================================ Feature cards */

.home-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 56px;
}

@media (max-width: 760px) {
    .home-features {
        grid-template-columns: 1fr;
    }
}

.home-feature {
    padding: 24px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
}

.home-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    background: var(--color-bg-brand-subtle);
    color: var(--color-text-brand);
}

.home-feature__title {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.home-feature__text {
    margin: 8px 0 0;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--color-text-secondary);
}

/* ============================================================ Responsive */

@media (max-width: 640px) {
    /* Tighten the big 56px section rhythm on small screens. */
    .home-section,
    .home-featured,
    .home-features {
        margin-top: 40px;
    }

    .home-cta {
        margin-top: 40px;
        padding: 24px 22px;
    }

    .home-cta__actions {
        width: 100%;
    }

    .home-cta__actions .ui-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    /* Two favourites per row on phones, matching the category listing grid
       (.lst__grid[data-view='raster']) so the cards read identically. */
    .home-featured__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* The "Assortiment" cards stack full-width on phones: at 2-up the longer
       category names (e.g. "Control & electronics") are forced to break
       mid-word. Full width lets each name sit on one line. */
    .home-categories {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    /* Tighten the 2-up trust cards so every label stays on one line at phone
       widths (the narrower columns would otherwise wrap "Staffelprijzen"). */
    .home-trust {
        gap: 12px;
    }

    .home-trust__item {
        gap: 10px;
        padding: 14px;
    }

    .home-trust__icon {
        width: 36px;
        height: 36px;
    }
}