/* =========================================================
   PROJECTS PAGE — WIDE LISTING
   ========================================================= */

.psl-projects-page-wide {
	position: relative !important;
	left: 50% !important;
	width: 100vw !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding-right: 24px !important;
	padding-left: 24px !important;
	overflow: visible !important;
	box-sizing: border-box !important;
	transform: translateX(-50%) !important;
}

.psl-projects-page-wide > .psl-projects-page-inner {
	width: min(1360px, 100%) !important;
	max-width: 1360px !important;
	margin-right: auto !important;
	margin-left: auto !important;
	padding: 0 !important;
}

.psl-projects-page-inner > .project-page-intro {
	width: 100% !important;
	max-width: 820px !important;
}

.psl-projects-page-inner > .wp-block-shortcode {
	width: 100% !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding: 0 !important;
}

.psl-projects-page-inner .psl-project-listing,
.psl-projects-page-inner .psl-project-results {
	width: 100% !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

/* Desktop */
@media (min-width: 901px) {
	.psl-projects-page-inner .psl-project-result {
		display: grid !important;
		grid-template-columns: 320px minmax(0, 1fr) !important;
		gap: clamp(42px, 4vw, 64px) !important;
		align-items: center !important;
		width: 100% !important;
		max-width: none !important;
	}

	/*
	 * Keeps the image approximately the same size while
	 * allowing the information panel to become much wider.
	 */
	.psl-projects-page-inner .psl-project-result-image {
		width: 320px !important;
		max-width: 320px !important;
		aspect-ratio: 16 / 9 !important;
	}

	.psl-projects-page-inner .psl-project-result-content {
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
	}

	/*
	 * Stop WordPress/plugin CSS from cutting the project title.
	 */
	.psl-projects-page-inner .psl-project-result-title {
		display: block !important;
		width: 100% !important;
		max-width: 900px !important;
		overflow: visible !important;
		-webkit-box-orient: initial !important;
		-webkit-line-clamp: unset !important;
		line-clamp: unset !important;
	}

	/*
	 * Show the complete available project summary instead of
	 * restricting it to three narrow lines.
	 */
	.psl-projects-page-inner .psl-project-result-summary {
		display: block !important;
		width: 100% !important;
		max-width: 900px !important;
		overflow: visible !important;
		-webkit-box-orient: initial !important;
		-webkit-line-clamp: unset !important;
		line-clamp: unset !important;
		margin-bottom: 24px !important;
	}

	.psl-projects-page-inner .psl-project-result-meta {
		width: 100% !important;
		max-width: 900px !important;
	}
}

/* Tablet */
@media (min-width: 701px) and (max-width: 900px) {
	.psl-projects-page-wide {
		padding-right: 20px !important;
		padding-left: 20px !important;
	}

	.psl-projects-page-inner .psl-project-result {
		grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
		gap: 28px !important;
	}
}

/* Mobile */
@media (max-width: 700px) {
	.psl-projects-page-wide {
		padding-right: 14px !important;
		padding-left: 14px !important;
	}

	.psl-projects-page-inner .psl-project-result {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.psl-projects-page-inner .psl-project-result-image {
		width: 100% !important;
		max-width: none !important;
	}

	.psl-projects-page-inner .psl-project-result-title,
	.psl-projects-page-inner .psl-project-result-summary {
		display: block !important;
		overflow: visible !important;
		-webkit-box-orient: initial !important;
		-webkit-line-clamp: unset !important;
		line-clamp: unset !important;
	}
}

/* =========================================================
   VERANDA SPECIAL 1.1 — PROJECT LISTING POLISH
   ========================================================= */

.recent-installations-page {
	padding-block: clamp(10px, 2vw, 28px) clamp(58px, 8vw, 108px);
}

.recent-installations-page .project-page-intro {
	color: var(--vs-muted);
}

.psl-projects-page-inner :where(.psl-project-listing, .psl-project-results) {
	display: grid;
	gap: 22px;
}

.psl-projects-page-inner .psl-project-result {
	overflow: hidden;
	padding: clamp(18px, 2.5vw, 30px) !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: var(--vs-radius) !important;
	background: #fff !important;
	box-shadow: var(--vs-shadow-sm);
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.psl-projects-page-inner .psl-project-result:hover {
	border-color: rgba(209, 63, 86, .35) !important;
	box-shadow: var(--vs-shadow);
	transform: translateY(-4px);
}

.psl-projects-page-inner .psl-project-result-image {
	overflow: hidden;
	border-radius: var(--vs-radius-sm);
	background: var(--vs-ink-soft);
}

.psl-projects-page-inner .psl-project-result-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.psl-projects-page-inner .psl-project-result:hover .psl-project-result-image img {
	transform: scale(1.035);
}

.psl-projects-page-inner .psl-project-result-title {
	margin-top: 0;
	color: var(--vs-ink);
	font-size: clamp(1.55rem, 2.3vw, 2.45rem) !important;
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.08;
}

.psl-projects-page-inner .psl-project-result-summary,
.psl-projects-page-inner .psl-project-result-meta {
	color: var(--vs-muted);
	line-height: 1.7;
}

.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
	padding: 14px;
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius-sm);
	background: #fff;
}

.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) button {
	min-height: 42px;
	padding: 9px 16px;
	border-color: var(--vs-line);
	background: var(--vs-canvas);
	color: var(--vs-ink);
	font-size: .9rem;
}

