/* Card Components */
.card {
	background-color: var(--background-base);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-xl);
	box-shadow: var(--shadow-md);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all var(--transition-normal);
	width: 100%;
}

.card h2,
.card h3 {
	justify-content: center;
}

.card:hover {
	border-color: rgba(255, 105, 180, 0.3);
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 2rem;
	width: 100%;
}

.hero-card {
	background: linear-gradient(135deg, var(--background-base) 0%, rgba(255, 105, 180, 0.1) 100%);
	border: 2px solid rgba(255, 105, 180, 0.2);
}

.signup-card {
	background: linear-gradient(135deg, var(--background-base) 0%, rgba(255, 105, 180, 0.05) 100%);
	border: 2px solid rgba(255, 105, 180, 0.2);
	text-align: center;
}

.feature-card {
	text-align: center;
}

/* Responsive breakpoints for nested card grids only */
@media (max-width: 480px) {
	.card-grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 481px) and (max-width: 767px) {
	.card .card-grid {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 1.25rem;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.card .card-grid {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}

	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.card .card-grid {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}
}