/* ==========================================================================
   home-aula.css — bloco "Comece aqui" da home: os dois materiais gratuitos e o
   gerador de PDI. Cartões na família dos cards da home: imagem de ponta a ponta
   fundindo no fundo do cartão e o texto subindo por cima. O cartão inteiro é o link.
     .aula-home--teste  o teste (/assessment), com o recorte do relatório de exemplo
     .aula-home         a aula gravada (/o-braco-direito-do-ceo/aula), com 3 s da
                        própria aula repetindo, sem som
     .aula-home--pdi    o gerador de PDI (/plano-head-de-marketing), com os planos de
                        ação do PDI de exemplo
   Os três têm a mesma estrutura (mesma altura de imagem, texto subindo 64 px sobre
   ela) e a grade ainda prende as alturas umas às outras.
   O rótulo "Comece aqui" usa o .home__label, que vive em home.css (o de "Cursos"
   também).
   ========================================================================== */

/* Rótulo "Comece aqui" + os cartões. A primeira linha da grade é o rótulo; as
   seguintes (os cartões) têm a mesma altura, a do maior, se um título quebrar a mais.
   Respiro: 44 px entre o @ e o rótulo (14 do cabeçalho + 30) e 20 px a mais antes
   de "Cursos", somados ao espaço da coluna. */
[data-page="home"] .home__comece {
  align-self: stretch;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 20px;
  display: grid;
  grid-template-rows: auto;
  grid-auto-rows: 1fr;
  gap: 14px;
}

[data-page="home"] .aula-home {
  position: relative;
  isolation: isolate;               /* a foto fica em z-index -1 sem sair de trás do cartão */
  width: 100%;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--lime) 30%, transparent);
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 24px 60px -30px rgba(137,204,114,0.35);
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .15s var(--ease-out);
}
[data-page="home"] .aula-home[hidden] { display: none; }
[data-page="home"] .aula-home:hover {
  border-color: color-mix(in oklab, var(--lime) 60%, transparent);
  box-shadow: 0 28px 64px -28px rgba(137,204,114,0.5);
}
/* No toque, o cartão afunda um pouco: o retorno de clique que o botão dava. */
[data-page="home"] .aula-home:active { transform: scale(.985); }

/* ---- imagem: no teste, o recorte do relatório de exemplo (assets/home-teste.webp);
        na aula, o trecho da aula em repetição (assets/aula/home-aula-loop.mp4, com
        a capa home-aula-poster.webp). Os dois fundem na cor do cartão. ---- */
[data-page="home"] .aula-home__media {
  position: relative;
  z-index: -1;                      /* abaixo do texto, que fica no fluxo normal */
  height: clamp(190px, 42vw, 270px);
  overflow: hidden;
}
[data-page="home"] .aula-home__media img,
[data-page="home"] .aula-home__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
/* No teste, a imagem (radar + notas lado a lado) cabe inteira, colada no topo; o
   que sobra em volta tem a mesma cor do fundo do relatório. */
[data-page="home"] .aula-home--teste .aula-home__media { background: #041C16; }
[data-page="home"] .aula-home--teste .aula-home__media img {
  object-fit: contain;
  object-position: 50% 0%;
}
[data-page="home"] .aula-home__veil { position: absolute; inset: 0; pointer-events: none; }
[data-page="home"] .aula-home__veil--fade {
  background: linear-gradient(180deg, rgba(7,43,32,.10) 0%, rgba(7,43,32,0) 30%, rgba(7,43,32,.55) 68%, var(--canopy) 96%);
}
/* A última fileira de pixels do vídeo vazava como uma linha clara quando a borda
   cai entre dois pixels: a base da imagem fica coberta com a cor do cartão. */
[data-page="home"] .aula-home__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--canopy);
}
/* No teste o selo e o título cobrem a parte de baixo do radar: a imagem some
   no escuro a partir da metade, sem rótulo aparecendo pela metade atrás do selo. */
