/* Image Fan Carousel plugin - Framed Image widget */

.ifc-framed-image-wrap {
	--ifc-fi-border-width: 1px;
	--ifc-fi-border-color: rgba( 255, 255, 255, 0.4 );
	--ifc-fi-corner-size: 18px;
	--ifc-fi-corner-width: 2px;
	--ifc-fi-corner-expand-distance: 8px;
	--ifc-fi-hover-color: #5b8def;
	--ifc-fi-hover-speed: 500ms;
	--ifc-fi-radius: 0px;

	display: block;
	max-width: 100%;
	position: relative;
}

.ifc-framed-image-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ifc-framed-image {
	position: relative;
	width: 100%;
	overflow: hidden;
}

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

.ifc-framed-image iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* The frame overlay sits as a sibling of .ifc-framed-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-fi-frame-box {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: visible;
}

/* Frame: thin border + 4 corner brackets. Markup is always rendered;
   hidden unless the wrapper carries .ifc-fi-frame ("Enable Frame"). */
.ifc-fi-border,
.ifc-fi-border-hover,
.ifc-fi-corner {
	display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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