/* Native WordPress case studies: the same connected frame as the rest of SJ. */
.sj-portfolio { background: var(--color-white); color: var(--color-navy); }
.sj-project-frame,
.sj-project-content > .sj-project-section,
.sj-project-showcase-heading,
.sj-project-controls {
	box-sizing: border-box;
	width: min(calc(100% - var(--sj-site-gutter) * 2), var(--sj-site-width));
	max-width: none;
	margin-inline: auto;
	margin-block: 0;
	border-inline: 1px solid var(--sj-rule-ink);
}
.sj-portfolio .sj-page-summary p:last-child { margin-bottom: 0; }
.sj-project-visit { margin-top: 24px; gap: 16px; }
.sj-project-feature { padding: var(--sj-page-pad); text-align: center; }
.sj-project-feature .sj-photo-frame { width: fit-content; max-width: 100%; margin: 0 auto; }
.sj-project-feature img { display: block; width: auto; height: auto; max-width: 100%; max-height: 480px; object-fit: contain; }
.sj-project-content > * { margin-block: 0; }
.sj-project-content > :not(.sj-project-section, .sj-project-showcase) {
	box-sizing: border-box;
	width: min(calc(100% - var(--sj-site-gutter) * 2), var(--sj-site-width));
	margin-inline: auto;
	padding: 24px var(--sj-page-pad);
	border-inline: 1px solid var(--sj-rule-ink);
}
.sj-project-content > .sj-project-section {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: 0;
	padding: 0;
	border-top: 1px solid var(--sj-rule-ink);
}
.sj-project-section > .wp-block-heading,
.sj-project-section-copy { margin: 0; padding: var(--sj-page-space) var(--sj-page-pad); }
.sj-project-section h2,
.sj-project-showcase h2 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.sj-project-section-copy > :first-child { margin-top: 0; }
.sj-project-section-copy > :last-child { margin-bottom: 0; }
.sj-project-section-copy p { line-height: 1.85; margin-block: 0 24px; }
.sj-project-section-copy h3 { font-size: clamp(23px, 2vw, 29px); line-height: 1.2; margin-block: 40px 16px; }
.sj-project-showcase { padding: 0 0 56px; border-block: 1px solid var(--sj-rule-ink); }
.sj-project-showcase:not(:has(.sj-project-carousel)) { padding-bottom: 0; }
.sj-project-showcase-heading {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
	padding: var(--sj-page-space) var(--sj-page-pad) 32px;
}
.sj-project-showcase-heading > * { margin: 0; }
.sj-project-showcase-heading p { line-height: 1.85; }
.sj-project-showcase-heading > div > :last-child { margin-bottom: 0; }

/* Horizontally scrollable native figures remain usable when JavaScript is off. */
.sj-project-carousel {
	--sj-project-slide-width: clamp(320px, 43vw, 660px);
	--sj-project-gap: 32px;
	--sj-project-offset: 0px;
	box-sizing: border-box;
	display: flex;
	gap: var(--sj-project-gap);
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 32px var(--sj-page-pad) 16px;
	border-top: 1px solid var(--sj-rule-ink);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;
}
.sj-project-carousel .wp-block-gallery { display: contents; }
.sj-project-carousel figure {
	box-sizing: border-box;
	flex: 0 0 var(--sj-project-slide-width);
	width: var(--sj-project-slide-width);
	min-width: 0;
	max-width: none;
	margin: 0;
	scroll-snap-align: start;
}
.sj-project-carousel .sj-photo-frame { display: block; width: calc(100% - 8px); margin: 0; }
.sj-project-carousel .sj-photo-crop { display: block; aspect-ratio: 1.44; height: auto; overflow: hidden; background: var(--color-white); }
.sj-project-carousel .sj-photo-frame .sj-photo-crop img { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: auto; object-fit: contain; object-position: center top; contain: none; contain-intrinsic-size: none; background: var(--color-white); transform: translateY(0); }
.sj-project-carousel .sj-photo-crop[data-sj-image-pan] { cursor: grab; }
.sj-project-carousel .sj-photo-crop[data-sj-image-pan]:focus-visible { outline: 2px solid var(--color-lime); outline-offset: -4px; }
.sj-project-carousel[data-sj-project-dragging] .sj-photo-crop { cursor: grabbing; }
.sj-project-carousel[data-sj-project-dragging] { user-select: none; }
.sj-project-carousel:not([data-sj-project-carousel]) .sj-photo-crop { overflow-y: auto; }
.sj-project-carousel :is(img, video),
.sj-project-carousel .wp-block-embed__wrapper {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1.44;
	object-fit: contain;
	background: var(--color-navy);
}
.sj-project-carousel .wp-block-embed__wrapper { position: relative; }
.sj-project-carousel .wp-block-embed__wrapper::before { content: none; }
.sj-project-carousel iframe { display: block; width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }
.sj-project-carousel video { width: calc(100% - 8px); }
.sj-project-carousel figcaption,
.sj-project-carousel .wp-block-gallery figcaption {
	position: static;
	width: auto;
	max-height: none;
	margin: 24px 0 0;
	padding: 0 8px 0 0;
	background: none;
	color: var(--color-navy);
	font: inherit;
	line-height: 1.7;
	text-align: left;
}
.sj-project-carousel[data-sj-project-carousel] { display: block; overflow: hidden; scroll-snap-type: none; touch-action: pan-y; }
@supports (overflow: clip) { .sj-project-carousel[data-sj-project-carousel] { overflow: clip; } }
.sj-project-carousel-track { display: flex; align-items: flex-start; gap: var(--sj-project-gap); transform: translateX(var(--sj-project-offset)); will-change: transform; }
.sj-project-controls { display: flex; justify-content: flex-end; gap: 8px; padding: 0 var(--sj-page-pad) 24px; }
body .sj-portfolio .sj-project-control,
body .sj-portfolio .sj-project-control:is(:visited, :hover, :focus, :focus-visible, :active) {
	min-width: 44px; min-height: 44px; padding: 8px 10px; border: 0;
	background: transparent; color: var(--color-navy); box-shadow: none;
}
body .sj-portfolio .sj-project-control:is(:hover, :active) { color: var(--color-green); }
body .sj-portfolio .sj-project-control:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.sj-project-controls[hidden] { display: none; }
.sj-project-gallery-caption { max-width: var(--sj-site-width); padding: 16px var(--sj-page-pad) 0; margin: 0 auto; }
.sj-project-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sj-project-end { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; padding: 40px var(--sj-page-pad); }
.sj-project-tags { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 500px; }
.sj-project-tags a { display: inline-flex; padding: 10px 12px; border: 1px solid var(--sj-rule-ink); color: var(--color-navy); font-size: 13px; text-underline-offset: .2em; }
.sj-project-tags a:is(:hover, :focus-visible, :active) { background: var(--color-navy); color: var(--color-offwhite); border-color: var(--color-navy); }
.sj-project-index { display: grid; grid-template-columns: 1fr; gap: 0; }
.sj-project-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sj-page-pad); align-items: center; min-width: 0; padding: var(--sj-page-pad); border-bottom: 1px solid var(--sj-rule-ink); }
.sj-project-card:not(:has(.sj-project-card-image)) { grid-template-columns: 1fr; }
.sj-project-card-image { display: block; margin: 0; }
.sj-project-card-image img { width: 100%; aspect-ratio: 1.44; object-fit: contain; }
.sj-project-card h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.1; }
.sj-project-card h2 a { color: inherit; text-decoration: none; }
.sj-project-card p { line-height: 1.85; margin-block: 24px; }
.sj-project-pagination, .sj-project-empty { padding: 32px var(--sj-page-pad); }

