.wsb-section {
	width: 100%;
	box-sizing: border-box;
	padding: 32px 24px 28px;
}

.wsb-section.wsb-full-bleed {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding-left: 0;
	padding-right: 0;
}

.wsb-section.wsb-full-bleed .wsb-inner {
	box-sizing: border-box;
	width: 100%;
	padding-left: 24px;
	padding-right: 24px;
}

.wsb-content {
	display: flex;
	flex-wrap: wrap;
}

.wsb-header-text {
	order: 1;
	flex: 1 1 60%;
	min-width: 0;
}

.wsb-heading {
	margin: 0 0 4px;
	font-weight: 700;
	line-height: 1.25;
}

.wsb-subheading {
	margin: 0;
	font-weight: 400;
	line-height: 1.4;
}

.wsb-button {
	order: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 22px;
	border: 1px solid;
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
	align-self: flex-start;
	margin-left: auto;
	transition: opacity 0.15s ease;
}

.wsb-button:hover {
	opacity: 0.8;
}

.wsb-slider {
	order: 3;
	flex: 1 1 100%;
	min-width: 0;
	position: relative;
	margin-top: 28px;
}

.wsb-track {
	display: flex;
}

.wsb-track.wsb-dragging { cursor: grabbing !important; }

.wsb-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	flex-shrink: 0;
}

.wsb-card-image-link {
	display: block;
	margin-bottom: 14px;
}

.wsb-card-image {
	display: block;
	width: 100%;
	object-fit: cover;
}

.wsb-cat {
	display: inline-block;
	text-decoration: underline;
	font-weight: 500;
	margin-bottom: 8px;
}

.wsb-title {
	display: block;
	text-decoration: none;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 10px;
}

.wsb-meta {
	display: flex;
	align-items: center;
	gap: 6px;
}

.wsb-meta svg {
	flex-shrink: 0;
}

.wsb-progress { display: none; }

@media (max-width: 768px) {
	.wsb-section { padding: 24px 16px 20px; }
	.wsb-section.wsb-full-bleed { padding-left: 0; padding-right: 0; }
	.wsb-section.wsb-full-bleed .wsb-inner { padding-left: 16px; padding-right: 16px; }

	.wsb-content { flex-direction: column; flex-wrap: nowrap; }
	.wsb-header-text { order: 1; flex: 1 1 100%; }
	.wsb-slider { order: 2; flex: 1 1 100%; min-width: 0; margin-top: 18px; }
	.wsb-button {
		order: 3;
		width: 100% !important;
		margin-left: 0;
		margin-top: 20px;
	}

	/* Becomes a draggable slider with fixed-width cards on mobile */
	.wsb-track {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		touch-action: pan-x;
		cursor: grab;
		user-select: none;
		padding-bottom: 4px;
		will-change: scroll-position;
		overscroll-behavior-x: contain;
	}
	.wsb-track.wsb-dragging { cursor: grabbing; }
	.wsb-track::-webkit-scrollbar { display: none; }
	.wsb-track { scrollbar-width: none; -ms-overflow-style: none; }

	.wsb-card { flex: 0 0 auto; }

	.wsb-progress {
		display: block;
		position: relative;
		height: 4px;
		border-radius: 4px;
		background: rgba(26, 26, 46, 0.12);
		margin-top: 16px;
		overflow: hidden;
	}
	.wsb-progress-thumb {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		border-radius: 4px;
		background: #1a1a2e;
	}
}
