/**
 * Card Components
 * Modern Ocean Gradient card system with glassmorphism and soft glows
 *
 * @package Techtronic_Learning
 * @since 1.0.0 (Redesigned 2025)
 */

/* ==========================================================================
   Course Card Component
   ========================================================================== */

.course-card {
	/* Container - Solid Dark Elegant (Professional & Clean) */
	background: var(--surface-1);
	border: 1px solid var(--gray-700);
	border-radius: var(--radius-md);
	overflow: hidden;

	/* Elevation */
	box-shadow: var(--shadow-base);

	/* Transition */
	transition: all var(--duration-slow) var(--ease-out);

	/* Display */
	display: flex;
	flex-direction: column;
}

.course-card:hover {
	border-color: var(--primary-500);
	box-shadow:
		var(--shadow-lg),
		0 0 0 1px rgba(6, 182, 212, 0.3),
		0 0 16px rgba(6, 182, 212, 0.15);
	transform: translateY(-4px);
}

/* Course Card Image Container */
.course-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--surface-2);
}

.course-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-out);
}

.course-card:hover .course-card__image img {
	transform: scale(1.05);
}

/* Tier Badge (Overlay on Image) - Enhanced Glassmorphism */
.course-card__tier-badge {
	position: absolute;
	top: 12px;
	right: 12px;

	padding: 8px 18px;
	background: rgba(6, 182, 212, 0.75); /* Cyan - Basic/Default with transparency */
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: var(--radius-full);
	border: 1px solid rgba(255, 255, 255, 0.3);

	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #ffffff;
	white-space: nowrap;

	box-shadow:
		var(--shadow-md),
		0 0 0 1px rgba(255, 255, 255, 0.1),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
	z-index: 10;

	transition: all var(--duration-base) var(--ease-out);
}

