/* Serve Category Posts Grid Scroll (WPBakery Voicey Elements) */

.wve-serve-posts {
	--wve-sp-cols: 3;
	--wve-sp-cols-tablet: 2;
	--wve-sp-gap: 12px;
	--wve-sp-heading-bg: #111;
	--wve-sp-heading-color: #fff35c;
	--wve-sp-heading-size: 144px;
	--wve-sp-heading-size-m: 88px;
	--wve-sp-heading-rotate: -8deg;
	--wve-sp-ratio: 4/5;
	--wve-sp-img-h: auto;
	--wve-sp-fit: cover;
	--wve-sp-img-radius: 8px;
	--wve-sp-icon: 36px;
	--wve-sp-icon-space: 8px;
	--wve-sp-icon-bg: transparent;
	--wve-sp-icon-radius: 0px;
	--wve-sp-title-color: #000;
	--wve-sp-title-size: 18px;
	--wve-sp-title-size-m: 26px;
	--wve-sp-title-weight: 400;
	--wve-sp-title-lh: 1.25;
	--wve-sp-title-lines: 4;
	--wve-sp-cat-color: #fff;
	--wve-sp-cat-bg: #000;
	--wve-sp-cat-size: 9px;
	--wve-sp-card-bg: #fff35c;
	--wve-sp-card-border: #fff35c;
	--wve-sp-card-bw: 0px;
	--wve-sp-card-radius: 14px;
	--wve-sp-card-pad: 8px;
	--wve-sp-m-width: 86%;
	--wve-sp-m-gap: 10px;
	--wve-sp-m-card-bg: #fff;
	--wve-sp-m-card-border: #000;
	--wve-sp-m-card-bw: 3px;
	--wve-sp-m-img: 118px;
	--wve-sp-m-title-size: 17px;
	--wve-sp-space-d: 0px;
	--wve-sp-space-t: 0px;
	--wve-sp-space-m: 0px;
	--wve-sp-font-title: var(--voicey-font-funnel, "Funnel Sans", "Helvetica Neue", Arial, sans-serif);
	--wve-sp-font-mono: "RobotoMonoRegular", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Space left of the cards; the clip area reaches into it so the tilted heading label is not cut off. */
	--wve-sp-heading-room: max(var(--wve-side-padding, 0px), calc((100vw - var(--voicey-container, 1200px)) / 2 - 16px));

	position: relative;
	z-index: 1;
	width: calc(100% + var(--wve-sp-heading-room));
	max-width: none;
	/* Pull layout back so the extra top padding (needed because overflow-x:clip also clips y) does not add a gap. */
	margin-top: calc(var(--wve-sp-heading-size) * -0.45);
	margin-left: calc(-1 * var(--wve-sp-heading-room));
	padding: var(--wve-sp-space-d);
	padding-top: calc(var(--wve-sp-space-d) + var(--wve-sp-heading-size) * 0.45);
	padding-left: calc(var(--wve-sp-space-d) + var(--wve-sp-heading-room));
	overflow-x: clip;
	box-sizing: border-box;
}

.wve-serve-posts *,
.wve-serve-posts *::before,
.wve-serve-posts *::after {
	box-sizing: border-box;
}

/* Tilted heading label ("SERVE") overlapping the cards */
.wve-serve-posts .wve-serve-posts-heading {
	position: relative;
	z-index: 1;
	display: block;
	width: max-content;
	max-width: 100%;
	margin: 0 0 calc(-0.17em - 6px) max(-0.32em, calc(0.16em + 8px - var(--wve-sp-heading-room)));
	padding: 0 0.21em 0.075em 0.1em;
	background: var(--wve-sp-heading-bg);
	color: var(--wve-sp-heading-color);
	font-family: "Inter Variable", Inter, Arial, sans-serif;
	font-size: var(--wve-sp-heading-size);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	transform: rotate(var(--wve-sp-heading-rotate));
	transform-origin: left bottom;
	pointer-events: none;
}

.wve-serve-posts .wve-serve-posts-heading-text {
	display: block;
	color: inherit;
	font: inherit;
}

