/*
    PageBanner widget: the editable banner at the top of an inner page.

    Capability-identical to the home Banner: single image, image slider or video. The base
    .static-header rules (600px band, centring, default background) live in common.css, so this
    file only adds what the widget introduces: the tenant background, the slider/video layers,
    the readability overlay and the editor affordances.

    The slider markup deliberately reuses the .banner-slider/.banner-slide class contract so
    banner.js rotates it and no second implementation can drift from the home banner's.
*/

.page-banner {
    position: relative;
}

/* The tenant background is set inline by the view, not here: the per-page defaults declare
   `.static-header { background: ... }` (and contact-us.css uses !important), and those files are
   linked in the body after this one, so a rule here would lose. The inline declaration outranks
   them all. It is a cover-cropped band rather than the image at its natural height, so a slider
   whose slides differ in aspect ratio cannot make the band jump height on every rotation. */

/* Video and slider layers sit beneath the overlay and the title. */
.page-banner .banner-video,
.page-banner .banner-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.page-banner .banner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* An iframe cannot object-fit like a <video>, so the embed is oversized and centred to cover the
   band instead of letterboxing. pointer-events stays off: this is background chrome. */
.page-banner .banner-video--embed {
    overflow: hidden;
    pointer-events: none;
}

    .page-banner .banner-video--embed iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 177.78vh; /* 16:9 relative to viewport height */
        min-width: 100%;
        height: 56.25vw; /* 16:9 relative to viewport width */
        min-height: 100%;
        transform: translate(-50%, -50%);
        border: 0;
    }

.page-banner .banner-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

    .page-banner .banner-slide.is-active {
        opacity: 1;
    }

/* A flat dark wash over the whole banner, not a bottom-weighted gradient: the title is centred
   in the band rather than sitting at the bottom, so an even tint keeps contrast consistent
   wherever the text falls and treats the whole element as one dimmed surface.

   This uses ::before deliberately. `.static-header::after` (common.css) already paints the blue
   fade that blends the band into the page below, and is the same pseudo-element on the same
   element, so declaring ::after here would replace that fade rather than add to it. */
.page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 1;
}

/* Opt-out for an image that is already dark or low-contrast, where a second wash would
   flatten it. */
.page-banner--no-overlay::before {
    display: none;
}

/* Above the wash (z-index 1) and the inherited `.static-header::after` bottom fade (z-index 2). */
.page-banner .header-content {
    position: relative;
    z-index: 3;
}

.page-banner .header-subtitle {
    margin-bottom: 0;
}

/* The editor tools must clear both overlays to stay visible and clickable. `.page-banner::before`
   and `.static-header::after` (common.css) both paint over the band, so the tools need to sit
   above them rather than tie. This selector is more specific than `.editor-widget-tools` in
   editor.css, so it must not lower the z-index that rule sets. */
.page-banner > .editor-widget-tools {
    z-index: 60;
}

/* ==========================
     Full-width page content
   ==========================
   The tenant-editable widgets below the banner run edge to edge, with no gap between the banner
   and the first widget. Scoped to this modifier so the 85px gutter .about-section applies on the
   rest of each page is untouched.

   Doubled class: the per-page stylesheets (about.css, meetourteam.css) are linked in the body,
   after this file, so a single-class selector would lose the cascade tie to their
   `.about-section` padding. */
.about-section.about-section--full-width,
.padding-container-speacial.about-section--full-width {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

    .about-section.about-section--full-width > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }