/**
 * Custom CSS - Espacamento das Secoes + CLS Fix
 * Criado: 2026-01-10
 * Atualizado: 2026-01-10 - Fix CLS desktop (card-video)
 */

/* ============================================
   ESPACAMENTO DAS SECOES
   ============================================ */

/* Desktop: 120px (antes 240px) */
.secao {
  margin-top: 120px;
}

/* Tablet: 100px (antes 180px) */
@media screen and (max-width: 1140px) {
  .secao {
    margin-top: 100px;
  }
}

/* Mobile: 80px (antes 120px) */
@media screen and (max-width: 740px) {
  .secao {
    margin-top: 80px;
  }
}

/* ============================================
   CLS FIX - CARD VIDEO (Desktop)
   Problema: card-video com translateY(50%) causa layout shift
   Solucao: altura fixa + reservar espaco no hero
   ============================================ */

/* Reservar espaco no hero para o card-video que transborda */
.hero {
  margin-bottom: 80px; /* metade da altura do card (~160px) */
}

/* Altura fixa para o card-video evitar CLS */
.card-video {
  height: 160px; /* altura fixa */
  min-height: 160px;
}

/* Altura fixa para a thumbnail do video */
.card-video-video {
  height: 100%;
  min-height: 160px;
}

.card-video-video .video-lightbox__thumbnail {
  height: 100%;
  min-height: 160px;
}

.card-video-video .video-lightbox__thumbnail img {
  height: 100%;
  min-height: 160px;
  width: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Tablet: ajustar espaco */
@media screen and (max-width: 1140px) {
  .hero {
    margin-bottom: 70px;
  }
  .card-video,
  .card-video-video,
  .card-video-video .video-lightbox__thumbnail,
  .card-video-video .video-lightbox__thumbnail img {
    height: 140px;
    min-height: 140px;
  }
}

/* Mobile: card-video eh display:none, nao precisa reservar espaco */
@media screen and (max-width: 740px) {
  .hero {
    margin-bottom: 0;
  }
}

/* ============================================
   FIX: Hamburger menu visibility on mobile
   O LiteSpeed pode reordenar regras CSS na minificação.
   Este fix usa especificidade maior para garantir que
   o botão hamburger apareça em mobile (≤1220px).
   Fix: 2026-02-28
   ============================================ */
@media screen and (max-width: 1220px) {
  #header .header__hamburger.menu-hamburger {
    display: flex !important;
  }
  #header .header-nav ul {
    display: none;
  }
  #header .header-cta {
    display: none;
  }
}

/* Garantir menu mobile funcional quando aberto */
@media screen and (max-width: 1220px) {
  .menu-mobile-opened #header .header__links-mobile {
    display: flex !important;
    opacity: 1;
    visibility: visible;
    right: 0;
    pointer-events: all;
  }
}