/* =========================================================================
   South West Floor Care — case studies

   Loaded ONLY on the case studies page (see swfc_is_case_studies_template()
   in helpers.php). Nothing in here touches an existing class: every selector
   is new and prefixed `swfc-cs`, so home.css keeps working exactly as it did.

   Brand values come from the custom properties Site Settings prints, with a
   hard-coded fallback on each so the page is right even before they arrive.
   ====================================================================== */

.swfc-cs {
	--cs-navy: var(--swfc-navy, #14204f);
	--cs-green: var(--swfc-green, #6f9227);
	--cs-green-ink: var(--swfc-green-ink, #5c7920);
	--cs-green-dark: var(--swfc-green-dark, #49611a);
	--cs-cream: var(--swfc-cream, #f6f4ef);
	--cs-body: var(--swfc-body, #414c63);
	--cs-muted: #5c6880;
	--cs-line: rgba(1, 35, 86, .12);
	--cs-radius: var(--swfc-radius-card, 22px);
	--cs-shadow: 0 18px 48px rgba(20, 32, 79, .1);
	--cs-shadow-lift: 0 28px 80px rgba(20, 32, 79, .16);
	--cs-gutter: var(--swfc-gutter, clamp(18px, 4vw, 32px));
	--cs-width: var(--swfc-container, 1200px);
	--cs-pad: var(--swfc-section-y, 72px);

	font-family: var(--swfc-font-display, inherit);
	color: var(--cs-body);
}

.swfc-cs *,
.swfc-cs *::before,
.swfc-cs *::after {
	box-sizing: border-box;
}

.swfc-cs__shell {
	width: 100%;
	max-width: var(--cs-width);
	margin-inline: auto;
	padding-inline: var(--cs-gutter);
}

.swfc-cs__band {
	padding-block: var(--cs-pad);
	background: var(--cs-band-bg, #fff);
}

/* ---------- Hero ---------- */

/* The hero itself is now the site-wide component in home.css
   (template-parts/shared/page-hero.php), so this page no longer styles one.
   What is left below belongs only to this page: the optional note chip and
   the "N jobs below" scroll cue, both of which sit inside that shared hero. */

.swfc-cs-hero__note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 56ch;
	margin-top: 0;
	padding: 16px 20px;
	border-radius: 14px;
	border-left: 4px solid var(--swfc-green-light, #a9c46c);
	background: rgba(255, 255, 255, .08);
	font-size: 15.5px;
	line-height: 1.6;
	color: #fff;
	backdrop-filter: blur(2px);
}

.swfc-cs-hero__note p { margin: 0; }
.swfc-cs-hero__note svg { flex: none; margin-top: 2px; color: var(--swfc-green-light, #a9c46c); }

/* Tells you there is something below the fold, and jumps you to it. */
.swfc-cs-hero__cue {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 0; /* The shared hero already gaps its children by --swfc-stack. */
	padding: 10px 10px 10px 20px;
	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease;
}

.swfc-cs-hero__cue:hover,
.swfc-cs-hero__cue:focus {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
	text-decoration: none;
}

.swfc-cs-hero__cue:focus-visible {
	outline: 3px solid var(--swfc-focus, #49611a);
	outline-offset: 3px;
}

.swfc-cs-hero__cue-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cs-green-ink);
	animation: swfc-cs-nudge 2.4s ease-in-out infinite;
}

@keyframes swfc-cs-nudge {
	0%, 72%, 100% { transform: translateY(0); }
	84%           { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
	.swfc-cs-hero__cue-arrow { animation: none; }
}

/* ---------- The list ---------- */

.swfc-cs-list {
	--cs-band-bg: #fff;
}

.swfc-cs-list__items {
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 4vw, 56px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.swfc-cs-item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	border-radius: var(--cs-radius);
	background: #fff;
	box-shadow: var(--cs-shadow-lift);
}

@media (min-width: 900px) {

	.swfc-cs-item {
		grid-template-columns: 1.02fr .98fr;
		align-items: stretch;
	}

	/* Every other job leads with the words instead of the picture. */
	.swfc-cs-item--flip .swfc-cs-item__media { order: 2; }
}

.swfc-cs-item__media {
	position: relative;
	min-height: 260px;
	background: #e8e4dc;
}

.swfc-cs-item__body {
	/* Anchors the index number. Without this it positions against the whole
	   panel, which on a flipped card puts it over the photo where it is
	   invisible. */
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--swfc-stack);
	padding: var(--swfc-card-pad);
}

.swfc-cs-item__index {
	position: absolute;
	top: clamp(18px, 2vw, 26px);
	right: clamp(20px, 2.4vw, 32px);
	font-size: clamp(40px, 5vw, 66px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	color: rgba(20, 32, 79, .07);
	pointer-events: none;
}

/* The index stays top-right in both directions. Mirroring it on the flipped
   card put it straight under the eyebrow, which reads as one run-on line. */

.swfc-cs-item__eyebrow {
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cs-green-ink);
}

.swfc-cs-item__title {
	margin: 0;
	max-width: 22ch;
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: var(--swfc-heading-weight, 800);
	letter-spacing: var(--swfc-heading-track, -.025em);
	line-height: 1.12;
	color: var(--cs-navy);
}

/* ---------- Meta chips ---------- */

.swfc-cs-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.swfc-cs-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--cs-cream);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cs-navy);
}

.swfc-cs-chip__label {
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 10.5px;
	color: var(--cs-muted);
}

/* ---------- Problem / work / result ---------- */

.swfc-cs-item__blocks {
	display: flex;
	flex-direction: column;
	gap: var(--swfc-stack);
	margin-top: 0;
	padding-top: var(--swfc-stack);
	border-top: 1px solid var(--cs-line);
}

.swfc-cs-block__label {
	display: block;
	margin: 0 0 5px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cs-green-ink);
}

.swfc-cs-block__text {
	font-size: 15.5px;
	line-height: 1.62;
}

.swfc-cs-block__text p { margin: 0 0 var(--swfc-stack); }
.swfc-cs-block__text > :last-child { margin-bottom: 0; }

.swfc-cs-block--result .swfc-cs-block__text {
	font-weight: 600;
	color: var(--cs-navy);
}

/* ---------- Client quote ---------- */

.swfc-cs-quote {
	margin: 0;
	padding: 18px 20px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--cs-green) 8%, #fff);
	color: var(--cs-navy);
}

.swfc-cs-quote__text {
	margin: 0;
	font-size: 15.5px;
	font-style: italic;
	line-height: 1.6;
}

.swfc-cs-quote__by {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--cs-green-ink);
}

/* ---------- Before / after slider ---------- */

.swfc-cs-compare {
	--cs-pos: 50%;
	position: relative;
	height: 100%;
	min-height: 260px;
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
	background: #e8e4dc;
}

@media (max-width: 899px) {
	.swfc-cs-compare { aspect-ratio: 4 / 3; height: auto; }
}

.swfc-cs-compare__pane {
	position: absolute;
	inset: 0;
}

.swfc-cs-compare__pane img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swfc-cs-compare__pane--after {
	clip-path: inset(0 0 0 var(--cs-pos));
}

.swfc-cs-compare__tag {
	position: absolute;
	bottom: 14px;
	z-index: 3;
	padding: 6px 13px;
	border-radius: 999px;
	background: rgba(20, 32, 79, .82);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #fff;
	backdrop-filter: blur(3px);
}

.swfc-cs-compare__tag--before { left: 14px; }
.swfc-cs-compare__tag--after { right: 14px; }

.swfc-cs-compare__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--cs-pos);
	z-index: 4;
	width: 3px;
	margin-left: -1.5px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(20, 32, 79, .12);
	pointer-events: none;
}

