/*
 * Eventify homepage hero hotfix
 * Load this after the inline hero CSS in templates/home.html.
 */

/* The desktop scene remains clipped to the hero, but its scale is now
   calculated from both available width and available height by the JS patch. */
@media (min-width: 721px) {
    #eventify-v2 .hg-stage {
        bottom: 0;
    }
}

/*
 * Mobile: make the copy and the visual stage two separate grid rows.
 * The stage can no longer sit on top of the CTA because it no longer shares
 * the same absolute positioning area with the copy.
 */
@media (max-width: 720px) {
    #eventify-v2 .hg-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto clamp(300px, 42svh, 440px);
        align-content: start;
        min-height: 0 !important;
        overflow: clip;
        isolation: isolate;
    }

    #eventify-v2 .hg-copy {
        grid-column: 1;
        grid-row: 1;
        width: min(100%, 540px) !important;
        max-width: 540px;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: clamp(24px, 5svh, 48px) clamp(18px, 6vw, 26px) 0 !important;
        text-align: center;
        align-items: center;
    }

    #eventify-v2 .hg-copy-inner {
        width: 100%;
    }

    #eventify-v2 .ev-hero-h1 {
        font-size: clamp(2.75rem, 12vw, 4.1rem);
    }

    #eventify-v2 .ev-hero-script {
        font-size: clamp(3.15rem, 15vw, 4.85rem);
        white-space: normal;
    }

    #eventify-v2 .ev-hero-sub {
        max-width: 33rem;
    }

    #eventify-v2 .ev-hero-cta {
        position: relative;
        z-index: 6;
        justify-content: center;
    }

    #eventify-v2 .hg-stage {
        position: relative !important;
        inset: auto !important;
        grid-column: 1;
        grid-row: 2;
        z-index: 1;
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
        overflow: hidden;
        perspective: none;
    }

    #eventify-v2 .hg-scene,
    #eventify-v2 .hg-drift {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        animation: none !important;
    }

    /* Full-bleed background. No 92%-wide glow, hence no cream stripe at either side. */
    #eventify-v2 .hg-glow {
        inset: 0 !important;
        z-index: 0;
        width: auto !important;
        height: auto !important;
        transform: none !important;
        background: radial-gradient(ellipse 112% 78% at 50% 58%, rgba(231,83,163,.25), rgba(187,123,221,.12) 42%, transparent 70%);
    }

    #eventify-v2 .hg-stage-fade,
    #eventify-v2 .hg-field-fade,
    #eventify-v2 .hg-haze,
    #eventify-v2 .hg-scroll-cue {
        display: none !important;
    }

    #eventify-v2 .hg-tile {
        display: none;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

    #eventify-v2 .hg-tile-in {
        animation: none !important;
    }

    #eventify-v2 .hg-tile:nth-child(2),
    #eventify-v2 .hg-tile:nth-child(12),
    #eventify-v2 .hg-tile:nth-child(4) {
        display: block;
        top: auto;
        left: 50%;
    }

    #eventify-v2 .hg-tile:nth-child(2) {
        bottom: clamp(12px, 2.4svh, 22px);
        z-index: 3;
        transform: translate(calc(-50% - clamp(78px, 29vw, 124px)), 0) !important;
    }

    #eventify-v2 .hg-tile:nth-child(2) .hg-tile-in {
        transform: rotate(-9deg) scale(.5);
    }

    #eventify-v2 .hg-tile:nth-child(12) {
        bottom: clamp(36px, 5.2svh, 58px);
        z-index: 4;
        transform: translateX(-50%) !important;
    }

    #eventify-v2 .hg-tile:nth-child(12) .hg-tile-in {
        transform: rotate(2deg) scale(.56);
    }

    #eventify-v2 .hg-tile:nth-child(4) {
        bottom: clamp(12px, 2.4svh, 22px);
        z-index: 3;
        transform: translate(calc(-50% + clamp(78px, 29vw, 124px)), 0) !important;
    }

    #eventify-v2 .hg-tile:nth-child(4) .hg-tile-in {
        transform: rotate(9deg) scale(.5);
    }
}

/* Homepage-specific image rule. It comes after the old img:first-of-type rule,
   therefore it wins without hard-coding a size. */
#eventify-v2 .evh-products .ev-product-grid > * .ev-product-img {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#eventify-v2 .evh-products .ev-product-grid > * .ev-product-img > :is(img, picture, a) {
    grid-area: 1 / 1 !important;
    justify-self: center !important;
    align-self: center !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

#eventify-v2 .evh-products .ev-product-grid > * .ev-product-img > :is(picture, a) {
    display: grid !important;
    place-items: center !important;
}

#eventify-v2 .evh-products .ev-product-grid > * .ev-product-img > img,
#eventify-v2 .evh-products .ev-product-grid > * .ev-product-img > picture > img,
#eventify-v2 .evh-products .ev-product-grid > * .ev-product-img > a > img {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    transform: none !important;
}