/* Sitto - Link Card. Defaults only: every value is overridable from the widget's style controls. */
.sitto-link-card {
	--sitto-lc-transition: 250ms;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	box-sizing: border-box;
	width: 100%;
	padding: 24px 28px;
	background-color: #fff;
	border: 1px solid #E9EAEB;
	border-radius: 24px;
	color: inherit;
	text-decoration: none;
	transition: background-color var(--sitto-lc-transition) ease, border-color var(--sitto-lc-transition) ease,
		box-shadow var(--sitto-lc-transition) ease, transform var(--sitto-lc-transition) ease;
}
a.sitto-link-card.sitto-link-card--link { cursor: pointer; }
.sitto-link-card:hover,
.sitto-link-card:focus-visible { text-decoration: none; }
.sitto-link-card:focus-visible { outline: 2px solid #FFC20F; outline-offset: 2px; }

.sitto-link-card__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	font-size: 24px;
	line-height: 1;
	color: #0085FF;
	background-color: #EAF3FF;
	border-radius: 14px;
	transition: color var(--sitto-lc-transition) ease, background-color var(--sitto-lc-transition) ease,
		transform var(--sitto-lc-transition) ease;
}
.sitto-link-card__icon i,
.sitto-link-card__icon svg { display: block; line-height: 1; }
.sitto-link-card__icon svg { width: 1em; height: 1em; fill: currentColor; }

.sitto-link-card__body { flex: 1 1 auto; min-width: 0; display: block; }
.sitto-link-card .sitto-link-card__title {
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: #181D27;
	transition: color var(--sitto-lc-transition) ease;
}
.sitto-link-card .sitto-link-card__desc {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.5;
	color: #717680;
	transition: color var(--sitto-lc-transition) ease;
}

.sitto-link-card__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	font-size: 20px;
	line-height: 1;
	color: #717680;
	transition: color var(--sitto-lc-transition) ease, transform var(--sitto-lc-transition) ease;
}
.sitto-link-card__arrow svg { width: 1em; height: 1em; fill: currentColor; }

/* Default hover when a link is set: gentle arrow nudge (change via the "Move right on hover" control). */
a.sitto-link-card--link:hover .sitto-link-card__arrow,
a.sitto-link-card--link:focus-visible .sitto-link-card__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
	.sitto-link-card,
	.sitto-link-card * { transition: none !important; }
}