/* ============================================================
   X8 LABS — 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 {
  /* só um pouco mais alto que 3:4: a imagem fica no topo (tamanho natural
     pela largura) e sobra uma faixa LEVE embaixo pro texto — sem cobrir o
     objeto. A cor do card == cor do fundo da imagem (#DEDEDE), então onde a
     imagem acaba a faixa é invisível (emenda perfeita). */
  aspect-ratio: 3 / 4.5;
  height: auto !important;
  padding: 22px !important;
  border-radius: 24px !important;
  background-color: #DEDEDE !important;    /* == borda de baixo das 5 imagens */
  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(10, 31, 59, .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(10,31,59,.14), 0 4px 16px rgba(10,31,59,.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(10,31,59,.20), 0 10px 28px rgba(10,31,59,.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 (fica onde está) ---- */
.dashboard-simple-area-eyebrow {
  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 {
  margin: auto 0 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(10,31,59,.14), 0 0 0 1px rgba(10,31,59,.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(10,31,59,.35), 0 0 0 1px rgba(10,31,59,.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"));
}
/* Builder: objeto desce mais que os outros (71%) -> sobe a imagem ~14px
   pra dar a mesma folga leve (o topo é margem cinza, corte invisível). */
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"));
  background-position: center -14px !important;
}

/* 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; }
}