/* Image Fan Carousel plugin (Portfolio Plugin) - Portfolio Scroll Cards widget */

.ifc-portfolio-wrap {
	--ifc-pf-card-width: 360px;
	--ifc-pf-gap: 32px;
	--ifc-pf-card-hover-lift: 8px;
	--ifc-pf-card-hover-speed: 250ms;
	--ifc-pf-image-height: 450px;
	--ifc-pf-image-ratio: auto;
	--ifc-pf-frame-border-width: 1px;
	--ifc-pf-frame-border-color: rgba( 255, 255, 255, 0.4 );
	--ifc-pf-frame-corner-size: 18px;
	--ifc-pf-frame-corner-width: 2px;
	--ifc-pf-frame-hover-color: #5b8def;
	--ifc-pf-frame-hover-speed: 500ms;
	--ifc-pf-corner-expand-distance: 8px;
	--ifc-pf-image-radius: 12px;
	--ifc-pf-card-height: 70dvh;
	--ifc-pf-card-max-width: 70dvw;
	--ifc-pf-card-max-height: 70dvh;
	--ifc-pf-card-ratio: 3 / 4;

	position: relative;
	/* Height is set dynamically by JS to create the scroll-jack distance,
	   based on the actual rendered card height - not a fixed viewport
	   height, so there's no empty space above/below the cards by default. */
}

.ifc-portfolio-pin {
	position: sticky;
	top: 0;
	overflow-x: hidden;
	overflow-y: visible;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	width: 100%;
}

.ifc-portfolio-heading {
	width: 100%;
	margin: 0 0 24px;
	font-size: 2em;
	font-weight: 700;
	color: #ffffff;
	text-align: center;
	flex-shrink: 0;
}

.ifc-portfolio-viewport {
	width: 100%;
	overflow-x: hidden;
	overflow-y: visible;
}

.ifc-portfolio-track {
	display: flex;
	align-items: stretch;
	gap: var( --ifc-pf-gap );
	will-change: transform;
}

.ifc-portfolio-card {
	position: relative;
	flex: 0 0 var( --ifc-pf-card-width );
	width: var( --ifc-pf-card-width );
	background-color: #1b1d24;
	border-radius: 16px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: var( --ifc-pf-content-gap, 12px );
	box-sizing: border-box;
}

/* Groups everything except the image (badges/title/description) into one
   flex item, so Content Position (Left/Right) can place the image beside
   it as a single unit instead of each text element sitting in its own
   column of the row. */
.ifc-portfolio-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

/* HEIGHT mode: the IMAGE gets a fixed height (width follows via the
   aspect ratio) so it's identical on every card regardless of
   title/description length. The card itself just shrinks-to-fit its
   content width, and its non-image children (badges/title/description)
   are capped to the same target width so that shrink-to-fit resolves
   cleanly instead of being blown wide by a long, unwrapped description -
   this also means the browser handles the card's horizontal padding
   automatically, no manual calc needed for it. Card height stays
   natural (image + text), so a longer description just makes that one
   card a little taller without ever resizing the image. */
.ifc-portfolio-wrap.ifc-pf-size-height .ifc-portfolio-card {
	flex: 0 0 auto;
	width: auto;
}

.ifc-portfolio-wrap.ifc-pf-size-height .ifc-portfolio-card > *:not( .ifc-portfolio-image-wrap ),
.ifc-portfolio-wrap.ifc-pf-size-height .ifc-portfolio-card-link > *:not( .ifc-portfolio-image-wrap ) {
	max-width: calc( var( --ifc-pf-card-height ) * var( --ifc-pf-card-ratio ) );
}

.ifc-portfolio-wrap.ifc-pf-size-height .ifc-portfolio-image-wrap {
	flex: 0 0 auto;
}

.ifc-portfolio-wrap.ifc-pf-size-height .ifc-portfolio-image {
	width: auto !important;
	height: var( --ifc-pf-card-height ) !important;
	aspect-ratio: var( --ifc-pf-card-ratio ) !important;
}

/* AUTO mode: the IMAGE's width is whichever is smaller of Image Max
   Width, or Image Max Height converted to an equivalent width via the
   aspect ratio - i.e. the image always fits inside that box, and its
   height then follows automatically from the ratio. This is a pure-CSS
   fit, so it re-evaluates live on device rotation with no JS. The card
   and its text children follow the same rules as Height mode above. */
.ifc-portfolio-wrap.ifc-pf-size-auto .ifc-portfolio-card {
	flex: 0 0 auto;
	width: auto;
}

.ifc-portfolio-wrap.ifc-pf-size-auto .ifc-portfolio-card > *:not( .ifc-portfolio-image-wrap ),
.ifc-portfolio-wrap.ifc-pf-size-auto .ifc-portfolio-card-link > *:not( .ifc-portfolio-image-wrap ) {
	max-width: min( var( --ifc-pf-card-max-width ), calc( var( --ifc-pf-card-max-height ) * var( --ifc-pf-card-ratio ) ) );
}

