/* ADJUSTMENTS TO THE MAIN BANNER IMAGE POSITIONING FOR TABLET AND SMARTPHONE */
@media only screen and (max-width: 800px) {
        .tfs-slider .background-image {
        background-position: 11% 50% !important;
    }
}

/* ------------------------------------------------------------------
   LPI HOMEPAGE HERO — slide 34 only.
   Generated by /hero-lab-9f3c/ on 2026-08-12 08:58 UTC.
   Edit through the lab, not by hand — hand edits are overwritten.
   HOST-GATED: LGI, IMP and other clones load this file from LPI's domain and
   share page-id-3822 and slide-id-34. Every rule is gated on the slide's own
   inline URL containing londonpianoinstitute — do not remove that gate.
   ------------------------------------------------------------------ */

body.home .tfs-slider .slide-id-34 .background-image[style*="londonpianoinstitute"] {
    background-image: url("https://www.londonpianoinstitute.co.uk/wp-content/uploads/hero-lab/lady-playing-on-a-grand-piano.jpg") !important;
    background-color: #121413;
}

body.home .tfs-slider .slide-id-34 .background-image[style*="londonpianoinstitute"]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.13);
    pointer-events: none;
}

/* Soft scrim behind the headline and buttons — z-index -1 keeps it inside the
   content container's stacking context: above the photo, under the text. */
body.home .tfs-slider li.slide-id-34:has(> .background-image[style*="londonpianoinstitute"]) .slide-content-container::before {
    content: "";
    position: absolute;
    top: -60px;
    right: 0;
    bottom: -60px;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 72%);
}

/* Photo is 2000/1331. Wider window than that -> width drives cover; taller -> height does. */
@media only screen and (max-width: 800px) and (min-aspect-ratio: 2000/1331) {
    body.home .tfs-slider .slide-id-34 .background-image[style*="londonpianoinstitute"] {
        background-size: 100% auto !important;
    }
}

@media only screen and (max-width: 800px) and (max-aspect-ratio: 2000/1331) {
    body.home .tfs-slider .slide-id-34 .background-image[style*="londonpianoinstitute"] {
        background-size: auto 100% !important;
    }
}

@media only screen and (max-width: 800px) {
    body.home .tfs-slider .slide-id-34 .background-image[style*="londonpianoinstitute"] {
        background-position: 45% 50% !important;
    }

    /* Hero buttons on phones. */
    body.home .tfs-slider li.slide-id-34:has(> .background-image[style*="londonpianoinstitute"]) .slide-content .buttons a.fusion-button {
        font-size: 12px !important;
        padding: 11px 29px !important;
        line-height: 1.2 !important;
        width: 100% !important;
    }
    body.home .tfs-slider li.slide-id-34:has(> .background-image[style*="londonpianoinstitute"]) .slide-content .buttons .fusion-align-block {
        text-align: center !important;
    }
}

@media only screen and (min-width: 801px) and (min-aspect-ratio: 2000/1331) {
    body.home .tfs-slider .slide-id-34 .background-image[style*="londonpianoinstitute"] {
        background-size: 125% auto !important;
    }
}

@media only screen and (min-width: 801px) and (max-aspect-ratio: 2000/1331) {
    body.home .tfs-slider .slide-id-34 .background-image[style*="londonpianoinstitute"] {
        background-size: auto 125% !important;
    }
}

@media only screen and (min-width: 801px) {
    body.home .tfs-slider .slide-id-34 .background-image[style*="londonpianoinstitute"] {
        background-position: 56% 36% !important;
    }

    /* Headline off her torso. */
    body.home .tfs-slider li.slide-id-34:has(> .background-image[style*="londonpianoinstitute"]) .slide-content .heading {
        transform: translateX(40px);
    }

    /* Buttons lower — padding, not margin: a margin here would collapse
       with the heading's 14px bottom margin. */
    body.home .tfs-slider li.slide-id-34:has(> .background-image[style*="londonpianoinstitute"]) .slide-content .buttons {
        padding-top: 18px;
    }
}