.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) button:hover,
.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) button.is-active {
	border-color: var(--vs-accent);
	background: var(--vs-accent);
	color: #fff;
}

@media (max-width: 700px) {
	.psl-projects-page-inner .psl-project-result {
		padding: 16px !important;
	}
}

/* =========================================================
   VERANDA SPECIAL 1.1.5 — COMPACT SEARCH-STYLE PROJECT LIST
   Desktop uses a familiar video-search result: 16:9 thumbnail
   at the left and project details at the right. Mobile keeps
   the existing stacked layout with tighter vertical rhythm.
   ========================================================= */

/* The outer listing contains the filters and results. Keep them attached. */
.psl-projects-page-inner .psl-project-listing {
	display: block !important;
	gap: 0 !important;
}

.psl-projects-page-inner .psl-project-results {
	display: grid !important;
	gap: 16px !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Remove the large introduction-to-filter spacing saved in the page block. */
.psl-projects-page-inner > .project-page-intro {
	margin-bottom: clamp(22px, 3vw, 34px) !important;
}

/* Filters sit directly above the first result instead of floating as a card. */
.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) {
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 0 14px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) + :where(.psl-project-results, .psl-project-listing),
.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) + * {
	margin-top: 0 !important;
}

.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) button,
.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) a {
	min-height: 38px !important;
	padding: 8px 14px !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--vs-ink) !important;
	font-size: .86rem !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	text-decoration: none !important;
}

.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) :where(button, a):hover,
.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) :where(button, a).is-active,
.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) :where(button, a)[aria-current="page"] {
	border-color: var(--vs-accent) !important;
	background: var(--vs-accent) !important;
	color: #fff !important;
}

/* Desktop and larger tablets: compact horizontal search results. */
@media (min-width: 701px) {
	.psl-projects-page-inner .psl-project-results {
		gap: 18px !important;
	}

	.psl-projects-page-inner .psl-project-result {
		display: grid !important;
		grid-template-columns: clamp(300px, 31vw, 390px) minmax(0, 1fr) !important;
		gap: clamp(18px, 2.4vw, 30px) !important;
		align-items: start !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		transform: none !important;
	}

	.psl-projects-page-inner .psl-project-result:hover {
		border-color: transparent !important;
		box-shadow: none !important;
		transform: none !important;
	}

	.psl-projects-page-inner .psl-project-result-image {
		width: 100% !important;
		max-width: none !important;
		aspect-ratio: 16 / 9 !important;
		margin: 0 !important;
		border-radius: 12px !important;
		box-shadow: none !important;
	}

	.psl-projects-page-inner .psl-project-result-content {
		display: flex !important;
		width: 100% !important;
		max-width: 760px !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 2px 0 0 !important;
		flex-direction: column !important;
		align-self: stretch !important;
	}

	.psl-projects-page-inner .psl-project-result-title {
		max-width: 760px !important;
		margin: 0 0 7px !important;
		font-size: clamp(1.25rem, 1.8vw, 1.75rem) !important;
		font-weight: 750 !important;
		letter-spacing: -.025em !important;
		line-height: 1.18 !important;
	}

	.psl-projects-page-inner .psl-project-result-meta {
		order: -1;
		max-width: 760px !important;
		margin: 0 0 7px !important;
		font-size: .78rem !important;
		line-height: 1.4 !important;
	}

	.psl-projects-page-inner .psl-project-result-summary {
		display: -webkit-box !important;
		max-width: 760px !important;
		margin: 0 0 12px !important;
		overflow: hidden !important;
		-webkit-box-orient: vertical !important;
		-webkit-line-clamp: 3 !important;
		line-clamp: 3 !important;
		font-size: .94rem !important;
		line-height: 1.55 !important;
	}

	/* Keep any final action link subtle, similar to a result title link. */
	.psl-projects-page-inner .psl-project-result-content > :last-child {
		margin-bottom: 0 !important;
	}

	.psl-projects-page-inner .psl-project-result-content a:not(.psl-project-result-title a) {
		width: fit-content;
		font-size: .88rem;
		font-weight: 750;
		text-decoration: none;
	}
}

