/* =============================================================================
   Home — Curso Adoção de Cães

   A home tem uma espinha: hero → como funciona → trilha das 16 aulas →
   glossário → depoimentos → artigos → fecho. As faixas alternam branco, menta
   e sol, separadas por onda.

   Toda animação daqui mexe só em transform e opacity, que a GPU resolve sem
   recalcular layout. Nada depende de biblioteca.
   ========================================================================== */

/* ------------------------------------------------------------------ hero -- */

/* O padding de baixo não é respiro: sem ele o botão do hero encosta na borda
   da seção e o overflow:hidden — que existe para as patinhas não alargarem a
   página — corta a sombra dura de 6px embaixo dele. O botão aparecia cortado. */
.brl-hero{ padding-block:clamp(40px,6vw,74px) 32px; position:relative; overflow:hidden }
.brl-hero-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.08fr .92fr; gap:40px; align-items:center;
}
@media (max-width:860px){ .brl-hero-in{ grid-template-columns:1fr; gap:26px } }

.brl-hero h1 span{ color:var(--brl-cor-viva) }
.brl-hero-acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px }

/* Rastro de patinhas atravessando o fundo, uma aparecendo depois da outra. */
.brl-patas{ position:absolute; inset:0; pointer-events:none; z-index:0 }
.brl-patas svg{
  position:absolute; width:46px; height:46px; color:var(--brl-cor-viva);
  opacity:0; animation:brl-pata .5s ease forwards;
}
@keyframes brl-pata{
  from{ opacity:0; transform:scale(.4) rotate(var(--r,0deg)) }
  to  { opacity:.09; transform:scale(1) rotate(var(--r,0deg)) }
}

/* Matilha: as capas das próprias aulas, em círculo, flutuando fora de compasso. */
.brl-matilha{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
  max-width:380px; width:100%; margin-inline:auto;
}
.brl-foto{
  aspect-ratio:1; border-radius:50%; overflow:hidden; position:relative;
  display:grid; place-items:center;
  /* Fundo por baixo da foto: enquanto a imagem carrega — ou se faltar — o
     círculo é um disco creme, não um buraco branco. */
  background:var(--brl-cor-clara);
  box-shadow:0 10px 26px rgba(43,32,25,.14);
  animation:brl-flutua 6s ease-in-out infinite;
}
.brl-foto img{ width:100%; height:100%; object-fit:cover }
.brl-foto svg{ width:72%; height:72% }
.brl-foto:nth-child(1){ animation-delay:0s;   animation-duration:6.2s }
.brl-foto:nth-child(2){ animation-delay:.8s;  animation-duration:7.1s; margin-top:26px }
.brl-foto:nth-child(3){ animation-delay:1.6s; animation-duration:6.6s }
.brl-foto:nth-child(4){ animation-delay:.4s;  animation-duration:7.6s; margin-top:26px }
@keyframes brl-flutua{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-11px) } }

/* Chips de número: o valor final já vem no HTML; o script só anima até ele. */
.brl-chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; padding:0; list-style:none }
.brl-chip{
  display:flex; align-items:baseline; gap:7px; background:#fff;
  border:2px solid var(--brl-borda); border-radius:999px; padding:9px 20px 9px 16px;
  box-shadow:0 3px 0 rgba(43,32,25,.05);
}
.brl-chip b{
  font-family:var(--brl-fonte-titulo); font-size:24px; font-weight:800;
  color:var(--brl-verde); font-variant-numeric:tabular-nums;
}
.brl-chip span{ font-size:14.5px; font-weight:700; color:var(--brl-texto-fraco) }

/* --------------------------------------------------------- como funciona -- */

