/* ==========================================================================
   pages/vitrine.css — específico de vitrine/<cliente>/index.html
   Vitrine de um site entregue: o site + o vídeo de lançamento para o
   Instagram. O hero e a chamada final vêm de pages/templates.css.
   ========================================================================== */

.vitrine-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}


/* A chamada final já está numa seção própria: sem a margem extra do templates.css. */
.vitrine-cta .sample-cta {
  margin-top: 0;
}


/* ---------- Bloco: mídia + texto lado a lado ---------- */

.vitrine-bloco {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .vitrine-bloco {
    grid-template-columns: auto 1fr;
    gap: var(--space-8);
  }

  /* No bloco do site, o print vem à direita e ocupa mais espaço. */
  .vitrine-bloco--invertido {
    grid-template-columns: 1fr 1.25fr;
  }

  .vitrine-bloco--invertido .vitrine-bloco__midia {
    order: 2;
  }
}

.vitrine-bloco__texto {
  max-width: 56ch;
}

.vitrine-bloco__texto h2 {
  margin-bottom: var(--space-4);
}

.vitrine-bloco__texto p {
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}

.vitrine-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: grid;
  gap: var(--space-2);
}

.vitrine-lista li {
  position: relative;
  padding-left: var(--space-5);
  line-height: var(--lh-normal);
}

.vitrine-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-blue-600);
}

.vitrine-ficha {
  font-size: var(--fs-sm);
  color: var(--color-gray-700);
}


/* ---------- Moldura de celular (vídeo em pé, 9:16) ---------- */

.vitrine-celular {
  width: min(300px, 78vw);
  margin-inline: auto;
  padding: 10px;
  background: #15181c;
  border-radius: 38px;
  box-shadow: var(--shadow-lg);
}

.vitrine-celular video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  background: #15181c;
}


/* ---------- Vídeo do computador (16:9, já vem com moldura de navegador) ---------- */

.vitrine-tela {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: #15181c;
}