.course-card:hover .course-card__tier-badge {
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow:
		var(--shadow-lg),
		0 0 0 1px rgba(255, 255, 255, 0.2),
		0 0 16px rgba(6, 182, 212, 0.4),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

/* Basic/Beginner - Bright Cyan (Easy) */
.course-card__tier-badge--basic,
.course-card__tier-badge--beginner {
	background: rgba(34, 211, 238, 0.8); /* Cyan 400 */
	border-color: rgba(255, 255, 255, 0.35);
}

.course-card:hover .course-card__tier-badge--basic,
.course-card:hover .course-card__tier-badge--beginner {
	box-shadow:
		var(--shadow-lg),
		0 0 0 1px rgba(255, 255, 255, 0.25),
		0 0 20px rgba(34, 211, 238, 0.5),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

/* Intermediate - Teal (Medium) */
.course-card__tier-badge--intermediate {
	background: rgba(8, 145, 178, 0.8); /* Teal 600 */
	border-color: rgba(255, 255, 255, 0.35);
}

.course-card:hover .course-card__tier-badge--intermediate {
	box-shadow:
		var(--shadow-lg),
		0 0 0 1px rgba(255, 255, 255, 0.25),
		0 0 20px rgba(8, 145, 178, 0.5),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

/* Advanced - Orange (Challenging) */
.course-card__tier-badge--advanced {
	background: rgba(255, 87, 34, 0.85); /* Orange 600 */
	border-color: rgba(255, 255, 255, 0.35);
}

.course-card:hover .course-card__tier-badge--advanced {
	box-shadow:
		var(--shadow-lg),
		0 0 0 1px rgba(255, 255, 255, 0.25),
		0 0 20px rgba(255, 87, 34, 0.5),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

/* Professional - Gold (Premium) */
.course-card__tier-badge--professional {
	background: rgba(255, 193, 7, 0.85); /* Gold */
	color: var(--gray-900);
	border-color: rgba(255, 235, 59, 0.5);
	font-weight: 800;
}

.course-card:hover .course-card__tier-badge--professional {
	box-shadow:
		var(--shadow-lg),
		0 0 0 1px rgba(255, 235, 59, 0.4),
		0 0 20px rgba(255, 193, 7, 0.6),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}

/* Responsive Badge Sizing */
@media (max-width: 991px) {
	.course-card__tier-badge {
		padding: 6px 14px;
		font-size: 11px;
	}
}

@media (max-width: 767px) {
	.course-card__tier-badge {
		top: 8px;
		right: 8px;
		padding: 5px 12px;
		font-size: 10px;
		letter-spacing: 0.03em;
	}
}

/* Content Area */
.course-card__content {
	padding: var(--spacing-lg);
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Meta Row - Category and Tier Pills Container */
.course-card__meta-row {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
	margin-bottom: var(--spacing-sm);
}

.course-card__category {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--primary-400);  /* Brighter for dark bg */
	line-height: var(--leading-tight);
}

/* Tier Pill Badge (Inline with Category) */
.tier-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: all var(--duration-base) var(--ease-out);
}

/* Basic/Beginner - Bright Cyan */
.tier-pill--basic,
.tier-pill--beginner {
	background: rgba(34, 211, 238, 0.15);
	color: var(--primary-300);
	border-color: rgba(34, 211, 238, 0.3);
}

.course-card:hover .tier-pill--basic,
.course-card:hover .tier-pill--beginner {
	background: rgba(34, 211, 238, 0.25);
	border-color: rgba(34, 211, 238, 0.5);
	box-shadow: 0 0 12px rgba(34, 211, 238, 0.3);
}

/* Advanced - Orange */
.tier-pill--advanced {
	background: rgba(255, 87, 34, 0.15);
	color: #ff9166;
	border-color: rgba(255, 87, 34, 0.3);
}

.course-card:hover .tier-pill--advanced {
	background: rgba(255, 87, 34, 0.25);
	border-color: rgba(255, 87, 34, 0.5);
	box-shadow: 0 0 12px rgba(255, 87, 34, 0.3);
}

/* Professional - Gold */
.tier-pill--professional {
	background: rgba(255, 193, 7, 0.15);
	color: #ffc107;
	border-color: rgba(255, 193, 7, 0.3);
}

.course-card:hover .tier-pill--professional {
	background: rgba(255, 193, 7, 0.25);
	border-color: rgba(255, 193, 7, 0.5);
	box-shadow: 0 0 12px rgba(255, 193, 7, 0.3);
}

.course-card__title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	color: var(--gray-50);  /* Light for dark bg */
	margin-bottom: var(--spacing-md);

	/* Truncate to 2 lines */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.course-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--duration-base) var(--ease-out);
}

.course-card__title a:hover {
	color: var(--primary-400);  /* Cyan on hover */
}

.course-card__meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-md-);
	margin-bottom: var(--spacing-md-);

	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--gray-400);  /* Medium gray for dark bg */
	line-height: var(--leading-tight);
}

.course-card__price {
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	color: var(--gray-200);  /* Bright for visibility */
}

.course-card__meta-separator {
	color: var(--gray-600);
}

.course-card__duration {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.course-card__description {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--gray-300);  /* Readable gray for dark bg */
	margin-bottom: var(--spacing-lg);

	/* Truncate to 3 lines */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.course-card__actions {
	display: flex;
	gap: var(--spacing-md-);
	margin-top: auto;
}

.course-card__actions > * {
	flex: 1;
}

/* Enrolled State */
.course-card--enrolled {
	border-color: var(--success-500);
}

.course-card--enrolled .course-card__category {
	color: var(--success-600);
}

/* Featured State - Elegant Dark Glassmorphism */
.course-card--featured {
	/* Dark glassmorphic background */
	background: rgba(30, 41, 59, 0.4);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(148, 163, 184, 0.15);
	box-shadow:
		var(--shadow-lg),
		0 0 0 1px rgba(6, 182, 212, 0.1),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.course-card--featured:hover {
	background: rgba(30, 41, 59, 0.6);
	border-color: rgba(6, 182, 212, 0.4);
	box-shadow:
		var(--shadow-2xl),
		0 0 0 1px rgba(6, 182, 212, 0.3),
		0 0 32px rgba(6, 182, 212, 0.15),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
	transform: translateY(-6px);
}

/* Subtle shimmer overlay effect */
.course-card--featured::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(6, 182, 212, 0.08) 50%,
		transparent 100%
	);
	animation: shimmer-featured 3s ease-in-out infinite;
	z-index: 1;
	pointer-events: none;
}

