/* ================================================================
   OUTFRONT Hero Video v4 — style.css
   Cinematic dark navy hero with seamless video blend (single video or playlist)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,900;1,400&display=swap');

/* ── FULL-WIDTH BREAKOUT ──────────────────────────────────────── */
.ohv-section {
    position: relative;
    width: 100vw;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0 !important;
    padding-top: 0 !important;

    height: var(--ohv-h, 680px);
    display: flex;
    overflow: hidden;
    font-family: 'Barlow Condensed', sans-serif;
    box-sizing: border-box;

    /* === CINEMATIC DARK NAVY BACKGROUND === */
    background:
        radial-gradient(circle at top center,
            rgba(201, 157, 59, 0.25) 0%,
            rgba(7, 16, 32, 0.95) 45%,
            #020817 100%),
        linear-gradient(
            135deg,
            #020817 0%,
            #071428 35%,
            #0b1f3a 60%,
            #020817 100%);
}

/* Also zero out any WPBakery row gap above this element */
.ohv-section,
.vc_row:has(.ohv-section),
.wpb_row:has(.ohv-section) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ── DARK OVERLAY (left-to-right fade over video) ─────────────── */
.ohv-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to right,
            rgba(2, 8, 23, 0.97) 15%,
            rgba(2, 8, 23, 0.80) 42%,
            rgba(2, 8, 23, 0.18) 100%);
    z-index: 2;
    pointer-events: none;
}

/* ── GOLD GLOW EFFECT ─────────────────────────────────────────── */
.ohv-section::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    top: -250px;
    left: 25%;
    background: radial-gradient(
        circle,
        rgba(212, 175, 55, 0.22) 0%,
        rgba(212, 175, 55, 0.08) 35%,
        transparent 70%);
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
}

/* ── CITY LIGHT EFFECT (bottom warm glow) ─────────────────────── */
.ohv-lights {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 250px;
    background: linear-gradient(to top, rgba(255, 166, 0, 0.10), transparent);
    mix-blend-mode: screen;
    z-index: 3;
    pointer-events: none;
}

/* ── LEFT COLUMN (45%) ─────────────────────────────────────────── */
.ohv-left {
    position: relative;
    z-index: 5;
    width: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 48px 160px 48px 6%;
    box-sizing: border-box;
    overflow: hidden;
    /* background is transparent — the section bg shows through */
}

.ohv-text {
    width: 100%;
}

/* ── EYEBROW LABEL ────────────────────────────────────────────── */
.ohv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 175, 55, 0.12);
    border: 0.5px solid rgba(212, 175, 55, 0.45);
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 22px;
}

.ohv-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d4af37;
    flex-shrink: 0;
}

.ohv-eyebrow-text {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #d4af37;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

/* ── HEADING ──────────────────────────────────────────────────── */
.ohv-section .ohv-h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(38px, 4.4vw, 62px) !important;
    line-height: 1.2em !important;
    letter-spacing: -0.5px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    margin: 0 0 0 0 !important;
    padding: 0 !important;
    font-weight: 900 !important;
    border: none !important;
    background: none !important;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal !important;
}

/* accent <span> inside heading — gold */
.ohv-section .ohv-h2 span {
    color: var(--ohv-ac, #d4af37) !important;
    display: block;
}

/* ── GOLD RULE DIVIDER ────────────────────────────────────────── */
.ohv-rule {
    width: 52px;
    height: 3px;
    background: linear-gradient(to right, #d4af37, rgba(212, 175, 55, 0.3));
    border-radius: 2px;
    margin: 20px 0;
}

/* ── SUBHEADING ───────────────────────────────────────────────── */
.ohv-section .ohv-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(15px, 1.5vw, 21px) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: rgba(180, 200, 220, 0.85) !important;
    margin: 0 0 36px 0 !important;
    padding: 0 !important;
    letter-spacing: 0.02em;
    max-width: 380px;
}

/* ── CTA BUTTONS ──────────────────────────────────────────────── */
.ohv-ctas {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 44px;
}

.ohv-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #cb9865;
    color: #00adef;
    border: none;
    padding: 13px 28px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.ohv-btn-primary:hover {
    background: #00adef;
    transform: translateY(-1px);
}

.ohv-btn-primary svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ohv-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #ffffff;
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    padding: 13px 24px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.ohv-btn-secondary:hover {
    border-color: rgba(255,255,255,0.65);
    color: #d4af37;
}

.ohv-btn-secondary svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── STATS ROW ────────────────────────────────────────────────── */
.ohv-stats {
    display: flex;
    gap: 28px;
    padding-top: 28px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.ohv-stat-num {
    font-family: 'Inter', sans-serif;
    font-size: clamp(22px, 2vw, 30px);
    color: #ffffff;
    letter-spacing: -0.5px;
    line-height: 1;
}

.ohv-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(180, 200, 220, 0.7);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 4px;
}

.ohv-stat-divider {
    width: 0.5px;
    background: rgba(255,255,255,0.12);
    align-self: stretch;
}

/* ── VIDEO — full-bleed behind content, masked on left ────────── */
.ohv-video {
    position: absolute;
    right: 0;
    top: 0;
    width: 65%;
    height: 100%;
    z-index: 1;
    pointer-events: none;

    /* Blend left edge into the dark background */
    -webkit-mask-image: linear-gradient(
        to left,
        rgba(0,0,0,1) 55%,
        rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(
        to left,
        rgba(0,0,0,1) 55%,
        rgba(0,0,0,0) 100%);
}

.ohv-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 56.25%;
    min-width: 177.78%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
    display: block;
    opacity: 0.92;
}

/* Transparent overlay sits ABOVE iframe to block YouTube chrome,
   but has pointer-events:none so the Watch Video button is clickable */
.ohv-video-chrome-block {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    pointer-events: none;
}

/* ── NO-VIDEO PLACEHOLDER ─────────────────────────────────────── */
.ohv-no-video {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.04);
}
.ohv-no-video span {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    color: rgba(255,255,255,0.3);
    text-align: center;
    padding: 20px;
}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .ohv-section {
        flex-direction: column;
        height: auto !important;
    }
    .ohv-left {
        width: 100%;
        padding: 48px 5% 40px;
        z-index: 5;
    }
    .ohv-section .ohv-h2 {
        font-size: clamp(40px, 10vw, 62px) !important;
    }
    .ohv-video {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .ohv-iframe {
        width: 100%;
        height: 100%;
        min-width: unset;
        min-height: unset;
        top: 0;
        left: 0;
        transform: none;
    }
    .ohv-stats {
        gap: 20px;
    }
    .ohv-stat-divider {
        display: none;
    }
}