/* Hero Banner + Campaign Banner (shared markup family: .hb-banner). */

.hb-banner {
    position: relative;
    display: flex;
    overflow: hidden;
    color: #fff;
}
.hb-banner.hb-text-dark { color: #111; }

.hb-banner__media { position: absolute; inset: 0; }
.hb-banner__media picture { display: block; width: 100%; height: 100%; }
.hb-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hb-focal, center);
    display: block;
}
.hb-banner__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hb-overlay-color, #000);
    opacity: var(--hb-overlay, .25);
    pointer-events: none;
}

/* Heights. 100vh is the fallback for browsers without small-viewport units. */
.hb-h-compact    { min-height: clamp(320px, 42vw, 460px); }
.hb-h-standard   { min-height: clamp(440px, 56vw, 720px); }
.hb-h-tall       { min-height: clamp(540px, 70vw, 880px); }
.hb-h-fullscreen { min-height: min(100vh, 1000px); min-height: min(100svh, 1000px); }

.hb-banner__inner {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: var(--hb-width, none);
    margin-inline: auto;
    padding: clamp(32px, 6vw, 88px) var(--_gutter, 16px);
}
.hb-banner__content { max-width: 40rem; width: 100%; }

.hb-pos-top    { align-items: flex-start; }
.hb-pos-middle { align-items: center; }
.hb-pos-bottom { align-items: flex-end; }

.hb-align-left   .hb-banner__inner { justify-content: flex-start; text-align: left; }
.hb-align-center .hb-banner__inner { justify-content: center; text-align: center; }
.hb-align-right  .hb-banner__inner { justify-content: flex-end; text-align: right; }
.hb-align-center .hb-actions { justify-content: center; }
.hb-align-right  .hb-actions { justify-content: flex-end; }

.hb-banner__title {
    margin-bottom: .35em;
    font-size: calc(var(--hb-head-scale, 1) * clamp(2rem, 1rem + 4.2vw, 4.5rem));
    line-height: 1.04;
}
.hb-campaign .hb-banner__title { font-size: calc(var(--hb-head-scale, 1) * clamp(1.8rem, 1rem + 3.2vw, 3.4rem)); }
.hb-banner__text { margin: 0; max-width: 46ch; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.6; opacity: .95; }
.hb-align-center .hb-banner__text { margin-inline: auto; }
.hb-align-right .hb-banner__text { margin-left: auto; }
.hb-banner .hb-eyebrow { color: inherit; }

