/**
 * Navigation Cards Component
 * Extends base card styles for clickable navigation/feature cards
 *
 * @package LearningByHart
 * @since 2.0.0
 */

/* ========================================
   Navigation Card Wrapper
   ======================================== */

/* Parent containers use flexbox for centering and wrapping */
.recommended-reading-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* Center the cards */
	gap: var(--space-sm); /* Gap between cards horizontally */
	row-gap: var(--space-xl); /* Larger gap between rows when stacked vertically */
}

/* Cards don't grow or shrink, stay at their natural size */
.navigation-card-wrapper {
	flex: 0 0 auto; /* Don't grow or shrink */
	width: clamp(280px, 48%, 540px); /* Natural width: 280px-540px, prefer ~48% */
	box-sizing: border-box;
}

/* When viewport is too narrow for 2 cards at min-width,
   flex-wrap naturally drops them to single column and they stay centered */

/* ========================================
   Navigation Card - Extends .card base
   ======================================== */

.card--navigation {
	padding: clamp(var(--space-md), 4vw, var(--space-2xl));
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	min-height: 100%; /* Tends towards 1:1 ratio but allows vertical growth */
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Top accent border (overrides series left border) */
.card--navigation::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	width: 100%;
	background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
	opacity: 0.8;
	transition: opacity var(--transition-base);
}

.card--navigation:hover::before {
	opacity: 1;
	height: 5px;
}

/* Remove link underlines */
.card--navigation:hover {
	text-decoration: none;
}

/* ========================================
   Card Icon - Supports emoji/text or images
   ======================================== */

.card--navigation__icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-lg);
	font-size: var(--font-size-2xl);
	color: var(--color-bg-elevated);
	box-shadow: var(--shadow-sm);
	transition: all var(--transition-base);
	overflow: hidden;
	flex-shrink: 0;
}

/* Image inside icon container */
.card--navigation__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* When icon has an image, remove background */
.card--navigation__icon:has(img) {
	background: transparent;
}

.card--navigation:hover .card--navigation__icon {
	transform: scale(1.08) rotate(-2deg);
	box-shadow: var(--shadow-md);
}

/* Icon size adjustments on larger screens */
@media (min-width: 640px) {
	.card--navigation__icon {
		width: 64px;
		height: 64px;
		font-size: var(--font-size-3xl);
	}
}

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

.card--navigation__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Title uses base H5 styling */
.card--navigation__content h5 {
	margin: 0 0 var(--space-md);
	transition: color var(--transition-base);
}

.card--navigation:hover .card--navigation__content h5 {
	color: var(--color-primary-dark);
}

/* Description uses is-style-excerpt class - adjust for card layout */
.card--navigation__content .is-style-excerpt {
	margin: 0 0 auto; /* Push arrow link to bottom */
	flex: 1; /* Fill available space */
}

/* Make entire card clickable via cursor */
.card--navigation {
	cursor: pointer;
}

/* Arrow link - uses is-style-arrow button from button.css, centers naturally via button.css defaults */

/* ========================================
   Navigation Card Variant: Primary
   ======================================== */

.card--navigation.card--primary {
	background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-alt) 100%);
	border: 2px solid var(--color-primary-light);
}

.card--navigation.card--primary::before {
	height: 5px;
	background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-accent) 100%);
}

.card--navigation.card--primary .card--navigation__icon {
	width: 64px;
	height: 64px;
	font-size: var(--font-size-3xl);
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	box-shadow: var(--shadow-md);
}

@media (min-width: 640px) {
	.card--navigation.card--primary .card--navigation__icon {
		width: 72px;
		height: 72px;
	}
}

/* ========================================
   Navigation Card Variant: Interactive
   ======================================== */

.card--navigation.card--interactive {
	background: linear-gradient(135deg,
		var(--color-bg-elevated) 0%,
		var(--color-interactive-bg) 50%,
		var(--color-bg-alt) 100%
	);
	border: 2px solid var(--color-accent);
	overflow: visible;
}

.card--navigation.card--interactive::before {
	background: linear-gradient(90deg,
		var(--color-interactive) 0%,
		var(--color-accent) 50%,
		var(--color-primary-light) 100%
	);
	height: 4px;
}

.card--navigation.card--interactive .card--navigation__icon {
	background: linear-gradient(135deg, var(--color-interactive) 0%, var(--color-interactive-dark) 100%);
	animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
	0%, 100% {
		box-shadow: var(--shadow-sm);
		transform: scale(1);
	}
	50% {
		box-shadow: 0 4px 20px rgba(240, 173, 78, 0.4);
		transform: scale(1.03);
	}
}

.card--navigation.card--interactive:hover .card--navigation__icon {
	animation: none;
	transform: scale(1.15) rotate(5deg);
	box-shadow: 0 6px 24px rgba(240, 173, 78, 0.5);
}

/* Decorative corner accent for interactive cards */
.card--navigation.card--interactive::after {
	content: '✨';
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	font-size: var(--font-size-xl);
	opacity: 0.6;
	transition: all var(--transition-base);
}

.card--navigation.card--interactive:hover::after {
	opacity: 1;
	transform: rotate(20deg) scale(1.2);
}

/* ========================================
   Accessibility & Reduced Motion
   ======================================== */

.card--navigation:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.card--navigation,
	.card--navigation__icon,
	.card--navigation__arrow,
	.card--navigation::before,
	.card--navigation::after {
		transition: none;
		animation: none;
	}
}