/* Case Studies Archive Page Styles */

/* ========================================
	CSS VARIABLES (extends case-studies.css)
	======================================== */
:root {
	/* Archive-specific colors */
}

/* ========================================
	ARCHIVE CONTAINER
	======================================== */
.case-studies-archive {
	max-width: 1150px;
	margin: 0 auto;
	padding: 60px 20px 0;

	@media (min-width: 600px) {
		padding-top: 120px;
	}
}

/* ========================================
	HERO SECTION
	======================================== */
.archive-hero {
	background: var(--color-white);
	padding: 40px 0;
	text-align: center;

	@media (min-width: 481px) {
		padding: 60px 0;
	}

	@media (min-width: 769px) {
		padding: 80px 0;
	}

	.container {
		--pady: 0;
	}

	.hero-content {
		max-width: 800px;
		margin: 0 auto;
	}

	.overline {
		font-size: clamp(10px, 2vw, 14px);
		font-weight: 600;
		color: var(--gray-600);
		text-transform: uppercase;
		letter-spacing: clamp(1.5px, 0.2vw, 2px);
		margin-bottom: clamp(10px, 2vw, 20px);
		display: block;
	}

	.hero-title {
		font-size: clamp(38px, 7vw, 92px);
		font-weight: 700;
		color: var(--color-black);
		line-height: 1.2;
		margin: 0 0 clamp(12px, 2vw, 24px) 0;
	}

	.hero-subheading {
		font-size: clamp(16px, 2vw, 24px);
		color: var(--color-black);
		line-height: 1.5;
		margin: 0;
		text-wrap: balance;
	}
}

/* ========================================
	FILTERS SECTION
	======================================== */
