/* ==========================================================================
   Shop home hero carousel (Artemis)

   Each slide is a complete banner image (headline, copy and CTA are part of the
   artwork), so the whole slide is one link and no text is laid over it.

   Sizing: width comes from Bootstrap's .container in the markup, so the hero lines
   up with every other section on the page (custom.css widens .container to 1360px
   above 1400px viewport, 1560px above 1600px). Height follows the artwork's own
   aspect ratio.

   Scoped under .am-hero__* so it does not collide with the eshop template CSS.
   Paired with: resources/views/project/shop/home/includes/hero-banner.blade.php
   ========================================================================== */

:root {
    --am-hero-radius: 16px;
}

.am-hero {
    /* horizontal width comes from Bootstrap .container in the markup */
    padding: 22px 0 26px;
    background: #fff;
}

/* ----------------------------------------------------------- Frame ------- */

.am-hero__frame {
    position: relative;
    border-radius: var(--am-hero-radius);
    overflow: hidden;
    background: #f4f4f5;
    box-shadow: 0 1px 2px rgba(17, 17, 19, .06), 0 10px 30px rgba(17, 17, 19, .07);
}

/* ----------------------------------------------------------- Track ------- */

.am-hero__track {
    display: flex;
    width: 100%;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.am-hero__slide {
    flex: 0 0 100%;
    min-width: 0;
    display: block;
    text-decoration: none;
}

.am-hero__slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* Only anchors that actually carry an href behave as links */
.am-hero__slide[href] {
    cursor: pointer;
}

/* ------------------------------------------------------------ Dots ------- */

.am-hero__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.am-hero__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 17, 19, .26);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease, width .2s ease;
}

.am-hero__dot:hover {
    background: rgba(17, 17, 19, .5);
}

.am-hero__dot.is-active {
    width: 22px;
    border-radius: 5px;
    background: #111113;
}

/* ------------------------------------------- Empty state (no uploads) ---- */

.am-hero--empty {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 300px;
    padding: 0;
    background-image:
        radial-gradient(58% 62% at 4% 0%, rgba(206, 233, 122, .62) 0%, rgba(206, 233, 122, 0) 62%),
        radial-gradient(56% 60% at 88% 2%, rgba(252, 214, 128, .60) 0%, rgba(252, 214, 128, 0) 60%),
        radial-gradient(62% 66% at 96% 100%, rgba(250, 160, 196, .58) 0%, rgba(250, 160, 196, 0) 64%),
        radial-gradient(58% 62% at 10% 100%, rgba(196, 214, 250, .48) 0%, rgba(196, 214, 250, 0) 62%);
}

.am-hero__grain {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .30;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

/* --------------------------------------------------- Breakpoints --------- */

@media (max-width: 991px) {
    .am-hero {
        padding: 16px 0 20px;
    }

    :root {
        --am-hero-radius: 12px;
    }
}

@media (max-width: 767px) {
    .am-hero {
        padding: 10px 0 14px;
    }

    :root {
        --am-hero-radius: 10px;
    }

    .am-hero__dots {
        bottom: 8px;
        gap: 6px;
    }

    .am-hero__dot {
        width: 7px;
        height: 7px;
    }

    .am-hero__dot.is-active {
        width: 16px;
        border-radius: 4px;
    }

    .am-hero--empty {
        min-height: 200px;
    }
}

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