/* Revamp hero — the parts shared by every page using <x-hero-revamp>
   (resources/views/components/hero-revamp.blade.php). Pushed after each
   page's own stylesheet, so same-specificity rules here win.

   1. The hero video's poster, as a CSS background, per breakpoint.
   2. The phone layout: centred copy on top, Appy (the portrait video,
      public/images/appyVideo/mobileHero-720.mp4) standing underneath. */

/* ---------- Poster ----------
   Shown until the video has a frame, and for good when it never plays
   (reduced motion, Save-Data, autoplay refused). The poster is each video's
   exact first frame, so the hand-over is invisible. Positioned exactly like
   the video (object-fit/object-position) so the two line up. */
.homeHeroSecVideo {
    background: url("/images/appyVideo/appyHero-poster.webp") 50% 50% / cover no-repeat;
}

/* ---------- Phones ---------- */
@media (max-width: 900px) {
    /* Appy's video is 1082x1914 and he stands in its lower half; the top
       half is plain background for the copy to sit on. The video is
       pinned to the card's bottom edge at full card width (capped on
       tablets), and the card reserves the lower half of that height as
       bottom padding, so the copy always ends just above his head however
       long it runs. */
    #homeHeroSec,
    #heroLoader {
        --hero-video-w: min(100%, 560px);
    }

    #homeHeroSec .homeHeroSecInner {
        align-items: center;
        text-align: center;
        padding: 36px 16px calc(var(--hero-video-w) * 0.93);
        border-radius: 32px;
        background: #F5F9E3;
    }

    #homeHeroSec .homeHeroSecInner .homeHeroSecVideo,
    #heroLoader .homeHeroSecVideo {
        inset: auto auto 0 50%;
        width: var(--hero-video-w);
        height: auto;
        aspect-ratio: 1082 / 1914;
        transform: translateX(-50%);
        object-fit: cover;
        object-position: 50% 100%;
        background: url("/images/appyVideo/mobileHero-poster.webp") 50% 100% / cover no-repeat;
    }

    /* Tablets: the video is narrower than the card, so feather its side
       edges into the card colour instead of showing a seam. */
    @media (min-width: 600px) {
        #homeHeroSec .homeHeroSecInner .homeHeroSecVideo,
        #heroLoader .homeHeroSecVideo {
            -webkit-mask-image: linear-gradient(90deg, #0000, #000 6%, #000 94%, #0000);
            mask-image: linear-gradient(90deg, #0000, #000 6%, #000 94%, #0000);
        }
    }

    #homeHeroSec .homeHeroSecInner .homeHeroSecCol {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Eyebrow: small pill with a brand-green dot. */
    #homeHeroSec .homeHeroSecCol small {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 14px;
        margin: 0 0 18px 0;
        border: 1px solid #D6E9B8;
        border-radius: 999px;
        background: #E7F3D2;
        color: #2F5A22;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0;
    }

    #homeHeroSec .homeHeroSecCol small::before {
        content: "";
        flex: none;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #6BA539;
    }

    #homeHeroSec .homeHeroSecCol h1 {
        font-size: clamp(34px, 10.5vw, 52px);
        line-height: 1.04;
        letter-spacing: -1.5px;
        margin: 0 0 16px 0;
        white-space: normal;
    }

    #homeHeroSec .homeHeroSecCol p {
        font-size: 15px;
        line-height: 1.55;
        max-width: 36ch;
        margin: 0 0 24px 0;
    }

    /* About page: bold green line instead of the paragraph. */
    #homeHeroSec .homeHeroSecCol p.homeHeroSecLead {
        font-size: 18px;
        line-height: 1.35;
        max-width: 26ch;
    }

    /* Two equal buttons side by side. */
    #homeHeroSec .homeHeroSecInner .homeHeroSecCol .homeHeroSecColActionBtns {
        width: 100%;
        max-width: 360px;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 10px;
    }

    #homeHeroSec .homeHeroSecInner .homeHeroSecCol .homeHeroSecColActionBtns a {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        gap: 6px;
        padding: 14px 12px;
        border-radius: 14px;
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
    }

    #homeHeroSec .homeHeroSecColActionBtns a.btn-primary {
        box-shadow: 0 10px 22px -10px rgba(23, 61, 44, .55);
    }

    #homeHeroSec .homeHeroSecColActionBtns a.btn-outline {
        background: #FFFFFF;
        border: 1px solid rgba(23, 61, 44, .14);
        color: #173D2C;
    }

    /* Fullscreen loader: plain card colour with Appy's first frame standing
       at the bottom — the same box the video gets once it is moved in, so
       nothing jumps. The tagline goes up top, clear of him. */
    #heroLoader {
        background: #F5F9E3 url("/images/appyVideo/mobileHero-poster.webp") 50% 100% / min(100%, 560px) auto no-repeat;
        align-items: flex-start;
        padding: 16vh 0 0 0;
    }

    .heroLoaderTagline {
        color: #173D2C;
        text-shadow: none;
    }
}

/* Very narrow phones: let the buttons stack rather than truncate. */
@media (max-width: 340px) {
    #homeHeroSec .homeHeroSecInner .homeHeroSecCol .homeHeroSecColActionBtns {
        flex-wrap: wrap;
    }

    #homeHeroSec .homeHeroSecInner .homeHeroSecCol .homeHeroSecColActionBtns a {
        flex-basis: 100%;
    }
}