/*
 * Project — styles specific to the sfs_project CPT.
 *
 * Used on:
 *   - archive-sfs_project.php       (filterable projects listing)
 *   - single-sfs_project.php         (hero image, title strip, intro+meta,
 *                                     solutions strip, testimonial, sign-off)
 *   - template-projects-option4.php  (legacy "view all projects" template)
 *
 * Depends on foundation.css + components.css.
 */

/* ──────────────────────────────────────────────────────────────────
 * Projects archive — filter + tiled grid
 * ────────────────────────────────────────────────────────────────── */
.projects-page-filters {
	background: var(--colour-white);
	padding: 0 0 1.5rem;
}

.projects-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.65rem;
	align-items: center;
}

.projects-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--font-heading);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.55rem 0.9rem;
	border-radius: 4px;
	border: 1px solid var(--colour-border);
	background: var(--colour-cream);
	color: var(--urban-grey);
	cursor: pointer;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
}

/* Colour swatch — each service button carries its assigned colour via the
   inline --svc-colour custom property. The "All" button has no swatch. */
.projects-filter-btn::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--svc-colour, var(--colour-text-light));
	flex-shrink: 0;
}

.projects-filter-btn--all::before {
	display: none;
}

.projects-filter-btn:hover,
.projects-filter-btn:focus-visible {
	border-color: var(--svc-colour, var(--heritage-green));
	color: var(--svc-colour, var(--heritage-green));
	outline: none;
}

.projects-filter-btn.is-active {
	background: var(--svc-colour, var(--heritage-green));
	color: var(--colour-white);
	border-color: var(--svc-colour, var(--heritage-green));
}

.projects-filter-btn.is-active::before {
	background: var(--colour-white);
}

.projects-page-grid-wrap {
	padding: 3rem 0 4rem;
	background: var(--colour-cream);
}

/* Projects archive: drop the hero underline that sits directly above the
   filter bar. Service pages reuse .projects-page-hero and keep theirs. */
.post-type-archive-sfs_project .projects-page-hero,
.page-template-template-projects-archive .projects-page-hero {
	border-bottom: none;
}

/* ──────────────────────────────────────────────────────────────────
 * Bottom nav CTA — the "All …" + "Discuss your requirements" buttons at the
 * foot of project / service / sector singles. Centred, with room beneath so
 * they don't crowd the testimonials section.
 * ────────────────────────────────────────────────────────────────── */
.project-single__nav {
	padding: 3.5rem 0 4.5rem;
}
.project-single__nav .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}
/* The two buttons already sit side by side; the flex gap handles spacing, so
 * neutralise the global .btn + .btn-secondary left margin here. */
.project-single__nav .btn + .btn {
	margin-left: 0;
}

/* Services & Sectors: the intro copy runs the full column width — no space is
 * reserved on the right (the watermark idea was dropped). Projects keep the
 * narrower, more readable measure. */
.single-sfs_service .service-single__body .project-single__content,
.single-sfs_service .project-single__content,
.single-sfs_sector .project-single__content {
	max-width: none;
}

/* Isotope owns the outer .project-card transform for masonry layout; the inner
   link carries the fade-in + hover transforms so the two transform systems
   never collide. This removes the card-repositioning drift when filtering. */
#projectsFilteredGrid .project-card__link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.projects-page-count {
	font-size: 0.8rem;
	color: var(--colour-text-light);
	margin-bottom: 1.5rem;
}

.projects-page-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.project-tile {
	background: var(--colour-white);
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--colour-border);
	transition: box-shadow 0.35s;
}

.project-tile:hover {
	box-shadow: 0 10px 36px rgba(0, 0, 0, 0.08);
}

.project-tile__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	filter: saturate(0.92) contrast(1.02);
}

.project-tile__body {
	padding: 1.35rem 1.5rem 1.5rem;
}

.project-tile__title {
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--heritage-green);
	margin-bottom: 0.45rem;
	text-transform: none;
	letter-spacing: -0.02em;
}

.project-tile__meta {
	font-size: 0.82rem;
	color: var(--colour-text-light);
	line-height: 1.5;
	margin: 0;
}

/* ──────────────────────────────────────────────────────────────────
 * Project single — ① Hero image
 * Full-width photo, no overlay, no text.
 * ────────────────────────────────────────────────────────────────── */
.project-hero-image {
	width: 100%;
	overflow: hidden;
	aspect-ratio: 16 / 6;
	min-height: 200px;
	background: #111;
}