/* Desktop grid */
.wve-serve-posts .wve-serve-posts-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--wve-sp-cols), minmax(0, 1fr));
	gap: var(--wve-sp-gap);
	margin: 0;
	padding: 0;
}

.wve-serve-posts .wve-serve-post-scroll {
	display: contents;
}

/* Card */
.wve-serve-posts .wve-serve-post-card {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: var(--wve-sp-card-bw) solid var(--wve-sp-card-border);
	border-radius: var(--wve-sp-card-radius);
	background: var(--wve-sp-card-bg);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wve-serve-posts .wve-serve-post-link,
.wve-serve-posts .wve-serve-post-link:hover,
.wve-serve-posts .wve-serve-post-link:focus,
.wve-serve-posts .wve-serve-post-link:visited {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--wve-sp-card-pad);
	color: var(--wve-sp-title-color);
	text-decoration: none;
	border: 0;
	box-shadow: none;
}

.wve-serve-posts .wve-serve-post-link:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

/* Image */
.wve-serve-posts .wve-serve-post-image {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--wve-sp-ratio);
	height: var(--wve-sp-img-h);
	border-radius: var(--wve-sp-img-radius);
	overflow: hidden;
	background-color: #fff;
}

.wve-serve-posts-fixed-height .wve-serve-post-image {
	aspect-ratio: auto;
}

.wve-serve-posts .wve-serve-post-image-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: var(--wve-sp-fit);
	transition: transform 0.35s ease;
}

.wve-serve-posts .wve-serve-post-image-placeholder {
	position: absolute;
	inset: 0;
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #e6e6e6 25%, transparent 25%),
		linear-gradient(-45deg, #e6e6e6 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #e6e6e6 75%),
		linear-gradient(-45deg, transparent 75%, #e6e6e6 75%);
	background-size: 18px 18px;
	background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

/* Body */
.wve-serve-posts .wve-serve-post-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 4px 4px;
	min-width: 0;
}

.wve-serve-posts .wve-serve-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wve-sp-icon-space);
	max-width: 100%;
}

.wve-serve-posts .wve-serve-post-category {
	display: inline-block;
	max-width: 100%;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--wve-sp-cat-bg);
	color: var(--wve-sp-cat-color);
	font-family: var(--wve-font-dm-sans);
	font-size: var(--wve-sp-cat-size);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wve-serve-posts-category-upper .wve-serve-post-category {
	text-transform: uppercase;
}

.wve-serve-posts .wve-serve-post-title {
	display: -webkit-box;
	margin: 0;
	padding: 0;
	color: var(--wve-sp-title-color);
	font-family: var(--wve-font-unbounded);
	font-size: var(--wve-sp-title-size);
	font-weight: var(--wve-sp-title-weight);
	line-height: var(--wve-sp-title-lh);
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: break-word;
	text-wrap: pretty;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--wve-sp-title-lines);
	line-clamp: var(--wve-sp-title-lines);
	overflow: hidden;
}

/* Title area: three title lines high, title centred */
.wve-serve-posts .wve-card-title-box {
	--wve-title-box-size: var(--wve-sp-title-size);
	--wve-title-box-lh: var(--wve-sp-title-lh);
}

.wve-serve-posts .wve-serve-post-excerpt {
	margin: 0;
	color: var(--wve-sp-title-color);
	font-size: 14px;
	line-height: 1.4;
}

.wve-serve-posts .wve-serve-post-readmore {
	color: var(--wve-sp-title-color);
	font-family: var(--wve-sp-font-mono);
	font-size: 12px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Featured Icon (separate from the featured image) */
.wve-serve-posts .wve-serve-post-featured-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--wve-sp-icon);
	height: var(--wve-sp-icon);
	border-radius: var(--wve-sp-icon-radius);
	background: var(--wve-sp-icon-bg);
	overflow: hidden;
	line-height: 0;
}

.wve-serve-posts .wve-serve-post-featured-icon-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: contain;
}

/* Icon box that replaces the image on compact mobile cards (hidden on larger screens) */
.wve-serve-posts .wve-serve-post-mobile-icon {
	display: none;
}

.wve-serve-posts .wve-serve-post-image .wve-serve-post-featured-icon {
	position: absolute;
	z-index: 1;
}