@media (max-width: 1000px) {
	.sj-project-content > .sj-project-section { grid-template-columns: 1fr; }
	.sj-project-section > .wp-block-heading { padding-bottom: 24px; }
	.sj-project-section-copy { padding-top: 0; }
	.sj-project-showcase-heading { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767px) {
	.sj-project-frame, .sj-project-content > .sj-project-section, .sj-project-showcase-heading, .sj-project-controls { width: 100%; border-inline: 0; }
	.sj-project-content > :not(.sj-project-section, .sj-project-showcase) { width: 100%; border-inline: 0; }
	.sj-project-feature { padding: 32px 28px 32px 20px; }
	.sj-project-carousel { --sj-project-slide-width: calc(100vw - 64px); --sj-project-gap: 24px; padding-inline: 20px; }
	.sj-project-showcase { padding-bottom: 32px; }
	.sj-project-end { padding: 32px 20px; }
	.sj-project-index { grid-template-columns: 1fr; }
	.sj-project-card { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px; }
}
@media (prefers-reduced-motion: reduce) { .sj-project-carousel-track { transition: none !important; } }

/* Full-width gallery/rules; the navigation cells stay inside the site's rails. */
.sj-project-showcase:has(.sj-project-controls:not([hidden])) { position: relative; padding-bottom: 0; }
.sj-project-showcase:has(.sj-project-controls:not([hidden]))::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 64px;
	height: 1px;
	background: var(--sj-rule-ink);
	pointer-events: none;
}
.sj-portfolio .sj-project-controls {
	position: relative;
	display: flex;
	align-items: center;
	width: min(calc(100% - var(--sj-site-gutter) * 2), var(--sj-site-width));
	max-width: none;
	gap: 0;
	min-height: 65px;
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-top: 1px solid transparent;
	border-inline: 1px solid var(--sj-rule-ink);
}
.sj-portfolio .sj-project-controls[hidden],
.sj-portfolio .sj-project-controls [hidden] { display: none !important; }
.sj-portfolio .sj-project-position {
	display: flex;
	align-items: center;
	align-self: stretch;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 12px var(--sj-page-pad);
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 1.5;
}
body .sj-portfolio .sj-project-controls button.sj-project-control,
body .sj-portfolio .sj-project-controls button.sj-project-control:is(:hover, :focus, :focus-visible, :active) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	min-height: 64px;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--sj-rule-ink);
	border-radius: 0;
	background: transparent;
	color: var(--color-navy);
	box-shadow: none;
	filter: none;
	opacity: 1;
	transform: none;
}
body .sj-portfolio .sj-project-controls button.sj-project-control:is(:hover, :active) { background: color-mix(in srgb, var(--color-navy) 7%, var(--color-offwhite)); }
body .sj-portfolio .sj-project-controls button.sj-project-control:focus-visible { outline: 2px solid var(--color-navy); outline-offset: -3px; }
body .sj-portfolio .sj-project-controls button.sj-project-control:disabled { cursor: default; }
.sj-project-controls .sj-icon { width: 24px; height: 24px; font-size: 24px; line-height: 1; }
.sj-project-controls .sj-project-status { left: 0; top: 0; margin: 0; }
@media (max-width: 767px) {
	.sj-project-showcase:has(.sj-project-controls:not([hidden]))::after { bottom: 56px; }
	.sj-portfolio .sj-project-controls { width: 100%; min-height: 57px; border-inline: 0; }
	.sj-portfolio .sj-project-position { padding-inline: 20px; }
	body .sj-portfolio .sj-project-controls button.sj-project-control,
	body .sj-portfolio .sj-project-controls button.sj-project-control:is(:hover, :focus, :focus-visible, :active) { flex-basis: 56px; width: 56px; height: 56px; min-height: 56px; }
}