/* components/card.css — Card iOS-like (SSR-friendly) */

/* Tokens do card (ajustáveis por tema via tokens.css/theme.css) */
:root{
  --card-bg-2: var(--surface-2);
  --card-sep: var(--separator);
  --card-radius: var(--radius-lg);
  --card-pad: var(--sp-16);
  --card-gap: var(--sp-12);
}

/* Base */
.card{
  /* Fundo: material (sem gradiente) */
  background: var(--card-bg);
  
  /* Material blur LEVÍSSIMO (não é glass pesado) */
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-sat));
  backdrop-filter: blur(var(--card-blur)) saturate(var(--card-sat));
  
  /* Borda quase imperceptível */
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  
  /* Sem sombra externa — apenas inset highlight muito sutil */
  box-shadow: inset 0 1px 0 var(--card-inset-highlight);
  
  /* Recorte limpo do material (Apple-like) */
  overflow: clip;
  
  /* Evita serrilhado/artefatos */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  
  /* Respeita largura do container */
  width: 100%;
  box-sizing: border-box;
}

/* Variante "inset" (estilo Settings group) */
.card-inset{
  background: var(--card-bg-2);
  box-shadow: inset 0 1px 0 var(--card-inset-highlight) !important;
}

/* Variante glass (usa materials.css) */
.card-glass{
  padding: var(--card-pad);
  box-shadow: inset 0 1px 0 var(--card-inset-highlight) !important;
}

/* Se quiser usar o material diretamente */
.card.card-glass.glass{
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: inset 0 1px 0 var(--card-inset-highlight) !important;
}

/* Seções */
.card-header,
.card-body,
.card-footer{
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.card-header{
  gap: var(--sp-4);
}

.card-title{
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.2px;
}

.card-subtitle,
.card .muted{
  font-size: var(--fs-13);
  color: var(--muted);
}

/* Conteúdo em linhas (label + value) */
.card-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
}

.card-row .label{
  font-size: var(--fs-13);
  color: var(--muted);
}

.card-row .value{
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--text);
}

/* Separador interno */
.card-separator,
.card hr{
  height: 1px;
  background: var(--divider);
  border: 0;
  width: 100%;
  opacity: 1;
}

/* Interativo (tap/click) */
.card-interactive{
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-2) var(--ease-standard),
              background var(--dur-2) var(--ease-standard);
}

.card-interactive:active{
  transform: scale(0.99);
  background: color-mix(in srgb, var(--card-bg) 92%, var(--accent));
  box-shadow: inset 0 1px 0 var(--card-inset-highlight);
}

/* Previne que regras antigas reintroduzam sombra */
.card.card-inset,
.card.card-glass,
.glass{
  box-shadow: inset 0 1px 0 var(--card-inset-highlight) !important;
}

/* Compact */
.card-compact{
  padding: var(--sp-12);
  gap: var(--sp-8);
}

/* Grid helper — mobile only */
.cards{
  display: grid;
  gap: var(--sp-12);
  grid-template-columns: 1fr;
}