/*
 * Cards: profissional, atendimento/valor/público e produto (T4.3). Grade responsiva compartilhada.
 */

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--fa-gap-grid);
	max-width: var(--fa-container-max);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Profissional */
.card-pro {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 20px 24px;
	border: var(--fa-border-width) solid var(--fa-color-border);
	border-radius: var(--fa-radius-card);
	background: var(--fa-color-surface-soft);
	box-shadow: var(--fa-shadow-card);
}

.card-pro--no-photo {
	background: var(--fa-color-surface-alt);
}

.card-pro__media {
	flex: none;
}

.card-pro__photo {
	display: block;
	width: var(--fa-photo-size);
	height: var(--fa-photo-size);
	border: 3px solid var(--fa-color-gold);
	border-radius: 50%;
	object-fit: cover;
}

.card-pro__floral {
	display: block;
	width: clamp(var(--fa-photo-size), 30vw, 260px);   /* composição floral (decor) — origem ~360 px */
	height: auto;
}

.card-pro__body {
	min-width: 0;
}

.card-pro__name {
	margin: 0 0 4px;
	font-size: var(--fa-size-h3);
}

.card-pro__role {
	margin: 0 0 12px;
	color: var(--fa-color-link);
	font-size: var(--fa-size-strong-small);
	font-weight: var(--fa-weight-strong);
	line-height: var(--fa-leading-small);
}

.card-pro__text {
	margin: 0 0 12px;
	color: var(--fa-color-text);          /* muted (#5e74a5) sobre o fundo do card ficava em 4,2–4,4:1 (abaixo do AA) */
	font-size: var(--fa-size-small);
	line-height: var(--fa-leading-small);
}

/* Atendimento / valor / público */
.card-att {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 20px 16px;
	border: var(--fa-border-width) solid var(--fa-color-border);
	border-radius: var(--fa-radius-card);
	background: var(--fa-color-surface);
	box-shadow: var(--fa-shadow-card);
	text-align: center;
}

.card-att__badge {
	display: grid;
	place-items: center;
	width: var(--fa-badge-size);
	height: var(--fa-badge-size);
	border-radius: 50%;
	background: var(--fa-color-badge);
	color: var(--fa-color-heading);
}

.card-att__badge .icon svg {
	width: var(--fa-badge-icon);
	height: var(--fa-badge-icon);
}

.card-att__title {
	margin: 4px 0 0;
	font-size: var(--fa-size-h4);
}

.card-att__text {
	margin: 0;
	color: var(--fa-color-text-muted);
	font-size: var(--fa-size-small);
	line-height: var(--fa-leading-small);
}

/* Produto */
.card-product {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--fa-border-width) solid var(--fa-color-border);
	border-radius: var(--fa-radius-card);
	background: var(--fa-color-surface);
	box-shadow: var(--fa-shadow-card);
}

.card-product__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--fa-product-ratio);
	object-fit: cover;
	object-position: var(--fa-product-focus);
}

.card-product__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 16px 18px;
	text-align: center;
}

.card-product__title {
	margin: 0;
	font-size: var(--fa-size-product-title);
}

.card-product__text {
	margin: 0;
	color: var(--fa-color-text);
	font-size: var(--fa-size-body);
	line-height: var(--fa-leading-body);
}

.card-product__button {
	min-height: var(--fa-button-height-card);
	margin-top: auto;
	font-size: var(--fa-size-button-card);
}

@media (max-width: 599px) {
	.card-pro {
		flex-direction: column;
		text-align: center;
	}
}