/**
 * Case Studies — Single & Archive Styles (Modern)
 *
 * Modern design with:
 * - Phosphor Icons integration
 * - Smooth animations & hover effects
 * - Glass morphism effects
 * - Responsive layout
 *
 * All selectors are nested under wrapper classes for max specificity.
 * Depends on: csp-variables.css, csp-utilities.css
 *
 * @package Case_Studies_Portfolio
 */

/* ═══════════════════════════════════════════
   Shared Wrappers
   ═══════════════════════════════════════════ */
.csp-archive-wrapper,
.csp-single-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--csp-space-xxxl) var(--csp-space-lg);
}

/* ═══════════════════════════════════════════
   Breadcrumb (Single)
   ═══════════════════════════════════════════ */
.csp-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--csp-space-sm);
	flex-wrap: wrap;
	font-size: var(--csp-font-size-sm);
	color: var(--csp-text-light);
	margin-top: var(--csp-space-xl);
	margin-bottom: var(--csp-space-xl);

	& a {
		color: var(--csp-primary);
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		transition: color var(--csp-transition);

		&:hover {
			color: var(--csp-primary-dark);
		}
	}

	& .csp-breadcrumb-sep {
		color: var(--csp-border);
		font-size: var(--csp-font-size-xs);
	}

	& .csp-breadcrumb-current {
		color: var(--csp-text-dark);
		font-weight: 500;
	}
}

/* ═══════════════════════════════════════════
   Hero Section (Single)
   ═══════════════════════════════════════════ */
.csp-hero-modern {
	position: relative;
	min-height: 500px;
	overflow: hidden;
	margin-bottom: var(--csp-space-xxl);
	display: flex;
	align-items: flex-end;

	& .csp-hero-modern-bg {
		position: absolute;
		inset: 0;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		transition: transform 8s ease;
	}

	&:hover .csp-hero-modern-bg {
		transform: scale(1.05);
	}

	& .csp-hero-modern-overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to bottom,
			rgba(10, 37, 64, 0.4) 0%,
			rgba(10, 37, 64, 0.85) 100%
		);
	}

	& .csp-hero-modern-content {
		position: relative;
		z-index: var(--csp-z-content);
		padding: var(--csp-space-xxxl) var(--csp-space-lg);
		width: 100%;

		& .csp-hero-modern-inner {
			max-width: 700px;
		}
	}

	& .csp-hero-badge {
		margin-bottom: var(--csp-space-lg);
	}

	& .csp-hero-modern-title {
		font-size: clamp(2rem, 5vw, 3rem);
		font-weight: 800;
		color: var(--csp-text-white);
		margin: 0 0 var(--csp-space-md);
		line-height: 1.15;
	}

	& .csp-hero-modern-subtitle {
		font-size: var(--csp-font-size-lg);
		color: rgba(255, 255, 255, 0.85);
		margin: 0 0 var(--csp-space-xxl);
		display: inline-flex;
		align-items: center;
		gap: var(--csp-space-sm);

		& i {
			font-size: var(--csp-font-size-xl);
		}
	}

	& .csp-hero-modern-meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--csp-space-lg);
	}

	& .csp-hero-meta-item {
		display: inline-flex;
		align-items: center;
		gap: var(--csp-space-xs);
		color: rgba(255, 255, 255, 0.7);
		font-size: var(--csp-font-size-sm);

		& i {
			font-size: var(--csp-font-size-md);
			color: var(--csp-primary);
		}
	}

	& .csp-hero-modern-scroll {
		position: absolute;
		bottom: var(--csp-space-xxl);
		right: var(--csp-space-xxl);
		z-index: var(--csp-z-content);

		& a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 48px;
			height: 48px;
			background: rgba(255, 255, 255, 0.15);
			backdrop-filter: blur(8px);
			border-radius: var(--csp-radius-full);
			color: var(--csp-text-white);
			text-decoration: none;
			transition: all var(--csp-transition);

			&:hover {
				background: var(--csp-primary);
				transform: translateY(4px);
			}
		}
	}
}