.swfc-cs-compare__grip {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 46px;
	height: 46px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--cs-green-ink);
	box-shadow: 0 6px 18px rgba(20, 32, 79, .3);
	color: #fff;
}

.swfc-cs-compare__grip::before,
.swfc-cs-compare__grip::after {
	content: "";
	width: 0;
	height: 0;
	border-block: 5px solid transparent;
}

.swfc-cs-compare__grip::before { border-right: 6px solid currentColor; }
.swfc-cs-compare__grip::after { border-left: 6px solid currentColor; }

/* The range input is the real control — it brings keyboard and screen-reader
   support with it. It sits invisible on top of the whole image. */
.swfc-cs-compare__range {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	cursor: ew-resize;
	opacity: 0;
}

.swfc-cs-compare__range::-webkit-slider-thumb {
	appearance: none;
	width: 48px;
	height: 100%;
	cursor: ew-resize;
}

.swfc-cs-compare__range::-moz-range-thumb {
	width: 48px;
	height: 100%;
	border: 0;
	background: transparent;
	cursor: ew-resize;
}

.swfc-cs-compare__range:focus-visible ~ .swfc-cs-compare__divider .swfc-cs-compare__grip {
	outline: 3px solid var(--swfc-focus, #49611a);
	outline-offset: 3px;
}

/* A single photo, where there is no before to compare against. */
.swfc-cs-item__photo {
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
	display: block;
}

@media (max-width: 899px) {
	.swfc-cs-item__photo { aspect-ratio: 4 / 3; height: auto; }
}

.swfc-cs-item__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 260px;
	padding: var(--swfc-card-pad);
	background: var(--cs-cream);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cs-muted);
	text-align: center;
}

