/* ============================================================
   LIGHT UP LETTERS LONDON
   IMAGE FIT V2 — FULL-BLEED, LESS AGGRESSIVE CROPPING

   This replaces the earlier "contain" approach.
   Images stay large and fill their containers.
   We reduce unwanted cropping by:
   - making hero/gallery containers taller
   - using safer focal positions
   - keeping thumbnails intentionally cropped
   ============================================================ */


/* ------------------------------------------------------------
   1. HOMEPAGE HERO
   Keep the cinematic full-bleed look.
   ------------------------------------------------------------ */

.home-phase1 .hero-phase1{
    min-height:min(960px,98vh) !important;
}

.home-phase1 .hero-slide{
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center 44% !important;
}

/* Remove V1 pseudo-image layers if cached CSS happens to linger. */
.home-phase1 .hero-slide::before,
.home-phase1 .hero-slide::after{
    content:none !important;
}


/* ------------------------------------------------------------
   2. INNER PAGE HEROES
   More vertical room = significantly less crop while staying full bleed.
   ------------------------------------------------------------ */

.page-hero{
    min-height:88vh !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center 42% !important;
    background-color:#171614;
}

.page-hero::before,
.page-hero::after{
    content:none !important;
}


/* Letters page: useful product area sits slightly lower in the source photo. */
body:has(.inner-main) .page-hero{
    background-position:center 46% !important;
}


/* ------------------------------------------------------------
   3. GALLERY MAIN STAGE
   Keep image large. Increase stage height so landscape and portrait-ish
   event photos lose much less of their top/bottom composition.
   ------------------------------------------------------------ */

.gallery-stage{
    height:min(84vh,860px) !important;
    min-height:650px !important;
    background:#111 !important;
}

.gallery-stage > img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 45% !important;
    background:transparent !important;
}

/* Keep gallery text readable without hiding too much of the photo. */
.gallery-stage-shade{
    background:
        linear-gradient(
            90deg,
            rgba(10,9,8,.70) 0%,
            rgba(10,9,8,.24) 42%,
            rgba(10,9,8,.03) 78%
        ),
        linear-gradient(
            0deg,
            rgba(10,9,8,.52),
            transparent 48%
        ) !important;
}


/* ------------------------------------------------------------
   4. GALLERY THUMBNAILS
   These should crop: they are previews, not the hero view.
   ------------------------------------------------------------ */

.gallery-filmstrip img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
}


/* ------------------------------------------------------------
   5. HOMEPAGE / EDITORIAL SLIDERS
   Stay full-size. Slightly taller stage reduces crop.
   ------------------------------------------------------------ */

.simple-slider{
    min-height:620px;
    background:#171614 !important;
}

.simple-slide img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 44% !important;
    background:transparent !important;
}


/* ------------------------------------------------------------
   6. LETTERS FEATURE IMAGE
   ------------------------------------------------------------ */

.media-feature{
    min-height:700px !important;
}

.media-feature img{
    min-height:700px !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 44% !important;
    background:transparent !important;
}


/* ------------------------------------------------------------
   7. NUMBERS SHOWCASE
   Keep all three images visually strong, but make the row taller.
   ------------------------------------------------------------ */

.number-showcase{
    height:700px !important;
}

.number-showcase img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 44% !important;
}


/* ------------------------------------------------------------
   8. EVENT BROWSER
   Background stays full-bleed; more stage height reduces clipping.
   ------------------------------------------------------------ */

.event-browser{
    min-height:720px !important;
}

.event-image{
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center 44% !important;
}

.event-image::before,
.event-image::after{
    content:none !important;
}


/* ------------------------------------------------------------
   9. 4FT SCALE SECTION
   ------------------------------------------------------------ */

.scale-section{
    min-height:820px !important;
}

.scale-photo{
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center 44% !important;
}

.scale-photo::before,
.scale-photo::after{
    content:none !important;
}


/* ------------------------------------------------------------
   10. EVENT CARDS
   ------------------------------------------------------------ */

.event-cards article{
    min-height:620px !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center 44% !important;
}

.event-cards article::after{
    content:none !important;
}


/* ------------------------------------------------------------
   11. HOMEPAGE GALLERY CARDS
   Editorial cards stay cropped intentionally.
   ------------------------------------------------------------ */

.gallery-grid img,
.home-gallery-phase1 .gallery-card img{
    object-fit:cover !important;
    object-position:center 45% !important;
}


/* ------------------------------------------------------------
   12. TABLET
   ------------------------------------------------------------ */

@media (max-width:1100px){

    .page-hero{
        min-height:82vh !important;
    }

    .gallery-stage{
        height:min(76vh,760px) !important;
        min-height:580px !important;
    }

    .simple-slider{
        min-height:560px !important;
    }

    .media-feature{
        min-height:620px !important;
    }

    .media-feature img{
        min-height:620px !important;
    }

    .number-showcase{
        height:620px !important;
    }
}


/* ------------------------------------------------------------
   13. MOBILE
   Use the normal full-bleed crop, but shift the focal point and give
   the image enough height so the subject does not feel over-zoomed.
   ------------------------------------------------------------ */

@media (max-width:700px){

    .home-phase1 .hero-phase1{
        min-height:840px !important;
    }

    .home-phase1 .hero-slide{
        background-position:center 42% !important;
    }

    .page-hero{
        min-height:78vh !important;
        background-position:center 42% !important;
    }

    .gallery-stage{
        height:68vh !important;
        min-height:560px !important;
    }

    .gallery-stage > img{
        object-position:center 42% !important;
    }

    .simple-slider{
        min-height:500px !important;
    }

    .simple-slide img{
        object-position:center 42% !important;
    }

    .media-feature,
    .media-feature img{
        min-height:520px !important;
    }

    .number-showcase{
        height:auto !important;
    }

    .number-showcase img{
        height:560px !important;
    }

    .event-browser{
        min-height:0 !important;
    }

    .event-image{
        min-height:560px !important;
        background-position:center 42% !important;
    }

    .scale-section{
        min-height:0 !important;
    }

    .scale-photo{
        min-height:560px !important;
        background-position:center 42% !important;
    }

    .event-cards article{
        min-height:520px !important;
        background-position:center 42% !important;
    }
}