.filters-section {
	background: var(--color-black);
	padding: 10px;
	border-bottom: 1px solid var(--gray-300);
	border-radius: 18px;

	.container {
		--pady: 0;
	}

	.filters-wrapper {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-wrap: wrap;
		margin: 0 auto;
		flex-direction: row;
		justify-content: flex-start;

		@media (min-width: 768px) {
			gap: 8px;
		}

		@media (min-width: 815px) {
			gap: 8px;
		}
	}

	.filter-group {
		display: flex;
		flex-direction: row;
		gap: 8px;
		min-height: 64px;
		justify-content: center;
		align-items: center;
		flex: 0 0 auto;

		&:first-child {
			flex: 0 0 auto;
		}

		&:not(:first-child) {
			flex: 1 1 0;
			min-width: 150px;
		}

		.category-buttons,
		.filter-select {
			height: 100%;
		}

		.filter-select,
		.category-btn {
			line-height: 1;
			padding: 12px;
			min-height: 64px;
			font-size: 18px;
			font-weight: 700;
			color: var(--color-white);
			cursor: pointer;
		}

		.filter-select {
			padding: 0 16px;
			height: 100%;
			border: 1px solid var(--gray-500);
			border-radius: var(--radius-sm);
			background: var(--gray-950);
			transition: all 0.3s ease;
			appearance: none;
			background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%23fbc72f%22%20d%3D%22M6%2010L1%205h10z%22%2F%3E%3C%2Fsvg%3E');
			background-repeat: no-repeat;
			background-position: right 10px top 50%;
			background-size: 16px auto;
			width: 100%;

			&:focus {
				outline: none;
				border-color: var(--color-primary);
			}

			&.has-value {
				border-color: var(--color-primary);
			}
		}

		.category-buttons {
			display: none;
			flex-wrap: wrap;
			gap: 4px;
			background: var(--gray-950);
			border: 1px solid var(--gray-500);
			border-radius: var(--radius-sm);
			height: 100%;
			align-items: center;
			transition: border-color 0.3s ease;

			@media (min-width: 815px) {
				display: flex;
			}

			&:has(.category-btn.active) {
				border-color: var(--color-primary);
			}
		}

		.category-select {
			display: block;
			padding: 0 16px;
			height: 100%;
			border: 1px solid var(--gray-500);
			border-radius: var(--radius-sm);
			font-size: 20px;
			font-weight: 700;
			background: var(--gray-950);
			color: var(--color-white);
			cursor: pointer;
			transition: all 0.3s ease;
			appearance: none;
			background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%23fbc72f%22%20d%3D%22M6%2010L1%205h10z%22%2F%3E%3C%2Fsvg%3E');
			background-repeat: no-repeat;
			background-position: right 10px top 50%;
			background-size: 16px auto;
			width: 100%;

			@media (min-width: 815px) {
				display: none;
			}

			&:focus {
				outline: none;
				border-color: var(--color-primary);
			}

			&.has-value {
				border-color: var(--color-primary);
			}
		}

		.category-btn {
			padding: 0 8px;
			border: 2px solid transparent;
			border-radius: var(--radius-sm);
			background: transparent;
			cursor: pointer;
			transition: all 0.3s ease;
			height: 100%;
			display: flex;
			align-items: center;
			gap: 4px;

			.category-btn-icon {
				width: 20px;
				height: 20px;
				object-fit: contain;
			}

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

			&.active {
				background: var(--color-white);
				border-color: var(--color-white);
				color: var(--color-black);
			}
		}
	}

	.clear-filters-btn {
		padding: 12px 24px;
		background: var(--color-primary);
		border: 2px solid var(--color-primary);
		border-radius: var(--radius-sm);
		font-size: var(--text-size-xs);
		font-weight: 600;
		color: var(--color-black);
		cursor: pointer;
		transition: all 0.3s ease;
		text-transform: uppercase;
		letter-spacing: 0.5px;

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

/* ========================================
	CLEAR FILTERS LINK
	======================================== */
.clear-filters-link-wrapper {
	text-align: right;
	padding: 16px 2.5%;
}

.clear-filters-link {
	font-size: var(--text-size-xs);
	color: var(--gray-500) !important;
	text-decoration: none !important;
	transition: color 0.3s ease;
	cursor: default;

	&.has-filters {
		color: var(--color-black) !important;
		cursor: pointer;

		&:hover {
			color: var(--color-primary) !important;
			text-decoration: underline !important;
		}
	}
}

/* ========================================
	RESULTS SECTION
	======================================== */
.results-section {
	background: var(--color-white);
	padding: 60px 0;

	.container {
		--pady: 0;
	}

	.results-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40px;
		flex-wrap: wrap;
		gap: 20px;
		flex-direction: column;
		align-items: stretch;
		text-align: center;

		@media (min-width: 768px) {
			flex-direction: row;
			text-align: left;
		}

		.results-title {
			font-size: clamp(24px, 3vw, 36px);
			font-weight: 500;
			color: var(--color-black);
			margin: 0;
		}

		.search-wrapper {
			display: flex;
			gap: 12px;
			align-items: center;
			flex-direction: column;
			align-items: stretch;

			@media (min-width: 451px) {
				flex-direction: row;
			}

			@media (min-width: 768px) {
				justify-content: center;
			}

			.search-input {
				padding: 12px 16px;
				border: 2px solid var(--gray-300);
				border-radius: var(--radius-sm);
				font-size: var(--text-size-sm);
				min-width: 100%;
				background: var(--color-white);

				@media (min-width: 451px) {
					min-width: 250px;
					width: auto;
				}

				@media (min-width: 768px) {
					min-width: 300px;
				}

				&:focus {
					outline: none;
					border-color: var(--color-primary);
				}
			}

			.search-btn {
				padding: 12px 24px;
				background: var(--color-primary);
				border: none;
				border-radius: var(--radius-sm);
				font-size: var(--text-size-xs);
				font-weight: 600;
				color: var(--color-black);
				cursor: pointer;
				transition: background 0.3s ease;
				text-transform: uppercase;
				letter-spacing: 0.5px;
				width: 100%;

				@media (min-width: 451px) {
					width: auto;
				}

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

	.loading-spinner {
		text-align: center;
		padding: 60px 0;

		.spinner {
			width: 40px;
			height: 40px;
			border: 4px solid var(--gray-100);
			border-top: 4px solid var(--color-primary);
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin: 0 auto;
		}
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	.results-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 30px;
		margin-bottom: 60px;

		@media (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
		}

		@media (min-width: 1024px) {
			grid-template-columns: repeat(3, 1fr);
			gap: 40px;
		}
	}

	.case-study-card {
		background: var(--color-white);
		border-radius: var(--radius-lg);
		overflow: hidden;
		border: 1px solid var(--gray-200);
		box-shadow: none;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		cursor: pointer;
		text-decoration: none;
		color: inherit;

		&:hover {
			transform: translateY(-5px);
			box-shadow: var(--shadow-md);

			.card-link {
				color: var(--color-primary);
			}

			.link-icon {
				transform: translateX(4px);
			}

			.card-link .link-text {
				text-underline-offset: 2px;
			}
		}

		.card-image {
			width: 100%;
			height: 200px;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}
		}

		.card-content {
			padding: 24px;
		}

		.card-overline {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 16px;

			.overline-icon {
				width: 16px;
				height: 16px;
				object-fit: contain;
			}

			.overline-text {
				font-size: 12px;
				font-weight: 700;
				color: var(--gray-800);
				text-transform: uppercase;
				letter-spacing: 0.5px;
				text-decoration: none;
			}
		}

		.card-title {
			font-size: 20px;
			font-weight: 700;
			color: var(--color-black);
			line-height: 1.3;
			margin: 0 0 20px 0;
			text-decoration: none;
		}

		.card-link {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			font-size: var(--text-size-xs);
			font-weight: 600;
			color: var(--color-black);
			text-decoration: none;
			text-transform: uppercase;
			letter-spacing: 0.5px;

			.link-text {
				text-decoration: underline;
				text-underline-offset: 4px;
				text-decoration-thickness: 2px;
				transition: all 0.3s ease;
			}

			.link-icon {
				width: 16px;
				height: 16px;
				text-decoration: none;
				transition: transform 0.3s ease;
			}
		}
	}

	.no-results {
		text-align: center;
		padding: 60px 0;
		color: var(--gray-800);
		font-size: var(--text-size-md);
	}
}

/* ========================================
	PAGINATION
	======================================== */
.pagination-wrapper {
	text-align: center;
	margin-top: 60px;

	/* Base pagination styles */
	ul,
	.page-numbers {
		display: inline-flex;
		list-style: none;
		padding: 0;
		margin: 0;
		gap: 8px;
		align-items: center;

		li {
			display: inline-block;

			a,
			span {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 16px;
				height: 44px;
				min-width: 44px;
				background: var(--color-white);
				border: 1px solid var(--gray-200);
				border-radius: var(--radius-sm);
				color: #333;
				text-decoration: none;
				font-size: var(--text-size-sm);
				font-weight: 600;
				transition: all 0.3s ease;

				&:hover:not(.current) {
					background: var(--gray-50);
					border-color: #d0d0d5;
					transform: translateY(-2px);
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
				}
			}

			.current {
				background: var(--color-black);
				border-color: var(--color-black);
				color: var(--color-primary);
				cursor: default;
			}

			.dots {
				border: none;
				background: transparent;
				cursor: default;

				&:hover {
					transform: none;
					box-shadow: none;
					background: transparent;
				}
			}
		}
	}

	/* Direct WordPress pagination targeting */
	a.page-numbers,
	span.page-numbers {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0 16px !important;
		height: 44px;
		min-width: 44px;
		background: var(--color-white) !important;
		border: 1px solid var(--color-border-light) !important;
		border-radius: var(--radius-sm);
		color: #333 !important;
		text-decoration: none !important;
		font-size: var(--text-size-sm);
		font-weight: 600;
		transition: all 0.3s ease;
		margin: 0 4px;

		&:hover:not(.current) {
			background: var(--gray-50) !important;
			border-color: #d0d0d5 !important;
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		}
	}

	/* Current page */
	span.page-numbers.current,
	.page-numbers .current,
	.current,
	span.current {
		background: var(--color-black) !important;
		border-color: var(--color-black) !important;
		color: var(--color-primary) !important;
		cursor: default;
	}

	/* Dots */
	.dots,
	.page-numbers .dots {
		border: none !important;
		background: transparent !important;
		cursor: default !important;
		pointer-events: none !important;

		&:hover {
			transform: none !important;
			box-shadow: none !important;
			background: transparent !important;
			border: none !important;
		}
	}
}