/*
 * Componentes reutilizáveis — Instituto Comute
 * Ver DESIGN.md § Components. Classes prefixadas `cc-` (Comute Child) pra não
 * colidir com classes do Astra/WooCommerce/Tutor LMS.
 */

.cc-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  background: var(--cc-accent);
  color: var(--cc-on-accent);
  font-family: var(--cc-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: var(--cc-space-3) var(--cc-space-6);
  border-radius: var(--cc-rounded-md);
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.cc-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  background: transparent;
  color: var(--cc-primary);
  font-family: var(--cc-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: var(--cc-space-3) var(--cc-space-6);
  border-radius: var(--cc-rounded-md);
  border: 1.5px solid var(--cc-primary);
  text-decoration: none;
  cursor: pointer;
}

.cc-btn-primary:disabled,
.cc-btn-primary[aria-disabled='true'] {
  background: var(--cc-line-strong);
  color: var(--cc-ink-faint);
  cursor: not-allowed;
}

.cc-card {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-rounded-lg);
  padding: var(--cc-space-6);
}

/*
 * Retrato editorial — Sobre/Bio e Venda de Mentoria (DESIGN.md § Imagery & Media).
 * Aplicada pelo Administrador direto no bloco Imagem (Avançado > Classes CSS
 * adicionais), sem precisar de código. Enquadra qualquer foto enviada em 4:5,
 * mesmo que o arquivo original não venha exatamente nessa proporção.
 */
.cc-portrait {
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--cc-rounded-lg);
  border: 1px solid var(--cc-line);
}

/* Foco visível — obrigatório em todo elemento interativo (DESIGN.md § Accessibility / Do's) */
.cc-btn-primary:focus-visible,
.cc-btn-secondary:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cc-accent-strong);
  outline-offset: 2px;
  border-radius: var(--cc-rounded-sm);
}