/* ============================================================
   Academia Desinflame — Cards do dashboard como painéis 3:4 (1080×1440)
   ------------------------------------------------------------
   As 5 áreas do dashboard (Consultor, Mentorias, Soluções,
   Formações, Builder) viram cartões retrato com fundo próprio.

   100% CSS: mapeia a imagem de cada card pelo HREF do <a>
   (estável). Não toca no bundle. Só vale no dashboard (as classes
   .dashboard-simple-area-* só existem lá).

   Layout pedido: eyebrow pequeno em cima (onde já está);
   título + descrição + botão concentrados de um pouco abaixo do
   meio para baixo.
   ============================================================ */

/* ---- grade: 5 colunas no desktop, decrescendo ---- */
.dashboard-simple-areas-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch;
}
@media (max-width: 1240px) { .dashboard-simple-areas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 720px)  { .dashboard-simple-areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 460px)  { .dashboard-simple-areas-grid { grid-template-columns: 1fr !important; } }

/* ---- o card vira retrato 3:4 (proporção 1080×1440) ---- */
.dashboard-simple-area-link { border-radius: 24px; display: block; }
.dashboard-simple-area-card {
  /* NÃO usar altura fixa (aspect-ratio): quando o texto quebra em mais linhas
     — telas menores, 2 colunas — ele subia e ficava POR CIMA da imagem.
     Em vez disso reservamos o espaço da imagem com padding-top em % (que se
     mede pela LARGURA) e deixamos o card crescer com o conteúdo.
     A imagem tem 600x800 => ocupa 133% da largura em altura; o objeto termina
     por volta de 2/3 dela (~88%), daí o padding-top. */
  aspect-ratio: auto;
  height: auto !important;
  padding: 92% 22px 22px !important;
  border-radius: 24px !important;
  background-color: #FFFFFF !important;    /* == borda de baixo das 5 imagens (v2: fundo branco) */
  background-image: none;                  /* setado por href abaixo */
  background-repeat: no-repeat !important;
  background-position: top center !important;
  background-size: 100% auto !important;   /* objeto ancorado no topo, tamanho natural */
  border: 1px solid rgba(var(--x8n),.07) !important;
  /* sombra esfumaçada do sistema (mesma do banner de boas-vindas = --via-shadow-xl):
     offset alto + blur largo -> destaca o card com elegância, sem borda dura. */
  box-shadow: 0 1px 0 rgba(255, 255, 255, .65) inset,
              var(--via-shadow-xl, 0 32px 80px rgba(var(--x8n),.14), 0 4px 16px rgba(var(--x8n),.06)) !important;
  isolation: isolate;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.dashboard-simple-area-link:hover .dashboard-simple-area-card {
  transform: translateY(-5px);
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset,
              0 44px 96px rgba(var(--x8n),.20), 0 10px 28px rgba(var(--x8n),.10) !important;
}

/* sem scrim: a cor do card == cor do fundo da imagem, então a emenda já é
   invisível. Texto navy sobre #DEDEDE tem contraste de sobra. */
.dashboard-simple-area-card > * { position: relative; z-index: 1; }

/* ---- eyebrow no topo: ancorado, pois o padding-top do card (espaço da
   imagem) o empurraria junto com o texto de baixo ---- */
.dashboard-simple-area-eyebrow {
  /* !important: a regra `.dashboard-simple-area-card > *{position:relative}`
     (que sobe o conteúdo acima do fundo) tem a mesma especificidade e vencia */
  position: absolute !important; top: 22px; left: 22px; right: 22px; z-index: 2;
  color: var(--via-text-muted, #5C6677) !important;
  margin: 0 !important;
}

/* ---- título + descrição + botão empurrados pro fundo ----
   margin-top:auto no <h2> absorve o espaço livre acima -> o bloco
   (título/descrição/ação) fica concentrado de baixo do meio p/ baixo. */
.dashboard-simple-area-card h2 {
  /* era margin-top:auto (empurrava pro fundo da altura fixa). Agora quem
     reserva o espaço da imagem é o padding-top do card. */
  margin: 0 !important;
  font-family: var(--via-font, sans-serif) !important;
  font-size: clamp(19px, 1.5vw, 25px) !important;
  font-weight: 560 !important;
  line-height: 1.14 !important;
  letter-spacing: -.028em !important;
  color: var(--via-text-primary, #0A1F3B) !important;
}
.dashboard-simple-area-card p:not(.dashboard-simple-area-eyebrow) {
  margin: 8px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--via-text-body, #344054) !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- ação vira botão pílula BRANCO ---- */
.dashboard-simple-area-action {
  display: inline-flex !important; align-items: center; gap: 7px;
  width: fit-content;
  margin-top: 16px !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--via-navy, #0A1F3B) !important;
  font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: -.008em;
  box-shadow: 0 1px 2px rgba(var(--x8n),.14), 0 0 0 1px rgba(var(--x8n),.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dashboard-simple-area-action .dashboard-simple-area-arrow { color: var(--via-navy, #0A1F3B) !important; transition: transform .2s ease; }
.dashboard-simple-area-link:hover .dashboard-simple-area-action { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(var(--x8n),.35), 0 0 0 1px rgba(var(--x8n),.1); }
.dashboard-simple-area-link:hover .dashboard-simple-area-arrow { transform: translateX(3px); }

/* ============================================================
   IMAGEM POR CARD (href estável). Trocar aqui = trocar o mapeamento.
   ============================================================ */
/* WebP (95% menor: 1.6MB -> 84KB no total) com PNG de fallback.
   A 1ª declaração vale pra quem não suporta image-set(); a 2ª vence e só
   baixa o WebP. Peso importa: em PNG o card de Formações (541KB) levava
   ~2s e ficava CINZA até chegar — parecia "sem foto".
   Seletor por prefixo (^=) pra aguentar variação de rota (/x, /x/, /x?a=1). */
a.dashboard-simple-area-link[href^="/consultor-ia"] .dashboard-simple-area-card {
  background-image: url(/dash/consultor.png);
  background-image: image-set(url(/dash/consultor.webp) type("image/webp"), url(/dash/consultor.png) type("image/png"));
}
a.dashboard-simple-area-link[href^="/mentorias-v2"] .dashboard-simple-area-card {
  background-image: url(/dash/mentorias.png);
  background-image: image-set(url(/dash/mentorias.webp) type("image/webp"), url(/dash/mentorias.png) type("image/png"));
}
a.dashboard-simple-area-link[href^="/solucoes"] .dashboard-simple-area-card {
  background-image: url(/dash/solucoes.png);
  background-image: image-set(url(/dash/solucoes.webp) type("image/webp"), url(/dash/solucoes.png) type("image/png"));
}
a.dashboard-simple-area-link[href^="/formacoes"] .dashboard-simple-area-card {
  background-image: url(/dash/formacoes.png);
  background-image: image-set(url(/dash/formacoes.webp) type("image/webp"), url(/dash/formacoes.png) type("image/png"));
}
/* Ferramentas (o card de Soluções virou Ferramentas -> /tools):
   mantém a imagem que já estava no card de Soluções. */
a.dashboard-simple-area-link[href^="/tools"] .dashboard-simple-area-card {
  background-image: url(/dash/solucoes.png);
  background-image: image-set(url(/dash/solucoes.webp) type("image/webp"), url(/dash/solucoes.png) type("image/png"));
}
/* E-books (o card do Builder virou E-books -> /formacoes?ebooks): mantém a
   imagem que já estava no card do Builder. Vem DEPOIS da regra de /formacoes
   de propósito: mesmo peso, a última vence, então o card com "ebooks" no href
   ganha essa imagem em vez da de formações. */
a.dashboard-simple-area-link[href*="ebooks"] .dashboard-simple-area-card {
  background-image: url(/dash/builder.png);
  background-image: image-set(url(/dash/builder.webp) type("image/webp"), url(/dash/builder.png) type("image/png"));
}
a.dashboard-simple-area-link[href^="/ferramentas/builder-v2"] .dashboard-simple-area-card {
  background-image: url(/dash/builder.png);
  background-image: image-set(url(/dash/builder.webp) type("image/webp"), url(/dash/builder.png) type("image/png"));
}

/* reduz movimento: sem transform/anim */
@media (prefers-reduced-motion: reduce) {
  .dashboard-simple-area-card,
  .dashboard-simple-area-action { transition: none !important; }
  .dashboard-simple-area-link:hover .dashboard-simple-area-card { transform: none; }
}

/* ============================================================
   ENTRADA ESCALONADA — a mesma de Soluções (SolutionsV3)
   ------------------------------------------------------------
   Receita copiada de lá, não aproximada: sobe 12px com fade,
   440ms em cubic-bezier(0.32, 0.08, 0.24, 1), cada bloco 80ms
   depois do anterior. Lá o escalonamento é por SEÇÃO (cabeçalho,
   barra, grade); aqui vale o mesmo, e a grade de áreas ainda
   escalona card a card.

   O card de boas-vindas já tinha o seu próprio escalonamento
   interno (dashboard-simple-welcome-rise, 0→.24s nos textos).
   Ele continua: o bloco entra e os textos cascateiam dentro —
   por isso o bloco leva delay 0, para não empilhar espera.

   `both` mantém o estado inicial ANTES do delay: sem isso o
   elemento pisca visível e só então some para animar.
   ============================================================ */
@keyframes x8-dash-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.dashboard-simple-top > *,
.dashboard-simple-areas-head,
.dashboard-simple-areas-grid > * {
  animation: x8-dash-enter 440ms cubic-bezier(0.32, 0.08, 0.24, 1) both;
}

/* boas-vindas 0ms · próxima mentoria 80ms */
.dashboard-simple-top > *:nth-child(1) { animation-delay: 0ms; }
.dashboard-simple-top > *:nth-child(2) { animation-delay: 80ms; }

/* cabeçalho das áreas */
.dashboard-simple-areas-head { animation-delay: 160ms; }

/* os 5 cards de área, um a cada 70ms depois do cabeçalho */
.dashboard-simple-areas-grid > *:nth-child(1) { animation-delay: 220ms; }
.dashboard-simple-areas-grid > *:nth-child(2) { animation-delay: 290ms; }
.dashboard-simple-areas-grid > *:nth-child(3) { animation-delay: 360ms; }
.dashboard-simple-areas-grid > *:nth-child(4) { animation-delay: 430ms; }
.dashboard-simple-areas-grid > *:nth-child(5) { animation-delay: 500ms; }
.dashboard-simple-areas-grid > *:nth-child(n+6) { animation-delay: 570ms; }

@media (prefers-reduced-motion: reduce) {
  .dashboard-simple-top > *,
  .dashboard-simple-areas-head,
  .dashboard-simple-areas-grid > * { animation: none; }
}