/**
 * Homepage Selected Work section — Figma nodes 23:4254, 23:4182.
 */

.sp-selected-work {
	padding: var(--sp-selected-work-pad-top) 0 var(--sp-selected-work-pad-bottom);
	background-color: var(--spaciefy-black);
	color: var(--spaciefy-white);
}

.sp-selected-work__inner {
	display: flex;
	flex-direction: column;
}

.sp-selected-work__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-selected-work-header-gap);
	margin-bottom: var(--sp-selected-work-header-bottom);
}

.sp-selected-work__heading {
	margin: 0;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-selected-work-heading-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--sp-selected-work-heading-lh, 0.98);
	color: var(--spaciefy-white);
}

.sp-selected-work__subtext {
	width: 100%;
	max-width: var(--sp-selected-work-subtext-max);
	margin: 0;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-selected-work-subtext-size);
	font-style: normal;
	font-weight: 300;
	line-height: var(--sp-selected-work-subtext-lh, 1.48562);
	letter-spacing: var(--sp-selected-work-subtext-tracking, 0.66px);
	color: #fff;
	text-align: right;
}

.sp-selected-work__divider {
	width: 100%;
	height: 1px;
	margin-bottom: var(--sp-selected-work-list-top);
	background: #fff;
	opacity: 0.5;
}

.sp-selected-work__grid {
	margin: 0;
}

.sp-selected-work__footer {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--sp-selected-work-footer-top);
}

.sp-selected-work__footer-cta {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

@media (max-width: 1040px) {
	.sp-selected-work__subtext {
		max-width: min(535px, 35vw);
	}
}

@media (max-width: 992px) {
	.sp-selected-work__header {
		flex-direction: column;
	}

	.sp-selected-work__subtext {
		max-width: none;
		text-align: left;
	}
}

@media (max-width: 480px) {
	.sp-selected-work__header {
		gap: 1rem;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile — 768px and below.
 *
 * The design runs heading, subtext and then straight into the cards, with no
 * rule between the header and the list.
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.sp-selected-work {
		--sp-selected-work-heading-size: clamp(22px, calc(1.3115vw + 18.727px), 28.8px);
		--sp-selected-work-heading-lh: 1.14;
		--sp-selected-work-subtext-size: clamp(13px, calc(0.765vw + 10.93px), 16.8px);
		--sp-selected-work-subtext-lh: 1.55;
		--sp-selected-work-header-gap: clamp(12px, calc(0.9vw + 10px), 18px);
		--sp-selected-work-header-bottom: clamp(24px, calc(1.4vw + 18px), 32px);
		--sp-selected-work-footer-top: clamp(20px, calc(1.4vw + 16px), 28px);
	}

	.sp-selected-work__header {
		gap: var(--sp-selected-work-header-gap);
	}

	.sp-selected-work__subtext {
		letter-spacing: 0.2px;
		opacity: 0.7;
	}

	.sp-selected-work__divider {
		display: none;
	}

	.sp-selected-work__grid {
		--sp-work-card-caption-gap: clamp(12px, calc(0.75vw + 9px), 16px);
		--sp-work-card-title-bottom: clamp(6px, calc(0.45vw + 4px), 10px);
		--sp-work-card-tags-bottom: clamp(6px, calc(0.45vw + 4px), 10px);

		gap: clamp(32px, calc(1.8vw + 22px), 40px);
	}

	/* Per-card CTA is not shown on mobile — the card itself is the link. */
	.sp-selected-work__grid .sp-work-grid__entry .sp-work-grid__cta {
		display: none;
	}

	.sp-selected-work__grid .sp-work-grid__link {
		display: block;
	}

	.sp-selected-work__grid .sp-work-grid__entry {
		cursor: pointer;
	}

	.sp-selected-work__footer-cta {
		position: static;
		display: inline-flex;
		align-items: center;
		gap: var(--sp-work-card-cta-gap);
	}

	.sp-selected-work__footer-cta .sp-work-grid__cta-button {
		position: static;
		inset: auto;
		z-index: auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--sp-tap-min);
		padding: var(--sp-work-card-cta-pad-y) var(--sp-work-card-cta-pad-x);
		border-radius: var(--sp-hero-cta-radius);
		font-family: var(--spaciefy-font-manrope);
		font-size: var(--sp-work-card-cta-size);
		font-weight: 700;
		line-height: 1;
		color: #000000;
		background-color: #ffffff;
		text-indent: 0;
		overflow: visible;
		white-space: nowrap;
	}

	.sp-selected-work__footer-cta .sp-work-grid__cta-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: var(--sp-work-card-cta-icon-min);
		height: var(--sp-work-card-cta-icon-min);
		border-radius: var(--sp-cta-icon-radius);
		color: var(--spaciefy-black);
		background-color: var(--spaciefy-yellow);
	}
}