/**
 * SeaSky project cards ticker. Scoped to .pcs-* only.
 * Same continuous seamless-loop pattern as the testimonials ticker:
 * bleeds past the section's side padding on both edges.
 */

.pcs-slider {
	position: relative;
	width: calc(100% + 160px);
	margin-left: -80px;
	margin-right: -80px;
	box-sizing: border-box;
}

.pcs-slider::before,
.pcs-slider::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 82px;
	z-index: 2;
	pointer-events: none;
}

.pcs-slider::before {
	left: 0;
	background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 86%);
}

.pcs-slider::after {
	right: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 86%);
}

/* Related Projects (compact, single-project template) sits on a colored
 * section background, not white — the edge fade doesn't apply here per Figma. */
.pcs-wrap--compact .pcs-slider::before,
.pcs-wrap--compact .pcs-slider::after {
	display: none;
}

/* Compact slider: exactly 3 cards across, contained (no full-bleed), with
   circular side arrows for navigation. */
.pcs-wrap--compact .pcs-slider {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.pcs-wrap--compact .pcs-slider__track {
	padding: 0;
	scroll-padding-left: 0;
}

.pcs-wrap--compact .pcs-card {
	flex: 0 0 calc((100% - 48px) / 3);
	width: calc((100% - 48px) / 3);
	scroll-snap-align: start;
}

.pcs-side-arrow {
	position: absolute;
	top: 37%;
	transform: translateY(-50%);
	z-index: 10;
	width: 51px;
	height: 51px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid #00657F;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.pcs-side-arrow:hover:not(:disabled) { background: #E2F7F9; }
.pcs-side-arrow:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
.pcs-side-arrow svg { display: block; }
.pcs-side-arrow--prev { left: -22px; }
.pcs-side-arrow--next { right: -22px; }

.pcs-slider__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	padding: 0 80px;
	-ms-overflow-style: none;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Start-aligned cards snap flush under the visual left edge (matches the
	   80px track padding), so both drag and arrow navigation settle cleanly
	   in the same place. */
	scroll-padding-left: 80px;
}

.pcs-slider__track::-webkit-scrollbar { display: none; }

.pcs-card {
	flex: 0 0 410px;
	width: 410px;
	/* start (not center): cards advance left-aligned like the design, and
	   navigation lands exactly on the snap point with no re-centering jump.
	   scroll-snap-stop:always is intentionally NOT set — that hard-stops at
	   slider keeps start alignment via its own rule above. */
	scroll-snap-align: center;
	background: #fff;
	/* Always a 2px border so selecting a card only changes its colour — no
	   width change, so nothing shifts. Light by default, blue when active. */
	border: 2px solid #E2F7F9;
	border-radius: 24px;
	box-shadow: 0 0 48px rgba(0, 0, 0, 0.09);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
	text-decoration: none;
	transition: border-color 0.25s ease;
}

/* Selected card: blue stroke that follows the current slide as you click
   through. The 1px box-shadow ring sits flush outside the recoloured border
   so the stroke reads ~2px with no layout shift (border-box keeps width). */
/* Selection + hover is a DESKTOP-ONLY enhancement. */
@media (min-width: 1024px) {
	.pcs-card.is-active,
	.pcs-card:hover {
		border-color: #26A5B8;
	}
	.pcs-slider__track:hover .pcs-card.is-active:not(:hover) {
		border-color: #E2F7F9;
	}
}

.pcs-card__image {
	position: relative;
	height: 300px;
	border-radius: 12px;
	background-size: cover;
	background-position: center;
	background-color: #E2F7F9;
	display: flex;
	align-items: flex-end;
	padding: 16px 24px;
	box-sizing: border-box;
}

.pcs-card__category {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #E2F7F9;
	border-radius: 1000px;
	padding: 0 12px;
	height: 28px;
	font-family: 'Muli', 'Mulish', sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: 0.1667em;
	text-transform: uppercase;
	color: #021432;
	white-space: nowrap;
}

.pcs-card__category svg { width: 16px; height: 16px; flex-shrink: 0; }

/* The card photos are pre-composed exports that already carry their own
   dots (bottom-centre) baked into the image, so the theme's decorative
   top-right dots are a duplicate — hidden here to leave only the bottom set. */
.pcs-card__dots {
	display: none;
}

.pcs-card__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pcs-card__title {
	margin: 0;
	font-family: 'Muli', 'Mulish', sans-serif;
	font-weight: 600;
	font-size: 24px;
	/* relative so two-line titles get real spacing (was 18px — tighter than
	   the 24px text, which crammed wrapped lines together) and it scales at
	   every breakpoint. */
	line-height: 1.2;
	letter-spacing: 0.0058em;
	text-transform: uppercase;
	color: #26A5B8;
}

.pcs-card__location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #F2705D;
	color: #fff;
	border-radius: 1440px;
	padding: 6px 12px;
	font-family: 'Muli', 'Mulish', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1667em;
	text-transform: uppercase;
	width: fit-content;
}

