/**
 * Landing Page Styles
 * Modern Ocean Gradient design with smooth transitions and elegant flow
 * Implements 75/25 dark/light balance with glassmorphism effects
 *
 * @package Techtronic_Learning
 * @since 1.0.0 (Redesigned 2025)
 */

/* ==========================================================================
   Hero Section (Dark with Ocean Gradient Mesh)
   ========================================================================== */

.landing-hero {
	/* Dark background with Ocean Gradient Mesh */
	background: var(--surface-0);
	padding: var(--spacing-5xl) 0 var(--spacing-6xl);
	position: relative;
	overflow: hidden;
}

/* Ocean Gradient Mesh Background */
.landing-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--gradient-mesh);
	opacity: 0.6;
	z-index: 1;
}

/* Industrial Circuit Pattern Animation - Generic (reusable across pages) */
.hero-circuit-pattern,
.landing-hero__circuit-pattern {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	opacity: 0.12;
	pointer-events: none;
	overflow: hidden;

	/* Tech grid pattern */
	background-image:
		/* Horizontal lines */
		repeating-linear-gradient(
			0deg,
			transparent 0px,
			transparent 79px,
			rgba(6, 182, 212, 0.4) 79px,
			rgba(6, 182, 212, 0.4) 80px
		),
		/* Vertical lines */
		repeating-linear-gradient(
			90deg,
			transparent 0px,
			transparent 79px,
			rgba(6, 182, 212, 0.4) 79px,
			rgba(6, 182, 212, 0.4) 80px
		);
	background-size: 80px 80px;

	animation: circuit-pulse 8s ease-in-out infinite;
}

/* Glowing circuit nodes at intersections */
.hero-circuit-pattern::before,
.landing-hero__circuit-pattern::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		radial-gradient(circle at 0px 0px, rgba(34, 211, 238, 0.6) 3px, transparent 3px);
	background-size: 80px 80px;
	background-position: 0 0;
	animation: node-glow 3s ease-in-out infinite;
}

/* Animated scanning lines (data flow effect) */
.hero-circuit-pattern::after,
.landing-hero__circuit-pattern::after {
	content: '';
	position: absolute;
	top: -100%;
	left: 0;
	right: 0;
	height: 100%;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(6, 182, 212, 0.1) 50%,
		transparent 100%
	);
	animation: scan-line 6s linear infinite;
}

/* Circuit pulse animation */
@keyframes circuit-pulse {
	0%, 100% {
		opacity: 0.08;
		transform: scale(1);
	}
	50% {
		opacity: 0.15;
		transform: scale(1.002);
	}
}

/* Node glow animation */
@keyframes node-glow {
	0%, 100% {
		opacity: 0.4;
		filter: blur(0px);
	}
	50% {
		opacity: 0.8;
		filter: blur(1px);
	}
}

/* Scanning line animation */
@keyframes scan-line {
	0% {
		top: -100%;
	}
	100% {
		top: 100%;
	}
}

/* Smooth gradient fade to next section */
.landing-hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120px;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		var(--surface-1) 100%
	);
	z-index: 3;
}

.landing-hero__container {
	position: relative;
	z-index: 4;
}

.landing-hero__content {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.landing-hero__title {
	font-family: var(--font-display);
	font-size: var(--text-6xl);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-tight);
	letter-spacing: -0.02em;
	color: var(--gray-50);
	margin-bottom: var(--spacing-lg);

	/* Subtle text glow */
	text-shadow: 0 0 40px rgba(34, 211, 238, 0.15);
}

.landing-hero__subtitle {
	font-family: var(--font-body);
	font-size: var(--text-xl);
	line-height: var(--leading-relaxed);
	color: var(--gray-200);
	margin-bottom: var(--spacing-4xl);
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.landing-hero__actions {
	display: flex;
	gap: var(--spacing-md);
	justify-content: center;
	flex-wrap: wrap;
}

/* Responsive hero */
@media (max-width: 991px) {
	.landing-hero {
		padding: var(--spacing-4xl) 0 var(--spacing-5xl);
	}

	.landing-hero__title {
		font-size: var(--text-5xl);
	}

	.landing-hero__subtitle {
		font-size: var(--text-lg);
	}
}

@media (max-width: 767px) {
	.landing-hero {
		padding: var(--spacing-3xl) 0 var(--spacing-4xl);
	}

	.landing-hero__title {
		font-size: var(--text-4xl);
	}

	.landing-hero__subtitle {
		font-size: var(--text-base);
	}

	.landing-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.landing-hero__actions .btn-primary,
	.landing-hero__actions .btn-ghost {
		width: 100%;
	}
}

/* ==========================================================================
   Featured Courses Section (Light Cards on Dark)
   ========================================================================== */

.landing-courses {
	background: var(--surface-1);
	padding: var(--spacing-5xl) 0;
	position: relative;
}

.landing-courses__header {
	text-align: center;
	margin-bottom: var(--spacing-3xl);
}

.landing-courses__title {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	color: var(--gray-50);
	margin-bottom: var(--spacing-md);
}

.landing-courses__subtitle {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--gray-300);
	max-width: 600px;
	margin: 0 auto;
}

