.crv-card {
	position:relative;
	width:100%;
	min-width:0;
	min-height:245px;
	display:flex;
	flex-direction:column;
	padding:25px;
	border:1px solid rgb(var(--primary-text-code) / 7%);
	border-radius:var(--largeradius);
	background:var(--surface-color);
	box-shadow:0 12px 34px rgb(var(--primary-text-code) / 5%);
	transition:
		transform var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);
}

.crv-qte {
	width:42px;
	height:42px;
	display:flex;
	flex:0 0 42px;
	align-items:center;
	justify-content:center;
	border-radius:12px;
	background:color-mix(in srgb,var(--uicolor2) 9%,var(--surface-color));
	color:var(--uicolor2);
	font-size:18px;
}

.crv-card > p {
	min-width:0;
	margin:17px 0 24px;
	color:var(--secondarytext);
	font-size:14px;
	font-style:italic;
	line-height:1.9;
	overflow-wrap:anywhere;
}

.crv-inf {
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:4px;
	margin-top:auto;
	padding-top:17px;
	border-top:1px solid rgb(var(--primary-text-code) / 6%);
}

.crv-inf strong,
.crv-inf a {
	min-width:0;
	max-width:100%;
	overflow-wrap:anywhere;
}

.crv-inf strong {
	color:var(--primary-text);
	font-size:14px;
	font-weight:800;
	line-height:1.55;
}

.crv-inf a {
	width:max-content;
	color:var(--uicolor);
	font-size:11px;
	font-weight:700;
	line-height:1.6;
	text-decoration:none;
}

.crv-inf a:focus-visible {
	border-radius:6px;
	outline:3px solid color-mix(in srgb,var(--uicolor) 24%,transparent);
	outline-offset:3px;
}

@media (hover:hover) and (pointer:fine) {
	.crv-card:hover {
		transform:translateY(-4px);
		border-color:color-mix(in srgb,var(--uicolor) 22%,transparent);
		box-shadow:0 20px 44px rgb(var(--primary-text-code) / 8%);
	}

	.crv-inf a:hover {
		color:var(--uicolor2);
	}
}

/* =========================
   Tablet Responsive
========================= */

@media only screen and (min-width:600px) and (max-width:767px) {
	.crv-card {
		min-height:235px;
		padding:19px;
		border-radius:17px;
	}

	.crv-qte {
		width:38px;
		height:38px;
		flex-basis:38px;
		border-radius:11px;
		font-size:16px;
	}

	.crv-card > p {
		margin:14px 0 19px;
		font-size:13px;
		line-height:1.75;
	}

	[dir="rtl"] .crv-card > p {
		font-style:normal;
	}

	.crv-inf {
		gap:5px;
		padding-top:15px;
	}

	.crv-inf strong {
		font-size:13.5px;
		line-height:1.5;
	}

	.crv-inf a {
		width:auto;
		font-size:11.5px;
		line-height:1.55;
	}
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:599px) {
	.crv-card {
		min-height:230px;
		padding:20px;
		border-radius:17px;
	}

	.crv-qte {
		width:40px;
		height:40px;
		flex-basis:40px;
		border-radius:11px;
		font-size:17px;
	}

	.crv-card > p {
		margin:15px 0 20px;
		font-size:14px;
		line-height:1.78;
	}

	[dir="rtl"] .crv-card > p {
		font-style:normal;
	}

	.crv-inf {
		gap:7px;
		padding-top:16px;
	}

	.crv-inf strong {
		font-size:14px;
		line-height:1.5;
	}

	.crv-inf a {
		width:fit-content;
		max-width:100%;
		min-height:44px;
		display:inline-flex;
		align-items:center;
		padding:7px 10px;
		border-radius:9px;
		background:color-mix(in srgb,var(--uicolor) 6%,var(--surface-color));
		font-size:12px;
		line-height:1.5;
	}
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:390px) {
	.crv-card {
		min-height:220px;
		padding:17px;
		border-radius:15px;
	}

	.crv-qte {
		width:38px;
		height:38px;
		flex-basis:38px;
		border-radius:10px;
		font-size:16px;
	}

	.crv-card > p {
		margin:14px 0 18px;
		font-size:13.5px;
		line-height:1.75;
	}

	.crv-inf {
		padding-top:15px;
	}

	.crv-inf strong {
		font-size:13.5px;
	}

	.crv-inf a {
		min-height:44px;
		padding:7px 9px;
		font-size:11.5px;
	}
}

@media (hover:none) and (pointer:coarse) {
	.crv-inf a:active {
		background:color-mix(in srgb,var(--uicolor) 11%,var(--surface-color));
		color:var(--uicolor2);
	}
}

@media (prefers-reduced-motion:reduce) {
	.crv-card {
		transition:none;
	}
}