/* ============================= */
/* HERO VIDEO COMPONENT (INLINE) */
/* ============================= */

.hero-video{ width:100%; }

.hero-video__media{
  position:relative;
  width:100%;
  aspect-ratio: var(--hv-ratio, 16/7);
  overflow:hidden;
  background:#0b1b22;
}

/* o video ocupa tudo */
.hero-video__media video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* poster */
.hero-video__poster{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: opacity .25s ease;
}

.hero-video__poster--fallback{
  width:100%;
  height:100%;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}

.hero-video__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(11 143 185 / 15%), rgb(11 143 185 / 15%) 60%);
    pointer-events: none;
    transition: opacity .25s ease;
}

.hero-video__card {
    position:absolute;
    left:16px;
    bottom:16px;

    display:flex;
    align-items:stretch;
    gap:0;
    padding:0;

    max-width:min(640px, calc(100% - 32px));

    border:none;               /* sem borda */
    border-radius:8px;

    background: rgba(255,255,255,0.03); /* quase invisível */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-height: 67px;
    color:#fff;
    cursor:pointer;
    min-height:67px;
    overflow:hidden;
    transition:all .25s ease;
    z-index:3;
}

/* play button */
.hero-video__play{
  width: 67px;
  height: 67px;
  border-radius:6px;
  background:#fff;
  position:relative;
  flex:0 0 auto;
}

/* PLAY (triângulo) */
.hero-video__play::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-40%,-50%);
  width:0;
  height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:10px solid #0b8fb9;
}

/* PAUSE (duas barras) quando está a tocar */
.hero-video.is-playing .hero-video__play::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width:12px;
  height:12px;
  border:none;
  background:
    linear-gradient(to right, #0b8fb9 0 40%, transparent 40% 60%, #0b8fb9 60% 100%);
}
.hero-video__title {
    font-size: 20px;
    line-height: 1.2;
    text-align: left;
    padding: 7px 20px;
    font-weight: 500;
}

/* Estado inicial: overlay visível */
.hero-video__overlay{ opacity:1; }
.hero-video__poster{ opacity:1; }

/* A tocar: overlay e poster desaparecem */
.hero-video.is-playing .hero-video__poster{ opacity:0; }
.hero-video.is-playing .hero-video__overlay{ opacity:0; }

/* Em pause (já iniciou mas não está a tocar): overlay volta, poster continua off */
.hero-video.has-video:not(.is-playing) .hero-video__poster{ opacity:0; }
.hero-video.has-video:not(.is-playing) .hero-video__overlay{ opacity:1; }
/* ============================= */
/* SINGLE POST VIDEO SECTION */
/* ============================= */

.single-video{
  padding:80px 0;
}

.single-video-title{
  margin-bottom:24px;
  font-size:28px;
  font-weight:600;
}

.single-video-div {
    margin: 0px 20px;

}