.landing-courses__grid {
	margin-bottom: var(--spacing-3xl);
	position: relative;
	z-index: 1;
}

.landing-courses__footer {
	text-align: center;
	position: relative;
	z-index: 1;
}

/* Responsive courses section */
@media (max-width: 767px) {
	.landing-courses {
		padding: var(--spacing-4xl) 0;
	}

	.landing-courses__header {
		margin-bottom: var(--spacing-xl);
	}

	.landing-courses__title {
		font-size: var(--text-3xl);
	}

	.landing-courses__subtitle {
		font-size: var(--text-base);
	}

	.landing-courses__grid {
		margin-bottom: var(--spacing-xl);
	}
}

/* ==========================================================================
   Categories Section (Dark with Glassmorphism)
   ========================================================================== */

.landing-categories {
	background: var(--surface-0);
	padding: var(--spacing-5xl) 0;
	position: relative;
	overflow: hidden;
}

/* Decorative gradient background - adds visual interest */
.landing-categories::before {
	content: '';
	position: absolute;
	top: 10%;
	right: -5%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, rgba(34, 211, 238, 0.03) 40%, transparent 70%);
	pointer-events: none;
	z-index: 0;
	animation: float 20s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-30px, 30px); }
}

.landing-categories__header {
	text-align: center;
	margin-bottom: var(--spacing-3xl);
	position: relative;
	z-index: 1;
}

.landing-categories__title {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	color: var(--gray-50);
	margin-bottom: var(--spacing-md);
}

.landing-categories__subtitle {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--gray-300);
}

.landing-categories__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);  /* Fixed 3 columns on desktop */
	gap: var(--spacing-lg);
	position: relative;
	z-index: 1;
}

/* Tablet - 2 columns */
@media (max-width: 991px) and (min-width: 768px) {
	.landing-categories__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Category Card with Glassmorphism */
.category-card {
	background: var(--glass-light);
	backdrop-filter: blur(var(--blur-md));
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-2xl) var(--spacing-lg);
	text-align: center;
	transition: all var(--duration-slow) var(--ease-out);
	text-decoration: none;
	display: block;
	box-shadow: var(--shadow-base);
}

.category-card:hover {
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(var(--blur-lg));
	border-color: var(--primary-500);
	box-shadow: var(--shadow-lg), var(--glow-primary);
	transform: translateY(-4px);
}

.category-card__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto var(--spacing-xl);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gradient-ocean);
	border-radius: var(--radius-lg);
	color: #ffffff;
	font-size: 32px;
	box-shadow: var(--shadow-md);
}

.category-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);
	margin-bottom: var(--spacing-md-);
}

.category-card__count {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--primary-300);
	margin-bottom: var(--spacing-sm);
	font-weight: var(--weight-medium);
}

.category-card__description {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--gray-200);
}

/* Responsive categories */
@media (max-width: 767px) {
	.landing-categories {
		padding: var(--spacing-4xl) 0;
	}

	.landing-categories__header {
		margin-bottom: var(--spacing-xl);
	}

	.landing-categories__title {
		font-size: var(--text-3xl);
	}

	.landing-categories__subtitle {
		font-size: var(--text-base);
	}

	.landing-categories__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	.category-card {
		padding: var(--spacing-lg) var(--spacing-xl);
	}
}

/* ==========================================================================
   Value Propositions Section (Dark with Light Cards)
   ========================================================================== */

.landing-values {
	background: var(--surface-1);
	padding: var(--spacing-5xl) 0;
	position: relative;
}

.landing-values__header {
	text-align: center;
	margin-bottom: var(--spacing-3xl);
	position: relative;
	z-index: 1;
}

.landing-values__title {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	color: var(--gray-50);
	margin-bottom: var(--spacing-md);
}

.landing-values__subtitle {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--gray-300);
}

.landing-values__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);  /* Fixed 3 columns on desktop */
	gap: var(--spacing-2xl);
	position: relative;
	z-index: 1;
}

/* Tablet - 2 columns */
@media (max-width: 991px) and (min-width: 768px) {
	.landing-values__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Value Card - Elegant Dark Glassmorphism */
.value-card {
	/* Dark glassmorphic background */
	background: rgba(30, 41, 59, 0.4);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(148, 163, 184, 0.15);
	border-radius: var(--radius-lg);
	padding: var(--spacing-4xl) var(--spacing-2xl);
	text-align: center;
	box-shadow:
		var(--shadow-base),
		0 0 0 1px rgba(6, 182, 212, 0.1),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
	transition: all var(--duration-slow) var(--ease-out);
	position: relative;
	overflow: hidden;
}

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

/* Subtle shimmer effect on hover */
.value-card::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%
	);
	transition: left 0.6s ease;
	pointer-events: none;
}