.wve-serve-posts-icon-image-top-left .wve-serve-post-image .wve-serve-post-featured-icon {
	top: var(--wve-sp-icon-space);
	left: var(--wve-sp-icon-space);
}

.wve-serve-posts-icon-image-top-right .wve-serve-post-image .wve-serve-post-featured-icon {
	top: var(--wve-sp-icon-space);
	right: var(--wve-sp-icon-space);
}

.wve-serve-posts-icon-image-bottom-left .wve-serve-post-image .wve-serve-post-featured-icon {
	bottom: var(--wve-sp-icon-space);
	left: var(--wve-sp-icon-space);
}

.wve-serve-posts-icon-image-bottom-right .wve-serve-post-image .wve-serve-post-featured-icon {
	right: var(--wve-sp-icon-space);
	bottom: var(--wve-sp-icon-space);
}

.wve-serve-posts .wve-serve-posts-empty {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 24px 0;
	font-family: var(--wve-sp-font-mono);
	font-size: 14px;
}

/* Hover (pointer devices only) */
@media (hover: hover) {
	.wve-serve-posts-hover-lift .wve-serve-post-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
	}

	.wve-serve-posts-hover-zoom .wve-serve-post-card:hover .wve-serve-post-image-img {
		transform: scale(1.05);
	}
}

/* "See all" arrow card that ends the row (links to the category page) */
.wve-serve-posts .wve-serve-post-more,
.wve-serve-posts .wve-serve-post-more:hover,
.wve-serve-posts .wve-serve-post-more:focus,
.wve-serve-posts .wve-serve-post-more:visited {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	gap: 16px;
	min-width: 0;
	min-height: 160px;
	margin: 0;
	padding: 24px 16px;
	border: var(--wve-sp-card-bw) solid var(--wve-sp-card-border);
	border-radius: var(--wve-sp-card-radius);
	background: var(--wve-sp-card-bg);
	color: var(--wve-sp-title-color);
	text-align: center;
	text-decoration: none;
	box-shadow: none;
}

.wve-serve-posts .wve-serve-post-more:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

/* Same circular arrow button as the other Voicey elements (e.g. Loud stack navigation). */
.wve-serve-posts .wve-serve-post-more-arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 2px solid #000;
	border-radius: 50%;
	background: #fff;
	color: #000;
	transition: transform 0.35s ease, opacity 0.35s ease, background-color 0.2s ease, color 0.2s ease;
}

.wve-serve-posts .wve-serve-post-more-text {
	font-family: var(--wve-font-unbounded);
	font-size: calc(var(--wve-sp-title-size) * 0.75);
	font-weight: var(--wve-sp-title-weight);
	line-height: 1.2;
	overflow-wrap: break-word;
}

.wve-serve-posts .wve-serve-post-more:hover .wve-serve-post-more-arrow,
.wve-serve-posts .wve-serve-post-more:focus-visible .wve-serve-post-more-arrow {
	background: var(--wve-sp-heading-bg);
	color: var(--wve-sp-heading-color);
	transform: translateX(4px);
}

/* The arrow slides in once the card scrolls into view (class set by the element's JS). */
.wve-serve-posts .wve-serve-post-more.is-pending .wve-serve-post-more-arrow {
	opacity: 0;
	transform: translateX(-18px);
}