.brl-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px }
@media (max-width:820px){ .brl-trio{ grid-template-columns:1fr } }
.brl-bloco{ background:#fff; border:2px solid var(--brl-borda); border-radius:var(--brl-raio); padding:26px 24px }
.brl-bloco .brl-ico{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:14px }
.brl-bloco .brl-ico svg{ width:30px; height:30px }
.brl-bloco:nth-child(1) .brl-ico{ background:#ffe9c2; color:#b4632a }
.brl-bloco:nth-child(2) .brl-ico{ background:#cdeadf; color:#0f6f66 }
.brl-bloco:nth-child(3) .brl-ico{ background:#ffd7cc; color:#c23c1c }
.brl-bloco p{ margin:0; color:var(--brl-texto-fraco); font-size:16px }

/* ---------------------------------------------------------------- trilha -- */

/* As aulas não são uma grade: são um caminho numerado. A linha pontilhada e a
   alternância esquerda/direita dizem que existe uma ordem, coisa que quatro
   colunas de cards idênticos não dizem. */
.brl-trilha{ position:relative; margin-top:46px }
.brl-trilha::before{
  content:''; position:absolute; left:50%; top:14px; bottom:14px;
  border-left:3px dashed #ddd8cc; transform:translateX(-1.5px);
}
.brl-aula{ display:grid; grid-template-columns:1fr 84px 1fr; align-items:center; margin-block:10px }
/* grid-row:1 em TODOS os três — número e card, nas duas direções.
   Sem isso, a linha ímpar quebra: o número vem antes do card no HTML e ocupa a
   coluna 2; quando o card pede a coluna 1, que está atrás, o posicionamento
   automático do grid não volta e abre uma linha nova para ele. O resultado é
   número em cima e card embaixo, só nas ímpares e só no desktop. */
.brl-aula-num{
  grid-column:2; grid-row:1; justify-self:center; z-index:2;
  width:54px; height:54px; border-radius:50%;
  background:var(--brl-sol); border:4px solid var(--brl-fundo);
  display:grid; place-items:center;
  font-family:var(--brl-fonte-titulo); font-weight:800; font-size:21px; color:#6b4700;
  font-variant-numeric:tabular-nums;
}
.brl-aula:nth-child(odd)  .brl-aula-card{ grid-column:1; grid-row:1; margin-right:22px }
.brl-aula:nth-child(even) .brl-aula-card{ grid-column:3; grid-row:1; margin-left:22px }

.brl-aula-card{
  display:flex; gap:16px; align-items:center; text-decoration:none; color:var(--brl-texto);
  background:#fff; border:2px solid var(--brl-borda); border-radius:var(--brl-raio); padding:12px;
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.brl-aula-card:hover{
  text-decoration:none; transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(43,32,25,.1); border-color:var(--brl-cor-viva);
}
.brl-aula-card h3{ margin:0; font-size:17.5px; line-height:1.25 }
.brl-aula-card small{
  color:var(--brl-texto-fraco); font-weight:700; font-size:13px;
  font-family:var(--brl-fonte-titulo); letter-spacing:.03em;
}

.brl-capa{
  width:124px; height:84px; flex:none; border-radius:var(--brl-raio-p);
  overflow:hidden; position:relative; display:grid; place-items:center;
}
.brl-capa img{ width:100%; height:100%; object-fit:cover }
.brl-capa .brl-capa-gerada svg{ width:62%; height:62% }

/* Botão de play: a capa precisa dizer que ali tem vídeo. */
.brl-play{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(43,32,25,.22); transition:background .16s }
.brl-play i{
  width:38px; height:38px; border-radius:50%; background:#fff;
  display:grid; place-items:center; box-shadow:0 3px 8px rgba(0,0,0,.2);
  transition:transform .16s;
}
.brl-play i::after{
  content:''; margin-left:3px;
  border-left:12px solid var(--brl-cor-viva);
  border-top:7.5px solid transparent; border-bottom:7.5px solid transparent;
}
.brl-aula-card:hover .brl-play{ background:rgba(43,32,25,.1) }
.brl-aula-card:hover .brl-play i{ transform:scale(1.16) }

@media (max-width:860px){
  .brl-trilha::before{ left:27px }
  .brl-aula{ grid-template-columns:54px 1fr; gap:14px }
  .brl-aula-num{ grid-column:1; grid-row:1; width:46px; height:46px; font-size:18px }
  .brl-aula:nth-child(odd)  .brl-aula-card{ grid-column:2; grid-row:1; margin:0 }
  .brl-aula:nth-child(even) .brl-aula-card{ grid-column:2; grid-row:1; margin:0 }
  .brl-capa{ width:92px; height:68px }
  .brl-aula-card h3{ font-size:16px }
}

/* ------------------------------------------------------------- glossário -- */

/* A régua A–Z mora no common.css: é usada pela home, pelo índice do glossário
   e pela página de letra, e cada uma carrega um CSS diferente. */

.brl-racas{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
@media (max-width:820px){ .brl-racas{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .brl-racas{ grid-template-columns:1fr } }
.brl-raca{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--brl-texto);
  background:#fff; border:2px solid #c9e3d8; border-radius:var(--brl-raio);
  padding:12px 16px 12px 12px; transition:transform .16s, box-shadow .16s;
}
.brl-raca:hover{ text-decoration:none; transform:translateY(-3px); box-shadow:0 10px 22px rgba(15,114,102,.16) }
/* position:relative porque a capa gerada se posiciona por inset:0 sobre ele. */
.brl-raca .brl-av{
  position:relative; width:52px; height:52px; border-radius:16px; flex:none;
  display:grid; place-items:center; overflow:hidden;
}
.brl-raca .brl-av img{ width:100%; height:100%; object-fit:cover }
.brl-raca .brl-av svg{ width:68%; height:68% }
.brl-raca b{ font-family:var(--brl-fonte-titulo); font-size:17px; display:block; line-height:1.2 }
.brl-raca i{ font-style:normal; font-size:13.5px; color:var(--brl-texto-fraco); font-weight:600 }

/* ----------------------------------------------------------- depoimentos -- */

/* Card de vídeo, não balão de fala: o conteúdo dos posts de depoimento é a URL
   de um vídeo, então não há citação para exibir. O que o card entrega é a capa
   inteira, o nome e o convite para assistir. */
.brl-deps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:34px }
@media (max-width:980px){ .brl-deps{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .brl-deps{ grid-template-columns:1fr } }

.brl-dep{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:2px solid #f0dcb0; border-radius:var(--brl-raio);
  transition:transform .16s, box-shadow .16s;
}
.brl-dep:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(43,32,25,.12) }

/* object-fit:contain, e não cover: a capa destas postagens é arte com selo e
   texto. Recortar para preencher comeria justamente o que ela tem a dizer.
   O fundo creme preenche a sobra quando a proporção não bate com 16:9. */
.brl-dep-capa{
  position:relative; display:block; aspect-ratio:16/9;
  /* Branco, não creme: quando a capa não é 16:9, a sobra das laterais
     desaparece contra o corpo branco do card em vez de virar faixa. */
  background:#fff; overflow:hidden;
}
.brl-dep-capa img{ width:100%; height:100%; object-fit:contain }
.brl-dep-capa .brl-capa-gerada svg{ width:38%; height:38% }

/* Sem véu escuro sobre a capa, ao contrário das aulas: lá a tarja cobre uma
   foto que sangra até a borda; aqui ela cobriria também a sobra das laterais e
   a deixaria cinza. O círculo de play sozinho já diz que é vídeo. */
.brl-dep-capa .brl-play{ background:transparent }
.brl-dep-capa .brl-play i{ box-shadow:0 3px 12px rgba(43,32,25,.35) }
.brl-dep:hover .brl-play{ background:rgba(43,32,25,.06) }
.brl-dep:hover .brl-play i{ transform:scale(1.16) }

.brl-dep-txt{
  padding:16px 18px 18px; display:flex; flex-direction:column;
  align-items:flex-start; gap:12px; margin-top:auto;
}
.brl-dep-nome{ font-family:var(--brl-fonte-titulo); font-size:19px; margin:0; line-height:1.2 }
.brl-dep-btn{ padding:10px 20px; font-size:15px }
.brl-dep-btn svg{ width:14px; height:14px }

/* Os cards de post mudaram de nome e foram para o common.css: a home e o
   arquivo de categoria usam o mesmo componente, e a classe antiga .brl-post
   colidia com a .brl-post do artigo individual, que é outra coisa. */

/* ----------------------------------------------------------------- fecho -- */

.brl-fecho{ text-align:center }
.brl-fecho .brl-lead{ margin-inline:auto }
/* Sem linha de apoio entre o título e o botão, 22px deixava os dois colados.
   O fecho é só pergunta e resposta: precisa do respiro para a resposta não
   parecer parte do título. */
.brl-fecho h2{ margin-bottom:0 }
.brl-fecho .brl-btn{ margin-top:30px }

/* ------------------------------------------------- animação, por seção --- */

.brl-js .brl-aula:nth-child(odd)  .brl-aula-card.brl-rev{ transform:translateX(-26px) }
.brl-js .brl-aula:nth-child(even) .brl-aula-card.brl-rev{ transform:translateX(26px) }
.brl-js .brl-aula .brl-aula-card.brl-rev.is-vis{ transform:none }

@media (prefers-reduced-motion:reduce){
  .brl-patas svg{ opacity:.09 }
  .brl-balao:nth-child(odd),.brl-balao:nth-child(even){ transform:none }
}