/**
 * Cards reutilizáveis (opt-in).
 * Combo: .croco-card .croco-card--glass .croco-hover-lift
 * Imagem: .croco-media-image dentro do card (+ .croco-float / .croco-hover-zoom)
 */

.croco-card {
	--croco-card-radius: clamp(1.25rem, 2.6vw, 1.75rem);
	--croco-card-pad: clamp(1rem, 2.2vw, 1.4rem);
	--croco-card-bg: rgb(248 247 243 / 0.94);
	--croco-card-border: rgb(255 255 255 / 0.75);
	--croco-card-shadow:
		0 1px 0 rgb(255 255 255 / 0.88) inset,
		0 16px 40px rgb(18 24 38 / 0.06),
		0 6px 16px rgb(18 24 38 / 0.04);

	position: relative;
	box-sizing: border-box;
	border-radius: var(--croco-card-radius);
	border: 1px solid var(--croco-card-border);
	background: var(--croco-card-bg);
	box-shadow: var(--croco-card-shadow);
	overflow: hidden;
	isolation: isolate;
}

.croco-card--glass {
	--croco-card-bg: rgb(255 252 247 / 0.68);

	background: var(--croco-card-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.croco-card--glass::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(
		152deg,
		rgb(255 255 255 / 0.5) 0%,
		rgb(255 255 255 / 0.08) 45%,
		transparent 70%
	);
}

.croco-card--glass.croco-hover-lift {
	transition:
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.3s ease;
}

.croco-card--glass.croco-hover-lift:hover {
	transform: translateY(-4px);
	border-color: rgb(255 255 255 / 0.95);
	box-shadow:
		0 1px 0 rgb(255 255 255 / 0.92) inset,
		0 22px 50px rgb(56 184 216 / 0.1),
		0 12px 28px rgb(18 24 38 / 0.08);
}

/* Área da ilustração — wrapper opcional ou imagem directa no card */
.croco-card__media,
.croco-card > .brxe-image,
.croco-card > .brxe-block:has(.croco-media-image) {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(9.5rem, 22vw, 12.75rem);
	padding: var(--croco-card-pad);
	overflow: hidden;
}

.croco-card :where(.croco-media-image, img, picture img) {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: clamp(8.75rem, 20vw, 11.25rem);
	object-fit: contain;
	object-position: center;
}

/* float + zoom no mesmo img: pausa float no hover */
.croco-card .croco-float.croco-hover-zoom:hover {
	animation-play-state: paused;
	transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
	.croco-card--glass.croco-hover-lift,
	.croco-card--glass.croco-hover-lift:hover {
		transition: none;
		transform: none;
	}

	.croco-card .croco-float.croco-hover-zoom:hover {
		transform: none;
	}
}