/* Desktop: one row showing "visible posts" cards, the rest scroll horizontally */
@media (min-width: 1025px) {
	.wve-serve-posts .wve-serve-posts-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - (var(--wve-sp-cols) - 1) * var(--wve-sp-gap)) / var(--wve-sp-cols));
		align-items: start;
		padding: 6px 0 12px;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
	}

	.wve-serve-posts .wve-serve-posts-grid::-webkit-scrollbar {
		height: 6px;
	}

	.wve-serve-posts .wve-serve-posts-grid::-webkit-scrollbar-thumb {
		border-radius: 6px;
		background: rgba(0, 0, 0, 0.35);
	}

	.wve-serve-posts .wve-serve-posts-grid .wve-serve-post-card,
	.wve-serve-posts .wve-serve-posts-grid .wve-serve-post-more {
		scroll-snap-align: start;
	}

	.wve-serve-posts .wve-serve-posts-grid:focus-visible {
		outline: 3px solid #000;
		outline-offset: 2px;
	}
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
	.wve-serve-posts {
		margin-top: calc(var(--wve-sp-heading-size) * -0.4);
		padding: var(--wve-sp-space-t);
		padding-top: calc(var(--wve-sp-space-t) + var(--wve-sp-heading-size) * 0.4);
		padding-left: calc(var(--wve-sp-space-t) + var(--wve-sp-heading-room));
	}

	.wve-serve-posts .wve-serve-posts-grid {
		grid-template-columns: repeat(var(--wve-sp-cols-tablet), minmax(0, 1fr));
	}

	.wve-serve-posts .wve-serve-posts-heading {
		font-size: calc(var(--wve-sp-heading-size) * 0.85);
		margin-bottom: -0.17em;
	}

	.wve-serve-posts .wve-serve-post-title {
		font-size: calc(var(--wve-sp-title-size) * 0.8);
	}

	.wve-serve-posts .wve-card-title-box {
		--wve-title-box-size: calc(var(--wve-sp-title-size) * 0.8);
	}
}

