/* ==========================================================================
   Page Hero Banner
   Widget template: ImageSliderItems -> Detail.ImageSliderItemsPageHeroBanner
   --------------------------------------------------------------------------
   Interior-page hero: full-bleed background image, dark scrim, and the page
   breadcrumb rendered INSIDE the hero.

   Two things make this template different from the other ImageSliderItems
   detail templates, and both are deliberate:

   1. It does NOT load image-slider-carousel.css. That file zeroes
      `body > main`'s padding, which is what the transparent-header heroes
      need (they paint under the header). This hero sits BELOW an opaque
      header, so `<main>` must keep the header offset common.css gives it.

   2. The breadcrumb is a separate Sitefinity widget placed above this one on
      the page. The template's script moves that `.site-breadcrumb` node into
      `.page-hero-banner__breadcrumb-slot` at runtime, so it becomes a real
      child of the hero and participates in its layout - no negative-margin
      guesswork against an element whose height we cannot know. Every
      breadcrumb override below is scoped under `.page-hero-banner` so the
      standalone breadcrumb (and the Valent build) is untouched.
   ========================================================================== */

/* The hero breaks out of the `<main>` content column with `width: 100vw`.
   100vw counts the scrollbar, so on platforms with classic scrollbars the
   hero is a few px wider than the document and would add a horizontal
   scrollbar. Clip it at the root.
   `overflow-x: clip` rather than `hidden`: hidden on html/body forces
   overflow-y to auto (CSS 2.1), which makes the root a scroll container and
   breaks the site header's `position: sticky`. Same reasoning - and the same
   @supports fallback - as product-details.css. */
html,
body {
    max-width: 100vw;
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* --------------------------------------------------------------------------
   Section shell
-------------------------------------------------------------------------- */

/* Full-bleed break-out. `<main>` (and therefore `.body-container`) is always
   horizontally centred in the viewport - it is capped at 1248/736/332px at
   the various breakpoints - so `50% - 50vw` resolves to exactly the distance
   from the content column's left edge back to the viewport edge at every
   breakpoint. No `<main>` override needed. */
.page-hero-banner {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /* 400px is the design height and the height this renders at for normal
       copy (title + one-line subtitle + two-line description). It is a floor
       rather than a fixed height so longer copy grows the hero instead of
       spilling out of it. */
    display: flex;
    min-height: 400px;
    /* Fallback surface for content items saved without an image - the copy is
       white, so the section can never be left on a white background.
       Literal rather than `rgb(var(--color-near-black))`: that token is
       redefined as a hex under `prefers-contrast: high` (common.css), which
       would make the rgb() invalid exactly where contrast matters most. */
    background-color: #333333;
    color: rgba(255, 255, 255, 1);
}

.page-hero-banner__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Always-on scrim: the hero image is author-supplied, so white text needs a
   guaranteed contrast floor rather than one that depends on a content flag. */
.page-hero-banner__scrim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 2;
}

/* "Gradient on image = Yes" on the content item: top-to-bottom gradient
   instead of the flat scrim. */
.page-hero-banner__scrim--gradient {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.65));
}

/* --------------------------------------------------------------------------
   Content column - mirrors the widths `body > main` uses at each breakpoint
   so the hero copy lines up with the rest of the page.
-------------------------------------------------------------------------- */
.page-hero-banner__inner {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--max-width-container);
    /* Flex item of the section: grows to the section's max-width and stretches
       to its full height, so the copy stays vertically centred in whatever
       height the section settles at. A percentage height would not work here -
       the section's height comes from min-height, so it computes to auto. */
    flex: 1 1 auto;
    margin: 0 auto;
    /* Symmetric, so the copy still centres on the section's midpoint at the
       design height. It also reserves the band the absolutely positioned
       breadcrumb occupies (30px top + ~26px tall), so once the copy is long
       enough to grow the hero past 400px it grows downward from under the
       breadcrumb instead of running into it. */
    padding-top: 70px;
    padding-bottom: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Desktop: the breadcrumb is pinned to the top of the hero and the copy block
   is centred in the FULL 400px, which is what the design measures out to. */
.page-hero-banner__breadcrumb-slot {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
}

/* Nothing was adopted (no breadcrumb widget on the page, or the Sitefinity
   page editor, where the move is skipped). */
.page-hero-banner__breadcrumb-slot:empty {
    display: none;
}

