.ssct-outer {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.ssct-wrapper {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 40px;
	width: 100%;
}

.ssct-wrapper[data-image-position="right"] {
	flex-direction: row-reverse;
}

.ssct-media {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	flex: 0 0 50%;
	max-width: 50%;
	height: 100vh;
	height: 100svh;
	background: #000;
}

.ssct-media-inner {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* "Full" image height mode: the image column is not pinned to the
   viewport — it stretches to match the full height of the text column,
   so it reaches all the way down instead of stopping at one screen. */
.ssct-wrapper[data-image-mode="full"] {
	align-items: stretch;
}

.ssct-wrapper[data-image-mode="full"] .ssct-media {
	position: static;
	height: auto;
	min-height: 100%;
	align-self: stretch;
}

/* .ssc-frame-img (position/opacity/transition/crossfade/slide/reveal rules)
   comes from widget.css, which this widget also enqueues. */

.ssct-content {
	flex: 1 1 50%;
	max-width: 50%;
	display: flex;
	flex-direction: column;
}

.ssct-section {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 2rem 0;
	opacity: 0.35;
	transition: opacity 0.5s ease;
}

.ssct-section.ssc-active {
	opacity: 1;
}

.ssct-section .ssc-content-box {
	max-width: 100%;
}

.ssct-section .ssc-title,
.ssct-section .ssc-description {
	text-shadow: none;
}

.ssc-job-content,
.ssc-job-content * {
	/* The custom field's own HTML sometimes carries inline
	   style="text-align:center" etc. — force left regardless. */
	text-align: left !important;
}

.ssc-job-content {
	margin: 0 0 0.75rem;
	font-size: 18px;
	line-height: 1.6;
	color: #ffffff;
}

/* ---- "Full-width background" cards ----
   Image and text share the same CSS Grid cell (a well-supported overlap
   technique). The image is position:sticky and pinned to the viewport;
   the text sits on top in normal flow and scrolls the page — the grid
   row's height follows the TALLEST of the two (usually the text), which
   is exactly what gives the sticky image room to stay pinned for as long
   as the text needs to scroll past it. No overflow tricks, no negative
   margins: it just works like a normal in-flow block. */

.ssct-full {
	position: relative;
	display: grid;
	width: 100%;
	/* No overflow:hidden here — it would break position:sticky on the
	   media child below. Rounded corners are applied to the media/overlay
	   individually instead (background-image already clips to them). */
	border-radius: 12px;
}

.ssct-full-media {
	border-radius: inherit;
}

.ssct-full-media,
.ssct-full-textwrap {
	grid-area: 1 / 1;
}

.ssct-full-media {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	align-self: start;
	height: 100vh;
	height: 100svh;
	background-size: cover;
	background-position: center;
	background-color: #000;
}

.ssct-full-textwrap {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 3rem;
}

.ssct-full-textwrap::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(0, 0, 0, var(--ssct-overlay, 0.35));
	pointer-events: none;
}

.ssct-full-textwrap[data-text-side="left"] {
	justify-content: flex-start;
}

.ssct-full-textwrap[data-text-side="right"] {
	justify-content: flex-end;
}

.ssct-full-textwrap .ssc-content-box {
	position: relative;
	z-index: 1;
	max-width: 44%;
}

.ssct-full-textwrap .ssc-title,
.ssct-full-textwrap .ssc-description {
	color: #ffffff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

@media (max-width: 860px) {
	.ssct-full-textwrap {
		padding: 2rem 1.25rem;
	}

	.ssct-full-textwrap .ssc-content-box {
		max-width: 100%;
	}
}

@media (max-width: 860px) {
	.ssct-wrapper,
	.ssct-wrapper[data-image-position="right"] {
		flex-direction: column;
	}

	.ssct-media {
		position: relative;
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
		height: 55vh;
	}

	.ssct-content {
		max-width: 100%;
	}

	.ssct-section {
		min-height: 0 !important;
		padding: 1.5rem 0;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ssct-section {
		transition: none;
	}
}