/* Buttons sitting on a photo: always high-contrast against the text colour. */
.hb-banner:not(.hb-banner--noimg) .hb-btn { border-color: currentColor; }
.hb-banner.hb-text-light:not(.hb-banner--noimg) .hb-btn--primary { background: #fff; color: #111; border-color: #fff; }
.hb-banner.hb-text-light:not(.hb-banner--noimg) .hb-btn--primary:hover { background: transparent; color: #fff; }
.hb-banner.hb-text-dark:not(.hb-banner--noimg) .hb-btn--primary { background: #111; color: #fff; border-color: #111; }
.hb-banner.hb-text-dark:not(.hb-banner--noimg) .hb-btn--primary:hover { background: transparent; color: #111; }
.hb-banner:not(.hb-banner--noimg) .hb-btn--secondary:hover { background: currentColor; }
.hb-banner.hb-text-light:not(.hb-banner--noimg) .hb-btn--secondary:hover { color: #111; }
.hb-banner.hb-text-dark:not(.hb-banner--noimg) .hb-btn--secondary:hover { color: #fff; }
.hb-btn-outline .hb-banner:not(.hb-banner--noimg) .hb-btn--primary { background: transparent; }
.hb-btn-outline .hb-banner.hb-text-light:not(.hb-banner--noimg) .hb-btn--primary { color: #fff; }
.hb-btn-outline .hb-banner.hb-text-dark:not(.hb-banner--noimg) .hb-btn--primary { color: #111; }
.hb-btn-text .hb-banner:not(.hb-banner--noimg) .hb-btn--primary { background: transparent; color: inherit; border-color: transparent; border-bottom-color: currentColor; }

/* ---- Hero without an image: typographic, on the soft surface ---------- */
.hb-hero.hb-banner--noimg,
.hb-hero.hb-banner--noimg.hb-text-light,
.hb-hero.hb-banner--noimg.hb-text-dark { background: var(--_surface); color: var(--_text); }

/* ---- Hero: split and editorial layouts -------------------------------- */
.hb-hero--split,
.hb-hero--editorial {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--hb-panel, var(--_surface));
    color: var(--hb-panel-text, var(--_text));
}
.hb-hero--split.hb-text-light, .hb-hero--editorial.hb-text-light,
.hb-hero--split.hb-text-dark,  .hb-hero--editorial.hb-text-dark { color: var(--hb-panel-text, var(--_text)); }
.hb-hero--split .hb-banner__media,
.hb-hero--editorial .hb-banner__media {
    position: relative;
    min-height: clamp(300px, 80vw, 520px);
}
.hb-hero--split .hb-banner__media::after,
.hb-hero--editorial .hb-banner__media::after { display: none; }
.hb-hero--split .hb-banner__img,
.hb-hero--editorial .hb-banner__img { position: absolute; inset: 0; }
.hb-hero--split .hb-banner__inner,
.hb-hero--editorial .hb-banner__inner { align-items: center; justify-content: flex-start; text-align: left; padding: clamp(32px, 6vw, 96px) var(--_gutter, 16px); }
.hb-hero--split.hb-align-center .hb-banner__inner { justify-content: center; text-align: center; }
.hb-hero--split .hb-btn--primary,
.hb-hero--editorial .hb-btn--primary { background: var(--hb-panel-text, var(--_btn)); color: var(--hb-panel, var(--_surface)); border-color: var(--hb-panel-text, var(--_btn)); }
.hb-hero--split .hb-btn--primary:hover,
.hb-hero--editorial .hb-btn--primary:hover { background: transparent; color: var(--hb-panel-text, var(--_btn)); }

@media (min-width: 900px) {
    .hb-hero--split { grid-template-columns: 1fr 1fr; }
    .hb-hero--editorial { grid-template-columns: 1.4fr 1fr; }
    .hb-hero--split .hb-banner__media,
    .hb-hero--editorial .hb-banner__media { min-height: inherit; }
    .hb-hero--editorial .hb-banner__media { aspect-ratio: var(--hb-ed-ratio, 4/5); min-height: 0; max-height: 92vh; }
    .hb-hero--editorial { min-height: 0; }
    .hb-hero--split.hb-align-right .hb-banner__inner,
    .hb-hero--editorial.hb-align-right .hb-banner__inner { order: -1; }
    .hb-hero--split.hb-align-left .hb-banner__media,
    .hb-hero--editorial.hb-align-left .hb-banner__media { order: 2; }
    .hb-hero--split.hb-align-left .hb-banner__inner,
    .hb-hero--editorial.hb-align-left .hb-banner__inner { order: 1; }
    .hb-hero--split.hb-align-left .hb-banner__media { order: 2; }
}
.hb-hero--editorial .hb-banner__title { font-size: calc(var(--hb-head-scale, 1) * clamp(2.2rem, 1rem + 3.6vw, 4rem)); }
.hb-hero--editorial .hb-eyebrow::before { content: ""; display: block; width: 48px; height: 1px; margin-bottom: 1.1rem; background: currentColor; }

/* ---- Campaign ---------------------------------------------------------- */
.hb-campaign { background: var(--hb-banner-bg, #1a1a1a); }
.hb-campaign--contained { border-radius: var(--hb-radius, 4px); }
.hb-campaign__wrap { padding-block: calc(var(--hb-space, 64px) * .5); }
.hb-campaign__wrap .hb-banner__inner { padding-inline: clamp(20px, 5vw, 72px); }
.hb-campaign--simple { min-height: 0; }
.hb-campaign--simple .hb-banner__inner { padding-block: clamp(56px, 9vw, 120px); align-items: center; }
.hb-campaign--simple.hb-text-light .hb-btn--primary { background: #fff; color: #111; border-color: #fff; }
.hb-campaign--simple.hb-text-dark .hb-btn--primary { background: #111; color: #fff; border-color: #111; }
.hb-campaign--simple .hb-btn--secondary { border-color: currentColor; color: inherit; }
.hb-campaign--simple .hb-btn--secondary:hover { background: transparent; opacity: .7; }
.hb-campaign.hb-banner--noimg .hb-banner__content { margin-inline: auto; }
.hb-campaign.hb-align-left .hb-banner__content,
.hb-campaign.hb-align-right .hb-banner__content { margin-inline: 0; }
.hb-campaign.hb-align-right .hb-banner__content { margin-left: auto; }