[data-page="home"] .aula-home--teste .aula-home__veil--fade {
  background: linear-gradient(180deg, rgba(7,43,32,0) 0%, rgba(7,43,32,0) 38%, rgba(7,43,32,.94) 66%, var(--canopy) 84%);
}
/* No computador o desenho ocupa a altura toda e as barras descem mais: o escuro
   começa mais abaixo, pra as quatro barras seguirem legíveis. */
@media (min-width: 721px) {
  [data-page="home"] .aula-home--teste .aula-home__veil--fade {
    background: linear-gradient(180deg, rgba(7,43,32,0) 0%, rgba(7,43,32,0) 56%, rgba(7,43,32,.94) 80%, var(--canopy) 92%);
  }
}

/* No gerador de PDI, o recorte dos planos de ação cabe inteiro, colado no topo; o
   que sobra em volta tem a cor de fundo do PDI. A primeira fileira de ações vai
   até 62% da altura; dali pra baixo a imagem é fundo liso, e o escuro desce
   sobre ele sem texto pela metade atrás do selo. */
[data-page="home"] .aula-home--pdi .aula-home__media { background: #F6F2E7; }
[data-page="home"] .aula-home--pdi .aula-home__media img {
  object-fit: contain;
  object-position: 50% 0%;
}
[data-page="home"] .aula-home--pdi .aula-home__veil--fade {
  background: linear-gradient(180deg, rgba(7,43,32,0) 0%, rgba(7,43,32,0) 64%, rgba(7,43,32,.94) 78%, var(--canopy) 88%);
}
@media (min-width: 721px) {
  [data-page="home"] .aula-home--pdi .aula-home__veil--fade {
    background: linear-gradient(180deg, rgba(7,43,32,0) 0%, rgba(7,43,32,0) 64%, rgba(7,43,32,.94) 80%, var(--canopy) 92%);
  }
}

/* ---- texto por cima da base da foto ---- */
[data-page="home"] .aula-home__body {
  margin-top: -64px;
  padding: 0 clamp(20px, 3.5vw, 32px) clamp(24px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
/* Linha do selo: selo à esquerda, seta à direita. */
[data-page="home"] .aula-home__meta {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
[data-page="home"] .aula-home__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--fern);
  background: rgba(4,27,21,.75);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  white-space: nowrap;
}
[data-page="home"] .aula-home__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--sage);
  flex: none;
}
/* Título contido: peso médio e tamanho de subtítulo, em caixa normal. Quem dá o
   contraste é o selo em caixa alta logo acima. No computador, 23 px no máximo: o
   título do PDI cabe numa linha e os três cartões ficam sem sobra embaixo. */
[data-page="home"] .aula-home__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 4.8vw, 23px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: #FFF;
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(4,27,21,.6);
}

/* O título é o link; o ::after estica a área clicável pro cartão inteiro. */
[data-page="home"] .aula-home__link {
  color: inherit;
  text-decoration: none;
}
[data-page="home"] .aula-home__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
[data-page="home"] .aula-home__link:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 4px;
  border-radius: 4px;
}

/* A seta no círculo verde (a cor dos botões) diz que o cartão inteiro é clicável. */
[data-page="home"] .aula-home__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--abyss);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 24px -10px rgba(137,204,114,0.5);
  transition: background .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
[data-page="home"] .aula-home:hover .aula-home__go {
  background: var(--sprout);
  transform: translateX(3px);
  box-shadow: 0 14px 30px -10px rgba(137,204,114,0.6);
}

/* ---- celular ---- */
@media (max-width: 720px) {
  [data-page="home"] .home__comece { margin-top: 24px; gap: 12px; } /* 12 do cabeçalho + 24 = 36 px depois do @ */
  [data-page="home"] .aula-home { border-radius: 16px; }
  [data-page="home"] .aula-home__body { padding: 0 20px 22px; gap: 10px; }
}
@media (max-width: 380px) {
  [data-page="home"] .aula-home { border-radius: 14px; }
  [data-page="home"] .aula-home__body { padding: 0 18px 20px; }
}