/* =====================================================
   Social House – Video Block v4
   ===================================================== */

.sh-video-block, .sh-video-block * { box-sizing: border-box; }

/* ── THEME OVERRIDE: force all text inside our block to render as-typed ── */
.sh-video-block *,
.sh-video-block *::before,
.sh-video-block *::after {
    text-transform: none !important;
}



.sh-video-block {
    --sh-frame:   #202020;
    --sh-forest:  #024A25;
    --sh-surface: #FFFFFF;
    --sh-border:  rgba(0,0,0,0.10);
    --sh-text:    #202020;
    --sh-muted:   #6B7E74;
    --sh-radius:  14px;
    --sh-phone-w: 258px;
    --sh-phone-h: 524px;
    font-family: 'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    text-transform: none !important;
    margin: 2.5rem auto;
    background: transparent;
}

/* ═══════════════════════════════════════════════════
   PHONE MOCKUP
   ═══════════════════════════════════════════════════ */

.sh-video-block--phone .sh-phone-scene {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 24px 72px;
    background: transparent;
}

.sh-phone-scene__glow {
    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
    width: 520px; height: 520px;
    background: radial-gradient(ellipse at center,rgba(2,74,37,0.13) 0%,rgba(2,74,37,0.04) 55%,transparent 72%);
    pointer-events: none;
    filter: blur(48px);
    z-index: 0;
}

.sh-phone-scene__badge {
    position: relative;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--sh-forest);
    color: #fff;
    font-family: 'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none !important;
    padding: 7px 18px; border-radius: 99px; margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(2,74,37,0.25),0 1px 4px rgba(2,74,37,0.15);
}

.sh-phone-scene__badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #E53535;
    animation: sh-pulse 2s ease-in-out infinite;
}

@keyframes sh-pulse {
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.35;transform:scale(.7)}
}

/* ── Phone frame ──────────────────────────────────── */
.sh-phone-frame {
    position: relative;
    z-index: 2;
    width: var(--sh-phone-w);
    height: var(--sh-phone-h);
    background: var(--sh-frame);
    border-radius: 46px;
    border: 2.5px solid rgba(255,255,255,0.12);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.35),
        0 24px 64px rgba(0,0,0,0.28),
        0 6px 20px rgba(0,0,0,0.18),
        0 2px 6px rgba(0,0,0,0.12);
    overflow: hidden;  /* clips both video AND controls neatly */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.45s ease;
}

.sh-phone-frame:hover {
    transform: translateY(-8px) scale(1.018);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.35),
        0 40px 80px rgba(0,0,0,0.32),
        0 12px 28px rgba(0,0,0,0.20),
        0 2px 6px rgba(0,0,0,0.12);
}

.sh-phone-frame__notch {
    flex-shrink: 0; align-self: center;
    width: 90px; height: 28px;
    background: var(--sh-frame);
    border-radius: 0 0 18px 18px;
    z-index: 3; margin-top: 5px;
}

/* ── Screen ─────────────────────────────────────────
   The iframe fills this completely.
   Vimeo's own controls are hidden via the iframe CSS below. */
.sh-phone-frame__screen {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
    min-height: 0;
}

/* Fill iframe to 100% — Vimeo will render the video
   to fill the iframe since controls=1 keeps it out of
   pillarbox/background mode */
.sh-phone-frame__screen iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    margin: 0 !important; padding: 0 !important;
    display: block !important;
}

/* FitVids wraps the iframe — make the wrapper fill too */
.sh-phone-frame__screen .fluid-width-video-wrapper {
    position: absolute !important;
    inset: 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.sh-phone-frame__screen .fluid-width-video-wrapper iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}
/* Also handle any other wrapper div Salient might inject */
.sh-phone-frame__screen > div:not(.sh-video-controls) {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important; margin: 0 !important;
    width: 100% !important; height: 100% !important;
}

/* Hide Vimeo's native controls (we use our own overlay) */
.sh-phone-frame__screen iframe {
    /* Vimeo renders controls inside the iframe — we can't
       reach them with CSS directly, but we hide Vimeo's
       control bar by overlapping our own controls on top */
}

.sh-phone-frame__home-bar {
    flex-shrink: 0; align-self: center;
    width: 96px; height: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 99px; margin: 10px 0;
}

/* ── Video controls — sit on .sh-phone-frame ────────
   position:absolute on the frame (which is the nearest
   positioned ancestor). overflow:hidden on the frame
   clips them cleanly within the phone shape.
   FitVids only rewraps iframes — these buttons are safe. */
.sh-video-controls {
    position: absolute;
    top: 44px;   /* below the notch (~33px) + 11px gap */
    left: 10px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.sh-video-controls.sh-controls--visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.sh-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    background: rgba(20,20,20,0.65);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    color: #fff;
    transition: background 0.18s ease, transform 0.18s ease;
}