/* Phones: preserve the stacked layout, simply remove the oversized card gaps. */
@media (max-width: 700px) {
	.recent-installations-page {
		padding-bottom: 54px !important;
	}

	.psl-projects-page-wide {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}

	.psl-projects-page-inner > .project-page-intro {
		margin-bottom: 20px !important;
		font-size: 1rem !important;
	}

	.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) {
		gap: 7px !important;
		padding-bottom: 10px !important;
		overflow-x: auto;
		flex-wrap: nowrap !important;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar)::-webkit-scrollbar {
		display: none;
	}

	.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) :where(button, a) {
		min-height: 36px !important;
		padding: 8px 13px !important;
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.psl-projects-page-inner .psl-project-results {
		gap: 15px !important;
	}

	.psl-projects-page-inner .psl-project-result {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		transform: none !important;
	}

	.psl-projects-page-inner .psl-project-result:hover {
		box-shadow: none !important;
		transform: none !important;
	}

	.psl-projects-page-inner .psl-project-result-image {
		width: 100% !important;
		max-width: none !important;
		aspect-ratio: 16 / 9 !important;
		margin: 0 !important;
		border-radius: 10px !important;
	}

	.psl-projects-page-inner .psl-project-result-content {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 10px 2px 2px !important;
	}

	.psl-projects-page-inner .psl-project-result-title {
		margin: 0 0 5px !important;
		font-size: clamp(1.12rem, 5.4vw, 1.35rem) !important;
		letter-spacing: -.02em !important;
		line-height: 1.2 !important;
	}

	.psl-projects-page-inner .psl-project-result-meta {
		margin: 0 0 6px !important;
		font-size: .75rem !important;
		line-height: 1.35 !important;
	}

	.psl-projects-page-inner .psl-project-result-summary {
		display: -webkit-box !important;
		margin: 0 0 8px !important;
		overflow: hidden !important;
		-webkit-box-orient: vertical !important;
		-webkit-line-clamp: 2 !important;
		line-clamp: 2 !important;
		font-size: .9rem !important;
		line-height: 1.5 !important;
	}
}

/* =========================================================
   VERANDA SPECIAL 1.1.6 — REMOVE FILTER/RESULT DIVIDER
   The projects plugin can add a top rule or generated divider
   before the first result. Keep the filter and listing visually
   connected without changing the result layout.
   ========================================================= */
.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) {
	padding-bottom: 0 !important;
	border-bottom: 0 !important;
}

.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar)::before,
.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar)::after,
.psl-projects-page-inner .psl-project-results::before,
.psl-projects-page-inner .psl-project-results::after,
.psl-projects-page-inner .psl-project-result:first-child::before,
.psl-projects-page-inner .psl-project-result:first-child::after {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	content: none !important;
}

.psl-projects-page-inner .psl-project-results,
.psl-projects-page-inner .psl-project-result:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
	box-shadow: none !important;
}

.psl-projects-page-inner .psl-project-listing > hr,
.psl-projects-page-inner .psl-project-results > hr:first-child,
.psl-projects-page-inner :where(.psl-filter-divider, .psl-project-divider) {
	display: none !important;
}

@media (max-width: 700px) {
	.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) {
		padding-bottom: 0 !important;
	}
}


/* =========================================================
   VERANDA SPECIAL 1.1.7 — SMALL FILTER/RESULT GAP
   Keep the divider removed while restoring a light visual
   pause between the filter controls and the first project.
   ========================================================= */
.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) {
	padding-bottom: 10px !important;
}

@media (max-width: 700px) {
	.psl-projects-page-inner :where(.psl-project-filters, .psl-filter-bar) {
		padding-bottom: 8px !important;
	}
}

/* =========================================================
   VERANDA SPECIAL 1.1.9 — LIVE PROJECT FILTERS
   The listing plugin renders filter links server-side. The child theme now
   swaps only the listing markup, preserving the viewport while results load.
   ========================================================= */
.psl-project-listing.is-filter-loading .psl-project-results {
	opacity: .48;
	pointer-events: none;
}

.psl-project-listing .psl-project-results {
	transition: opacity .18s ease;
}

.psl-project-listing.is-filter-loading .psl-project-filter {
	cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
	.psl-project-listing .psl-project-results {
		transition: none;
	}
}


/* =========================================================
   VERANDA SPECIAL 1.1.10 — PROJECT PAGE OUTER SPACING
   Tighten the space above the introductory sentence and below
   the final WhatsApp call-to-action without changing the list.
   ========================================================= */
body.veranda-projects-page .vs-page-content {
	padding-top: clamp(20px, 3vw, 38px) !important;
	padding-bottom: clamp(28px, 4vw, 52px) !important;
}

body.veranda-projects-page .recent-installations-page {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.veranda-projects-page .psl-listing-cta {
	margin-bottom: 0 !important;
}

@media (max-width: 700px) {
	body.veranda-projects-page .vs-page-content {
		padding-top: 18px !important;
		padding-bottom: 28px !important;
	}
}