/* Flip Cards 3D — front end */

.fc3d-grid {
	--fc3d-cols: 3;
	--fc3d-cols-t: 2;
	--fc3d-cols-m: 1;

	display: grid;
	grid-template-columns: repeat(var(--fc3d-cols), minmax(0, 1fr));
	gap: var(--fc3d-gap, 28px);
	max-width: var(--fc3d-max, 1300px);
	margin-left: auto;
	margin-right: auto;
	font-family: var(--fc3d-font, inherit);
	box-sizing: border-box;
}

.fc3d-grid *,
.fc3d-grid *::before,
.fc3d-grid *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- item */

.fc3d-item {
	position: relative;
	min-height: var(--fc3d-min-h, 330px);
	perspective: var(--fc3d-perspective, 1100px);
	transform:
		rotateX(var(--fc3d-rx, 0deg))
		rotateY(var(--fc3d-ry, 0deg))
		translateY(var(--fc3d-ty, 0px))
		scale(var(--fc3d-turn, 1));
	transition: transform 260ms ease;
	outline: none;
}

.fc3d-item.fc3d-span-2 { grid-column: span 2; }
.fc3d-item.fc3d-span-3 { grid-column: span 3; }

.fc3d-item.fc3d-click { cursor: pointer; }

.fc3d-item:hover {
	--fc3d-ty: calc(var(--fc3d-lift, 8px) * -1);
	z-index: 3;
}

.fc3d-item:focus-visible {
	outline: 2px solid var(--fc3d-accent, #3b30e8);
	outline-offset: 4px;
	border-radius: var(--fc3d-radius, 16px);
}

.fc3d-inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform var(--fc3d-speed, 800ms) var(--fc3d-ease, cubic-bezier(.45, .05, .55, .95));
}

.fc3d-h.fc3d-hover:hover > .fc3d-inner,
.fc3d-h.is-flipped > .fc3d-inner { transform: rotateY(180deg); }

.fc3d-v.fc3d-hover:hover > .fc3d-inner,
.fc3d-v.is-flipped > .fc3d-inner { transform: rotateX(-180deg); }

/* ---------------------------------------------------------------- faces */

