/* =========================================================
   Dynamic Columns Block
   Namespace: .SDportfolioLayout
   v15 — wrapper-based shadow/radius + full tablet/mobile flow reset
   ======================================================= */
.SDportfolioLayout {
	position: relative;
	width: 100%;
	--item-radius-small: 6px;
	--item-radius-medium: 12px;
	--item-radius-large: 20px;
	--item-shadow-small: 0 2px 8px rgba(0, 0, 0, 0.08);
	--item-shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.12);
	--item-shadow-large: 0 16px 40px rgba(0, 0, 0, 0.18);
	--item-space-neg-xl: -5rem;
	--item-space-neg-large: -3rem;
	--item-space-neg-medium: -2rem;
	--item-space-neg-small: -1rem;
	--item-space-neg-xs: -0.5rem;
	--item-space-none: 0;
	--item-space-xs: 0.5rem;
	--item-space-small: 1rem;
	--item-space-medium: 2rem;
	--item-space-large: 3rem;
	--item-space-xl: 5rem;
	--stack-gap-tablet: 1.5rem;
	--stack-gap-mobile: 1.25rem;
}

/* -----------------------------------------
   Layout width
   ----------------------------------------- */
.SDportfolioLayout.normal {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.SDportfolioLayout.wide {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}

.SDportfolioLayout.full {
	max-width: none;
	width: 100%;
}

/* -----------------------------------------
   Layout spacing
   ----------------------------------------- */
.SDportfolioLayout.none {
	padding-top: 0;
	padding-bottom: 0;
}

.SDportfolioLayout.small {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.SDportfolioLayout.medium {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.SDportfolioLayout.large {
	padding-top: 6rem;
	padding-bottom: 6rem;
}

/* -----------------------------------------
   Grid container
   ----------------------------------------- */
.SDportfolioLayout .portfolioGrid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: start;
}

/* -----------------------------------------
   Column gap
   ----------------------------------------- */
.SDportfolioLayout.gap-none .portfolioGrid {
	--grid-gap: 0;
	column-gap: 0;
	row-gap: 0;
}

.SDportfolioLayout.gap-tight .portfolioGrid {
	--grid-gap: 1rem;
	column-gap: var(--grid-gap);
	row-gap: 1rem;
}

.SDportfolioLayout.gap-normal .portfolioGrid {
	--grid-gap: 2rem;
	column-gap: var(--grid-gap);
	row-gap: 2rem;
}

.SDportfolioLayout.gap-wide .portfolioGrid {
	--grid-gap: 3rem;
	column-gap: var(--grid-gap);
	row-gap: 3rem;
}

/* -----------------------------------------
   Debug overlay with numbered grid columns
   ----------------------------------------- */
.SDportfolioLayout.show-grid .portfolioGrid {
	position: relative;
}

.SDportfolioLayout.show-grid .portfolioGridOverlay {
	position: absolute;
	inset: 0;
	z-index: 999;
	pointer-events: none;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--grid-gap, 0);
	row-gap: 0;
}

.SDportfolioLayout.show-grid .portfolioGridOverlay__col {
	position: relative;
	min-width: 0;
	background: rgba(255, 0, 0, 0.10);
	border-left: 1px solid rgba(255, 0, 0, 0.45);
	border-right: 1px solid rgba(255, 0, 0, 0.45);
}

.SDportfolioLayout.show-grid .portfolioGridOverlay__col span {
	position: absolute;
	top: 0.35rem;
	left: 0.35rem;
	display: inline-block;
	padding: 0.15rem 0.35rem;
	font-size: 0.7rem;
	line-height: 1;
	font-weight: 700;
	color: rgba(180, 0, 0, 0.95);
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(255, 0, 0, 0.25);
	border-radius: 2px;
}

/* -----------------------------------------
   User-defined column labels
   ----------------------------------------- */
.SDportfolioLayout.show-grid .portfolioColumn {
	position: relative;
	outline: 1px dashed rgba(0, 0, 255, 0.35);
}

.SDportfolioLayout.show-grid .portfolioColumnLabel {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	z-index: 1000;
	display: inline-block;
	padding: 0.2rem 0.45rem;
	font-size: 0.72rem;
	line-height: 1;
	font-weight: 700;
	color: #0B3D91;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(11, 61, 145, 0.25);
	border-radius: 3px;
	pointer-events: none;
}

/* -----------------------------------------
   Columns
   ----------------------------------------- */
.SDportfolioLayout .portfolioColumn {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.SDportfolioLayout .portfolioColumn.align-start {
	align-self: start;
}

.SDportfolioLayout .portfolioColumn.align-center {
	align-self: center;
}

.SDportfolioLayout .portfolioColumn.align-end {
	align-self: end;
}

.SDportfolioLayout .portfolioColumn.align-stretch {
	align-self: stretch;
}

/* -----------------------------------------
   Items
   ----------------------------------------- */
.SDportfolioLayout .portfolioItem {
	position: relative;
	display: block;
	min-width: 0;
	max-width: 100%;
	width: calc((var(--item-span, 12) / 12) * 100%);
	overflow: visible;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.SDportfolioLayout .portfolioItem.item-align-left {
	margin-left: 0;
	margin-right: auto;
}

.SDportfolioLayout .portfolioItem.item-align-center {
	margin-left: auto;
	margin-right: auto;
}

.SDportfolioLayout .portfolioItem.item-align-right {
	margin-left: auto;
	margin-right: 0;
}

/* -----------------------------------------
   Separate top / bottom spacing tokens
   ----------------------------------------- */
.SDportfolioLayout .portfolioItem.mt-neg-xl {
	margin-top: var(--item-space-neg-xl);
}

.SDportfolioLayout .portfolioItem.mt-neg-large {
	margin-top: var(--item-space-neg-large);
}

.SDportfolioLayout .portfolioItem.mt-neg-medium {
	margin-top: var(--item-space-neg-medium);
}

.SDportfolioLayout .portfolioItem.mt-neg-small {
	margin-top: var(--item-space-neg-small);
}

.SDportfolioLayout .portfolioItem.mt-neg-xs {
	margin-top: var(--item-space-neg-xs);
}

.SDportfolioLayout .portfolioItem.mt-none {
	margin-top: var(--item-space-none);
}

.SDportfolioLayout .portfolioItem.mt-xs {
	margin-top: var(--item-space-xs);
}

.SDportfolioLayout .portfolioItem.mt-small {
	margin-top: var(--item-space-small);
}

.SDportfolioLayout .portfolioItem.mt-medium {
	margin-top: var(--item-space-medium);
}

.SDportfolioLayout .portfolioItem.mt-large {
	margin-top: var(--item-space-large);
}

.SDportfolioLayout .portfolioItem.mt-xl {
	margin-top: var(--item-space-xl);
}

.SDportfolioLayout .portfolioItem.mb-neg-xl {
	margin-bottom: var(--item-space-neg-xl);
}

.SDportfolioLayout .portfolioItem.mb-neg-large {
	margin-bottom: var(--item-space-neg-large);
}

.SDportfolioLayout .portfolioItem.mb-neg-medium {
	margin-bottom: var(--item-space-neg-medium);
}

.SDportfolioLayout .portfolioItem.mb-neg-small {
	margin-bottom: var(--item-space-neg-small);
}

.SDportfolioLayout .portfolioItem.mb-neg-xs {
	margin-bottom: var(--item-space-neg-xs);
}

.SDportfolioLayout .portfolioItem.mb-none {
	margin-bottom: var(--item-space-none);
}

.SDportfolioLayout .portfolioItem.mb-xs {
	margin-bottom: var(--item-space-xs);
}

.SDportfolioLayout .portfolioItem.mb-small {
	margin-bottom: var(--item-space-small);
}

.SDportfolioLayout .portfolioItem.mb-medium {
	margin-bottom: var(--item-space-medium);
}

.SDportfolioLayout .portfolioItem.mb-large {
	margin-bottom: var(--item-space-large);
}

.SDportfolioLayout .portfolioItem.mb-xl {
	margin-bottom: var(--item-space-xl);
}

/* -----------------------------------------
   Surface styling tokens
   Radius + shadow live on wrappers
   ----------------------------------------- */
.SDportfolioLayout .portfolioItem.radius-none .imageWrapper,
.SDportfolioLayout .portfolioItem.radius-none .videoWrapper,
.SDportfolioLayout .portfolioItem.radius-none .textWrapper {
	border-radius: 0;
	overflow: visible;
}

.SDportfolioLayout .portfolioItem.radius-small .imageWrapper,
.SDportfolioLayout .portfolioItem.radius-small .videoWrapper,
.SDportfolioLayout .portfolioItem.radius-small .textWrapper {
	border-radius: var(--item-radius-small);
	overflow: hidden;
}

.SDportfolioLayout .portfolioItem.radius-medium .imageWrapper,
.SDportfolioLayout .portfolioItem.radius-medium .videoWrapper,
.SDportfolioLayout .portfolioItem.radius-medium .textWrapper {
	border-radius: var(--item-radius-medium);
	overflow: hidden;
}

.SDportfolioLayout .portfolioItem.radius-large .imageWrapper,
.SDportfolioLayout .portfolioItem.radius-large .videoWrapper,
.SDportfolioLayout .portfolioItem.radius-large .textWrapper {
	border-radius: var(--item-radius-large);
	overflow: hidden;
}

.SDportfolioLayout .portfolioItem.shadow-none .imageWrapper,
.SDportfolioLayout .portfolioItem.shadow-none .videoWrapper,
.SDportfolioLayout .portfolioItem.shadow-none .textWrapper {
	box-shadow: none;
}

.SDportfolioLayout .portfolioItem.shadow-small .imageWrapper,
.SDportfolioLayout .portfolioItem.shadow-small .videoWrapper,
.SDportfolioLayout .portfolioItem.shadow-small .textWrapper {
	box-shadow: var(--item-shadow-small);
}

.SDportfolioLayout .portfolioItem.shadow-medium .imageWrapper,
.SDportfolioLayout .portfolioItem.shadow-medium .videoWrapper,
.SDportfolioLayout .portfolioItem.shadow-medium .textWrapper {
	box-shadow: var(--item-shadow-medium);
}

.SDportfolioLayout .portfolioItem.shadow-large .imageWrapper,
.SDportfolioLayout .portfolioItem.shadow-large .videoWrapper,
.SDportfolioLayout .portfolioItem.shadow-large .textWrapper {
	box-shadow: var(--item-shadow-large);
}

/* Ensure outer item never owns the shadow */
.SDportfolioLayout .portfolioItem.shadow-none,
.SDportfolioLayout .portfolioItem.shadow-small,
.SDportfolioLayout .portfolioItem.shadow-medium,
.SDportfolioLayout .portfolioItem.shadow-large {
	box-shadow: none;
}

/* -----------------------------------------
   Media / text wrappers
   ----------------------------------------- */
.SDportfolioLayout .imageWrapper,
.SDportfolioLayout .videoWrapper,
.SDportfolioLayout .textWrapper {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	background: transparent;
	background-clip: padding-box;
}

/* -----------------------------------------
   Media fill
   ----------------------------------------- */
.SDportfolioLayout .mediaFill {
	position: relative;
	width: 100%;
	height: 100%;
}

/* -----------------------------------------
   Images / video
   ----------------------------------------- */
.SDportfolioLayout .portfolioImage,
.SDportfolioLayout .innerVideo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -----------------------------------------
   Image/video ratio system
   ----------------------------------------- */
.SDportfolioLayout .imageWrapper.proportions_three_two,
.SDportfolioLayout .videoWrapper.proportions_three_two {
	aspect-ratio: 3 / 2;
}

.SDportfolioLayout .imageWrapper.proportions_two_three,
.SDportfolioLayout .videoWrapper.proportions_two_three {
	aspect-ratio: 2 / 3;
}

.SDportfolioLayout .imageWrapper.proportions_one_one,
.SDportfolioLayout .videoWrapper.proportions_one_one {
	aspect-ratio: 1 / 1;
}

.SDportfolioLayout .imageWrapper.proportions_native {
	aspect-ratio: auto;
	overflow: visible;
}

.SDportfolioLayout .imageWrapper.proportions_native .mediaFill {
	position: relative;
	width: 100%;
	height: auto;
}

.SDportfolioLayout .imageWrapper.proportions_native .portfolioImage {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.SDportfolioLayout .videoWrapper.proportions_native {
	aspect-ratio: auto;
}

/* -----------------------------------------
   Text items
   ----------------------------------------- */
.SDportfolioLayout .portfolioText {
	position: relative;
	min-width: 0;
	background: transparent;
	background-image: none;
}

.SDportfolioLayout .portfolioText > :first-child {
	margin-top: 0;
}

.SDportfolioLayout .portfolioText > :last-child {
	margin-bottom: 0;
}

/* -----------------------------------------
   Text presentation tokens
   Padding stays on portfolioText
   Background lives on textWrapper
   ----------------------------------------- */
.SDportfolioLayout .portfolioText.text-padding-none {
	padding: 0;
}

.SDportfolioLayout .portfolioText.text-padding-small {
	padding: 0.75rem;
}

.SDportfolioLayout .portfolioText.text-padding-medium {
	padding: 1.5rem;
}

.SDportfolioLayout .portfolioText.text-padding-large {
	padding: 2.25rem;
}

/* Wrapper-driven backgrounds */
.SDportfolioLayout .textWrapper.text-bg-none {
	background: transparent;
}

.SDportfolioLayout .textWrapper.text-bg-light {
	background: #F7F7F7;
}

.SDportfolioLayout .textWrapper.text-bg-dark {
	background: #1E1E1E;
}

.SDportfolioLayout .textWrapper.text-bg-accent {
	background: #DFEFFF;
}

.SDportfolioLayout .textWrapper.text-bg-muted {
	background: #EFEDE8;
}

/* Inner text box should not paint another surface */
.SDportfolioLayout .portfolioText.text-bg-none,
.SDportfolioLayout .portfolioText.text-bg-light,
.SDportfolioLayout .portfolioText.text-bg-dark,
.SDportfolioLayout .portfolioText.text-bg-accent,
.SDportfolioLayout .portfolioText.text-bg-muted {
	background: transparent;
}

.SDportfolioLayout .portfolioText.text-fg-default {
	color: inherit;
}

.SDportfolioLayout .portfolioText.text-fg-dark {
	color: #1B1B1B;
}

.SDportfolioLayout .portfolioText.text-fg-light {
	color: #FFFFFF;
}

.SDportfolioLayout .portfolioText.text-fg-accent {
	color: #004A77;
}

/* -----------------------------------------
   Item padding tokens
   box-sizing: border-box keeps items within their grid column
   ----------------------------------------- */
.SDportfolioLayout .portfolioItem.item-padding-none {
	padding: 0;
	box-sizing: content-box;
}

.SDportfolioLayout .portfolioItem.item-padding-small {
	padding: 0.75rem;
	box-sizing: border-box;
}

.SDportfolioLayout .portfolioItem.item-padding-medium {
	padding: 1.5rem;
	box-sizing: border-box;
}

.SDportfolioLayout .portfolioItem.item-padding-large {
	padding: 2.25rem;
	box-sizing: border-box;
}

/* -----------------------------------------
   Item background tokens
   ----------------------------------------- */
.SDportfolioLayout .portfolioItem.item-bg-none {
	background: transparent;
}

.SDportfolioLayout .portfolioItem.item-bg-light {
	background: #F7F7F7;
}

.SDportfolioLayout .portfolioItem.item-bg-dark {
	background: #1E1E1E;
}

.SDportfolioLayout .portfolioItem.item-bg-accent {
	background: #DFEFFF;
}

.SDportfolioLayout .portfolioItem.item-bg-muted {
	background: #EFEDE8;
}

/* -----------------------------------------
   Z-index utilities
   ----------------------------------------- */
.SDportfolioLayout .z-1 {
	z-index: 1;
}

.SDportfolioLayout .z-2 {
	z-index: 2;
}

.SDportfolioLayout .z-3 {
	z-index: 3;
}

/* -----------------------------------------
   Parallax system
   JS moves .imageWrapper
   ----------------------------------------- */
.SDportfolioLayout .portfolioItem.has-parallax.item-type-image .imageWrapper {
	will-change: transform;
	overflow: hidden;
}


/* -----------------------------------------
   Tablet + Mobile
   Total separation / no overlaps / no column logic
   ----------------------------------------- */
@media (max-width: 1024px) {
	/* consistent left/right content margin — aligns with logo edge */
	.SDportfolioLayout {
		padding-left: calc(var(--defaultInterval)*.5);
		padding-right: calc(var(--defaultInterval)*.5);
		box-sizing: border-box;
	}

	/* shut off desktop grid behavior */
	.SDportfolioLayout .portfolioGrid {
		display: block !important;
	}
	
	/* hide debug UI */
	.SDportfolioLayout .portfolioGridOverlay,
	.SDportfolioLayout .portfolioColumnLabel {
		display: none !important;
	}
	
	/* columns become plain blocks */
	.SDportfolioLayout .portfolioColumn {
		display: block !important;
		grid-column: auto !important;
		grid-row: auto !important;
		align-self: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		outline: none !important;
	}
	
	/* spacing between columns */
	.SDportfolioLayout .portfolioColumn + .portfolioColumn {
		margin-top: var(--stack-gap-tablet) !important;
	}
	
	/* items become plain full-width blocks */
	.SDportfolioLayout .portfolioItem {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		transform: none !important;
	}
	
	/* spacing between items */
	.SDportfolioLayout .portfolioColumn > .portfolioItem + .portfolioItem {
		margin-top: var(--stack-gap-tablet) !important;
	}
	
	/* neutralize overlap stacking behavior */
	.SDportfolioLayout .portfolioColumn,
	.SDportfolioLayout .portfolioItem {
		z-index: auto !important;
	}
	
	/* stop parallax motion on smaller screens */
	.SDportfolioLayout .portfolioItem.has-parallax.item-type-image .imageWrapper {
		transform: none !important;
		will-change: auto;
	}
	
	/* section spacing */
	.SDportfolioLayout.small {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
	
	.SDportfolioLayout.medium {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
	
	.SDportfolioLayout.large {
		padding-top: 3.5rem;
		padding-bottom: 3.5rem;
	}
}

/* -----------------------------------------
   Mobile refinements
   ----------------------------------------- */
@media (max-width: 767px) {
	.SDportfolioLayout .portfolioColumn + .portfolioColumn {
		margin-top: var(--stack-gap-mobile) !important;
	}
	
	.SDportfolioLayout .portfolioColumn > .portfolioItem + .portfolioItem {
		margin-top: var(--stack-gap-mobile) !important;
	}
	
	.SDportfolioLayout.small {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	
	.SDportfolioLayout.medium {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	
	.SDportfolioLayout.large {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}

/* -----------------------------------------
   Per-column breakpoint visibility (D / T / V)
   ----------------------------------------- */
@media (min-width: 1025px) {
	.portfolioColumn.col-hide-desktop {
		display: none !important;
	}
}

@media (max-width: 1024px) {
	.portfolioColumn.col-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.portfolioColumn.col-hide-mobile {
		display: none !important;
	}
}