@keyframes shimmer-featured {
	0%, 100% { left: -100%; }
	50% { left: 100%; }
}

/* Featured badge on image */
.course-card--featured .course-card__image::after {
	content: 'Featured';
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 11;

	padding: 6px 14px;
	background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
	border-radius: var(--radius-full);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: var(--shadow-md), var(--glow-primary);

	font-family: var(--font-display);
	font-size: 11px;
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #ffffff;
}

/* Adjust content styling for dark background */
.course-card--featured .course-card__category {
	color: var(--primary-400);
}

.course-card--featured .course-card__title,
.course-card--featured .course-card__title a {
	color: var(--gray-50);
}

.course-card--featured .course-card__meta {
	color: var(--gray-300);
}

.course-card--featured .course-card__price {
	color: var(--primary-400);
}

.course-card--featured .course-card__description {
	color: var(--gray-200);
}

/* Content layer above shimmer */
.course-card--featured .course-card__content {
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   Session Card Component
   ========================================================================== */

.session-card {
	/* Container */
	background: var(--surface-1);
	border: 1px solid var(--gray-700);
	border-left: 4px solid var(--primary-500);
	border-radius: var(--radius-md);
	padding: var(--spacing-xl) var(--spacing-lg);
	min-height: 120px;

	/* Display */
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md-);

	/* Transition */
	transition: all var(--duration-base) var(--ease-out);
}

.session-card:hover {
	background: var(--surface-2);
	box-shadow: var(--shadow-base);
}

/* Status Variants */
.session-card--today {
	border-left-color: var(--success-500);
	background: linear-gradient(
		90deg,
		rgba(16, 185, 129, 0.05) 0%,
		var(--surface-1) 100%
	);
}

.session-card--upcoming-soon {
	border-left-color: var(--warning-500);
}

.session-card--past {
	border-left-color: var(--gray-500);
	opacity: 0.7;
}

.session-card--cancelled {
	border-left-color: var(--error-500);
}

/* Header */
.session-card__header {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-md-);
}

.session-card__icon {
	width: 24px;
	height: 24px;
	color: var(--primary-400);
	flex-shrink: 0;
}

.session-card--today .session-card__icon {
	color: var(--success-500);
}

.session-card--upcoming-soon .session-card__icon {
	color: var(--warning-500);
}

.session-card--past .session-card__icon {
	color: var(--gray-500);
}

.session-card--cancelled .session-card__icon {
	color: var(--error-500);
}

.session-card__title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	color: var(--gray-50);
	flex: 1;
	line-height: var(--leading-snug);
}

.session-card--past .session-card__title {
	color: var(--gray-300);
}

/* Meta Information */
.session-card__meta {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--gray-300);
	line-height: var(--leading-normal);

	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

.session-card__meta-separator {
	color: var(--gray-500);
}

.session-card__course {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--gray-400);
	line-height: var(--leading-normal);
}

.session-card__countdown {
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--warning-500);
	line-height: var(--leading-tight);
}

.session-card--today .session-card__countdown {
	color: var(--success-500);
}

/* Actions */
.session-card__actions {
	display: flex;
	gap: var(--spacing-md-);
	margin-top: auto;
}

/* Passcode */
.session-card__passcode {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--gray-200);
	background: var(--surface-2);
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	line-height: var(--leading-tight);
	display: inline-block;
}

/* ==========================================================================
   Generic Content Card
   ========================================================================== */