.fc3d-face {
	position: absolute;
	inset: 0;
	padding: var(--fc3d-pad, 30px);
	border-radius: var(--fc3d-radius, 16px);
	border: 1px solid var(--fc3d-card-border, #e9ebf3);
	background: var(--fc3d-card-bg, #fff);
	box-shadow: var(--fc3d-shadow, 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .07));
	transform-style: preserve-3d;
	transition:
		box-shadow 260ms ease,
		opacity 70ms linear calc(var(--fc3d-speed, 800ms) / 2 - 35ms);
}

/* THE FIX FOR SEE-THROUGH TEXT.
   backface-visibility is not inherited, so every element inside a
   preserve-3d face has to hide its own back side, otherwise the front
   text shows through the back mirrored. */
.fc3d-face,
.fc3d-face * {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Second safety net: the face that is turned away is also faded out,
   swapped exactly halfway through the flip while both faces are edge on. */
.fc3d-front { opacity: 1; }
.fc3d-back { opacity: 0; }

.fc3d-hover:hover > .fc3d-inner > .fc3d-front,
.fc3d-item.is-flipped > .fc3d-inner > .fc3d-front { opacity: 0; }

.fc3d-hover:hover > .fc3d-inner > .fc3d-back,
.fc3d-item.is-flipped > .fc3d-inner > .fc3d-back { opacity: 1; }

/* only the face pointing at the visitor can be clicked */
.fc3d-back { pointer-events: none; }

.fc3d-hover:hover > .fc3d-inner > .fc3d-back,
.fc3d-item.is-flipped > .fc3d-inner > .fc3d-back { pointer-events: auto; }

.fc3d-hover:hover > .fc3d-inner > .fc3d-front,
.fc3d-item.is-flipped > .fc3d-inner > .fc3d-front { pointer-events: none; }

/* The face turned towards the visitor is also raised, so a neighbouring
   card or a theme wrapper cannot sit over its buttons. */
.fc3d-front { z-index: 2; }
.fc3d-back { z-index: 1; }

.fc3d-hover:hover > .fc3d-inner > .fc3d-front,
.fc3d-item.is-flipped > .fc3d-inner > .fc3d-front { z-index: 1; }

.fc3d-hover:hover > .fc3d-inner > .fc3d-back,
.fc3d-item.is-flipped > .fc3d-inner > .fc3d-back { z-index: 2; }

.fc3d-back {
	border-color: var(--fc3d-back-border, #e9ebf3);
	background: var(--fc3d-back-bg, #fff);
}

.fc3d-h .fc3d-back { transform: rotateY(180deg); }
.fc3d-v .fc3d-back { transform: rotateX(180deg); }

.fc3d-item:hover .fc3d-face {
	box-shadow: var(--fc3d-shadow-hover, 0 18px 48px rgba(16, 24, 40, .14));
}

.fc3d-static .fc3d-inner { transform: none !important; }
.fc3d-static .fc3d-front { opacity: 1; pointer-events: auto; }

.fc3d-highlight .fc3d-face {
	background: var(--fc3d-hi-bg, #eef1fe);
	border-color: var(--fc3d-hi-border, #dfe3fb);
}

/* ----------------------------------------------------------- watermark */

.fc3d-watermark {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-repeat: no-repeat;
	pointer-events: none;
	transform: translateZ(0);
}

/* ------------------------------------------------------------ 3D depth */

.fc3d-layer {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	transform-style: preserve-3d;
	transform: translateZ(0);
	transition: transform var(--fc3d-speed, 800ms) var(--fc3d-ease, cubic-bezier(.45, .05, .55, .95));
}

.fc3d-item:hover .fc3d-layer,
.fc3d-item.is-flipped .fc3d-layer {
	transform: translateZ(var(--fc3d-depth, 34px));
}

/* used for a split second while the script measures the tallest face */
.fc3d-item.fc3d-measuring .fc3d-layer { height: auto; }

.fc3d-badge,
.fc3d-title,
.fc3d-btn-wrap,
.fc3d-cols {
	transform: translateZ(0);
	transition: transform var(--fc3d-speed, 800ms) var(--fc3d-ease, cubic-bezier(.45, .05, .55, .95));
}

.fc3d-item:hover .fc3d-badge,
.fc3d-item.is-flipped .fc3d-badge { transform: translateZ(calc(var(--fc3d-depth, 34px) * .25)); }

.fc3d-item:hover .fc3d-title,
.fc3d-item.is-flipped .fc3d-title { transform: translateZ(calc(var(--fc3d-depth, 34px) * .4)); }

.fc3d-item:hover .fc3d-cols,
.fc3d-item.is-flipped .fc3d-cols { transform: translateZ(calc(var(--fc3d-depth, 34px) * .3)); }

.fc3d-item:hover .fc3d-btn-wrap,
.fc3d-item.is-flipped .fc3d-btn-wrap { transform: translateZ(calc(var(--fc3d-depth, 34px) * .55)); }

/* ------------------------------------------------------------- content */

.fc3d-badge {
	align-self: flex-start;
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--fc3d-badge-bg, #eef0ff);
	color: var(--fc3d-badge-color, #5b6478);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.fc3d-title {
	margin: 18px 0 0;
	color: var(--fc3d-title, #111827);
	font-size: var(--fc3d-title-size, 22px);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -.01em;
}

.fc3d-badge + .fc3d-title { margin-top: 20px; }

.fc3d-text,
.fc3d-back-text {
	margin: 12px 0 0;
	color: var(--fc3d-text, #525c6b);
	font-size: var(--fc3d-text-size, 15px);
	line-height: 1.62;
}

.fc3d-text p,
.fc3d-back-text p { margin: 0 0 10px; }
.fc3d-text p:last-child,
.fc3d-back-text p:last-child { margin-bottom: 0; }

.fc3d-foot { margin-top: 20px; }

.fc3d-meta {
	margin: 0 0 16px;
	color: var(--fc3d-meta, #9aa1af);
	font-size: var(--fc3d-meta-size, 13px);
	line-height: 1.5;
}

.fc3d-back-title {
	margin: 0;
	color: var(--fc3d-back-title, #111827);
	font-size: calc(var(--fc3d-title-size, 22px) - 4px);
	font-weight: 700;
	line-height: 1.3;
}

.fc3d-back-text { color: var(--fc3d-back-text, #525c6b); }

/* --------------------------------------------- headed bullet columns */

.fc3d-cols {
	display: grid;
	gap: 0 22px;
	margin-top: 4px;
}

.fc3d-cols-1 {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px 0;
}
.fc3d-cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fc3d-cols-2.fc3d-has-divider { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); }

.fc3d-back-title + .fc3d-cols,
.fc3d-back-text + .fc3d-cols { margin-top: 18px; }

.fc3d-divider {
	display: block;
	width: 1px;
	align-self: stretch;
	background: var(--fc3d-divider, #e7e9f0);
}

.fc3d-col-title {
	margin: 0 0 12px;
	color: var(--fc3d-col-title, #111827);
	font-size: var(--fc3d-coltitle-size, 14px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.005em;
}

.fc3d-bullets {
	display: grid;
	grid-template-columns: repeat(var(--fc3d-bcols, 1), minmax(0, 1fr));
	gap: 10px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc3d-bullets li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	padding: 0;
	color: var(--fc3d-back-text, #525c6b);
	font-size: var(--fc3d-bullet-size, 14px);
	line-height: 1.45;
	list-style: none;
}

.fc3d-bullets li::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-top: .5em;
	border-radius: 50%;
	background: var(--fc3d-bullet, #3b30e8);
}

/* ------------------------------------------------------- text alignment */

.fc3d-ta-left .fc3d-layer { text-align: left; }
.fc3d-ta-left .fc3d-badge { align-self: flex-start; }
.fc3d-ta-left .fc3d-bullets li { justify-content: flex-start; }
.fc3d-ta-left .fc3d-wrap-inherit { justify-content: flex-start; }

.fc3d-ta-center .fc3d-layer { text-align: center; }
.fc3d-ta-center .fc3d-badge { align-self: center; }
.fc3d-ta-center .fc3d-bullets li { justify-content: center; }
.fc3d-ta-center .fc3d-wrap-inherit { justify-content: center; }

.fc3d-ta-right .fc3d-layer { text-align: right; }
.fc3d-ta-right .fc3d-badge { align-self: flex-end; }
.fc3d-ta-right .fc3d-bullets li { justify-content: flex-end; }
.fc3d-ta-right .fc3d-wrap-inherit { justify-content: flex-end; }

/* -------------------------------------------------------------- buttons */

.fc3d-back-foot {
	margin-top: auto;
	padding-top: 22px;
}

.fc3d-btn-wrap {
	display: flex;
	position: relative;
	z-index: 2;
}
.fc3d-wrap-inherit { justify-content: flex-start; }
.fc3d-wrap-left { justify-content: flex-start; }
.fc3d-wrap-center { justify-content: center; }
.fc3d-wrap-right { justify-content: flex-end; }

.fc3d-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-size: var(--fc3d-text-size, 15px);
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.fc3d-btn:focus-visible {
	outline: 2px solid var(--fc3d-accent, #3b30e8);
	outline-offset: 3px;
}

/* a flip control is a real <button>, so the browser defaults are reset
   without disturbing the padding and background of each style */
button.fc3d-btn {
	margin: 0;
	border: 0;
	font-family: inherit;
	text-align: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

button.fc3d-btn-link {
	padding: 0;
	background: transparent;
}

button.fc3d-btn-outline {
	border: 1.5px solid var(--fc3d-accent, #3b30e8);
}

.fc3d-btn-link { color: var(--fc3d-accent, #3b30e8); }
.fc3d-btn-link:hover { color: var(--fc3d-accent, #3b30e8); }
.fc3d-btn-link .fc3d-arrow { transition: transform 180ms ease; }
.fc3d-btn-link:hover .fc3d-arrow { transform: translateX(4px); }

.fc3d-btn-solid {
	padding: 14px 26px;
	border-radius: 999px;
	background: var(--fc3d-accent, #3b30e8);
	color: var(--fc3d-accent-text, #fff);
	box-shadow: 0 8px 20px rgba(59, 48, 232, .22);
}

.fc3d-btn-solid:hover {
	color: var(--fc3d-accent-text, #fff);
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(59, 48, 232, .3);
}

.fc3d-btn-outline {
	padding: 13px 25px;
	border: 1.5px solid var(--fc3d-accent, #3b30e8);
	border-radius: 999px;
	color: var(--fc3d-accent, #3b30e8);
	background: transparent;
}

.fc3d-btn-outline:hover {
	background: var(--fc3d-accent, #3b30e8);
	color: var(--fc3d-accent-text, #fff);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
	.fc3d-grid { grid-template-columns: repeat(var(--fc3d-cols-t), minmax(0, 1fr)); }
	.fc3d-item.fc3d-span-3,
	.fc3d-item.fc3d-span-2 { grid-column: span var(--fc3d-cols-t); }
}

@media (max-width: 640px) {
	.fc3d-grid { grid-template-columns: repeat(var(--fc3d-cols-m), minmax(0, 1fr)); }
	.fc3d-item.fc3d-span-3,
	.fc3d-item.fc3d-span-2 { grid-column: span var(--fc3d-cols-m); }
	.fc3d-face { padding: calc(var(--fc3d-pad, 30px) * .8); }

	/* the two columns stack, and the divider becomes a horizontal rule */
	.fc3d-cols-2,
	.fc3d-cols-2.fc3d-has-divider {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px 0;
	}
	.fc3d-divider {
		width: auto;
		height: 1px;
	}
	.fc3d-bullets { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.fc3d-item,
	.fc3d-inner,
	.fc3d-layer,
	.fc3d-badge,
	.fc3d-title,
	.fc3d-cols,
	.fc3d-btn-wrap {
		transform: none !important;
		transition: none !important;
	}

	.fc3d-face {
		transform: none !important;
		backface-visibility: visible;
		-webkit-backface-visibility: visible;
		transition: opacity 220ms ease;
	}
}