/* Featured Icon is shown on mobile only */
@media (min-width: 768px) {
	.wve-serve-posts .wve-serve-post-featured-icon {
		display: none;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.wve-serve-posts {
		margin-top: calc(var(--wve-sp-heading-size-m) * -0.35);
		padding: var(--wve-sp-space-m);
		padding-top: calc(var(--wve-sp-space-m) + var(--wve-sp-heading-size-m) * 0.35);
		padding-left: calc(var(--wve-sp-space-m) + var(--wve-sp-heading-room));
	}

	.wve-serve-posts .wve-serve-posts-heading {
		margin-bottom: -0.17em;
		font-size: var(--wve-sp-heading-size-m);
	}

	.wve-serve-posts .wve-serve-post-title {
		font-size: var(--wve-sp-title-size-m);
	}

	.wve-serve-posts .wve-card-title-box {
		--wve-title-box-size: var(--wve-sp-title-size-m);
	}

	/* Stacked (horizontal scroll disabled) */
	.wve-serve-posts-mobile-stack .wve-serve-posts-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Horizontal scroll */
	.wve-serve-posts-mobile-scroll .wve-serve-posts-grid {
		display: block;
	}

	.wve-serve-posts-mobile-scroll .wve-serve-post-card-first {
		margin-bottom: var(--wve-sp-m-gap);
	}

	.wve-serve-posts-mobile-scroll .wve-serve-post-card-first .wve-serve-post-featured-icon {
		display: none;
	}

	.wve-serve-posts-mobile-scroll .wve-serve-post-scroll {
		display: flex;
		gap: var(--wve-sp-m-gap);
		width: 100%;
		margin: 0;
		padding: 0 0 6px;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-padding-inline: 0;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.wve-serve-posts-mobile-scroll .wve-serve-post-scroll::-webkit-scrollbar {
		display: none;
	}

	.wve-serve-posts-scrollbar .wve-serve-post-scroll {
		scrollbar-width: thin;
	}

	.wve-serve-posts-scrollbar .wve-serve-post-scroll::-webkit-scrollbar {
		display: block;
		height: 4px;
	}

	.wve-serve-posts-scrollbar .wve-serve-post-scroll::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background: rgba(0, 0, 0, 0.35);
	}

	.wve-serve-posts-snap .wve-serve-post-scroll {
		scroll-snap-type: x mandatory;
	}

	.wve-serve-posts-mobile-scroll .wve-serve-post-scroll > .wve-serve-post-card {
		flex: 0 0 var(--wve-sp-m-width);
		scroll-snap-align: start;
	}

	.wve-serve-posts-mobile-scroll .wve-serve-post-scroll:focus-visible {
		outline: 3px solid #000;
		outline-offset: 2px;
	}

	/* Compact outlined cards in the scrolling row */
	.wve-serve-posts-scroll-compact .wve-serve-post-scroll > .wve-serve-post-card {
		border: var(--wve-sp-m-card-bw) solid var(--wve-sp-m-card-border);
		background: var(--wve-sp-m-card-bg);
	}

	.wve-serve-posts-scroll-compact .wve-serve-post-scroll .wve-serve-post-link {
		padding: 14px;
	}

	.wve-serve-posts-scroll-compact .wve-serve-post-scroll .wve-serve-post-image {
		width: var(--wve-sp-m-img);
		height: var(--wve-sp-m-img);
		aspect-ratio: 1 / 1;
		border-radius: calc(var(--wve-sp-img-radius) * 0.5);
	}

	.wve-serve-posts-scroll-compact .wve-serve-post-scroll .wve-serve-post-has-mobile-icon .wve-serve-post-image {
		display: none;
	}

	.wve-serve-posts-scroll-compact .wve-serve-post-scroll .wve-serve-post-mobile-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--wve-sp-m-img);
		height: var(--wve-sp-m-img);
		line-height: 0;
	}

	.wve-serve-posts-scroll-compact .wve-serve-post-mobile-icon .wve-serve-post-featured-icon-img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		margin: 0;
		object-fit: contain;
	}

	.wve-serve-posts-scroll-compact .wve-serve-post-scroll .wve-serve-post-mobile-icon-empty {
		background-color: #fff;
		background-image:
			linear-gradient(45deg, #e6e6e6 25%, transparent 25%),
			linear-gradient(-45deg, #e6e6e6 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, #e6e6e6 75%),
			linear-gradient(-45deg, transparent 75%, #e6e6e6 75%);
		background-size: 18px 18px;
		background-position: 0 0, 0 9px, 9px -9px, -9px 0;
	}

	.wve-serve-posts-scroll-compact .wve-serve-post-scroll .wve-serve-post-body {
		padding: 18px 0 0;
	}

	.wve-serve-posts-scroll-compact .wve-serve-post-scroll .wve-serve-post-meta,
	.wve-serve-posts-scroll-compact .wve-serve-post-scroll .wve-serve-post-featured-icon,
	.wve-serve-posts-scroll-compact .wve-serve-post-scroll .wve-serve-post-excerpt {
		display: none;
	}

	.wve-serve-posts-scroll-compact .wve-serve-post-scroll .wve-card-title-box {
		--wve-title-box-size: var(--wve-sp-m-title-size);
	}

	.wve-serve-posts-scroll-compact .wve-serve-post-scroll .wve-serve-post-title {
		color: #000;
		font-size: var(--wve-sp-m-title-size);
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}
}

/* Mobile: "See all" card */
@media (max-width: 767px) {
	.wve-serve-posts .wve-serve-post-more-arrow {
		width: 52px;
		height: 52px;
	}

	.wve-serve-posts .wve-serve-post-more-text {
		font-size: calc(var(--wve-sp-m-title-size) * 0.9);
	}

	/* Narrow outlined tile at the end of the scrolling row, styled like the compact cards. */
	.wve-serve-posts-mobile-scroll .wve-serve-post-scroll > .wve-serve-post-more {
		flex: 0 0 auto;
		width: 140px;
		scroll-snap-align: end;
	}

	.wve-serve-posts-scroll-compact .wve-serve-post-scroll > .wve-serve-post-more {
		border: var(--wve-sp-m-card-bw) solid var(--wve-sp-m-card-border);
		background: var(--wve-sp-m-card-bg);
	}

	/* Not in a scrolling row (stacked layout, or only the first card): a full-width bar. */
	.wve-serve-posts-mobile-stack .wve-serve-post-more,
	.wve-serve-posts-mobile-scroll .wve-serve-posts-grid > .wve-serve-post-more {
		flex-direction: row;
		min-height: 0;
		padding: 14px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wve-serve-posts .wve-serve-post-card,
	.wve-serve-posts .wve-serve-post-image-img,
	.wve-serve-posts .wve-serve-post-more-arrow {
		transition: none;
	}

	.wve-serve-posts .wve-serve-post-more.is-pending .wve-serve-post-more-arrow {
		opacity: 1;
		transform: none;
	}

	.wve-serve-posts .wve-serve-post-card:hover,
	.wve-serve-posts .wve-serve-post-card:hover .wve-serve-post-image-img {
		transform: none;
	}
}