.value-card:hover::before {
	left: 100%;
}

.value-card__icon {
	width: 80px;
	height: 80px;
	margin: 0 auto var(--spacing-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-2);
	border: 2px solid rgba(6, 182, 212, 0.3);
	border-radius: var(--radius-xl);
	color: var(--primary-400);
	box-shadow: var(--shadow-sm);
	transition: all var(--duration-base) var(--ease-out);
	position: relative;
	z-index: 1;
}

.value-card:hover .value-card__icon {
	background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
	border-color: var(--primary-500);
	color: #ffffff;
	box-shadow: var(--shadow-md), var(--glow-primary);
	transform: scale(1.05);
}

.value-card__icon svg {
	width: 40px;
	height: 40px;
}

.value-card__title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	color: var(--gray-50);
	margin-bottom: var(--spacing-md);
	position: relative;
	z-index: 1;
}

.value-card__description {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--gray-300);
	position: relative;
	z-index: 1;
}

/* Responsive values */
@media (max-width: 767px) {
	.landing-values {
		padding: var(--spacing-4xl) 0;
	}

	.landing-values__header {
		margin-bottom: var(--spacing-xl);
	}

	.landing-values__title {
		font-size: var(--text-3xl);
	}

	.landing-values__subtitle {
		font-size: var(--text-base);
	}

	.landing-values__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.value-card {
		padding: var(--spacing-2xl) var(--spacing-lg);
	}
}

/* ==========================================================================
   Final CTA Section (Dark with Ocean Gradient)
   ========================================================================== */

.landing-cta {
	background: var(--gradient-dark-subtle);
	padding: var(--spacing-6xl) 0;
	position: relative;
	overflow: hidden;
}

/* Decorative Ocean Gradient Glow */
.landing-cta::before {
	content: '';
	position: absolute;
	top: -30%;
	right: -15%;
	width: 700px;
	height: 700px;
	background: radial-gradient(
		circle,
		rgba(6, 182, 212, 0.15) 0%,
		rgba(34, 211, 238, 0.08) 40%,
		transparent 70%
	);
	border-radius: 50%;
	z-index: 1;
	animation: pulse-glow 8s ease-in-out infinite;
}

@keyframes pulse-glow {
	0%, 100% {
		opacity: 0.6;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
}

.landing-cta__container {
	position: relative;
	z-index: 2;
}

.landing-cta__content {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.landing-cta__title {
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	color: var(--gray-50);
	margin-bottom: var(--spacing-lg);

	/* Subtle text glow */
	text-shadow: 0 0 30px rgba(34, 211, 238, 0.15);
}

.landing-cta__subtitle {
	font-family: var(--font-body);
	font-size: var(--text-xl);
	line-height: var(--leading-relaxed);
	color: var(--gray-200);
	margin-bottom: var(--spacing-4xl);
}

.landing-cta__actions {
	display: flex;
	gap: var(--spacing-md);
	justify-content: center;
	align-items: center;  /* Ensure buttons align properly */
	flex-wrap: wrap;
}

/* Responsive CTA */
@media (max-width: 991px) {
	.landing-cta {
		padding: var(--spacing-5xl) 0;
	}

	.landing-cta__title {
		font-size: var(--text-4xl);
	}

	.landing-cta__subtitle {
		font-size: var(--text-lg);
	}
}

@media (max-width: 767px) {
	.landing-cta {
		padding: var(--spacing-4xl) 0;
	}

	.landing-cta__title {
		font-size: var(--text-3xl);
	}

	.landing-cta__subtitle {
		font-size: var(--text-base);
	}

	.landing-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.landing-cta__actions .btn-primary,
	.landing-cta__actions .btn-ghost {
		width: 100%;
	}

	.landing-cta::after {
		width: 400px;
		height: 400px;
		top: -20%;
		right: -30%;
	}
}

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

@media print {
	.landing-hero,
	.landing-courses,
	.landing-categories,
	.landing-values,
	.landing-cta {
		background: #fff !important;
		color: #000;
		padding: 32px 0;
	}

	.landing-hero::before,
	.landing-hero::after,
	.landing-courses::before,
	.landing-courses::after,
	.landing-categories::before,
	.landing-categories::after,
	.landing-values::before,
	.landing-values::after,
	.landing-cta::before,
	.landing-cta::after {
		display: none;
	}

	.landing-hero__actions,
	.landing-cta__actions {
		display: none;
	}

	.category-card,
	.value-card {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.category-card:hover,
	.value-card:hover {
		transform: none;
		box-shadow: none;
	}
}