/* ---------- Empty state (editors only) ---------- */

.swfc-cs-empty {
	padding: var(--swfc-card-pad);
	border: 2px dashed var(--cs-line);
	border-radius: var(--cs-radius);
	background: var(--cs-cream);
	text-align: center;
}

.swfc-cs-empty__badge {
	display: inline-block;
	margin-bottom: var(--swfc-stack);
	padding: 6px 14px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cs-green) 14%, #fff);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--cs-green-dark);
}

.swfc-cs-empty__title {
	margin: 0 0 var(--swfc-stack);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--cs-navy);
}

.swfc-cs-empty__text {
	max-width: 46ch;
	margin: 0 auto;
	font-size: 15.5px;
	line-height: 1.6;
}

/* ---------- Closing band ---------- */

.swfc-cs-cta {
	--cs-band-bg: var(--cs-navy);
	color: rgba(255, 255, 255, .82);
}

.swfc-cs-cta__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
}

@media (min-width: 860px) {
	.swfc-cs-cta__inner { grid-template-columns: 1.1fr auto; }
}

/* Dark navy band, so the focus ring flips to white like the other dark bands
   in home.css. */
.swfc-cs-cta { --swfc-focus: #fff; }

/* #work is linked from the hero cue and from every service page's case study
   block, but it is not a .swfc-section so it never picked up the site's anchor
   offset and landed under the sticky header. */
.swfc-cs-list { scroll-margin-top: var(--swfc-anchor-offset, 90px); }

.swfc-cs-cta__title {
	margin: 0 0 var(--swfc-stack);
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: var(--swfc-heading-weight, 800);
	letter-spacing: var(--swfc-heading-track, -.025em);
	line-height: 1.1;
	color: #fff;
}

.swfc-cs-cta__text {
	max-width: 52ch;
	font-size: 16px;
	line-height: 1.6;
}

.swfc-cs-cta__text p { margin: 0; }

.swfc-cs-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.swfc-cs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* Same face as the site-wide .swfc-btn, down to the border width and
	   line-height — a case study button sits beside the same CTA bands. */
	padding: 16px 32px;
	border: 1.5px solid transparent;
	border-radius: var(--swfc-radius-button, 999px);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.swfc-cs-btn:hover { transform: translateY(-2px); text-decoration: none; }

.swfc-cs-btn:focus-visible {
	outline: 3px solid var(--swfc-focus, #49611a);
	outline-offset: 3px;
}

.swfc-cs-btn--primary { background: #fff; color: var(--cs-navy); }
.swfc-cs-btn--primary:hover { background: var(--cs-cream); color: var(--cs-navy); }

.swfc-cs-btn--ghost { border-color: rgba(255, 255, 255, .6); color: #fff; }
.swfc-cs-btn--ghost:hover { background: #fff; color: var(--cs-navy); }

@media (prefers-reduced-motion: reduce) {

	.swfc-cs *,
	.swfc-cs *::before,
	.swfc-cs *::after {
		transition-duration: .01ms !important;
	}
}