/* =========================================================
   Title Hero (BlockGridPage's mandatory page hero) - self-contained,
   NOT scoped under .landing-page/.hero-landing (those only apply to
   the one existing landing page's own landing.css) so this can be
   used safely on any regular BlockGridPage without touching or being
   touched by that page's styling. Background color comes from an
   inline style (BlockGridPage.cshtml picks it from the CMS "Hero
   Color" dropdown, mapped to the design guide's secondary brand
   colors) - this file only supplies the shape/typography/light-theme
   switch.
   ========================================================= */

:root {
    --title-hero-sash-h: 62px;
}

.title-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 64px 0;
    margin-bottom: 1.5rem;
}

/* Skewed "sash" cut at the top and bottom edges, ported from the site's original
   .page-title.brand-sash trick: two wedges the page's own background color, clipped to
   a diagonal polygon, layered on top of the hero's flat rectangle so it reads as skewed. */
.title-hero::before,
.title-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--title-hero-sash-h);
    background: var(--background-color, #fff);
    pointer-events: none;
    z-index: 2;
}

.title-hero::before {
    top: 0;
    clip-path: polygon(0 0, 100% 0, 100% 10%, 0 100%);
}

.title-hero::after {
    bottom: -1px;
    clip-path: polygon(0 90%, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 991.98px) {
    :root {
        --title-hero-sash-h: 36px;
    }
}

/* Ambient background image/video, ported from landingHero's .bag/.slor pattern - dimmed
   and blurred behind the flat Hero Color, which stays visible through the gradient
   overlay (built from the same dynamic --title-hero-bg the inline style sets, so it
   blends correctly no matter which of the 8 hero colors is picked). */
.title-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.title-hero__bg img,
.title-hero__bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
    opacity: .34;
    filter: saturate(.75) blur(1px);
}

.title-hero__bg video {
    position: absolute;
    inset: 0;
    display: none;
}

@media (min-width: 900px) {
    .title-hero__bg video {
        display: block;
    }

    .title-hero__bg video ~ .title-hero__bg-poster {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .title-hero__bg video {
        display: none !important;
    }
}

.title-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        var(--title-hero-bg) 5%,
        color-mix(in srgb, var(--title-hero-bg) 90%, transparent) 45%,
        color-mix(in srgb, var(--title-hero-bg) 44%, transparent) 100%
    );
}

.title-hero__grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: 48px;
    align-items: center;
}

.title-hero__grid--full {
    grid-template-columns: 1fr;
}

.title-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.title-hero__eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
}

.title-hero__copy h1 {
    color: #fff;
    font-size: 52px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.038em;
    max-width: 20ch;
    margin: 0;
}

.title-hero__copy h1 em {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    font-style: normal;
    color: var(--accent-color);
}

.title-hero__intro {
    font-size: 19px;
    line-height: 1.6;
    color: var(--landing-on-dark, #DCE3E3);
    max-width: 50ch;
    margin: 20px 0 0;
}

.title-hero__cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    margin-top: 28px;
}

.title-hero__button {
    display: inline-block;
    flex: 0 0 auto;
    background: var(--accent-color);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 14px 28px;
    border-radius: 5px;
    text-decoration: none;
}

.title-hero__button:hover {
    color: #fff;
    background: color-mix(in srgb, var(--accent-color), #000 12%);
}

.title-hero__cta-note {
    font-size: 15px;
    line-height: 1.5;
    color: var(--landing-dim, #8FA0A6);
    flex: 1 1 auto;
    min-width: 0;
    max-width: 30ch;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, .18);
    margin: 0;
}

.title-hero__visual {
    display: flex;
    flex-direction: column;
}

/* Extra clearance below the frame's own overhanging corner accent (its ::after sits
   12px below the frame), so the gap to the CTA reads as clearly deliberate. */
.title-hero__visual > .title-hero__cta-row {
    margin-top: 48px;
}

.title-hero__frame {
    position: relative;
    padding: 20px 0 0 20px;
}

.title-hero__frame::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 64%;
    height: 62%;
    border-left: 5px solid var(--accent-color);
    border-top: 5px solid var(--accent-color);
    border-radius: 16px 0 0 0;
    pointer-events: none;
}

.title-hero__frame::after {
    content: "";
    position: absolute;
    right: -12px;
    bottom: -12px;
    width: 38%;
    height: 44%;
    border-right: 5px solid rgba(53, 196, 196, .55);
    border-bottom: 5px solid rgba(53, 196, 196, .55);
    border-radius: 0 0 16px 0;
    pointer-events: none;
}

.title-hero__photo {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    display: block;
    position: relative;
    z-index: 2;
    box-shadow: 0 24px 56px rgba(0, 0, 0, .5);
}

.title-hero__appsource {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 40px 0 0;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    width: fit-content;
    max-width: 100%;
}

.title-hero__ms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    width: 20px;
    height: 20px;
    flex: none;
}

.title-hero__ms i:nth-child(1) { background: #F25022; }
.title-hero__ms i:nth-child(2) { background: #7FBA00; }
.title-hero__ms i:nth-child(3) { background: #00A4EF; }
.title-hero__ms i:nth-child(4) { background: #FFB900; }

.title-hero__appsource-text {
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--landing-on-dark, #DCE3E3);
}

.title-hero__appsource-text b {
    display: block;
    font-size: 15px;
    color: #fff;
    font-weight: 700;
}

.title-hero__appsource-text a {
    color: #35C4C4;
    text-decoration: none;
}

/* ---- Light theme: light-gray background, dark (inverted) text ---- */
.title-hero--light {
    color: var(--heading-color, #111);
}

.title-hero--light .title-hero__copy h1 {
    color: var(--heading-color, #111);
}

.title-hero--light .title-hero__intro,
.title-hero--light .title-hero__appsource-text {
    color: var(--default-color, #444);
}

.title-hero--light .title-hero__cta-note {
    color: color-mix(in srgb, var(--default-color, #444), transparent 15%);
    border-left-color: rgba(0, 0, 0, .15);
}

.title-hero--light .title-hero__frame::before {
    border-color: var(--accent-color);
}

.title-hero--light .title-hero__photo {
    border-color: rgba(0, 0, 0, .12);
}

.title-hero--light .title-hero__appsource {
    border-color: rgba(0, 0, 0, .12);
    background: rgba(0, 0, 0, .03);
}

.title-hero--light .title-hero__appsource-text b {
    color: var(--heading-color, #111);
}

@media (max-width: 980px) {
    .title-hero__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .title-hero__copy h1 {
        font-size: 38px;
    }
}