/* ==========================================================================
   Portfolio AJAX Filter — all rules scoped under .portfolio-filter-wrapper
   so they never touch Elementor's global styles or other widgets.

   Theme colors (edit here if the palette ever changes):
     --pf-accent : #fdb514  (gold — active/selected states, buttons)
     --pf-dark   : #262626  (near-black — text, dark surfaces)
     --pf-white  : #ffffff  (surfaces / text-on-dark)

   Design note: sharp corners throughout (no border-radius on boxes,
   inputs, buttons, or cards) for a crisp, architectural B2B look. The
   one exception is the AJAX loading spinner, which is a circle by
   definition — squaring it off would just look broken.
   ========================================================================== */

.portfolio-filter-wrapper {
	--pf-accent: #fdb514;
	--pf-accent-tint: rgba(253, 181, 20, 0.12);
	--pf-accent-tint-strong: rgba(253, 181, 20, 0.22);
	--pf-dark: #262626;
	--pf-white: #ffffff;
	--pf-border: #e5e0d4;
	--pf-muted: #6b6b6b;

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px;
	max-width: 1280px;
	margin: 0 auto;
	box-sizing: border-box;
	color: var(--pf-dark);
}

.portfolio-filter-wrapper *,
.portfolio-filter-wrapper *::before,
.portfolio-filter-wrapper *::after {
	box-sizing: inherit;
}

/* ---------------------------- Sidebar ---------------------------- */

.portfolio-filter-wrapper .portfolio-filter-sidebar {
	flex: 0 0 27%;
	max-width: 27%;
	position: sticky;
	top: 24px;
	align-self: flex-start;
	background: var(--pf-white);
	border: 1px solid var(--pf-border);
	border-top: 3px solid var(--pf-dark);
	padding: 24px;
}

.portfolio-filter-wrapper .portfolio-search {
	margin-bottom: 24px;
}

.portfolio-filter-wrapper .portfolio-search label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pf-dark);
	margin-bottom: 8px;
}

.portfolio-filter-wrapper .portfolio-search-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d8d3c6;
	font-size: 15px;
	line-height: 1.4;
	background: #fafaf8;
	color: var(--pf-dark);
}

.portfolio-filter-wrapper .portfolio-search-input:focus {
	outline: none;
	border-color: var(--pf-accent);
	background: var(--pf-white);
	box-shadow: 0 0 0 3px var(--pf-accent-tint);
}

.portfolio-filter-wrapper .portfolio-filter-group {
	margin-bottom: 24px;
	border-top: 1px solid #f0ede4;
	padding-top: 20px;
}

.portfolio-filter-wrapper .portfolio-filter-group:first-of-type {
	border-top: none;
	padding-top: 0;
}

.portfolio-filter-wrapper .portfolio-filter-group h3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--pf-dark);
	color: var(--pf-dark);
}

.portfolio-filter-wrapper .portfolio-filter-group h3::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--pf-accent);
	margin-right: 8px;
	flex-shrink: 0;
}

/* count badge, filled in by JS as "(3)" style text if you want one later —
   harmless to leave in place if unused */
.portfolio-filter-wrapper .portfolio-filter-group h3 .portfolio-filter-count {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--pf-dark);
	background: var(--pf-accent);
	padding: 1px 7px;
}

/* ------------------- Industry / Location checkbox lists ------------------- */
/* Presented as one clean bordered box per group, rows divided by hairlines
   rather than floating pills — reads like a proper filter panel. */

.portfolio-filter-wrapper .portfolio-filter-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 240px;
	overflow-y: auto;
	border: 1px solid #ece7da;
}

/* tidy scrollbar for the long term lists (webkit browsers) */
.portfolio-filter-wrapper .portfolio-filter-list::-webkit-scrollbar {
	width: 6px;
}
.portfolio-filter-wrapper .portfolio-filter-list::-webkit-scrollbar-track {
	background: transparent;
}
.portfolio-filter-wrapper .portfolio-filter-list::-webkit-scrollbar-thumb {
	background: #ddd6c4;
}

.portfolio-filter-wrapper .portfolio-filter-item {
	margin: 0;
	border-bottom: 1px solid #ece7da;
}

.portfolio-filter-wrapper .portfolio-filter-item:last-child {
	border-bottom: none;
}

.portfolio-filter-wrapper .portfolio-filter-item label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	color: var(--pf-dark);
	padding: 10px 12px;
	border-left: 3px solid transparent;
	background: var(--pf-white);
	transition: background 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease;
}

.portfolio-filter-wrapper .portfolio-filter-item label:hover {
	background: var(--pf-accent-tint);
}

/* checked state: gold left rail + gold-tinted row + bold label so the
   active selection reads clearly even scanning quickly down the list */
.portfolio-filter-wrapper .portfolio-filter-item.is-checked label {
	background: var(--pf-accent-tint-strong);
	border-left-color: var(--pf-accent);
	font-weight: 700;
	padding-left: 15px;
}

.portfolio-filter-wrapper .portfolio-filter-item input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--pf-accent);
	cursor: pointer;
	flex-shrink: 0;
}

.portfolio-filter-wrapper .portfolio-filter-item label span {
	flex: 1;
	line-height: 1.3;
}

