/* ========== Variables ========== */
:root{
  --hvtc-radius: 22px;
  --hvtc-gap: 16px;
  --hvtc-cream: #f6efe7;
  --hvtc-accent: #0089ff;

  /* velocidades */
  --hvtc-hover-speed: .9s;              /* hover */
  --hvtc-stagger-speed: .65s;           /* entrada */

  /* easings */
  --hvtc-stagger-ease: cubic-bezier(.2,.7,.3,1);

  /* curvas cinematográficas */
  --hvtc-hover-in:  cubic-bezier(.4,0,.2,1);
  --hvtc-hover-out: cubic-bezier(.4,0,.6,1);
}

/* ========== Wrapper & Track ========== */
.hvtc-carousel{
  max-width: 1200px;
  position: relative;
  overflow: visible;
  margin: auto;
}

.hvtc-track{
  display: grid;
  gap: var(--hvtc-gap);
  overflow: visible !important;
}

/* Desktop grid by shortcode columns when NOT in carousel mode */
.hvtc-cols-1  .hvtc-track:not(.is-carousel){ grid-template-columns: repeat(1, 1fr); }
.hvtc-cols-2  .hvtc-track:not(.is-carousel){ grid-template-columns: repeat(2, 1fr); }
.hvtc-cols-3  .hvtc-track:not(.is-carousel){ grid-template-columns: repeat(3, 1fr); }
.hvtc-cols-4  .hvtc-track:not(.is-carousel){ grid-template-columns: repeat(4, 1fr); }
.hvtc-cols-5  .hvtc-track:not(.is-carousel){ grid-template-columns: repeat(5, 1fr); }
.hvtc-cols-6  .hvtc-track:not(.is-carousel){ grid-template-columns: repeat(6, 1fr); }
.hvtc-cols-7  .hvtc-track:not(.is-carousel){ grid-template-columns: repeat(7, 1fr); }
.hvtc-cols-8  .hvtc-track:not(.is-carousel){ grid-template-columns: repeat(8, 1fr); }