.sh-btn:hover {
    background: rgba(40,40,40,0.85);
    transform: scale(1.08);
}

.sh-btn:active { transform: scale(0.95); }

.sh-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Sound states */
.sh-btn--sound.sh-btn--muted    .sh-icon--muted   { display:block }
.sh-btn--sound.sh-btn--muted    .sh-icon--unmuted  { display:none  }
.sh-btn--sound:not(.sh-btn--muted) .sh-icon--muted   { display:none  }
.sh-btn--sound:not(.sh-btn--muted) .sh-icon--unmuted { display:block }

.sh-btn--sound.sh-btn--muted {
    background: rgba(180,40,40,0.70);
    border-color: rgba(220,60,60,0.40);
}
.sh-btn--sound.sh-btn--muted:hover { background: rgba(200,50,50,0.85); }

/* Fullscreen states */
.sh-btn--fullscreen .sh-icon--expand   { display:block }
.sh-btn--fullscreen .sh-icon--compress { display:none  }
.sh-btn--fullscreen.sh-btn--fullscreen-active .sh-icon--expand   { display:none  }
.sh-btn--fullscreen.sh-btn--fullscreen-active .sh-icon--compress { display:block }

/* ── Stats ────────────────────────────────────────── */
.sh-phone-scene__stats {
    position: absolute;
    right: 0; top: 50%; translate: 0 -50%;
    display: flex; flex-direction: column; gap: 9px;
    z-index: 4;
}

@media (min-width: 640px) { .sh-phone-scene__stats { right: -8px; } }

.sh-stat {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.95);
    border-radius: 12px;
    padding: 10px 15px; min-width: 110px; text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10),0 1px 4px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.9);
    transition: transform 0.2s ease;
}
.sh-stat:hover { transform: translateX(-2px); }

.sh-stat__value {
    display: block;
    text-transform: none !important;
    font-family: 'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 20px; font-weight: 700; color: var(--sh-frame); line-height: 1.1;
}

.sh-stat__label {
    display: block;
    text-transform: none !important;
    font-family: 'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 10px; font-weight: 500; color: var(--sh-muted);
    letter-spacing: 0.01em; margin-top: 3px;
}

/* ── Client chip ──────────────────────────────────── */
.sh-phone-scene__client {
    display: flex; align-items: center; gap: 10px;
    margin-top: 28px; position: relative; z-index: 3;
    background: rgba(255,255,255,0.90);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.95);
    border-radius: 99px; padding: 7px 18px 7px 7px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10),0 1px 4px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.9);
}

.sh-phone-scene__client-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--sh-forest); color: #fff;
    font-family: 'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.sh-phone-scene__client-name {
    text-transform: none !important;
    font-family: 'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 13px; font-weight: 700; color: var(--sh-text); white-space: nowrap; display: block;
}
.sh-phone-scene__client-role {
    text-transform: none !important;
    font-family: 'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 10px; font-weight: 400; color: var(--sh-muted); white-space: nowrap; display: block;
}

/* ═══════════════════════════════════════════════════
   SOCIAL PROOF MODE
   ═══════════════════════════════════════════════════ */

.sh-video-block--social-proof .sh-social-proof {
    display: grid; grid-template-columns: 1fr;
    gap: 20px; background: transparent;
}
@media (min-width: 768px) {
    .sh-video-block--social-proof .sh-social-proof {
        grid-template-columns: 1fr 296px;
        align-items: start; gap: 28px;
    }
}

