/* Sketch Suite — Posts Grid + Carousel
   Overlay-style card: image fills the whole tile; meta + title overlay the bottom. */

.skp-grid,
.skp-carousel {
	--skp-cols: 3;
	--skp-slides: 3;
	--skp-gap: 24px;
	--skp-radius: 24px;
	--skp-aspect: 12 / 13;
	--skp-aspect-wide: 1.85 / 1;
	--skp-pill-bg: #ffffff;
	--skp-pill-border: rgba(255, 255, 255, 0);
	--skp-cat-bg: rgba(255, 255, 255, 0.92);
	--skp-cat-text: #2b2563;
	font-family: var(--sk-font, "Saans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* GRID -------------------------------------------------------------- */
.skp-grid {
	display: grid;
	grid-template-columns: repeat(var(--skp-cols), minmax(0, 1fr));
	gap: var(--skp-gap);
	/* Let later tiles back-fill the gaps a two-column tile leaves behind. */
	grid-auto-flow: dense;
}

/* Feature tile — spans two columns; landscape ratio keeps row heights tidy.
   Scoped to .skp-grid so this aspect-ratio beats the later base .skp-card rule. */
.skp-grid .skp-card--wide {
	grid-column: span 2;
	aspect-ratio: var(--skp-aspect-wide);
}

@media (max-width: 1024px) {
	.skp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.skp-grid {
		grid-template-columns: minmax(0, 1fr);
		--skp-gap: 18px;
	}
	/* Single-column on phones: wide tiles fall back to the normal portrait tile. */
	.skp-grid .skp-card--wide {
		grid-column: auto;
		aspect-ratio: var(--skp-aspect);
	}
}

/* FILTER TOOLBAR — Filter label + By Category select ----------------- */
.skp-work {
	font-family: var(--sk-font, "Saans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.skp-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
}

.skp-toolbar__filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.skp-toolbar__label {
	font-size: 18px;
	font-weight: 600;
	color: #14143a;
	margin-right: 4px;
}

.skp-select {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.skp-select select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	margin: 0;
	padding: 13px 46px 13px 22px;
	border: 1px solid #d7dbe0;
	border-radius: 999px;
	background: #fff;
	color: #14143a;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.skp-select select:hover {
	border-color: #b9c0c8;
}

.skp-select select:focus-visible {
	outline: none;
	border-color: #6552ff;
	box-shadow: 0 0 0 3px rgba(101, 82, 255, 0.18);
}

.skp-select__chevron {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: #14143a;
	pointer-events: none;
}

.skp-divider {
	margin: 0 0 28px;
	border: 0;
	border-top: 1px solid #e7e9ee;
}

/* Filtering / pagination — hidden cards collapse out of the grid layout. */
.skp-card[hidden] {
	display: none !important;
}

/* MARQUEE FILTER — two rows of category pills scrolling in opposite directions.
   Row one drifts left, row two drifts right; both loop seamlessly. Clicking a
   category filters the grid; "explore all" resets. ------------------------- */
.skp-marquee {
	--skp-marquee-speed: 46s;       /* one full loop */
	--skp-cat-idle: #b6b6bb;        /* resting grey */
	--skp-cat-hover: #4a4a55;       /* hover grey */
	--skp-cat-active: #14143a;      /* selected near-black */
	font-family: var(--sk-font, "Saans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	margin-bottom: 26px;
	overflow: hidden;               /* clip the off-canvas duplicate group */
}

.skp-marquee__row {
	display: flex;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.skp-marquee__row + .skp-marquee__row {
	margin-top: clamp(4px, 0.6vw, 10px);
}

.skp-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
	animation: skp-marquee-ltr var(--skp-marquee-speed) linear infinite;
}

.skp-marquee__row--rtl .skp-marquee__track {
	animation-name: skp-marquee-rtl;
}

/* Pause the row that's being hovered so pills are easy to click. */
.skp-marquee__row:hover .skp-marquee__track {
	animation-play-state: paused;
}

.skp-marquee__group {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	flex: 0 0 auto;
}

@keyframes skp-marquee-ltr {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes skp-marquee-rtl {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* Category pill — big muted type, small count, active goes near-black. */
.skp-cat,
.skp-cat:hover,
.skp-cat:focus,
.skp-cat:focus-visible,
.skp-cat:active {
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
}

.skp-cat {
	display: inline-flex;
	align-items: baseline;
	gap: 0.28em;
	margin: 0;
	padding: 0 clamp(18px, 1.8vw, 34px);
	color: var(--skp-cat-idle);
	font-family: inherit;
	font-size: clamp(30px, 3.6vw, 58px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.skp-cat:hover,
.skp-cat:focus-visible {
	color: var(--skp-cat-hover);
}

.skp-cat.is-active {
	color: var(--skp-cat-active);
	font-weight: 600;
}

.skp-cat__count {
	font-size: 0.36em;
	font-weight: 500;
	letter-spacing: 0;
	transform: translateY(-0.9em);  /* superscript-style */
	opacity: 0.85;
}

/* Reduced motion — stop the scroll and let both rows wrap onto multiple lines
   so every category stays reachable. */
@media (prefers-reduced-motion: reduce) {
	.skp-marquee__row {
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.skp-marquee__track {
		animation: none;
		flex-wrap: wrap;
		width: 100%;
	}
	.skp-marquee__group:nth-child(2) {
		display: none;              /* drop the duplicate used only for looping */
	}
}

/* PAGINATION — numbered page controls below the grid -------------------- */
.skp-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 36px;
}
.skp-pagination:empty {
	display: none;
}

.skp-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #d7dbe0;
	border-radius: 999px;
	background: #fff;
	color: #14143a;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.skp-page:hover:not(:disabled):not(.is-active) {
	border-color: #b9c0c8;
	background: #f6f7f9;
}
.skp-page.is-active {
	background: #6552ff;
	border-color: #6552ff;
	color: #fff;
	cursor: default;
}
.skp-page:focus-visible {
	outline: none;
	border-color: #6552ff;
	box-shadow: 0 0 0 3px rgba(101, 82, 255, 0.18);
}
.skp-page--nav {
	min-width: 44px;
	padding: 0;
}
.skp-page:disabled {
	opacity: 0.4;
	cursor: default;
}

.skp-page-dots {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	min-width: 24px;
	height: 44px;
	padding-bottom: 8px;
	color: #aab2bd;
	font-weight: 600;
}

@media (max-width: 680px) {
	.skp-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}
	.skp-toolbar__filters {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		width: 100%;
	}
	.skp-toolbar__label {
		margin-right: 0;
	}
	.skp-select {
		display: flex;
		width: 100%;
	}
	.skp-select select {
		width: 100%;
	}
}

/* CARD -------------------------------------------------------------- */
.skp-card {
	position: relative;
	aspect-ratio: var(--skp-aspect);
	overflow: hidden;
	border-radius: var(--skp-radius);
	background: #f3f4f6;
	isolation: isolate;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.skp-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.skp-card__link {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
	text-decoration: none;
}

.skp-card__image,
.skp-card__image--empty {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	display: block;
	margin: 0 !important;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.skp-card__image--empty {
	background: linear-gradient(135deg, #e5e7eb, #f3f4f6);
}
.skp-card:hover .skp-card__image {
	transform: scale(1.05);
}

/* Bottom shade — gradient that anchors the text overlay */
.skp-card__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.78) 0%,
		rgba(0, 0, 0, 0.55) 22%,
		rgba(0, 0, 0, 0.18) 45%,
		rgba(0, 0, 0, 0) 65%
	);
	pointer-events: none;
}

/* Category pill — top-left, frosted glass */
.skp-card__category {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	display: inline-block;
	padding: 4px 11px;
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 1.45;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	box-shadow:
		0 2px 10px rgba(0, 0, 0, 0.12),
		0 0 0 1px rgba(255, 255, 255, 0.06) inset;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Bottom overlay — meta pills + title */
.skp-card__bottom {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 22px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.skp-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.skp-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px 5px 5px;
	background: var(--skp-pill-bg);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: #1d2327;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.skp-meta-pill--time,
.skp-meta-pill--date {
	padding-left: 10px;
	gap: 6px;
}

.skp-meta-pill__avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	display: block;
}
.skp-meta-pill__avatar--placeholder {
	background: #2b2563;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.skp-meta-pill__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #f3f4f6;
	color: #4b5563;
	flex-shrink: 0;
}

/* Title — white over the gradient */
.skp-card__title {
	margin: 0;
	color: #ffffff;
	font-size: clamp(20px, 1.6vw, 26px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* CAROUSEL ---------------------------------------------------------- */
.skp-carousel {
	position: relative;
}
.skp-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 4px 0 16px;
}
.skp-carousel__viewport::-webkit-scrollbar { display: none; }

.skp-carousel__track {
	display: flex;
	gap: var(--skp-gap);
}

.skp-carousel .skp-card {
	flex: 0 0 calc((100% - (var(--skp-gap) * (var(--skp-slides) - 1))) / var(--skp-slides));
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.skp-carousel .skp-card {
		flex-basis: calc((100% - var(--skp-gap)) / 2);
	}
}
@media (max-width: 600px) {
	.skp-carousel .skp-card {
		flex-basis: 85%;
	}
	/* Bleed to the right viewport edge so the next card peeks all the way out
	   instead of being clipped by the parent container's padding. */
	.skp-carousel {
		margin-right: calc(50% - 50vw);
	}
}

/* Carousel header — pill eyebrow + heading left, "View All" button right.
   Deliberately the same shape and type scale as the Case Study Grid section
   (modules/case-study-grid) so the two stacked sections read as one system;
   keep the pill/heading/button values here in step with .skcsg__* if those
   ever move. */
.skp-carousel__header {
	--skp-pill-tint: #ece9ff;   /* pale tint of the brand indigo */
	--skp-brand: #6552ff;       /* brand indigo */

	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 64px);
	margin-bottom: clamp(28px, 3.4vw, 48px);
}

.skp-carousel__intro {
	min-width: 0;
}

.skp-carousel__eyebrow {
	margin: 0 0 clamp(18px, 2vw, 28px);
}

.skp-carousel__pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 18px 9px 15px;
	border-radius: 999px;
	background: var(--skp-pill-tint);
	color: var(--skp-brand);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}

.skp-carousel__dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.skp-carousel__title {
	margin: 0;
	font-size: clamp(30px, 3.4vw, 52px);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.12;
	color: #111111;
	text-wrap: balance;
}

/* View All button */
.skp-carousel__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 17px 26px 17px 32px;
	border-radius: 999px;
	background: var(--skp-brand);
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 14px 30px -18px rgba(101, 82, 255, 0.85);
	transition: background-color 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.skp-carousel__btn:hover,
.skp-carousel__btn:focus-visible {
	background: #5341e6;
	color: #ffffff;
	transform: translateY(-2px);
}

.skp-carousel__btn-arrow {
	flex: 0 0 auto;
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.skp-carousel__btn:hover .skp-carousel__btn-arrow,
.skp-carousel__btn:focus-visible .skp-carousel__btn-arrow {
	transform: translateX(4px);
}

/* Mobile — the button drops under the heading rather than squeezing beside it */
@media (max-width: 600px) {
	.skp-carousel__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.skp-carousel__title {
		font-size: clamp(30px, 8vw, 42px);
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.skp-card,
	.skp-card__image {
		transition: none !important;
	}
	.skp-carousel__viewport {
		scroll-behavior: auto;
	}
}