/* Scoped to .efxh-hero. The extra class also beats the theme's a/p/h1 rules. */

/* Tokens and base */

.efxh-hero {
    --efxh-field: #1D2731;
    --efxh-steel: #CACCCE;
    --efxh-stone: #F0EEE9;
    --efxh-coral: #FF5A3C;
    --efxh-coral-dark: #E44B2F;
    --efxh-font: SpaceGrotesk, "SpaceGrotesk Fallback Tight", sans-serif;
    padding-top: var(--sticky-top, 88px); /* clears the fixed #header -- see header.js updateStickyOffset() */
    background: #fff;
    color: #000;
    font-family: var(--efxh-font);
    isolation: isolate;
    -webkit-font-smoothing: antialiased;
}

/* --sticky-top (header.js updateStickyOffset()) bakes in the admin bar's height
   because it's meant for the fixed #header's own `top` offset. Normal-flow
   content like this block already gets that same shift for free from WP core's
   `html { margin-top: 32px }` (46px under 782px), so adding the full --sticky-top
   value as padding-top double-counts the admin bar specifically. Pull it back
   out here rather than changing the shared header.js, since other blocks using
   --sticky-top for padding/margin-top likely have the same latent issue. */
body.admin-bar .efxh-hero {
    margin-top: -32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .efxh-hero {
        margin-top: -46px;
    }
}

.efxh-hero * {
    box-sizing: border-box;
}

.efxh-hero p,
.efxh-hero h1 {
    margin: 0;
}

.efxh-hero a {
    color: inherit;
    text-decoration: none;
}

.efxh-hero a:focus-visible,
.efxh-hero button:focus-visible {
    outline: 2px solid var(--efxh-coral);
    outline-offset: 3px;
}

.efxh-hero .efxh-hero__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Layout */

.efxh-hero .efxh-hero__stage {
    --efxh-chamfer: 14vw;
    --efxh-corner: 80px;
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(560px, 43vw, 745px);
    margin-bottom: -1px; /* this and the -1px/-2px below: hairline at some zoom levels */
    overflow: hidden;
}

.efxh-hero .efxh-hero__stage::after {
    content: "";
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: -1px;
    width: var(--efxh-corner);
    height: var(--efxh-corner);
    background: #000;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Photos */

.efxh-hero .efxh-hero__photos {
    --efxh-photo-edge: 60%;
    position: absolute;
    inset: 0 0 -2px;
    background: var(--efxh-coral);
    clip-path: polygon(var(--efxh-photo-edge) 0, 100% 0, 100% 100%, calc(var(--efxh-photo-edge) - var(--efxh-chamfer)) 100%, var(--efxh-photo-edge) calc(100% - var(--efxh-chamfer)));
}

.efxh-hero .efxh-hero__photo {
    position: absolute;
    inset: 0;
    transform-origin: 72% 35%;
    opacity: 0;
    transition: opacity .5s cubic-bezier(.3,.1,.3,1);
}

.efxh-hero .efxh-hero__photo--active {
    z-index: 1;
}

.efxh-hero .efxh-hero__photo--active,
.efxh-hero .efxh-hero__photo--previous {
    opacity: 1;
    animation: efxh-hero-drift 9s cubic-bezier(.25,.1,.25,1) both;
}

.efxh-hero .efxh-hero__photo:nth-child(3).efxh-hero__photo--active,
.efxh-hero .efxh-hero__photo:nth-child(3).efxh-hero__photo--previous {
    animation-duration: 12s;
}

.efxh-hero .efxh-hero__photo--previous,
.efxh-hero .efxh-hero__photo--no-fade {
    transition: none;
}

.efxh-hero .efxh-hero__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: right var(--efxh-photo-align, 100%);
}

.efxh-hero .efxh-hero__stage--paused .efxh-hero__photo {
    animation-play-state: paused;
}

@keyframes efxh-hero-drift {
    from {
        scale: 1;
        translate: 0 0;
    }
    to {
        scale: 1.08;
        translate: -1.2% .6%;
    }
}

@media (prefers-reduced-motion:reduce) {
    .efxh-hero .efxh-hero__photo--active,
    .efxh-hero .efxh-hero__photo--previous {
        animation: none;
    }
}

/* Copy */

.efxh-hero .efxh-hero__copy {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-w-wrapper);
    margin: 0 auto;
    padding: clamp(56px, 5.5vw, 96px) 24px clamp(56px, 6.5vw, 112px);
}

.efxh-hero .efxh-hero__copy-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    max-width: min(600px, 50vw);
}

.efxh-hero .efxh-hero__eyebrow {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
}

