/* =========================
   Scoped — #cfh-video-hero ONLY
========================= */
#cfh-video-hero{
  --cfh-font: Inter, "Segoe UI", Arial, sans-serif;
  --cfh-text:#0f172a;
  --cfh-brown:#8B4513;
  --cfh-shadow:0 18px 55px rgba(2,6,23,.14);

  /* Mobile */
  --cfh-m-gutter: 14px;
  --cfh-m-radius: 16px;
  --cfh-m-video-h: 300px;

  font-family:var(--cfh-font);
  color:var(--cfh-text);
  background:#fff;
}
#cfh-video-hero *{ box-sizing:border-box; }

#cfh-video-hero .cfh-vm__wrap{
  width:min(1320px, calc(100% - 48px));
  margin:0 auto;
  padding-top:32px;
  padding-bottom:0;
}

#cfh-video-hero .cfh-vm__stage{
  position:relative;
  min-height:440px;
}

/* Media (desktop) */
#cfh-video-hero .cfh-vm__media{
  width:min(980px, 74vw);
  margin-left:auto;
}

/* Thumbnail button */
#cfh-video-hero .cfh-vm__thumb{
  position:relative;
  border:0;
  padding:0;
  width:100%;
  background:none;
  cursor:pointer;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 16px 44px rgba(2,6,23,.12);
  -webkit-tap-highlight-color: transparent;
}

/* Preview */
#cfh-video-hero .cfh-vm__preview{
  width:100%;
  height:440px;
  object-fit:cover;
  display:block;
  background:#000;
}

/* Play icon overlay */
#cfh-video-hero .cfh-vm__play{
  position:absolute;
  inset:0;
  margin:auto;
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
#cfh-video-hero.is-playing .cfh-vm__play{
  opacity:0;
  transform: scale(.96);
}
#cfh-video-hero .cfh-vm__ring{
  width:92px;height:92px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}
#cfh-video-hero .cfh-vm__tri{
  position:absolute;
  width:0;height:0;
  border-left:18px solid rgba(255,255,255,.95);
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  transform:translateX(3px);
}

/* Text panel (desktop overlap) */
#cfh-video-hero .cfh-vm__panel{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:min(540px, 44vw);
  padding:44px 44px 38px;
  background:var(--cfh-brown);
  color:#fff;
  box-shadow:var(--cfh-shadow);
  z-index:2;
}

#cfh-video-hero .cfh-vm__title{
  margin:0 0 16px;
  font-size:clamp(28px, 2.2vw, 32px);
  line-height:1.25;
  letter-spacing:-0.01em;
  font-weight:700;
}
#cfh-video-hero .cfh-vm__p{
  margin:0;
  font-size:17px;
  line-height:1.8;
  color:rgba(255,255,255,.9);
  max-width:62ch;
}

/* =========================
   Desktop Modal
========================= */
#cfh-video-hero .cfh-vm__modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
}
#cfh-video-hero .cfh-vm__modal.is-open{ display:block; }
#cfh-video-hero .cfh-vm__backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.62);
}
#cfh-video-hero .cfh-vm__dialog{
  position:relative;
  width:min(1100px, calc(100% - 48px));
  margin:min(10vh, 90px) auto 0;
  background:#0b1220;
  border-radius:16px;
  box-shadow:0 22px 70px rgba(0,0,0,.38);
  overflow:hidden;
}
#cfh-video-hero .cfh-vm__close{
  position:absolute;
  top:10px;
  right:12px;
  z-index:2;
  border:0;
  background:rgba(255,255,255,.10);
  color:#fff;
  width:44px;
  height:44px;
  border-radius:12px;
  cursor:pointer;
  font-size:28px;
  line-height:1;
}
#cfh-video-hero .cfh-vm__close:hover{ background:rgba(255,255,255,.16); }
#cfh-video-hero .cfh-vm__player{ background:#000; }
#cfh-video-hero .cfh-vm__modalVideo{
  width:100%;
  height:min(70vh, 620px);
  display:block;
  background:#000;
}

/* =========================
   Mobile (screenshot style)
========================= */
@media (max-width: 860px){
  #cfh-video-hero{
    background:#8C7A6B;
    padding-bottom:14px;
  }

  #cfh-video-hero .cfh-vm__wrap{
    width:100%;
    margin:0;
    padding-top:14px;
    padding-left:0;
    padding-right:0;
  }

  #cfh-video-hero .cfh-vm__stage{
    min-height:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  /* text on top */
  #cfh-video-hero .cfh-vm__panel{
    position:relative;
    left:auto; top:auto;
    transform:none;
    width:100%;
    margin:0 auto;
    padding:12px max(var(--cfh-m-gutter), env(safe-area-inset-left)) 0;
    background:transparent;
    box-shadow:none;
    color:#fff;
    text-align:center;
  }

  #cfh-video-hero .cfh-vm__title{
    font-size:clamp(22px, 6vw, 28px);
    line-height:1.18;
    margin:0 0 6px;
    letter-spacing:-0.01em;
  }

  /* ✅ subtitle single line */
  #cfh-video-hero .cfh-vm__p{
    font-size:15px;
    line-height:1.55;
    color:rgba(255,255,255,.88);

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    max-width:100%;
    margin:0 auto;
  }

  /* video below with gutters */
  #cfh-video-hero .cfh-vm__media{
    width:100%;
    margin:0 auto;
    padding-left:max(var(--cfh-m-gutter), env(safe-area-inset-left));
    padding-right:max(var(--cfh-m-gutter), env(safe-area-inset-right));
  }

  #cfh-video-hero .cfh-vm__thumb{
    border-radius:var(--cfh-m-radius);
    box-shadow:0 12px 26px rgba(2,6,23,.14);
  }

  #cfh-video-hero .cfh-vm__preview{
    height:var(--cfh-m-video-h);
  }
}

@media (max-width: 420px){
  #cfh-video-hero{
    --cfh-m-gutter:12px;
    --cfh-m-video-h:280px;
  }
}