/*!
 * CzarCommerce Cards — FASE 12.3
 * -----------------------------------------------------------------------------
 * Componente card próprio. Opt-in por classe `.czar-card` + sub-elementos:
 *   .czar-card               container
 *   .czar-card__media        área de imagem/embed (mantém aspect-ratio)
 *   .czar-card__body         conteúdo textual
 *   .czar-card__title        h-tag do card
 *   .czar-card__text         parágrafo descritivo
 *   .czar-card__footer       linha de ações/meta
 *
 * Variants:
 *   .czar-card--elevated     sombra md + hover lg
 *   .czar-card--bordered     borda 1.5px (sem sombra)
 *   .czar-card--flat         sem sombra, sem borda (estilo lista)
 *   .czar-card--horizontal   media à esquerda, body à direita
 *
 * Consome --czar-card-radius (semântico, editável pelo lojista),
 * fallback para --czar-radius-lg.
 */

.czar-card {
	--_radius: var(--czar-card-radius, var(--czar-radius-lg));
	--_bg:     var(--czar-color-surface, #fff);

	display: flex;
	flex-direction: column;
	background-color: var(--_bg);
	border-radius: var(--_radius);
	overflow: hidden;
	box-shadow: var(--czar-shadow-sm);
	transition:
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.czar-card:hover {
	box-shadow: var(--czar-shadow-md);
}

/* ---- Sub-elementos ---- */

.czar-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: color-mix(in srgb, var(--czar-color-text) 8%, transparent);
}

.czar-card__media img,
.czar-card__media picture,
.czar-card__media svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.czar-card:hover .czar-card__media img {
	transform: scale(1.04);
}

.czar-card__body {
	padding: var(--czar-space-5) var(--czar-space-5) var(--czar-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--czar-space-2);
	flex: 1;
}

.czar-card__title {
	font-family: var(--czar-font-family-heading);
	font-size: var(--czar-font-size-lg);
	font-weight: var(--czar-font-weight-semibold);
	line-height: var(--czar-line-height-snug);
	color: var(--czar-color-text);
	margin: 0;
}

.czar-card__text {
	font-family: var(--czar-font-family-base);
	font-size: var(--czar-font-size-md);
	line-height: var(--czar-line-height-relaxed);
	color: color-mix(in srgb, var(--czar-color-text) 78%, transparent);
	margin: 0;
}

.czar-card__footer {
	padding: var(--czar-space-3) var(--czar-space-5) var(--czar-space-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--czar-space-3);
	border-top: 1px solid color-mix(in srgb, var(--czar-color-text) 8%, transparent);
	margin-top: auto;
}

/* ---- Variants ---- */

.czar-card--elevated {
	box-shadow: var(--czar-shadow-md);
}
.czar-card--elevated:hover {
	box-shadow: var(--czar-shadow-lg);
	transform: translateY(-2px);
}

.czar-card--bordered {
	box-shadow: none;
	border: 1.5px solid color-mix(in srgb, var(--czar-color-text) 12%, transparent);
}
.czar-card--bordered:hover {
	border-color: color-mix(in srgb, var(--czar-color-primary) 35%, transparent);
	box-shadow: none;
	transform: none;
}

.czar-card--flat {
	box-shadow: none;
	border-radius: 0;
}
.czar-card--flat:hover {
	box-shadow: none;
	transform: none;
}

.czar-card--horizontal {
	flex-direction: row;
	align-items: stretch;
}
.czar-card--horizontal .czar-card__media {
	flex: 0 0 40%;
	aspect-ratio: auto;
}
.czar-card--horizontal .czar-card__body {
	flex: 1;
}
.czar-card--horizontal .czar-card__footer {
	border-top: 0;
	padding-top: 0;
}

/* ---- Card como link (clique no card todo) ---- */

a.czar-card {
	color: inherit;
	text-decoration: none;
}
a.czar-card:hover .czar-card__title {
	color: var(--czar-color-primary);
}
a.czar-card:focus-visible {
	outline: 2px solid var(--czar-color-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.czar-card,
	.czar-card__media img {
		transition: none;
	}
	.czar-card--elevated:hover {
		transform: none;
	}
}

@media (max-width: 640px) {
	.czar-card--horizontal {
		flex-direction: column;
	}
	.czar-card--horizontal .czar-card__media {
		flex: 0 0 auto;
		aspect-ratio: 16 / 9;
	}
	.czar-card--horizontal .czar-card__footer {
		border-top: 1px solid color-mix(in srgb, var(--czar-color-text) 8%, transparent);
		padding-top: var(--czar-space-3);
	}
}