.sh-social-proof__video-wrap {
    position: relative; min-height: 300px;
    border-radius: var(--sh-radius); overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.14),0 2px 8px rgba(0,0,0,0.08);
    border: 1.5px solid rgba(255,255,255,0.70);
}
.sh-social-proof__video-wrap::before {
    content:''; position:absolute; top:0;left:0;right:0; height:3px;
    background: linear-gradient(90deg,var(--sh-forest),#5BC98A,var(--sh-forest)); z-index:3;
}

.sh-social-proof__video-inner {
    position: relative; width:100%; height:100%;
    min-height: 300px; overflow: hidden; background:#000;
}
.sh-social-proof__video-inner iframe {
    position:absolute; inset:0; width:100%; height:100%; border:none;
}

.sh-social-proof__video-glow {
    position:absolute; bottom:0;left:0;right:0; height:80px;
    background:linear-gradient(to top,rgba(2,74,37,0.08),transparent);
    pointer-events:none;
}

.sh-social-proof__badge {
    position:absolute; top:18px;left:18px; z-index:4;
    background:var(--sh-forest); color:#fff;
    font-family:'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:10px;font-weight:500;letter-spacing:.01em;
    padding:5px 13px;border-radius:99px;
    box-shadow:0 2px 10px rgba(2,74,37,0.30);
}

.sh-social-proof__panel { display:flex;flex-direction:column;gap:12px;background:transparent; }

.sh-social-proof__stats { display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px; }

.sh-social-proof__stat {
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    border:1px solid rgba(255,255,255,0.95); border-radius:12px;
    padding:16px 10px;text-align:center;
    box-shadow:0 4px 20px rgba(0,0,0,0.09),inset 0 1px 0 rgba(255,255,255,0.9);
    transition:transform 0.2s ease;
}
.sh-social-proof__stat:hover { transform:translateY(-2px); }

.sh-social-proof__stat-value {
    display:block;
    font-family:'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:20px;font-weight:700;color:var(--sh-frame);line-height:1;margin-bottom:5px;
}
.sh-social-proof__stat-label {
    display:block;
    font-family:'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:10px;font-weight:500;color:var(--sh-muted);
    letter-spacing:.01em;line-height:1.3;
}

.sh-social-proof__client {
    display:flex;align-items:center;gap:12px;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);
    border:1px solid rgba(255,255,255,0.95);border-radius:14px;padding:14px 16px;
    box-shadow:0 4px 20px rgba(0,0,0,0.09),inset 0 1px 0 rgba(255,255,255,0.9);
}
.sh-social-proof__client-avatar {
    width:40px;height:40px;border-radius:50%;background:var(--sh-forest);color:#fff;
    font-family:'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sh-social-proof__client-name {
    font-family:'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:13px;font-weight:700;color:var(--sh-text);display:block;
}
.sh-social-proof__client-role {
    font-family:'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:11px;font-weight:400;color:var(--sh-muted);display:block;margin-top:2px;
}
.sh-social-proof__logo {
    display:flex;align-items:center;gap:8px;
    font-family:'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:11px;font-weight:500;color:var(--sh-muted);letter-spacing:.04em;
    background:rgba(255,255,255,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.9);border-radius:99px;padding:7px 14px 7px 8px;width:fit-content;
    box-shadow:0 2px 12px rgba(0,0,0,0.07),inset 0 1px 0 rgba(255,255,255,0.9);
}
.sh-social-proof__logo svg { flex-shrink:0; }

/* ── Responsive desktop phone scene (base) ───────── */
@media (min-width: 640px) {
    .sh-phone-scene__glow { width:640px; height:640px; }
}

/* ── Entrance animation ───────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .sh-video-block { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s ease; }
    .sh-video-block.sh-visible { opacity:1; transform:translateY(0); }
}

/* Empty state */
.sh-video-block__empty {
    padding:24px;text-align:center;
    font-family:'NeueHaasDisplay','Helvetica Neue',Helvetica,Arial,sans-serif;
    color:var(--sh-muted);font-size:14px;
    border:1px dashed rgba(0,0,0,0.15);border-radius:var(--sh-radius);
    background:rgba(255,255,255,0.6);backdrop-filter:blur(8px);
}

/* ═══════════════════════════════════════════════════
   BADGE + CLIENT CHIP OVERRIDES
   ═══════════════════════════════════════════════════ */

/* Fix client chip: tighter line spacing between name and role */
.sh-phone-scene__client-info {
    display: flex;
    flex-direction: column;
    gap: 1px;  /* was implicit ~4-6px, now tight */
}

.sh-phone-scene__client-name { line-height: 1.2; }
.sh-phone-scene__client-role { line-height: 1.2; margin-top: 0; }

/* Desktop: attach badge to the top of the phone frame.
   We re-declare the @media block to override previous values. */
@media (min-width: 640px) {
    .sh-video-block--phone .sh-phone-scene {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 40px;
        padding: 52px 56px 72px;  /* tighter top padding */
    }

    /* Badge sits centred horizontally across the scene,
       positioned to sit right at the top of the phone frame.
       scene padding-top = 52px → phone starts there → badge
       centre at 52px - half badge height (~16px) = ~36px from scene top */
    .sh-phone-scene__badge {
        position: absolute;
        top: 36px;          /* just above phone top edge */
        left: 50%;
        translate: -50% 0;
        margin-bottom: 0;
        white-space: nowrap;
        z-index: 6;
    }

    /* Client chip: centred below phone, close to the bottom edge */
    .sh-phone-scene__client {
        position: absolute;
        bottom: 28px;
        left: 50%;
        translate: -50% 0;
        margin-top: 0;
        white-space: nowrap;
    }

    .sh-phone-scene__stats {
        position: static;
        translate: none;
        align-self: center;
    }
}