.efxh-hero .efxh-hero__headline {
    font-size: min(5.2vw, 90px);
    font-weight: 500;
    line-height: .87;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.efxh-hero .efxh-hero__line {
    display: block;
    white-space: nowrap;
    transition: color .5s ease;
}

.efxh-hero .efxh-hero__stage--animated .efxh-hero__line {
    color: var(--efxh-steel);
}

.efxh-hero .efxh-hero__stage--animated .efxh-hero__line--active {
    color: #000;
}

.efxh-hero .efxh-hero__letter {
    display: inline-block;
    white-space: pre;
    text-align: center;
}

.efxh-hero .efxh-hero__line--active .efxh-hero__letter--accent {
    color: var(--efxh-coral);
}

.efxh-hero .efxh-hero__lead {
    max-width: 595px;
    padding-left: 6px;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -.012em;
}

/* Hover chamfer. Extends 6px out so the focus ring isn't clipped. */

@property --efxh-hover-cut {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

.efxh-hero .efxh-hero__video,
.efxh-hero .efxh-hero__pause,
.efxh-hero .efxh-hero__button {
    clip-path: polygon(-6px -6px, calc(100% + 6px) -6px, calc(100% + 6px) calc(100% - var(--efxh-hover-cut) - 6px), calc(100% - var(--efxh-hover-cut) - 6px) calc(100% + 6px), -6px calc(100% + 6px));
    transition: background .2s, --efxh-hover-cut .25s ease-out;
}

.efxh-hero .efxh-hero__video:hover,
.efxh-hero .efxh-hero__pause:hover,
.efxh-hero .efxh-hero__button:hover {
    --efxh-hover-cut: 14px;
}

/* Button */

.efxh-hero .efxh-hero__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 56px;
    padding: 20px;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

.efxh-hero .efxh-hero__button:hover {
    background: var(--efxh-field);
}

.efxh-hero .efxh-hero__button-arrow {
    position: relative;
    top: -.1em;
    transition: transform .2s;
}

.efxh-hero .efxh-hero__button:hover .efxh-hero__button-arrow {
    transform: translateX(4px);
}

/* Controls */

.efxh-hero .efxh-hero__controls {
    position: absolute;
    z-index: 2;
    right: 48px;
    bottom: 48px;
    display: flex;
    gap: 8px;
}

/* two-tone so it shows on coral and on dark photos */
.efxh-hero .efxh-hero__controls a:focus-visible,
.efxh-hero .efxh-hero__controls button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #000;
}

.efxh-hero .efxh-hero__video {
    display: flex;
    align-items: stretch;
    height: 64px;
    color: #fff;
}

.efxh-hero .efxh-hero__video-play {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    background: #000;
}

.efxh-hero .efxh-hero__video-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #fff;
    color: #000;
    transition: transform .4s ease-out;
}

.efxh-hero .efxh-hero__video:hover .efxh-hero__video-icon {
    transform: scale(1.06);
}

.efxh-hero .efxh-hero__video-icon svg {
    translate: 1.5px 0;
}

.efxh-hero .efxh-hero__video-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding-right: 32px;
    background: rgba(0,0,0,.9);
}

.efxh-hero .efxh-hero__video-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.efxh-hero .efxh-hero__video-duration {
    font-size: 13px;
    color: var(--efxh-steel);
    font-variant-numeric: tabular-nums;
}

.efxh-hero .efxh-hero__pause {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    background: var(--efxh-coral-dark);
    color: #000;
    cursor: pointer;
}

.efxh-hero .efxh-hero__pause[hidden] {
    display: none;
}

/* Video overlay */

.efxh-hero .efxh-hero__overlay {
    width: min(1120px, 100vw - 32px, (100vh - 140px) * 16 / 9); /* last value: short windows */
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.efxh-hero .efxh-hero__overlay::backdrop {
    background: rgba(0,0,0,.88);
}

.efxh-hero .efxh-hero__overlay-bar {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 12px;
}

.efxh-hero .efxh-hero__overlay-close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: #fff;
    color: #000;
    border: 0;
    cursor: pointer;
}

.efxh-hero .efxh-hero__overlay-close:hover {
    background: var(--efxh-stone);
}

.efxh-hero .efxh-hero__overlay-frame {
    aspect-ratio: 16/9;
    background: #000;
}

.efxh-hero .efxh-hero__overlay-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive */

@media (min-width:1024px) {
    .efxh-hero {
        padding-top: var(--sticky-top, 120px);
    }
    .efxh-hero .efxh-hero__copy {
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media (max-width:1023px) {
    .efxh-hero .efxh-hero__stage {
        --efxh-chamfer: 40px;
        --efxh-corner: 40px;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }
    .efxh-hero .efxh-hero__photos {
        position: relative;
        order: 2;
        width: 100%; /* Firefox shrinks it otherwise */
        aspect-ratio: 1185/840;
        max-height: 600px;
        clip-path: polygon(var(--efxh-chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 var(--efxh-chamfer));
    }
    .efxh-hero .efxh-hero__photo img {
        object-position: center 25%;
    }
    .efxh-hero .efxh-hero__copy {
        padding: 32px 24px;
    }
    .efxh-hero .efxh-hero__copy-inner {
        gap: 20px;
        max-width: none;
    }
    .efxh-hero .efxh-hero__headline {
        font-size: min(13vw, 90px);
    }
    .efxh-hero .efxh-hero__lead {
        padding-left: 0;
        font-size: 16px;
    }
    .efxh-hero .efxh-hero__button {
        margin-top: 8px;
    }
    .efxh-hero .efxh-hero__controls {
        left: 16px;
        right: auto;
        bottom: 16px;
    }
    .efxh-hero .efxh-hero__video {
        height: 44px;
    }
    .efxh-hero .efxh-hero__video-play {
        width: 44px;
    }
    .efxh-hero .efxh-hero__video-icon {
        width: 24px;
        height: 24px;
    }
    .efxh-hero .efxh-hero__video-meta {
        gap: 2px;
        padding-right: 16px;
    }
    .efxh-hero .efxh-hero__video-title,
    .efxh-hero .efxh-hero__video-duration {
        font-size: 12px;
    }
    .efxh-hero .efxh-hero__pause {
        width: 44px;
        height: 44px;
    }
    .efxh-hero .efxh-hero__pause svg {
        width: 14px;
        height: 14px;
    }
}