@media (min-width: 1201px){
  .hvtc-track{padding-top:60px;
}
@media (max-width: 1200px){
  .hvtc-cols-6 .hvtc-track:not(.is-carousel){ grid-template-columns: repeat(5,1fr); }
}

/* Overlap look between cards */
.hvtc-track .hvtc-card{ margin-left: -14px; margin-right: -14px; }
.hvtc-track .hvtc-card:first-child{ margin-left: 0; }

/* ========== Carousel inner scroller ========== */
.hvtc-scroll{
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 60px 8px 60px;
}
.hvtc-scroll .hvtc-card{ scroll-snap-align: start; }

.hvtc-scroll{ -ms-overflow-style: none; scrollbar-width: none; }
.hvtc-scroll::-webkit-scrollbar{ display:none; width:0; height:0; background:transparent; }

/* ========== Bullets ========== */
.hvtc-bullets{ display:none; }
.hvtc-track.is-carousel + .hvtc-bullets{
  display:flex; justify-content:center; gap:10px; margin-top:14px;
}
.hvtc-bullet{
  width:8px; height:8px; border-radius:999px; border:0; background:#d3d3d3; cursor:pointer;
}
.hvtc-bullet.is-active{ background:#111; }

/* ========== Cards ========== */
.hvtc-card{
  --rot: -1deg;
  position: relative;
  border-radius: var(--hvtc-radius);
  overflow: hidden;
  background: #fff;

  box-shadow: 0 20px 12px #0000000a, 0 8px 8px #00000020, 0 1px 4px #0000001f;

  opacity: 0;
  transform: translateY(28px) rotate(var(--rot));

  transition-property: transform, box-shadow, opacity;
  transition-duration: var(--hvtc-hover-speed), .45s, var(--hvtc-stagger-speed);
  transition-timing-function: var(--hvtc-hover-out), var(--hvtc-hover-out), var(--hvtc-stagger-ease);
  transition-delay: 0s, 0s, 0s;

  cursor: pointer;
  will-change: transform, opacity;
}
.hvtc-card:nth-child(odd){ --rot: 1.2deg; }

.hvtc-track:not(.is-carousel) .hvtc-card:hover,
.hvtc-carousel .hvtc-card:hover{
  transform: translateY(0) scale(1.1) rotate(calc(var(--rot) + 2deg)) !important;
  box-shadow: 0 28px 22px #00000012, 0 12px 14px #00000028, 0 2px 6px #00000026;
  transition-timing-function: var(--hvtc-hover-in), var(--hvtc-hover-in), var(--hvtc-stagger-ease);
  z-index: 5;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* ========== Media area ========== */
.hvtc-media{
  position: relative;
  height: 100%;
  aspect-ratio: 4 / 5;
  background: var(--hvtc-cream);
  overflow: hidden;
}
body .row .hvtc-media .hvtc-poster{
  position: absolute; inset:0; margin-bottom: 0;
  width:100%!important; height:100%; object-fit:cover; display:block; z-index:1;
}
.hvtc-media video{
  position:absolute; inset:0; width:101%; height:100%;
  object-fit:cover; object-position: top; display:block; z-index:2;
  opacity:0; transition: opacity .28s ease;
}
.hvtc-card:hover .hvtc-media video{ opacity:1; }

/* ========== Badge bottom left with subtle gradient ========== */
.hvtc-badge{
  width:100%;
  position: absolute;
  left: 15px;
  bottom: 15px;
  right: auto;
  background: none;
  color: #fff;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  z-index: 3;
}
.hvtc-badge::before{
  content: "";
  position: absolute;
  left: -16px; right: 0; bottom: -16px;
  height: 200%;
  background: linear-gradient(to top, rgb(32 49 54 / 40%), rgba(0, 0, 0, 0));
  border-radius: 0 0 var(--hvtc-radius) var(--hvtc-radius);
  z-index: -1;
}
.hvtc-badge-name{
  text-shadow: 0.8px 0.5px 0.2px #00000059;font-weight: 700; font-size: 1rem; line-height: 1.2;
}
.hvtc-badge-role{
  font-weight: 500;text-shadow: 0.8px 0.5px 0.2px #00000059;font-size: .86rem; line-height: 1.2;
}

/* ========== Tooltip ========== */
#hvtc-tooltip{
  position: fixed; left:0; top:0;
  transform: translateZ(0) scale(.9);
  background:#fff; color:#111;
  padding:8px 12px; border-radius:999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 2147483647;
  white-space:nowrap; font-weight:600; font-size:.9rem;
}
#hvtc-tooltip.is-on{ opacity:1; transform: translateZ(0) scale(1); }

/* ========== Stagger entrance ========== */
.hvtc-in .hvtc-card{
  opacity: 1;
  transform: translateY(0) rotate(var(--rot));
  transition-duration: var(--hvtc-stagger-speed), .45s, var(--hvtc-stagger-speed);
  transition-timing-function: var(--hvtc-stagger-ease), var(--hvtc-hover-out), var(--hvtc-stagger-ease);
  transition-delay: calc(var(--i) * 100ms), calc(var(--i) * 100ms), calc(var(--i) * 100ms);
}

/* ========== Lightbox overlay ========== */
.hvtc-lightbox-overlay{
  position: fixed !important;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 2147483647 !important;
  padding: 24px;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .45s var(--hvtc-hover-out), visibility .45s var(--hvtc-hover-out);
}

.hvtc-lightbox-overlay.is-open{

  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: flex;
}

.hvtc-lightbox-content{
  max-width: 900px; width: min(92vw, 900px); height: 80vh;
  background:#fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  position: relative;
  display:flex; flex-direction:column;
  transform: translateY(28px);
  opacity: 0;
  will-change: transform, opacity;
}

.hvtc-lightbox-overlay.is-open .hvtc-lightbox-content{
  transform: translateY(0);
  opacity: 1;
  animation: hvtc-overlay-bounce-up 900ms var(--hvtc-hover-in) both;
}

@keyframes hvtc-overlay-bounce-up{
  0%   { transform: translateY(28px); opacity: 0; }
  60%  { transform: translateY(-4px); opacity: 1; }
  80%  { transform: translateY(2px);  opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .hvtc-lightbox-content{
    transform: none;
    opacity: 1;
    animation: none !important;
  }
}

/* ========== Lightbox body layout ========== */
.hvtc-lightbox-body{ height: 100%; }

.hvtc-top{
  display: grid;
  grid-template-columns: 50% 1fr;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
  height: calc(100% - 70px);
}

.hvtc-media-left{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  height: 100%;
}
.hvtc-media-left iframe,
.hvtc-media-left video{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: auto;
}

/* Right text column */
.hvtc-text-right{
  padding: 10%;
  overflow: auto;
}
.hvtc-text-right .hvtc-name{
    margin-left: -2px;
    margin-bottom: 0;
    line-height: 1.2;
    font-size: 2rem;
}
.hvtc-text-right p{
line-height: 1.4;
    font-size: 0.95em;
    opacity: 0.7;
    font-weight: 500;
}
.hvtc-text-right .hvtc-role{    font-weight: 500;
    opacity: 0.7;
    font-size: 0.8em; margin: 0 0 14px; }

/* ========== Footer with CTA + prev or next ========== */
.hvtc-footer{
  display: grid;
  grid-template-columns: 1fr 40% 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px;
}
.hvtc-btn{
  width: 100%;
  background: var(--hvtc-accent);
  color:#fff; text-decoration:none;
  border-radius: 999px; padding: 13px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease;
  justify-self: center;
}
.hvtc-btn:hover{
  color:#fff !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(11,108,255,.35);
}

.hvtc-prev{ justify-self: start; }
.hvtc-next{ justify-self: end; }

.hvtc-prev,
.hvtc-next{
  color: inherit;
  background: none;
  border: none;
  padding: 6px 12px;
  font-size: .95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hvtc-prev::before{
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="M0.46875 6.46875L6.46875 0.5C6.75 0.1875 7.21875 0.1875 7.53125 0.5C7.8125 0.78125 7.8125 1.25 7.53125 1.53125L2.03125 7L7.5 12.5C7.8125 12.7812 7.8125 13.25 7.5 13.5312C7.21875 13.8438 6.75 13.8438 6.46875 13.5312L0.46875 7.53125C0.15625 7.25 0.15625 6.78125 0.46875 6.46875Z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="M0.46875 6.46875L6.46875 0.5C6.75 0.1875 7.21875 0.1875 7.53125 0.5C7.8125 0.78125 7.8125 1.25 7.53125 1.53125L2.03125 7L7.5 12.5C7.8125 12.7812 7.8125 13.25 7.5 13.5312C7.21875 13.8438 6.75 13.8438 6.46875 13.5312L0.46875 7.53125C0.15625 7.25 0.15625 6.78125 0.46875 6.46875Z"/></svg>') no-repeat center / contain;
}

.hvtc-next::after{
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="M0.46875 6.46875L6.46875 0.5C6.75 0.1875 7.21875 0.1875 7.53125 0.5C7.8125 0.78125 7.8125 1.25 7.53125 1.53125L2.03125 7L7.5 12.5C7.8125 12.7812 7.8125 13.25 7.5 13.5312C7.21875 13.8438 6.75 13.8438 6.46875 13.5312L0.46875 7.53125C0.15625 7.25 0.15625 6.78125 0.46875 6.46875Z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="M0.46875 6.46875L6.46875 0.5C6.75 0.1875 7.21875 0.1875 7.53125 0.5C7.8125 0.78125 7.8125 1.25 7.53125 1.53125L2.03125 7L7.5 12.5C7.8125 12.7812 7.8125 13.25 7.5 13.5312C7.21875 13.8438 6.75 13.8438 6.46875 13.5312L0.46875 7.53125C0.15625 7.25 0.15625 6.78125 0.46875 6.46875Z"/></svg>') no-repeat center / contain;
  transform: scaleX(-1);
}

.hvtc-prev:hover,
.hvtc-next:hover{ color: var(--hvtc-accent); }

/* ========== Close button ========== */
.hvtc-close{
  position:absolute; top:12px; right:12px; z-index:2;
  background:#e8e8e8; border:0; border-radius:999px;
  width:40px; height:40px; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.hvtc-close::before,
.hvtc-close::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:18px; height:2px; background:#111; border-radius:2px;
  transform-origin:center;
}
.hvtc-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.hvtc-close::after{  transform:translate(-50%,-50%) rotate(-45deg); }

.hvtc-close:hover{ box-shadow:0 4px 14px rgba(0,0,0,.2); }
.hvtc-close:hover::before,
.hvtc-close:hover::after{ background: var(--hvtc-accent); }


/* ========== Responsive ========== */
@media (max-width:1024px){
  .hvtc-carousel{
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
  }
}
@media (max-width:640px){
  .hvtc-badge-name{ font-size:.95rem; }
  .hvtc-badge-role{ font-size:.82rem; }
}

/* ========== Custom Play Overlay ========== */
.hvtc-media-left video::-webkit-media-controls{ display:none !important; }
.hvtc-media-left video{ controls: none; }
.hvtc-lb-video::-webkit-media-controls{ display:none !important; }
.hvtc-lb-video{ controls: none; }

.hvtc-play{
  position: absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border: 0;
  outline: none;
  box-shadow: none;
  appearance: none;
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  transition: background .2s ease, transform .2s ease;
  pointer-events: auto;
}
.hvtc-play:focus{ outline: none; box-shadow: none; }
.hvtc-play::before{
  content:'';
  width: 18px; height: 18px;
  background: #fff;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 18"><path d="M3 1.5L14 9L3 16.5V1.5Z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 18"><path d="M3 1.5L14 9L3 16.5V1.5Z"/></svg>') no-repeat center / contain;
}
.hvtc-play:hover{
  background: rgba(255,255,255,.75);
  transform: translate(-50%, -50%) scale(1.03);
}

/* ========== Preview to target swap in lightbox ========== */
.hvtc-media-left{ position: relative; }
.hvtc-lb-preview,
.hvtc-lb-target{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hvtc-lb-preview{
  z-index: 1;
  opacity: 1;
  transition: opacity .25s ease;
  object-fit: cover;
}
.hvtc-lb-preview.is-off{
  opacity: 0;
  pointer-events: none;
}

.hvtc-lb-target{
  z-index: 2;
  opacity: 0;
  transition: opacity .25s ease;
}
.hvtc-lb-target.is-ready{
  opacity: 1;
}
/* =============================
   Lightbox  tablet e mobile
   ============================= */

/* 1) Tablet  mantém vídeo à esquerda e texto à direita, com padding menor */
@media (max-width: 1024px) and (min-width: 641px){
  /* espaço do overlay mais compacto */
  .hvtc-lightbox-overlay{ padding: 10px; }

  /* mantém 2 colunas no tablet */
  .hvtc-top{
    grid-template-columns: 50% 1fr;   /* força 2 colunas no tablet */
    padding: 10px;                    /* padding lateral menor */
    gap: 10px;
  }
}

/* 2) Mobile  tela cheia, sem padding, vídeo ocupa 50% da tela, footer oculto */
@media (max-width: 640px){
    .hvtc-text-right {
    z-index: 2;
    background: #fff;
    margin-top: -50px;}
  /* tira qualquer padding do overlay e usa tela cheia no conteúdo */
  .hvtc-lightbox-overlay{ padding: 0; }

  .hvtc-lightbox-content{
              border-radius: 20px 20px 0 0;
              margin-top: 20vh;
    width: 100vw;
    height: 100vh;
    box-shadow: none;
  }

  /* sem padding na área interna e grid em duas linhas */
  .hvtc-top{
    grid-template-columns: 1fr;           /* uma coluna */
    grid-template-rows: 50vh 1fr;         /* vídeo 50% da tela, texto no restante */
    padding: 0;                            /* zero padding */
    gap: 0;
    height: 100%;
  }

  /* garante que o vídeo preencha a metade superior */
  .hvtc-media-left{
    height: 50vh;              /* força 50% da viewport */
    border-radius: 0;          /* sem cantos para tela cheia */
  }
  .hvtc-media-left iframe,
  .hvtc-media-left video{
      object-position:top;
      margin-top:-50px;
    border-radius: 20px 20px 0 0;
  }

  /* fecha acima de tudo e afastado do notch */
  .hvtc-close{
    position: fixed;               /* sobe para o topo da tela */
    top: calc(10px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
    z-index: 99999;                /* acima do vídeo */
  }

  /* esconde o footer no mobile */
  .hvtc-footer{ display: none !important; }
}