/* ==========================================================================
   CASA PIETRA — HERO
   Figma node 6688:340 (desktop) e 6688:345 (mobile).
   Anotação do designer no frame interno: 100vh.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  /* Fundo sólido enquanto o vídeo não pinta o primeiro frame
     (o handoff não tem poster — decisão aprovada). */
  background-color: var(--color-gray-900);
  min-height: 100vh;
  /* svh evita o salto causado pela barra de endereço no mobile */
  min-height: 100svh;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-block: 64px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* A tipografia vem de .title-display (components.css) */
.hero__title {
  /* Figma: min-w-full. Sem isso o título encolhe para o conteúdo e vaza
     do container em vez de quebrar em telas estreitas. */
  width: 100%;
  color: var(--color-gray-100);
  text-align: center;
}

.hero__whatsapp {
  align-self: flex-end;

  img {
    width: 56px;
    height: 56px;

    @media (min-width: 1366px) and (max-width: 1599.98px) {
      width: 44px;
      height: 44px;
    }
  }
}