.page-hero-banner__content {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Typography
-------------------------------------------------------------------------- */
.page-hero-banner__title {
    margin: 0 0 20px 0;
    font-family: var(--font-family-bold);
    font-size: 34px;
    font-weight: 700;
    line-height: 52px;
    color: rgba(255, 255, 255, 1);
}

/* `h2` inside the description covers the case where the subtitle is authored
   as the first heading of the Details rich text rather than in a dedicated
   Subtitle field - see the template's field notes. */
.page-hero-banner__subtitle,
.page-hero-banner__description h2 {
    margin: 0 0 12px 0;
    font-family: var(--font-family-semi-bold);
    font-size: 22px;
    font-weight: 600;
    line-height: 29px;
    color: rgba(255, 255, 255, 1);
}

.page-hero-banner__description,
.page-hero-banner__description p,
.page-hero-banner__description li {
    margin: 0;
    font-family: var(--font-family-medium);
    font-size: 15px;
    font-weight: 500;
    line-height: 29px;
    color: rgba(255, 255, 255, 1);
}

.page-hero-banner__description a {
    color: rgba(255, 255, 255, 1);
    text-decoration: underline;
}

.page-hero-banner__description strong,
.page-hero-banner__description b {
    font-family: var(--font-family-bold);
    font-weight: 700;
}

.page-hero-banner__cta {
    margin-top: 20px;
}

/* --------------------------------------------------------------------------
   Breadcrumb, once adopted into the hero.
   Scoped to `.page-hero-banner` - the standalone `.site-breadcrumb` widget
   keeps its own (dark, 11px) styling everywhere else.
-------------------------------------------------------------------------- */
.page-hero-banner .site-breadcrumb {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.page-hero-banner .site-breadcrumb__list {
    gap: 10px;
    font-size: 14px;
}

.page-hero-banner .site-breadcrumb__item {
    font-size: 14px;
    color: rgba(255, 255, 255, 1);
}

.page-hero-banner .site-breadcrumb__link {
    color: rgba(255, 255, 255, 1);
}

    .page-hero-banner .site-breadcrumb__link:hover,
    .page-hero-banner .site-breadcrumb__link:focus {
        color: rgba(255, 255, 255, 1);
        text-decoration: underline;
    }

.page-hero-banner .site-breadcrumb__current {
    color: rgba(255, 255, 255, 0.75);
}

.page-hero-banner .site-breadcrumb__arrow {
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Mobile overflow ("...") trigger - the popup menu itself keeps its white
   surface, so only the trigger needs to invert. */
.page-hero-banner .site-breadcrumb-overflow-trigger {
    background-color: transparent;
    color: rgba(255, 255, 255, 1);
}

    .page-hero-banner .site-breadcrumb-overflow-trigger .material-symbols-outlined {
        color: rgba(255, 255, 255, 1);
    }

    .page-hero-banner .site-breadcrumb-overflow-trigger:hover .material-symbols-outlined {
        color: rgba(255, 255, 255, 0.75);
    }

    .page-hero-banner .site-breadcrumb-overflow-trigger:focus {
        outline: 2px solid rgba(255, 255, 255, 1);
        outline-offset: 1px;
    }

/* --------------------------------------------------------------------------
   Desktop 1024-1296px: `body > main` gets 48px side padding here, so the
   hero (which is full-bleed) has to supply its own.
-------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1296px) {
    .page-hero-banner__inner {
        max-width: 100%;
        padding-left: var(--container-padding-desktop);
        padding-right: var(--container-padding-desktop);
    }

    /* The slot is absolutely positioned, so it does not inherit the padding
       box above - inset it explicitly to stay aligned with the copy. */
    .page-hero-banner__breadcrumb-slot {
        left: var(--container-padding-desktop);
        right: var(--container-padding-desktop);
    }
}

/* --------------------------------------------------------------------------
   Tablet 878-1023px: `body > main` caps content at 736px.
   Below 1024px the hero height is a floor, not a fixed value, and the
   breadcrumb returns to normal flow above the copy.
-------------------------------------------------------------------------- */
@media (min-width: 878px) and (max-width: 1023px) {
    .page-hero-banner {
        min-height: 360px;
    }

    .page-hero-banner__inner {
        max-width: 736px;
        justify-content: flex-start;
        padding-top: 30px;
        padding-bottom: 40px;
    }

    .page-hero-banner__breadcrumb-slot {
        position: static;
        margin-bottom: 26px;
    }

    .page-hero-banner__title {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 16px;
    }

    .page-hero-banner__subtitle,
    .page-hero-banner__description h2 {
        font-size: 20px;
        line-height: 26px;
    }

    .page-hero-banner__description,
    .page-hero-banner__description p,
    .page-hero-banner__description li {
        line-height: 26px;
    }
}

/* --------------------------------------------------------------------------
   Mobile <=877px: `body > main` caps content at 332px.
-------------------------------------------------------------------------- */
@media (max-width: 877px) {
    .page-hero-banner {
        min-height: 320px;
    }

    .page-hero-banner__inner {
        max-width: 332px;
        justify-content: flex-start;
        padding-top: 24px;
        padding-bottom: 32px;
    }

    .page-hero-banner__breadcrumb-slot {
        position: static;
        margin-bottom: 20px;
    }

    .page-hero-banner .site-breadcrumb__list,
    .page-hero-banner .site-breadcrumb__item {
        font-size: 12px;
    }

    .page-hero-banner .site-breadcrumb__arrow {
        font-size: 14px !important;
    }

    .page-hero-banner__title {
        font-size: 26px;
        line-height: 34px;
        margin-bottom: 14px;
    }

    .page-hero-banner__subtitle,
    .page-hero-banner__description h2 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 10px;
    }

    .page-hero-banner__description,
    .page-hero-banner__description p,
    .page-hero-banner__description li {
        line-height: 25px;
    }
}