/* ═══════════════════════════════════════════
   Main Content Layout (Single)
   ═══════════════════════════════════════════ */
.csp-main-layout {
	margin-bottom: var(--csp-space-xxxl);

	& .csp-main-grid {
		display: grid;
		grid-template-columns: 1fr 340px;
		gap: var(--csp-space-xxl);

		&.csp-main-grid--sidebar-left {
			grid-template-columns: 340px 1fr;

			& .csp-sidebar-modern {
				order: -1;
			}
		}

		&.csp-main-grid--no-sidebar {
			grid-template-columns: 1fr;
		}

		@media (max-width: 960px) {
			grid-template-columns: 1fr;

			&.csp-main-grid--sidebar-left .csp-sidebar-modern {
				order: 0;
			}
		}
	}
}

/* Content Column */
.csp-content-column {

	& .csp-section-label {
		display: inline-flex;
		align-items: center;
		gap: var(--csp-space-sm);
		font-size: var(--csp-font-size-sm);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--csp-primary);
		margin-bottom: var(--csp-space-lg);

		& i {
			font-size: var(--csp-font-size-lg);
		}
	}

	& .csp-entry-content {
		margin-bottom: var(--csp-space-xxl);

		& .csp-entry-text {
			color: var(--csp-text-mid);
			line-height: 1.8;

			& p {
				margin-bottom: var(--csp-space-lg);
			}

			& h2, & h3, & h4 {
				color: var(--csp-text-dark);
				margin: var(--csp-space-xxl) 0 var(--csp-space-md);
			}

			& a {
				color: var(--csp-primary);
				text-decoration: none;
				border-bottom: 1px solid transparent;
				transition: border-color var(--csp-transition);

				&:hover {
					border-color: var(--csp-primary);
				}
			}
		}
	}
}

/* Gallery Modern */
.csp-gallery-modern {
	& .csp-gallery-grid-modern {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: var(--csp-space-md);
	}

	& .csp-gallery-item-modern {
		display: block;
		position: relative;
		width: 100%;
		padding: 0;
		border: none;
		background: none;
		border-radius: var(--csp-radius-md);
		overflow: hidden;
		aspect-ratio: 4 / 3;
		cursor: pointer;

		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		}

		&:hover img {
			transform: scale(1.08);
		}

		& .csp-gallery-item-overlay {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(10, 37, 64, 0.5);
			opacity: 0;
			transition: opacity var(--csp-transition);

			& i {
				color: var(--csp-text-white);
				font-size: var(--csp-font-size-xxl);
				transform: scale(0.8);
				transition: transform var(--csp-transition);
			}
		}

		&:hover .csp-gallery-item-overlay {
			opacity: 1;

			& i {
				transform: scale(1);
			}
		}
	}
}

/* Gallery Lightbox */
.csp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--csp-transition), visibility var(--csp-transition);

	&.csp-lightbox-open {
		visibility: visible;
		opacity: 1;
	}

	& .csp-lightbox-overlay {
		position: absolute;
		inset: 0;
		background: rgba(15, 23, 42, 0.9);
	}

	& .csp-lightbox-content {
		position: relative;
		z-index: 1;
		max-width: min(90vw, 1200px);
		max-height: 90vh;
	}

	& .csp-lightbox-image {
		display: block;
		max-width: 100%;
		max-height: 90vh;
		border-radius: var(--csp-radius-md);
		box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
	}

	& .csp-lightbox-close {
		position: absolute;
		top: -48px;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: none;
		border-radius: var(--csp-radius-full);
		background: rgba(255, 255, 255, 0.1);
		color: var(--csp-text-white);
		font-size: var(--csp-font-size-lg);
		cursor: pointer;
		transition: background var(--csp-transition);

		&:hover {
			background: rgba(255, 255, 255, 0.2);
		}
	}
}