.content-card {
	background: var(--surface-light-0);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-base);
	transition: all var(--duration-base) var(--ease-out);
}

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

.content-card__header {
	margin-bottom: var(--spacing-md);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--gray-200);
}

.content-card__title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	color: var(--gray-900);
	line-height: var(--leading-snug);
	margin-bottom: 4px;
}

.content-card__subtitle {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--gray-500);
	line-height: var(--leading-normal);
}

.content-card__body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--gray-700);
	line-height: var(--leading-relaxed);
}

.content-card__footer {
	margin-top: var(--spacing-md);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--gray-200);
}

/* Content Card on Dark Background */
.content-card--dark {
	background: var(--surface-1);
	border-color: var(--gray-700);
}

.content-card--dark .content-card__header,
.content-card--dark .content-card__footer {
	border-color: var(--gray-700);
}

.content-card--dark .content-card__title {
	color: var(--gray-50);
}

.content-card--dark .content-card__subtitle {
	color: var(--gray-300);
}

.content-card--dark .content-card__body {
	color: var(--gray-200);
}

/* ==========================================================================
   Glassmorphism Card Variant
   ========================================================================== */

.content-card--glass {
	background: var(--glass-light);
	backdrop-filter: blur(var(--blur-md));
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-glass);
}

.content-card--glass:hover {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(var(--blur-lg));
	box-shadow: var(--shadow-lg), var(--glow-primary);
}

.content-card--glass .content-card__title {
	color: var(--gray-50);
}

.content-card--glass .content-card__subtitle,
.content-card--glass .content-card__body {
	color: var(--gray-100);
}

.content-card--glass .content-card__header,
.content-card--glass .content-card__footer {
	border-color: var(--glass-border);
}

/* ==========================================================================
   Card Grid Layout
   ========================================================================== */

.card-grid {
	display: grid;
	gap: var(--spacing-lg);
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

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

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

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

/* Responsive card grid */
@media (max-width: 1200px) {
	.card-grid--4-col {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 991px) {
	.card-grid--3-col,
	.card-grid--4-col {
		grid-template-columns: repeat(2, 1fr);
	}

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

@media (max-width: 767px) {
	.card-grid,
	.card-grid--2-col,
	.card-grid--3-col,
	.card-grid--4-col {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}
}

/* ==========================================================================
   Skeleton Card (Loading State)
   ========================================================================== */

.course-card--skeleton {
	pointer-events: none;
}

.course-card--skeleton .course-card__image {
	background: linear-gradient(
		90deg,
		var(--gray-200) 0%,
		var(--gray-100) 50%,
		var(--gray-200) 100%
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s ease-in-out infinite;
}

.course-card--skeleton .course-card__category,
.course-card--skeleton .course-card__title,
.course-card--skeleton .course-card__meta,
.course-card--skeleton .course-card__description {
	background: linear-gradient(
		90deg,
		var(--gray-200) 0%,
		var(--gray-100) 50%,
		var(--gray-200) 100%
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s ease-in-out infinite;
	color: transparent;
	border-radius: var(--radius-sm);
}

@keyframes shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 767px) {
	.course-card__content,
	.content-card {
		padding: var(--spacing-xl);
	}

	.session-card {
		padding: var(--spacing-md) var(--spacing-xl);
	}

	.course-card__title {
		font-size: var(--text-lg);
	}

	.session-card__title {
		font-size: var(--text-base);
	}

	.content-card__title {
		font-size: var(--text-lg);
	}

	/* Responsive tier pills */
	.tier-pill {
		font-size: 9px;
		padding: 3px 10px;
	}

	.course-card__meta-row {
		gap: 8px;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.course-card,
	.session-card,
	.content-card {
		border: 1px solid #000;
		box-shadow: none;
		page-break-inside: avoid;
	}

	.course-card:hover,
	.session-card:hover,
	.content-card:hover {
		transform: none;
	}

	.course-card__actions,
	.session-card__actions {
		display: none;
	}
}