.ifc-portfolio-wrap.ifc-pf-size-auto .ifc-portfolio-image-wrap {
	flex: 0 0 auto;
}

.ifc-portfolio-wrap.ifc-pf-size-auto .ifc-portfolio-image {
	width: min( var( --ifc-pf-card-max-width ), calc( var( --ifc-pf-card-max-height ) * var( --ifc-pf-card-ratio ) ) ) !important;
	height: auto !important;
	aspect-ratio: var( --ifc-pf-card-ratio ) !important;
}

.ifc-portfolio-badges:not( :first-child ) {
	margin-top: 12px;
}

.ifc-portfolio-title:not( :first-child ) {
	margin-top: 12px;
}

.ifc-portfolio-description:not( :first-child ) {
	margin-top: 12px;
}

.ifc-portfolio-card-link {
	display: contents;
	color: inherit;
	text-decoration: none;
}

.ifc-portfolio-wrap.ifc-pf-hover-lift .ifc-portfolio-viewport {
	padding-top: var( --ifc-pf-card-hover-lift );
}

/* .ifc-portfolio-pin sticks flush at the very top of the viewport
   (top: 0) during the pinned scroll phase, so anything that moves
   upward past that line has nowhere to render - it's above the visible
   window, not merely clipped by CSS. Reserve breathing room in the
   viewport so the expanding corners always stay within the visible area. */
.ifc-portfolio-wrap.ifc-pf-corner-expand .ifc-portfolio-viewport {
	padding-top: var( --ifc-pf-corner-expand-distance );
}

.ifc-portfolio-wrap.ifc-pf-hover-lift.ifc-pf-corner-expand .ifc-portfolio-viewport {
	padding-top: calc( var( --ifc-pf-card-hover-lift ) + var( --ifc-pf-corner-expand-distance ) );
}

.ifc-portfolio-wrap.ifc-pf-hover-lift .ifc-portfolio-card {
	transition: transform var( --ifc-pf-card-hover-speed ) ease;
}

.ifc-portfolio-wrap.ifc-pf-hover-lift .ifc-portfolio-card:hover {
	transform: translateY( calc( -1 * var( --ifc-pf-card-hover-lift ) ) );
}

.ifc-portfolio-image-wrap {
	position: relative;
	width: 100%;
	flex-shrink: 0;
}

.ifc-portfolio-image {
	position: relative;
	width: 100%;
	height: var( --ifc-pf-image-height );
	aspect-ratio: var( --ifc-pf-image-ratio );
	border-radius: 12px;
	overflow: hidden;
}

.ifc-portfolio-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The frame overlay sits as a sibling of .ifc-portfolio-image (not a
   child), so that when a corner bracket slides outward on hover it isn't
   clipped by the image's own overflow:hidden box. */
.ifc-pf-frame-box {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: visible;
}

/* Image Frame: thin border + 4 corner brackets, matching the Scroll
   Timeline node style. Markup is always rendered; hidden unless the
   wrapper carries .ifc-pf-frame (from the "Enable Frame" control). */
.ifc-pf-frame-border,
.ifc-pf-frame-border-hover,
.ifc-pf-frame-corner {
	display: none;
}

.ifc-pf-frame .ifc-pf-frame-border,
.ifc-pf-frame .ifc-pf-frame-border-hover {
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-sizing: border-box;
}

.ifc-pf-frame .ifc-pf-frame-border {
	border: var( --ifc-pf-frame-border-width ) solid var( --ifc-pf-frame-border-color );
	border-radius: var( --ifc-pf-image-radius );
}

/* The hover border is revealed via a circular clip-path centered on the
   image, so the color visually "sweeps" outward from the middle. */
.ifc-pf-frame .ifc-pf-frame-border-hover {
	border: var( --ifc-pf-frame-border-width ) solid var( --ifc-pf-frame-hover-color );
	border-radius: var( --ifc-pf-image-radius );
	clip-path: circle( 0% at 50% 50% );
	transition: clip-path var( --ifc-pf-frame-hover-speed ) ease;
}

.ifc-portfolio-wrap.ifc-pf-frame .ifc-portfolio-image-wrap:hover .ifc-pf-frame-border-hover {
	clip-path: circle( 75% at 50% 50% );
}

.ifc-pf-frame .ifc-pf-frame-corner {
	display: block;
	position: absolute;
	width: var( --ifc-pf-frame-corner-size );
	height: var( --ifc-pf-frame-corner-size );
	border-color: var( --ifc-pf-frame-border-color );
	pointer-events: none;
	transition: border-color var( --ifc-pf-frame-hover-speed ) ease, transform var( --ifc-pf-frame-hover-speed ) ease;
}