body.csp-lightbox-active {
	overflow: hidden;
}

/* ═══════════════════════════════════════════
   Sidebar / Client Card (Single)
   ═══════════════════════════════════════════ */
.csp-sidebar-modern {

	& .csp-client-card-modern {
		border-radius: var(--csp-radius-lg);
		overflow: hidden;
		background: var(--csp-bg-white);
		border: 1px solid var(--csp-border);
		box-shadow: 0 2px 12px var(--csp-shadow-sm);

		&.csp-client-card--sticky {
			position: sticky;
			top: var(--csp-space-xxl);
		}

		& .csp-client-card-header {
			display: flex;
			align-items: center;
			gap: var(--csp-space-md);
			padding: var(--csp-space-xl);
			background: var(--csp-bg-light);
			border-bottom: 1px solid var(--csp-border);

			& .csp-client-card-icon {
				font-size: var(--csp-font-size-xl);
				color: var(--csp-primary);
			}

			& .csp-client-card-logo {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 36px;
				height: 36px;
				border-radius: var(--csp-radius-sm);
				overflow: hidden;
				background: var(--csp-bg-white);
				border: 1px solid var(--csp-border);
				flex-shrink: 0;

				& img {
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}

			& .csp-client-card-title {
				margin: 0;
				font-size: var(--csp-font-size-lg);
				font-weight: 700;
				color: var(--csp-text-dark);
			}
		}

		& .csp-client-card-body {
			padding: var(--csp-space-md);
		}

		& .csp-client-row {
			display: flex;
			align-items: flex-start;
			gap: var(--csp-space-md);
			padding: var(--csp-space-md);
			border-radius: var(--csp-radius-sm);
			transition: background-color var(--csp-transition);

			&:hover {
				background: var(--csp-bg-light);
			}

			& .csp-client-row-icon {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 36px;
				height: 36px;
				background: rgba(14, 165, 233, 0.12);
				border-radius: var(--csp-radius-sm);
				color: var(--csp-primary);

				& i {
					font-size: var(--csp-font-size-md);
				}
			}

			& .csp-client-row-content {
				display: flex;
				flex-direction: column;
				gap: 2px;
			}

			& .csp-client-label {
				font-size: var(--csp-font-size-xs);
				color: var(--csp-text-light);
				text-transform: uppercase;
				letter-spacing: 0.05em;
			}

			& .csp-client-value {
				font-size: var(--csp-font-size-sm);
				color: var(--csp-text-dark);

				& a {
					color: var(--csp-primary);
					text-decoration: none;
					display: inline-flex;
					align-items: center;
					gap: var(--csp-space-xs);
					transition: color var(--csp-transition);

					&:hover {
						color: var(--csp-primary-dark);
					}

					& i {
						font-size: var(--csp-font-size-sm);
						transition: transform var(--csp-transition);
					}

					&:hover i {
						transform: translate(2px, -2px);
					}
				}
			}
		}
	}
}

/* ═══════════════════════════════════════════
   Archive Header
   ═══════════════════════════════════════════ */
.csp-archive-header {
	padding: var(--csp-space-xxl) 0;

	& .csp-archive-header-content {
		text-align: center;
		max-width: 700px;
		margin: 0 auto;
	}

	& .csp-archive-header-title {
		font-size: clamp(2rem, 5vw, 3.5rem);
		font-weight: 800;
		color: var(--csp-text-dark);
		margin: 0 0 var(--csp-space-md);
		line-height: 1.15;
	}

	& .csp-archive-header-subtitle {
		font-size: var(--csp-font-size-lg);
		color: var(--csp-text-light);
		margin: 0;
	}
}

/* ═══════════════════════════════════════════
   Section Headers
   ═══════════════════════════════════════════ */
.csp-section-header {
	text-align: center;
	margin-bottom: var(--csp-space-xxl);

	& .csp-badge {
		margin-bottom: var(--csp-space-md);
	}

	& .csp-section-title {
		font-size: var(--csp-font-size-xxl);
		font-weight: 700;
		color: var(--csp-text-dark);
		margin: 0;
	}
}

/* ═══════════════════════════════════════════
   Case Card (Archive + Related)
   ═══════════════════════════════════════════ */
.csp-case-card {
	border-radius: var(--csp-radius-lg);
	overflow: hidden;
	background: var(--csp-bg-white);
	box-shadow: 0 2px 12px var(--csp-shadow-sm);

	& .csp-case-card-media {
		position: relative;
		aspect-ratio: 16 / 10;
		overflow: hidden;

		& .csp-case-card-bg {
			position: absolute;
			inset: 0;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
		}

		&.csp-case-card-media--gradient {
			background: linear-gradient(135deg, var(--csp-secondary) 0%, var(--csp-secondary-dark) 100%);
		}

		& .csp-case-card-media-overlay {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(10, 37, 64, 0.4);
			opacity: 0;
			transition: opacity var(--csp-transition);

			& .csp-case-card-media-icon {
				color: var(--csp-text-white);
				font-size: 2rem;
				transform: scale(0.8) rotate(-15deg);
				transition: transform var(--csp-transition);
			}
		}

		&:hover .csp-case-card-bg {
			transform: scale(1.08);
		}

		&:hover .csp-case-card-media-overlay {
			opacity: 1;

			& .csp-case-card-media-icon {
				transform: scale(1) rotate(0deg);
			}
		}
	}

	& .csp-case-card-body {
		padding: var(--csp-space-xl);
	}

	& .csp-case-card-tag {
		display: inline-flex;
		align-items: center;
		gap: var(--csp-space-xs);
		padding: 4px 10px;
		background: rgba(14, 165, 233, 0.1);
		color: var(--csp-primary);
		font-size: var(--csp-font-size-xs);
		font-weight: 600;
		border-radius: var(--csp-radius-xs);
		margin-bottom: var(--csp-space-md);

		& i {
			font-size: var(--csp-font-size-sm);
		}
	}

	& .csp-case-card-title {
		margin: 0 0 var(--csp-space-sm);
		font-size: var(--csp-font-size-lg);
		font-weight: 700;

		& a {
			color: var(--csp-text-dark);
			text-decoration: none;
			transition: color var(--csp-transition);

			&:hover {
				color: var(--csp-primary);
			}
		}
	}

	& .csp-case-card-subtitle {
		margin: 0 0 var(--csp-space-md);
		font-size: var(--csp-font-size-sm);
		color: var(--csp-text-light);
		display: inline-flex;
		align-items: center;
		gap: var(--csp-space-xs);

		& i {
			color: var(--csp-primary);
		}
	}

	& .csp-case-card-cta {
		display: inline-flex;
		align-items: center;
		gap: var(--csp-space-sm);
		color: var(--csp-primary);
		font-size: var(--csp-font-size-sm);
		font-weight: 600;
		text-decoration: none;
		transition: gap var(--csp-transition), color var(--csp-transition);

		& .csp-case-card-cta-icon {
			transition: transform var(--csp-transition);
		}

		&:hover {
			color: var(--csp-primary-dark);
			gap: var(--csp-space-md);

			& .csp-case-card-cta-icon {
				transform: translateX(4px);
			}
		}
	}
}

/* ═══════════════════════════════════════════
   Carousel Controls
   ═══════════════════════════════════════════ */
.csp-carousel-wrapper {
	& .csp-carousel-container {
		padding-bottom: 48px;
	}

	& .csp-carousel-controls {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--csp-space-lg);
		margin-top: var(--csp-space-xl);
	}

	& .csp-carousel-btn {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		background: var(--csp-bg-white);
		border: 1px solid var(--csp-border);
		border-radius: var(--csp-radius-full);
		cursor: pointer;
		color: var(--csp-text-dark);
		font-size: var(--csp-font-size-md);
		line-height: 1;
		box-shadow: none;
		transition: all var(--csp-transition);

		& i {
			font-size: var(--csp-font-size-md);
			line-height: 1;
		}

		&:hover,
		&:focus-visible {
			background: var(--csp-primary);
			border-color: var(--csp-primary);
			color: var(--csp-text-white);
			transform: scale(1.1);
			outline: none;
		}

		&.swiper-button-disabled {
			opacity: 0.35;
			cursor: not-allowed;

			&:hover {
				background: var(--csp-bg-white);
				border-color: var(--csp-border);
				color: var(--csp-text-dark);
				transform: none;
			}
		}
	}

	& .csp-carousel-pagination {
		display: flex;
		gap: var(--csp-space-sm);

		& .swiper-pagination-bullet {
			width: 10px;
			height: 10px;
			background: var(--csp-border);
			opacity: 1;
			transition: all var(--csp-transition);
			border-radius: var(--csp-radius-full);

			&.swiper-pagination-bullet-active {
				background: var(--csp-primary);
				width: 28px;
				border-radius: 5px;
			}
		}
	}
}