.project-hero-image__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ──────────────────────────────────────────────────────────────────
 * Project single — ② Title strip
 * Solid heritage-green bar beneath the hero image.
 * ────────────────────────────────────────────────────────────────── */
.project-title-strip {
	background: var(--heritage-green);
	color: var(--colour-white);
	padding: 2rem 0 2.25rem;
}

.project-title-strip__breadcrumb {
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 1rem;
}

.project-title-strip__breadcrumb a {
	color: rgba(255, 255, 255, 0.7);
}

.project-title-strip__breadcrumb a:hover {
	color: var(--colour-white);
}

.project-title-strip__breadcrumb [aria-current="page"] {
	color: rgba(255, 255, 255, 0.85);
}

.project-title-strip__title {
	font-size: clamp(1.85rem, 3.6vw, 2.85rem);
	font-weight: 600;
	line-height: 1.12;
	color: var(--colour-white);
	margin-bottom: 0.85rem;
}

.project-title-strip__meta {
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
}

/* ──────────────────────────────────────────────────────────────────
 * Title strip — emblem variant.
 * When a Page hides its banner image, the strip would otherwise be a
 * flat block of green. Drop the angled emblem behind the text (same
 * treatment as the project single intro) so the green bar crops most
 * of it and it reads as a subtle watermark rather than a hard slab.
 * ────────────────────────────────────────────────────────────────── */
.project-title-strip--emblem {
	position: relative;
	overflow: hidden;
}

.project-title-strip__emblem {
	position: absolute;
	right: -4%;
	top: 50%;
	width: min(60vw, 480px);
	transform: translateY(-50%) rotate(-12deg);
	pointer-events: none;
	z-index: 0;
}

.project-title-strip__emblem-img {
	width: 100%;
	height: auto;
	display: block;
	/* White silhouette, faint, so it lifts the green without competing. */
	filter: brightness(0) invert(1);
	opacity: 0.07;
}

.project-title-strip--emblem .container {
	position: relative;
	z-index: 1;
}

@media (max-width: 768px) {
	.project-title-strip__emblem {
		right: -12%;
		width: min(70vw, 360px);
	}
}

/* ──────────────────────────────────────────────────────────────────
 * Project single — ③ Intro + meta
 * Body text left, project details right.
 * ────────────────────────────────────────────────────────────────── */
.project-intro {
	position: relative;
	overflow: hidden;
	padding: 4rem 0;
}

.project-intro-watermark {
	position: absolute;
	right: -5%;
	top: 50%;
	width: min(72vw, 640px);
	transform: translateY(-50%) rotate(-12deg);
	pointer-events: none;
	z-index: 0;
}

.project-intro-watermark__parallax { will-change: transform; }

.project-intro-watermark__img {
	width: 100%;
	height: auto;
	display: block;
	filter: brightness(0);
	opacity: 0.055;
}

.project-intro .container {
	position: relative;
	z-index: 1;
}

/* Side-by-side: ~60% body text + ~40% meta. */
.project-intro__layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 4rem;
	align-items: start;
}

.project-intro__body {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--colour-text);
}

.project-intro__body p { margin-bottom: 1rem; }
.project-intro__body p:last-child { margin-bottom: 0; }

.project-intro__body h2,
.project-intro__body h3,
.project-intro__body h4 {
	color: var(--heritage-green);
	margin: 1.5rem 0 0.75rem;
}

.project-intro__body ul,
.project-intro__body ol {
	padding-left: 1.5rem;
	margin-bottom: 1rem;
}

/* Project details DL — stacked label/value pairs. */
.project-details {
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--heritage-green);
	padding-top: 1.25rem;
}

.project-details__item {
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--colour-border);
}

.project-details__item:last-child {
	border-bottom: none;
}

.project-details__label {
	display: block;
	font-family: var(--font-heading);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--heritage-green);
	margin-bottom: 0.2rem;
}

.project-details__value {
	display: block;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--colour-text);
	line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────────
 * Project single — ④ Solutions Provided strip
 * Heritage-green band with white service-type chips.
 * ────────────────────────────────────────────────────────────────── */
.project-solutions-strip {
	background: var(--heritage-green);
	padding: 1.5rem 0;
}

.project-solutions-strip__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}

.project-solutions-strip__label {
	font-family: var(--font-heading);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	white-space: nowrap;
	flex-shrink: 0;
}