.pcs-card__location svg { width: 12px; height: 12px; flex-shrink: 0; }

.pcs-card__excerpt {
	margin: 0;
	font-family: 'Muli', 'Mulish', sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: -0.025em;
	color: #00657F;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pcs-card__cta {
	margin-top: auto;
	padding-top: 4px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Mulish', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1667em;
	text-transform: uppercase;
	color: #021432;
	border-top: 2px solid #26A5B8;
	padding-top: 12px;
}

.pcs-card__cta svg { width: 16px; height: 8px; }

/* Hero location / category pills (single project page) */
.ppm-row {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.ppm-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 1440px;
	padding: 6px 12px;
	font-family: 'Muli', 'Mulish', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1667em;
	text-transform: uppercase;
}

.ppm-pill--location { background: #F2705D; color: #fff; }
.ppm-pill--location svg { width: 12px; height: 12px; }
.ppm-pill--category { background: #E2F7F9; color: #021432; }
.ppm-pill--category svg { width: 16px; height: 16px; }

/* Hero before/after toggle image */
.pht-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	height: 100%;
	justify-content: center;
}

.pht-image {
	width: 100%;
	aspect-ratio: 7 / 4;
	border-radius: 12px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: #E2F7F9;
	flex-shrink: 0;
}

.pht-toggle {
	display: flex;
	gap: 12px;
}

.pht-btn {
	padding: 0 12px;
	height: 24px;
	border-radius: 1000px;
	border: none;
	font-family: 'Muli', 'Mulish', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1667em;
	text-transform: uppercase;
	cursor: pointer;
	background: #E2F7F9;
	color: #00657F;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pht-btn--active { background: #26A5B8; color: #fff; }

/* Room-by-room before/after gallery */
.prg-rows {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.prg-row {
	background: #fff;
	border: 1px solid #E2F7F9;
	border-radius: 24px;
	box-shadow: 0 0 48px rgba(0, 0, 0, 0.09);
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	box-sizing: border-box;
}

.prg-images {
	display: flex;
	width: 100%;
	gap: 24px;
}

.prg-image {
	position: relative;
	flex: 1 1 0;
	height: 363px;
	background-size: cover;
	background-position: center;
	background-color: #E2F7F9;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 16px 24px;
	box-sizing: border-box;
}

.prg-image--before { border-radius: 12px 0 0 12px; justify-content: flex-end; }
.prg-image--after { border-radius: 0 12px 12px 0; justify-content: flex-start; }
.prg-images .prg-image:only-child { border-radius: 12px; }

.prg-tag {
	display: inline-flex;
	align-items: center;
	border-radius: 1000px;
	padding: 0 12px;
	height: 24px;
	font-family: 'Muli', 'Mulish', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1667em;
	text-transform: uppercase;
}

.prg-tag--before { background: #26A5B8; color: #fff; }
.prg-tag--after { background: #F2705D; color: #fff; }

.pp-wave-divider {
	width: 100%;
	height: 15px;
	background-image: url("../images/wave-divider.svg");
	background-repeat: repeat-x;
	background-position: left center;
	background-size: auto 15px;
}

.prg-label {
	margin: 0;
	width: 100%;
	text-align: center;
	font-family: 'Muli', 'Mulish', sans-serif;
	font-weight: 600;
	font-size: 24px;
	/* relative so two-line titles get real spacing (was 18px — tighter than
	   the 24px text, which crammed wrapped lines together) and it scales at
	   every breakpoint. */
	line-height: 1.2;
	letter-spacing: 0.0058em;
	text-transform: uppercase;
	color: #26A5B8;
}

/* Click-through pagination controls (Figma "Projects Slider" component) */
.pcs-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
}

.pcs-page-number {
	font-family: 'Lora', serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 30px;
	letter-spacing: -0.018em;
	text-transform: uppercase;
	color: #26A5B8;
}

.pcs-controls-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	width: 100%;
}

.pcs-arrow {
	flex-shrink: 0;
	width: 51px;
	height: 51px;
	border-radius: 100px;
	border: 1px solid #00657F;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.pcs-arrow:hover:not(:disabled) { background: #E2F7F9; }
.pcs-arrow:disabled { opacity: 0.35; cursor: default; }
.pcs-arrow svg { width: 24px; height: 12px; display: block; }

.pcs-progress-track {
	position: relative;
	width: 508px;
	max-width: 100%;
	height: 1px;
	background: #E2F7F9;
}

.pcs-progress-thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 1px;
	background: #26A5B8;
	transition: left 0.2s ease, width 0.2s ease;
}

/* Tablet (Figma spec, dev mode): fixed 344px card, 16px padding (down
   from desktop's 24), 16px gap between cards in the track (down from 24).
   Radius/border/shadow are unchanged from the desktop base rule. */
@media (min-width: 640px) and (max-width: 1023px) {
	.pcs-slider__track { gap: 16px; }
	.pcs-card { flex-basis: 344px; width: 344px; padding: 16px; scroll-snap-align: start; }
}

/* Room-by-room before/after gallery (single-project page): tablet + mobile
   spec (Figma dev mode, both breakpoints share these exact values) — row
   padding 24→16px, gap between the two images 24→16px, gap between rows
   24→32px, room-label font-size 24→20px. Only .prg-image height differs
   between the two (tablet keeps the before/after images side-by-side and
   shorter; mobile stacks them — already handled below — so each stacked
   image can be a little taller). None of this has any breakpoint override
   today, so every property below is new, not a value change. */
@media (max-width: 1023px) {
	.prg-rows { gap: 32px; }
	.prg-row { padding: 16px; }
	.prg-images { gap: 16px; }
	.prg-label { font-size: 20px; }
}

@media (min-width: 640px) and (max-width: 1023px) {
	.prg-image { height: 196px; }
}

/* No edge fade on tablet/mobile — the white gradient at the slider's left
   and right edges is desktop-only. */
@media (max-width: 1023px) {
	.pcs-slider::before,
	.pcs-slider::after {
		display: none;
	}
}

/* Mobile (Figma spec, dev mode): fixed 366px card (fits exactly within a
   398px mobile frame minus 16px track padding each side, so a single card
   shows per view with no peek), 16px padding, and align-items:center on
   both the card and its body — title/location pill/excerpt are centered
   here, unlike the left-aligned tablet/desktop layout. Track also gets
   24px vertical padding so the card's box-shadow is not clipped. */
@media (max-width: 639px) {
	.pcs-slider { width: 100%; margin-left: 0; margin-right: 0; }
	.pcs-slider__track { padding: 24px 16px; scroll-padding-left: 16px; }
	.pcs-card { flex-basis: 366px; width: 366px; padding: 16px; align-items: center; scroll-snap-align: start; }
	.pcs-card__image { align-self: stretch; }
	.pcs-card__body { align-items: center; text-align: center; align-self: stretch; }
	.pcs-progress-track { width: 200px; }
	.prg-images { flex-direction: column; }
	/* .prg-image has flex:1 1 0 for the side-by-side (row) layout above; once
	   the container switches to flex-direction:column here, height becomes
	   the flex main axis and that flex-basis:0 silently overrides the
	   explicit height below (same class of bug as the mobile CTA button
	   fix earlier). flex:none stops it from fighting the explicit height. */
	.prg-image { flex: none; height: 220px; }
	.prg-image--before { border-radius: 12px 12px 0 0; }
	.prg-image--after { border-radius: 0 0 12px 12px; }
	/* Overview before/after toggle image (Figma dev mode mobile spec): a
	   notably taller crop than the 7:4 used at tablet/desktop — roughly
	   398:321 at the mobile content width, not just a height tweak. */
	.pht-image { aspect-ratio: 398 / 321; }
}

/* Related Projects (compact) responsive: 3 across on desktop, 2 on tablet,
   1 on mobile — with the side arrows kept on-screen. */
@media (min-width: 640px) and (max-width: 1023px) {
	.pcs-wrap--compact .pcs-card {
		flex: 0 0 calc((100% - 24px) / 2);
		width: calc((100% - 24px) / 2);
	}
}

@media (max-width: 639px) {
	.pcs-wrap--compact .pcs-card {
		flex: 0 0 100%;
		width: 100%;
	}
	.pcs-side-arrow { width: 42px; height: 42px; }
	.pcs-side-arrow--prev { left: 6px; }
	.pcs-side-arrow--next { right: 6px; }
}