/*=====================================
HOME HERO
======================================*/

/*
    Heroes must sit flush under the sticky navbar.

    Two inherited rules were pushing them down:
      1. margin-top:95px  - a leftover from when #mainNav was position:fixed.
         It is position:sticky now, so it stays in normal flow and needs
         no compensation.
      2. section{ padding:var(--space-lg) 0 }  - the generic 65px section
         padding in style.css, which is right for content sections but
         wrong for a full-bleed hero.
*/

.hero,
.page-hero{

    margin-top:0;

}

/* Home carousel: fixed height, content is absolutely positioned inside. */
.hero{

    padding:0;

}

/*
    Inner-page hero: the background <img> is position:absolute and fills the
    section, so padding here insets only the text - the image stays flush
    under the navbar. height is switched to min-height so long headings
    (e.g. Events) grow the band instead of being clipped by overflow:hidden.
*/
.page-hero{

    height:auto;
    min-height:460px;
    padding:56px 0;

}

#heroSlider{

    height:560px;

}

#heroSlider .carousel-inner{

    height:560px;

}

#heroSlider .carousel-item{

    height:560px;

    position:relative;

}

.hero-image{

    width:100%;

    height:100%;

    object-fit:cover;

    /*  These are tall-ish photos of people dropped into a wide, short hero, so
        `cover` crops away most of the frame. Centring cropped straight through
        the middle - chests and desks - and cut faces off at the top. Biasing to
        the upper third keeps heads and faces in frame on every hero. */
    object-position:center 32%;

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(11,46,107,.75) 0%,
        rgba(11,46,107,.55) 40%,
        rgba(11,46,107,.20) 100%
    );

}

.hero-content{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    z-index:3;

}

.hero-content .container{

    max-width:1200px;

}
/*
    Hero headings sit on a photograph, so they must stay white whatever
    heading level the markup happens to use. (faq-hero used an h2 and
    inherited the dark body heading colour, leaving it unreadable.)
*/
.page-hero-content h1,
.page-hero-content h2,
.page-hero-content h3,
.hero-content h1,
.hero-content h2 {

    color:#fff;

}

/*==================================================
RESPONSIVE HERO HEIGHTS
The desktop slider is 560px; on smaller screens that
would swallow the whole viewport, so it steps down.
==================================================*/

@media (max-width:991px){

    #heroSlider,
    #heroSlider .carousel-inner,
    #heroSlider .carousel-item{

        height:420px;

    }

    .page-hero{

        min-height:340px;
        padding:40px 0;

    }

}

/*==================================================
TABLET / PHONE SLIDER TEXT
The slide is a fixed height with .hero-content absolutely positioned and
vertically centred inside it. The copy was still rendering at desktop-ish
sizes - the h1 at ~38px over three lines, plus a 20px/1.8 paragraph - which
needed roughly 380px of stack inside a 340px slide. Because the block is
centred, the overflow spilled BOTH ways: the eyebrow was cut off above and
the "Learn More" button was clipped below. Scaling the type down (and the
slide up slightly) makes the whole stack fit.
==================================================*/

@media (max-width:767px){

    .hero-content h1{

        font-size:30px;
        line-height:1.2;
        margin-bottom:16px;

    }

    .hero-content p{

        font-size:16px;
        line-height:1.6;
        margin-bottom:20px;
        max-width:100%;

    }

    .hero-badge{

        font-size:12px;
        letter-spacing:2px;
        margin-bottom:12px;

    }

}

@media (max-width:575px){

    #heroSlider,
    #heroSlider .carousel-inner,
    #heroSlider .carousel-item{

        height:400px;

    }

    .hero-content h1{

        font-size:26px;

    }

    .hero-content p{

        font-size:15px;
        margin-bottom:18px;

    }

    /* The arrows sat over the text on narrow screens. */
    #heroSlider .carousel-control-prev,
    #heroSlider .carousel-control-next{

        width:36px;

    }

    .page-hero{

        min-height:280px;
        padding:32px 0;

    }

    .navbar-logo{

        width:auto;
        height:46px;
        margin-top:0;
        margin-bottom:0;

    }

}