/* ═══════════════════════════════════════════
   CTA Section (Modern)
   ═══════════════════════════════════════════ */
.csp-cta-section--modern {
	& .csp-cta-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--csp-space-xxl);
		padding: var(--csp-space-xxl) var(--csp-space-xxxl);
		background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
		border-radius: var(--csp-radius-xl);
		overflow: hidden;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: -50%;
			right: -20%;
			width: 400px;
			height: 400px;
			background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
			border-radius: 50%;
		}

		@media (max-width: 768px) {
			flex-direction: column;
			text-align: center;
			padding: var(--csp-space-xxl) var(--csp-space-lg);
		}
	}

	& .csp-cta-content {
		position: relative;
		z-index: var(--csp-z-content);
		display: flex;
		align-items: center;
		gap: var(--csp-space-xl);

		@media (max-width: 768px) {
			flex-direction: column;
		}
	}

	& .csp-cta-icon {
		font-size: 3rem;
		color: var(--csp-primary);
		flex-shrink: 0;
	}

	& .csp-cta-title {
		font-size: var(--csp-font-size-xl);
		font-weight: 700;
		color: var(--csp-text-white);
		margin: 0;
	}

	& .csp-cta-subtitle {
		color: rgba(255, 255, 255, 0.7);
		margin: var(--csp-space-sm) 0 0;
	}

	& .csp-cta-actions {
		position: relative;
		z-index: var(--csp-z-content);
		display: flex;
		gap: var(--csp-space-md);
		flex-shrink: 0;

		@media (max-width: 768px) {
			flex-direction: column;
			width: 100%;

			& .csp-btn {
				width: 100%;
				justify-content: center;
			}
		}
	}
}

/* ═══════════════════════════════════════════
   No Results
   ═══════════════════════════════════════════ */
.csp-no-results {
	text-align: center;
	padding: var(--csp-space-xxxl) var(--csp-space-lg);
	color: var(--csp-text-light);

	& .csp-no-results-icon {
		font-size: 4rem;
		color: var(--csp-border);
		margin-bottom: var(--csp-space-md);
	}

	& p {
		font-size: var(--csp-font-size-lg);
	}
}

/* ═══════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
	.csp-hero-modern {
		min-height: 400px;

		& .csp-hero-modern-content {
			padding: var(--csp-space-xxl) var(--csp-space-lg);
		}

		& .csp-hero-modern-scroll {
			display: none;
		}
	}

	.csp-archive-header {
		padding: var(--csp-space-xl) 0;
	}

	.csp-section-header .csp-section-title {
		font-size: var(--csp-font-size-xl);
	}
}