/* Override service-type colour chips — all white on the green band. */
.project-solutions-strip .service-tag,
.project-solutions-strip .service-tag--cleaning,
.project-solutions-strip .service-tag--survey,
.project-solutions-strip .service-tag--restoration,
.project-solutions-strip .service-tag--decorating,
.project-solutions-strip .service-tag--additional {
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--colour-white);
}

/* ──────────────────────────────────────────────────────────────────
 * Project single — Testimonial pull-quote
 * Heritage-green background; quote in white.
 * ────────────────────────────────────────────────────────────────── */
.project-testimonial {
	position: relative;
	overflow: hidden;
	padding: 4.5rem 1.5rem 5rem;
	background: var(--heritage-green);
}

/* Decorative oversized opening quote — watermark behind the copy */
.project-testimonial::before {
	content: '\201C';
	position: absolute;
	top: -0.18em;
	left: -0.06em;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(32rem, 58vw, 52rem);
	font-weight: 400;
	line-height: 1;
	color: var(--colour-white);
	opacity: 0.06;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.project-testimonial .container {
	position: relative;
	z-index: 1;
}

.project-testimonial__quote {
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
	border: none;
	padding: 0;
}

.project-testimonial__quote p {
	font-family: var(--font-quote);
	font-size: clamp(1.2rem, 2.2vw, 1.75rem);
	font-style: italic;
	font-weight: 300;
	line-height: 1.32;
	color: var(--colour-white);
	letter-spacing: 0.02em;
	margin-bottom: 1.25rem;
}

.project-testimonial__cite {
	display: block;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-style: normal;
	color: rgba(255, 255, 255, 0.65);
	letter-spacing: 0.06em;
}

/* ──────────────────────────────────────────────────────────────────
 * Project single — Sign-off
 * Global block on every project post; editable via Projects → Project Options.
 * Typography inherits .p-large from foundation.css.
 * ────────────────────────────────────────────────────────────────── */
.project-signoff {
	padding: 3.5rem 0;
	background: var(--colour-cream);
	border-top: 1px solid var(--colour-border);
}

.project-signoff__content {
	max-width: 780px;
	margin: 0 auto;
	color: var(--colour-text);
	text-align: center;
}

/* --large modifier: render *all* paragraphs in this container at the
 * .p-large size so the WYSIWYG editor doesn't have to mark each one
 * individually. Pulls from the same tokens as foundation's .p-large. */
.project-signoff__content--large p {
	font-size: var(--font-size-large);
	line-height: var(--line-height-large);
}

.project-signoff__content a {
	color: var(--heritage-green);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.project-signoff__content a:hover { color: var(--heritage-green-deep); }

.project-signoff__content strong { color: var(--heritage-green); }

/* ──────────────────────────────────────────────────────────────────
 * Responsive
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.projects-page-grid { grid-template-columns: repeat(2, 1fr); }
	#projectsFilteredGrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.project-intro__layout {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.project-intro-watermark {
		right: -12%;
		width: min(95vw, 520px);
		transform: translateY(-48%) rotate(-10deg);
	}

	.project-intro-watermark__img { opacity: 0.045; }
}

@media (max-width: 768px) {
	.projects-page-grid { grid-template-columns: 1fr; }
	#projectsFilteredGrid { grid-template-columns: 1fr; }
	.projects-filters { gap: 0.45rem; }

	.project-intro { padding: 3rem 0; }
}

@media (max-width: 640px) {
	.project-solutions-strip__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
}

/* ──────────────────────────────────────────────────────────────────
 * Project single — ④ Solutions Provided (linked service posts)
 *
 * Reuses the sitewide .service-tag pill style from foundation.css.
 * The dynamic sfs_output_service_colour_css() in wp_head handles the
 * per-slug background colour; no extra colour rules needed here.
 * ────────────────────────────────────────────────────────────────── */
.project-solutions {
	padding: 2.5rem 0 4rem;
	background: var(--colour-white);
	border-top: 1px solid var(--colour-border);
	border-bottom: 1px solid var(--colour-border);
}


.project-solutions__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* Allow .service-tag links to be clickable without extra overrides */
a.service-tag {
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

a.service-tag:hover {
	opacity: 0.85;
	transform: translateY(-1px);
}

/* Small chevron on the clickable solution pills, nudging on hover. */
.service-tag__arrow {
	margin-left: 0.35em;
	opacity: 0.65;
	font-weight: 700;
	display: inline-block;
	transition: transform 0.2s ease;
}

a.service-tag:hover .service-tag__arrow {
	transform: translateX(2px);
}