/* =========================================================================
   COMPONENTE — CARD
   ========================================================================= */

.moinho-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-sm);

	background-color: var(--moinho-card-bg);
	border: var(--moinho-border-width) solid var(--moinho-card-border);
	border-radius: var(--moinho-card-radius);
	overflow: hidden;

	block-size: 100%;
	color: var(--moinho-surface-fg);
}

.moinho-card__media {
	border-radius: 0;
	margin: 0;
	background-color: var(--moinho-color-surface);
}

.moinho-card__media-placeholder {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	padding: var(--moinho-space-xl);
	color: var(--moinho-color-marca-dagua);
}

.moinho-card__media-placeholder .moinho-marca-elemento {
	max-inline-size: 7rem;
}

.moinho-card__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-2xs);
	padding: var(--moinho-card-padding);
	/* Empurra o CTA para a base, alinhando cards de alturas diferentes. */
	flex: 1;
}

.moinho-card__eyebrow {
	margin-block-end: var(--moinho-space-3xs);
}

.moinho-card .moinho-card__titulo {
	font-size: var(--moinho-role-h4-size);
	line-height: var(--moinho-leading-heading);
	color: var(--moinho-surface-fg);
	text-wrap: balance;
}

.moinho-card__link {
	color: inherit;
	text-decoration: none;
}

/* Link estendido: a area clicavel e o card, o alvo acessivel e o titulo. */
.moinho-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.moinho-card__link:hover {
	color: var(--moinho-color-primary-readable);
}

.moinho-card__link--inteiro {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

.moinho-invert .moinho-card__link:hover {
	color: var(--moinho-roxo-300);
}

/* O foco precisa desenhar em volta do card, nao so do texto do titulo. */
.moinho-card:has(.moinho-card__link:focus-visible) {
	outline: var(--moinho-border-width-strong) solid var(--moinho-color-focus);
	outline-offset: var(--moinho-focus-ring-offset);
}

.moinho-card__link:focus-visible {
	outline: none;
}

.moinho-card__texto {
	margin: 0;
	color: var(--moinho-surface-fg-muted);
	font-size: var(--moinho-role-small-size);
	max-inline-size: none;
}

/* -------------------------------------------------------------------------
   Metadados
   ---------------------------------------------------------------------- */

.moinho-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--moinho-space-2xs) var(--moinho-space-sm);
	margin: var(--moinho-space-2xs) 0 0;
	font-size: var(--moinho-role-label-size);
	color: var(--moinho-surface-fg-muted);
}

.moinho-card__meta-item {
	display: flex;
	gap: 0.35em;
}

.moinho-card__meta dt {
	font-weight: var(--moinho-weight-semibold);
}

.moinho-card__meta dt::after {
	content: ":";
}

.moinho-card__meta dd {
	margin: 0;
}

/* -------------------------------------------------------------------------
   CTA
   ---------------------------------------------------------------------- */

.moinho-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-block-start: auto;
	padding-block-start: var(--moinho-space-xs);

	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-semibold);
	letter-spacing: var(--moinho-tracking-wide);
	text-transform: uppercase;
	color: var(--moinho-color-primary-readable);
}

.moinho-invert .moinho-card__cta {
	color: var(--moinho-roxo-300);
}

@media (hover: hover) {
	.moinho-card:hover .moinho-card__cta .moinho-icon {
		transform: translateX(0.25em);
	}

	.moinho-card__cta .moinho-icon {
		transition: transform var(--moinho-duration-normal) var(--moinho-ease-out);
	}
}

/* -------------------------------------------------------------------------
   Variantes
   ---------------------------------------------------------------------- */

.moinho-card--post .moinho-card__corpo {
	gap: var(--moinho-space-xs);
}

/*
 * Titulo e resumo com caixa minima para a grade alinhar, mas SEM corte
 * (15/09/2026: o texto estava sendo serrado no meio da terceira linha,
 * porque `overflow: hidden` + clamp de 3 nao coincidia com a altura real).
 * O comprimento vem do PHP (moinho_descricao com 24 palavras); a caixa
 * cresce ate 4 linhas e o excedente raro ganha reticencia.
 */
.moinho-card--post .moinho-card__titulo {
	display: block;
	min-block-size: 2lh;
	overflow: visible;
	line-height: var(--moinho-role-h3-leading);
}

.moinho-card--post .moinho-card__texto {
	display: block;
	min-block-size: 3lh;
	overflow: visible;
	line-height: var(--moinho-role-body-leading);
}

.moinho-card--post .moinho-card__media {
	aspect-ratio: auto;
}

.moinho-card--post .moinho-card__media img {
	height: auto;
	object-fit: contain;
	object-position: center;
}

.moinho-card--case {
	--moinho-card-radius: var(--moinho-radius-lg);
}

.moinho-card--case .moinho-card__titulo {
	font-size: var(--moinho-role-h3-size);
}

.moinho-card--compacto {
	--moinho-card-padding: var(--moinho-space-sm);
	flex-direction: row;
	align-items: center;
}

.moinho-card--compacto .moinho-card__media {
	inline-size: 8rem;
	flex: none;
	align-self: stretch;
	aspect-ratio: auto;
}

@media (max-width: 30rem) {
	.moinho-card--compacto {
		flex-direction: column;
		align-items: stretch;
	}

	.moinho-card--compacto .moinho-card__media {
		inline-size: 100%;
		aspect-ratio: var(--moinho-media-ratio, 16 / 9);
	}
}