/**
 * Cases Page Styles
 * Light Theme - Nova Paleta 2025
 *
 * @version 2.0.0
 */

/* ============================================
   HERO CASES
   ============================================ */

.cases-hero {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-20) var(--space-4);
	overflow: hidden;
	background: var(--light-primary);
}

.cases-hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 800px;
}

.cases-hero-title {
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
	margin-bottom: var(--space-4);
	color: var(--tingle-brown);
}

.cases-hero-subtitle {
	font-size: var(--text-xl);
	color: var(--text-secondary);
	max-width: 600px;
	margin: 0 auto;
}

/* ============================================
   CASE SECTIONS
   ============================================ */

.case-section {
	padding: var(--space-8) 0;
}

.case-section:nth-child(odd) {
	background: var(--light-primary);
}

.case-section:nth-child(even) {
	background: var(--light-secondary);
}

/* ============================================
   CASE CARD
   ============================================ */

.case-card {
	padding: var(--space-10);
	max-width: 1000px;
	margin: 0 auto;
	background: white;
	border: 1px solid rgba(50, 30, 12, 0.08);
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-md);
}

.case-card-featured {
	border: 1px solid rgba(255, 112, 76, 0.3);
}

.case-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-6);
	flex-wrap: wrap;
	gap: var(--space-4);
}

.case-logos {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.case-logo {
	background: var(--light-secondary);
	border: 1px solid rgba(50, 30, 12, 0.08);
	border-radius: var(--radius-lg);
	padding: var(--space-3) var(--space-6);
}

.case-logo-text {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	color: var(--tingle-brown);
}

.case-logo-separator {
	font-size: var(--text-2xl);
	color: var(--text-muted);
	font-weight: var(--font-light);
}

.case-tag {
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
}

.case-tag-energy {
	background: rgba(253, 176, 19, 0.12);
	color: var(--tingle-amber);
	border: 1px solid rgba(253, 176, 19, 0.2);
}

.case-tag-education {
	background: rgba(2, 176, 181, 0.12);
	color: var(--tingle-turquoise);
	border: 1px solid rgba(2, 176, 181, 0.2);
}

.case-tag-innovation {
	background: rgba(255, 112, 76, 0.12);
	color: var(--tingle-coral);
	border: 1px solid rgba(255, 112, 76, 0.2);
}

.case-tag-sports {
	background: rgba(229, 59, 88, 0.12);
	color: var(--tingle-magenta);
	border: 1px solid rgba(229, 59, 88, 0.2);
}

.case-tag-tech {
	background: rgba(141, 170, 57, 0.12);
	color: var(--tingle-green);
	border: 1px solid rgba(141, 170, 57, 0.2);
}

.case-tag-culture {
	background: rgba(108, 92, 231, 0.12);
	color: #6C5CE7;
	border: 1px solid rgba(108, 92, 231, 0.2);
}

/* ============================================
   CASE CONTENT
   ============================================ */

.case-content {
	margin-top: var(--space-6);
}

.case-title {
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: var(--font-bold);
	color: var(--tingle-brown);
	margin-bottom: var(--space-6);
	line-height: var(--leading-tight);
}

.case-description {
	margin-bottom: var(--space-8);
}

.case-description p {
	font-size: var(--text-lg);
	color: var(--text-secondary);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-4);
}

.case-description strong {
	color: var(--tingle-brown);
}

.case-list {
	list-style: none;
	padding: 0;
	margin: var(--space-4) 0;
}

.case-list li {
	position: relative;
	padding-left: var(--space-8);
	margin-bottom: var(--space-3);
	font-size: var(--text-base);
	color: var(--text-secondary);
}

.case-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 12px;
	height: 12px;
	background: var(--gradient-coral-amber);
	border-radius: 50%;
}

.case-list li strong {
	color: var(--tingle-coral);
}

/* Schedule */
.case-schedule {
	background: var(--light-secondary);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	margin: var(--space-6) 0;
	border: 1px solid rgba(50, 30, 12, 0.05);
}

.case-schedule-title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	color: var(--tingle-brown);
	margin-bottom: var(--space-4);
}

.case-schedule-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}

.case-schedule-list li {
	font-size: var(--text-base);
	color: var(--text-secondary);
	padding: var(--space-3) var(--space-4);
	background: white;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(50, 30, 12, 0.05);
}

.case-schedule-list li strong {
	color: var(--tingle-coral);
}

@media (max-width: 768px) {
	.case-schedule-list {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   CASE RESULTS
   ============================================ */

.case-results {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	margin: var(--space-8) 0;
}

.case-result {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-4);
	background: var(--light-secondary);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(50, 30, 12, 0.05);
}

.case-result-icon {
	width: 48px;
	height: 48px;
	background: rgba(255, 112, 76, 0.1);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.case-result-icon svg {
	width: 24px;
	height: 24px;
	color: var(--tingle-coral);
}

.case-result-content {
	display: flex;
	flex-direction: column;
}

.case-result-number {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	background: var(--gradient-coral-amber);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.case-result-label {
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin-top: var(--space-1);
}

/* ============================================
   CASE TAGS
   ============================================ */

.case-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

.case-mini-tag {
	background: rgba(255, 112, 76, 0.1);
	color: var(--tingle-coral);
	font-size: var(--text-xs);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	border: 1px solid rgba(255, 112, 76, 0.15);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
	.case-results {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
}

@media (max-width: 768px) {
	.cases-hero-title {
		font-size: var(--text-3xl);
	}

	.case-card {
		padding: var(--space-6);
	}

	.case-title {
		font-size: var(--text-2xl);
	}

	.case-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.case-logos {
		flex-direction: column;
		gap: var(--space-2);
	}

	.case-logo-separator {
		display: none;
	}

	.case-description p {
		font-size: var(--text-base);
	}
}

@media (max-width: 480px) {
	.cases-hero {
		min-height: 50vh;
		padding: var(--space-16) var(--space-4);
	}

	.case-result {
		flex-direction: column;
		text-align: center;
	}

	.case-result-icon {
		margin: 0 auto;
	}

	.case-result-content {
		align-items: center;
	}
}

/* Case Social Link */
.case-social {
	margin-top: var(--space-4, 16px);
}

.case-social-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2, 8px);
	padding: var(--space-2, 8px) var(--space-4, 16px);
	background: linear-gradient(135deg, #E53B58, #FF704C);
	color: white;
	border-radius: var(--radius-full, 50px);
	font-size: var(--text-sm, 0.875rem);
	font-weight: 500;
	transition: all 0.3s ease;
}

.case-social-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(255, 112, 76, 0.4);
}

.case-social-link svg {
	flex-shrink: 0;
}

/* Instagram Tag Link */
.case-mini-tag-link {
	background: linear-gradient(135deg, #E53B58, #FF704C) !important;
	color: white !important;
	cursor: pointer;
	transition: all 0.3s ease;
}

.case-mini-tag-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 112, 76, 0.3);
}