.portfolio-filter-wrapper .portfolio-reset {
	width: 100%;
	padding: 10px 16px;
	background: transparent;
	border: 1px solid var(--pf-dark);
	color: var(--pf-dark);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.portfolio-filter-wrapper .portfolio-reset:hover {
	background: var(--pf-dark);
	color: var(--pf-white);
	border-color: var(--pf-dark);
}

/* ------------------- "View All Projects" CTA (term pages only) -------------------
   Only rendered by the shortcode on an Industry/Location term page, as the
   escape hatch back to the full portfolio. Sits directly under Reset Filters
   and is deliberately the louder of the two (solid gold vs. outlined), since
   Reset only clears the *other* controls — it can't unlock the page's term. */

.portfolio-filter-wrapper .portfolio-view-all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 10px;
	padding: 12px 16px;
	background: var(--pf-accent);
	border: 1px solid var(--pf-accent);
	color: var(--pf-dark);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.portfolio-filter-wrapper .portfolio-view-all:hover,
.portfolio-filter-wrapper .portfolio-view-all:focus {
	background: var(--pf-dark);
	border-color: var(--pf-dark);
	color: var(--pf-white);
	text-decoration: none;
}

.portfolio-filter-wrapper .portfolio-view-all:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--pf-accent-tint);
}

.portfolio-filter-wrapper .portfolio-view-all-icon {
	flex-shrink: 0;
	display: block;
	transition: transform 0.15s ease;
}

.portfolio-filter-wrapper .portfolio-view-all:hover .portfolio-view-all-icon {
	transform: translateX(-3px);
}

/* ---------------------------- Results ---------------------------- */

.portfolio-filter-wrapper .portfolio-results {
	flex: 1 1 68%;
	min-width: 0;
}

.portfolio-filter-wrapper .portfolio-results-meta {
	font-size: 14px;
	color: var(--pf-muted);
	margin-bottom: 16px;
	min-height: 20px;
}

.portfolio-filter-wrapper .portfolio-results-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	position: relative;
	transition: opacity 0.15s ease;
}

.portfolio-filter-wrapper.is-loading .portfolio-results-grid {
	opacity: 0.5;
	pointer-events: none;
}

.portfolio-filter-wrapper.is-loading .portfolio-results-grid::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid var(--pf-border);
	border-top-color: var(--pf-accent);
	border-radius: 50%; /* intentional exception — this is a circular spinner */
	animation: portfolio-filter-spin 0.7s linear infinite;
}

@keyframes portfolio-filter-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------------------------- Card (fallback design) ---------------------------- */
/* If you swap in the site's existing card markup, most of these rules
   simply won't match anything and can be deleted. */

.portfolio-filter-wrapper .portfolio-card {
	border: 1px solid var(--pf-border);
	overflow: hidden;
	background: var(--pf-white);
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.portfolio-filter-wrapper .portfolio-card:hover {
	box-shadow: 0 6px 20px rgba(38, 38, 38, 0.1);
	border-color: var(--pf-accent);
	transform: translateY(-2px);
}

.portfolio-filter-wrapper .portfolio-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.portfolio-filter-wrapper .portfolio-card-thumb img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	display: block;
}

.portfolio-filter-wrapper .portfolio-card-thumb-placeholder {
	width: 100%;
	height: 190px;
	background: #f2f0ea;
}

.portfolio-filter-wrapper .portfolio-card-body {
	padding: 16px;
	border-top: 3px solid var(--pf-accent);
}

.portfolio-filter-wrapper .portfolio-card-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--pf-dark);
}

/* Industry / Location — plain text lines with a small leading icon.
   Industry above, Location below, matching the existing site's quiet
   card style — just an icon added, no chips or backgrounds. */

.portfolio-filter-wrapper .portfolio-card-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--pf-muted);
	line-height: 1.4;
}

.portfolio-filter-wrapper .portfolio-card-meta + .portfolio-card-meta {
	margin-top: 2px;
}

.portfolio-filter-wrapper .portfolio-card-meta-icon {
	flex-shrink: 0;
	display: block;
	color: var(--pf-muted);
}

/* ---------------------------- No results / pagination ---------------------------- */

.portfolio-filter-wrapper .portfolio-no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding: 48px 24px;
	color: var(--pf-dark);
	background: #fafaf8;
	border: 1px dashed var(--pf-border);
}

.portfolio-filter-wrapper .portfolio-pagination {
	text-align: center;
	margin-top: 32px;
}

.portfolio-filter-wrapper .portfolio-load-more {
	padding: 12px 28px;
	background: var(--pf-dark);
	color: var(--pf-white);
	border: 2px solid var(--pf-dark);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.portfolio-filter-wrapper .portfolio-load-more:hover {
	background: var(--pf-accent);
	border-color: var(--pf-accent);
	color: var(--pf-dark);
}

.portfolio-filter-wrapper .portfolio-load-more:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
	.portfolio-filter-wrapper .portfolio-results-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: stack sidebar above results */
@media (max-width: 767px) {
	.portfolio-filter-wrapper {
		flex-direction: column;
		gap: 20px;
	}

	.portfolio-filter-wrapper .portfolio-filter-sidebar {
		flex-basis: 100%;
		max-width: 100%;
		position: static;
	}

	.portfolio-filter-wrapper .portfolio-results {
		flex-basis: 100%;
	}

	.portfolio-filter-wrapper .portfolio-results-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.portfolio-filter-wrapper .portfolio-results-grid {
		grid-template-columns: 1fr;
	}

	.portfolio-filter-wrapper .portfolio-search-input {
		width: 100%;
	}
}