/*
 * Cards - Hygienize Child
 * Componente reutilizavel para listagens (servicos, artigos, etc).
 */

.hyg-card {
  background-color: var(--hyg-color-background);
  border: 1px solid var(--hyg-color-border);
  border-radius: var(--hyg-radius-lg);
  box-shadow: var(--hyg-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    box-shadow var(--hyg-transition-base),
    transform var(--hyg-transition-base),
    border-color var(--hyg-transition-base);
}

.hyg-card:hover {
  box-shadow: var(--hyg-shadow-lg);
  transform: translateY(-4px);
  border-color: transparent;
}

/* Proporcao fixa para a imagem, independente do tamanho original do
   arquivo enviado pelo cliente — garante que todos os cards de uma
   grade fiquem alinhados na mesma altura. */
.hyg-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--hyg-color-surface);
}

.hyg-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--hyg-transition-slow);
}

.hyg-card:hover .hyg-card__media img {
  transform: scale(1.06);
}

/* Quando o servico/artigo ainda nao tem imagem destacada em wp-admin,
   o proprio template renderiza uma fotografia de placeholder (nao um
   icone) — ver hygienize_child_get_placeholder_image_url() — entao ela
   passa pelas mesmas regras de .hyg-card__media acima, sem CSS extra. */

.hyg-card__body {
  padding: var(--hyg-space-5);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.hyg-card__title {
  font-family: var(--hyg-font-family-base);
  font-size: var(--hyg-font-size-h4);
  font-weight: var(--hyg-font-weight-semibold);
  color: var(--hyg-color-text);
  margin: 0 0 var(--hyg-space-2);
}

.hyg-card__title a {
  color: inherit;
  text-decoration: none;
}

.hyg-card__title a:hover {
  color: var(--hyg-color-primary);
}

.hyg-card__text {
  font-family: var(--hyg-font-family-base);
  font-size: var(--hyg-font-size-body);
  line-height: var(--hyg-line-height-body);
  color: var(--hyg-color-text-muted);
  margin: 0;
}

/* Empurra o botao/rodape do card para o final, mesmo quando os textos
   dos cards vizinhos tem tamanhos diferentes. */
.hyg-card__body > .hyg-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Blog Card: meta (categoria + data) acima do titulo. */
.hyg-blog-card__meta {
  margin-bottom: var(--hyg-space-2);
}

.hyg-blog-card__category {
  display: inline-block;
  padding: 2px var(--hyg-space-2);
  border-radius: var(--hyg-radius-full);
  background-color: rgba(47, 94, 168, 0.08);
  color: var(--hyg-color-primary);
  font-weight: var(--hyg-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hyg-blog-card__dot {
  color: var(--hyg-color-text-muted);
}