.ifc-pf-frame-corner-tl {
	top: 0;
	left: 0;
	border-top: var( --ifc-pf-frame-corner-width ) solid;
	border-left: var( --ifc-pf-frame-corner-width ) solid;
}

.ifc-pf-frame-corner-tr {
	top: 0;
	right: 0;
	border-top: var( --ifc-pf-frame-corner-width ) solid;
	border-right: var( --ifc-pf-frame-corner-width ) solid;
}

.ifc-pf-frame-corner-bl {
	bottom: 0;
	left: 0;
	border-bottom: var( --ifc-pf-frame-corner-width ) solid;
	border-left: var( --ifc-pf-frame-corner-width ) solid;
}

.ifc-pf-frame-corner-br {
	bottom: 0;
	right: 0;
	border-bottom: var( --ifc-pf-frame-corner-width ) solid;
	border-right: var( --ifc-pf-frame-corner-width ) solid;
}

.ifc-pf-frame .ifc-portfolio-image-wrap:hover .ifc-pf-frame-corner {
	border-color: var( --ifc-pf-frame-hover-color );
}

/* Each corner bracket slides outward along its own diagonal on hover,
   independent of the border color-hover behavior above. */
.ifc-portfolio-wrap.ifc-pf-frame.ifc-pf-corner-expand .ifc-portfolio-image-wrap:hover .ifc-pf-frame-corner-tl {
	transform: translate( calc( -1 * var( --ifc-pf-corner-expand-distance ) ), calc( -1 * var( --ifc-pf-corner-expand-distance ) ) );
}

.ifc-portfolio-wrap.ifc-pf-frame.ifc-pf-corner-expand .ifc-portfolio-image-wrap:hover .ifc-pf-frame-corner-tr {
	transform: translate( var( --ifc-pf-corner-expand-distance ), calc( -1 * var( --ifc-pf-corner-expand-distance ) ) );
}

.ifc-portfolio-wrap.ifc-pf-frame.ifc-pf-corner-expand .ifc-portfolio-image-wrap:hover .ifc-pf-frame-corner-bl {
	transform: translate( calc( -1 * var( --ifc-pf-corner-expand-distance ) ), var( --ifc-pf-corner-expand-distance ) );
}

.ifc-portfolio-wrap.ifc-pf-frame.ifc-pf-corner-expand .ifc-portfolio-image-wrap:hover .ifc-pf-frame-corner-br {
	transform: translate( var( --ifc-pf-corner-expand-distance ), var( --ifc-pf-corner-expand-distance ) );
}

.ifc-portfolio-badges {
	display: flex;
	flex-wrap: wrap;
	align-self: flex-start;
	gap: 8px;
}

.ifc-portfolio-badge {
	display: inline-block;
	background-color: #5b8def;
	color: #ffffff;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 20px;
}

.ifc-portfolio-title {
	font-size: 1.2em;
	font-weight: 600;
	color: #ffffff;
}

.ifc-portfolio-description {
	font-size: 0.95em;
	line-height: 1.5;
	color: #9a9daa;
}

/* While the scramble effect is running on the heading, a card title, or a
   card description, lock the text to a monospace-ish tabular width so the
   reveal doesn't jitter the surrounding layout. */
[data-ifc-scramble].ifc-pf-scrambling {
	font-variant-numeric: tabular-nums;
}

/* Fallback responsive defaults (mirrors the Elementor responsive controls'
   tablet/mobile defaults), in case the widget is viewed before Elementor's
   own generated CSS loads. */
@media ( max-width: 1024px ) {
	.ifc-portfolio-wrap {
		--ifc-pf-card-width: 300px;
		--ifc-pf-image-height: 375px;
	}

	.ifc-portfolio-card {
		padding: 16px;
	}
}

@media ( max-width: 767px ) {
	.ifc-portfolio-wrap {
		--ifc-pf-card-width: 240px;
		--ifc-pf-image-height: 300px;
	}

	.ifc-portfolio-card {
		padding: 12px;
	}
}

/* Mobile fallback: normal swipeable row, no scroll-jacking pin. */
@media ( max-width: 767px ) {
	.ifc-portfolio-wrap.ifc-pf-disable-mobile {
		height: auto !important;
	}

	.ifc-portfolio-wrap.ifc-pf-disable-mobile .ifc-portfolio-pin {
		position: static;
		height: auto;
		overflow: visible;
	}

	.ifc-portfolio-wrap.ifc-pf-disable-mobile .ifc-portfolio-viewport {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.ifc-portfolio-wrap.ifc-pf-disable-mobile .ifc-portfolio-track {
		transform: none !important;
		padding: 0 20px;
	}
}