/* =========================
   /assets/css/cards.css
   Cartões de benefícios e segmentos
   ========================= */

.benefit-item,
.client-segment{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  min-height:120px;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.benefit-item:hover,
.client-segment:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(0,0,0,.10);
  border-color:color-mix(in oklab, var(--brand) 12%, var(--line));
}

.benefit-title{
  font-size:1.05rem;
  margin-bottom:.25rem;
  font-weight:var(--fw-bold);
  letter-spacing:-.005em;
}

/* Grids usados nas seções */
.benefits-grid,
.clients-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
@media (max-width:1024px){
  .benefits-grid, .clients-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .benefits-grid, .clients-grid{ grid-template-columns:1fr; }
}

/* Ações dentro de cartões (se houver) */
.card-actions{ margin-top:.75rem; display:flex; gap:10px; flex-wrap:wrap; }
.card-actions .btn{ min-width:180px; }

/* Estados de foco acessíveis em cards clicáveis */
a.benefit-item:focus-visible,
a.client-segment:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}