/* Image Fan Carousel plugin - Text Card widget */

.ifc-text-card-wrap {
	--ifc-tc-border-width: 1px;
	--ifc-tc-border-color: rgba( 255, 255, 255, 0.4 );
	--ifc-tc-corner-size: 18px;
	--ifc-tc-corner-width: 2px;
	--ifc-tc-corner-expand-distance: 8px;
	--ifc-tc-hover-color: #5b8def;
	--ifc-tc-hover-speed: 500ms;
	--ifc-tc-bg-color: transparent;
	--ifc-tc-bg-hover-color: transparent;
	--ifc-tc-title-color: #ffffff;
	--ifc-tc-title-hover-color: #ffffff;
	--ifc-tc-subtext-color: rgba( 255, 255, 255, 0.6 );
	--ifc-tc-subtext-hover-color: rgba( 255, 255, 255, 0.6 );
	--ifc-tc-desc-color: rgba( 255, 255, 255, 0.75 );
	--ifc-tc-desc-hover-color: rgba( 255, 255, 255, 0.75 );
	--ifc-tc-icon-color: #ffffff;
	--ifc-tc-icon-hover-color: #ffffff;
	--ifc-tc-icon-size: 32px;
	--ifc-tc-radius: 0px;

	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	box-sizing: border-box;
	position: relative;
}

/* When several Text Card widgets are placed side by side as flex children
   of the same row (e.g. an Elementor flex Container without per-item
   "Grow"/"Basis" set), make them split the row evenly instead of each
   shrinking or growing to fit its own content. This only takes effect on
   direct flex children, so it won't affect cards stacked full-width. */
.elementor-widget-ifc_text_card {
	flex: 1 1 0;
	min-width: 0;
}

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

.ifc-text-card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var( --ifc-tc-bg-color );
	transition: background-color var( --ifc-tc-hover-speed ) ease;
	overflow: hidden;
}

.ifc-text-card-wrap.ifc-tc-hover:hover .ifc-text-card {
	background-color: var( --ifc-tc-bg-hover-color );
}

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

.ifc-text-card-body {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
	width: 100%;
}

.ifc-text-card-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ifc-text-card-icon i {
	font-size: var( --ifc-tc-icon-size );
	color: var( --ifc-tc-icon-color );
	transition: color var( --ifc-tc-hover-speed ) ease;
}

.ifc-text-card-icon svg {
	width: var( --ifc-tc-icon-size );
	height: var( --ifc-tc-icon-size );
	fill: var( --ifc-tc-icon-color );
	color: var( --ifc-tc-icon-color );
	transition: fill var( --ifc-tc-hover-speed ) ease, color var( --ifc-tc-hover-speed ) ease;
}

.ifc-text-card-icon img {
	width: var( --ifc-tc-icon-size );
	height: var( --ifc-tc-icon-size );
	object-fit: contain;
}

.ifc-text-card-wrap.ifc-tc-hover:hover .ifc-text-card-icon i {
	color: var( --ifc-tc-icon-hover-color );
}

.ifc-text-card-wrap.ifc-tc-hover:hover .ifc-text-card-icon svg {
	fill: var( --ifc-tc-icon-hover-color );
	color: var( --ifc-tc-icon-hover-color );
}

.ifc-text-card-inner {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

.ifc-text-card-subtext {
	margin: 0 0 0.5em;
	color: var( --ifc-tc-subtext-color );
	transition: color var( --ifc-tc-hover-speed ) ease;
}

.ifc-text-card-wrap.ifc-tc-hover:hover .ifc-text-card-subtext {
	color: var( --ifc-tc-subtext-hover-color );
}

.ifc-text-card-title {
	margin: 0 0 0.5em;
	color: var( --ifc-tc-title-color );
	transition: color var( --ifc-tc-hover-speed ) ease;
}

.ifc-text-card-wrap.ifc-tc-hover:hover .ifc-text-card-title {
	color: var( --ifc-tc-title-hover-color );
}

.ifc-text-card-desc {
	margin: 0;
	color: var( --ifc-tc-desc-color );
	transition: color var( --ifc-tc-hover-speed ) ease;
}

.ifc-text-card-wrap.ifc-tc-hover:hover .ifc-text-card-desc {
	color: var( --ifc-tc-desc-hover-color );
}

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

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

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

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

.ifc-text-card-wrap.ifc-tc-frame.ifc-tc-hover:hover .ifc-tc-border-hover {
	clip-path: circle( 75% at 50% 50% );
}

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

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

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

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

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

.ifc-text-card-wrap.ifc-tc-frame.ifc-tc-hover:hover .ifc-tc-corner {
	border-color: var( --ifc-tc-hover-color );
}

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

.ifc-text-card-wrap.ifc-tc-frame.ifc-tc-corner-expand:hover .ifc-tc-corner-tr {
	transform: translate( var( --ifc-tc-corner-expand-distance ), calc( -1 * var( --ifc-tc-corner-expand-distance ) ) );
}

.ifc-text-card-wrap.ifc-tc-frame.ifc-tc-corner-expand:hover .ifc-tc-corner-bl {
	transform: translate( calc( -1 * var( --ifc-tc-corner-expand-distance ) ), var( --ifc-tc-corner-expand-distance ) );
}

.ifc-text-card-wrap.ifc-tc-frame.ifc-tc-corner-expand:hover .ifc-tc-corner-br {
	transform: translate( var( --ifc-tc-corner-expand-distance ), var( --ifc-tc-corner-expand-distance ) );
}