/**
 * BRN Plugin — Zigzag Steps
 *
 * Card structure: .brn-zz__card is the white outer frame (shadow, outer radius);
 * .brn-zz__inner is the tinted panel inside it. The gap between them is the
 * frame's padding, which is what gives each card its white border.
 */

.brn-zz {
	--brn-cols: 5;
	--brn-gap: 26px;
	--brn-offset: 80px;
	--brn-card-align: start;
	--brn-dot-size: 16px;
	--brn-dot-x: 0px;
	--brn-dot-y: 0px;
	--brn-line-color: #b9c2cf;
	--brn-line-width: 2;
	--brn-anim-duration: 600ms;
	--brn-anim-stagger: 120ms;
	--brn-anim-dist: 28px;
	--brn-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--brn-tilt: 3deg;

	position: relative;
	box-sizing: border-box;
}

.brn-zz *,
.brn-zz *::before,
.brn-zz *::after {
	box-sizing: border-box;
}

/* The connector layer sits behind the cards and spans the whole widget. */
.brn-zz__line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}

.brn-zz__line .brn-zz__path {
	fill: none;
	stroke: var(--brn-line-color);
	stroke-width: var(--brn-line-width);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.brn-zz__items {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--brn-cols), minmax(0, 1fr));
	align-items: start;
	gap: var(--brn-gap);
	/* Room for the dot on the top edge, plus the corner a tilted card lifts. */
	padding-block-start: calc(var(--brn-dot-size) / 2 + 10px);
}

.brn-zz__item {
	position: relative;
	min-width: 0;
}

/* The zigzag itself: every other card is pushed down. */
.brn-zz--start-up .brn-zz__item:nth-child(even),
.brn-zz--start-down .brn-zz__item:nth-child(odd) {
	margin-block-start: var(--brn-offset);
}

/* White frame ------------------------------------------------------------- */

.brn-zz__card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 8px;
	border-radius: 16px;
	background-color: #fff;
	transition: transform 0.28s var(--brn-anim-ease), rotate 0.28s var(--brn-anim-ease),
		box-shadow 0.28s ease;
}

/*
 * Tilt uses the standalone `rotate` property rather than `transform`, so the
 * hover lift (a transform) composes with it instead of overwriting it.
 * A rotated circle is still a circle, so the connector still measures the dot
 * centres correctly.
 */
.brn-zz--tilt-all .brn-zz__card,
.brn-zz--tilt-alt .brn-zz__item:nth-child(odd) .brn-zz__card {
	rotate: var(--brn-tilt);
}

.brn-zz--tilt-alt .brn-zz__item:nth-child(even) .brn-zz__card {
	rotate: calc(var(--brn-tilt) * -1);
}

.brn-zz--tilt-straighten .brn-zz__item:hover .brn-zz__card {
	rotate: 0deg;
}

/* Grows to fill the frame, so a card min-height still lands on the panel. */
.brn-zz__inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: var(--brn-card-align);
	text-align: var(--brn-card-align);
	padding: 18px 18px 20px;
	border-radius: 10px;
	background-color: var(--brn-item-bg, #fff);
	transition: background-color 0.28s ease;
}

/* Number ------------------------------------------------------------------ */

.brn-zz__num {
	line-height: 1;
	color: var(--brn-item-color, #2f80ed);
	opacity: 0.55;
	font-style: italic;
	font-weight: 700;
	font-size: 22px;
	margin-block-end: 10px;
}

.brn-zz--num-start .brn-zz__num {
	align-self: start;
}

.brn-zz--num-end .brn-zz__num {
	align-self: end;
}

.brn-zz--num-above .brn-zz__num {
	align-self: var(--brn-card-align);
}

/* Body -------------------------------------------------------------------- */

.brn-zz__body {
	width: 100%;
}

.brn-zz__title {
	margin: 0 0 10px;
	color: #1b2437;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.brn-zz__text {
	margin: 0;
	color: #6b7280;
	font-size: 13px;
	line-height: 1.7;
}

.brn-zz__text > :last-child {
	margin-block-end: 0;
}

/* Dot --------------------------------------------------------------------- */

.brn-zz__dot {
	position: absolute;
	top: 0;
	width: var(--brn-dot-size);
	height: var(--brn-dot-size);
	border-radius: 50%;
	background-color: var(--brn-item-color, #2f80ed);
	border: 3px solid #fff;
	z-index: 2;
}

.brn-zz--dot-top-start .brn-zz__dot {
	inset-inline-start: 0;
	transform: translate(0, -50%) translate(var(--brn-dot-x), var(--brn-dot-y));
}

.brn-zz--dot-top-end .brn-zz__dot {
	inset-inline-end: 0;
	transform: translate(0, -50%) translate(var(--brn-dot-x), var(--brn-dot-y));
}

.brn-zz--dot-top-center .brn-zz__dot {
	inset-inline-start: 50%;
	margin-inline-start: calc(var(--brn-dot-size) / -2);
	transform: translate(0, -50%) translate(var(--brn-dot-x), var(--brn-dot-y));
}

/* Whole-card link overlay ------------------------------------------------- */

.brn-zz__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	text-decoration: none;
}

/* Scroll-in animation ----------------------------------------------------- */

/*
 * Each effect only sets the resting (hidden) transform; .brn-zz--in clears it.
 * `scale` is kept off `transform` so the dot's positioning transform survives.
 */
.brn-zz--animate .brn-zz__item {
	opacity: 0;
	will-change: opacity, transform;
}

.brn-zz--animate.brn-zz--fx-fade-up .brn-zz__item {
	transform: translateY(var(--brn-anim-dist));
}

.brn-zz--animate.brn-zz--fx-fade-down .brn-zz__item {
	transform: translateY(calc(var(--brn-anim-dist) * -1));
}

.brn-zz--animate.brn-zz--fx-zoom-in .brn-zz__item {
	transform: scale(0.9);
}

.brn-zz--animate.brn-zz--fx-zoom-out .brn-zz__item {
	transform: scale(1.08);
}

.brn-zz--animate.brn-zz--fx-slide-start .brn-zz__item {
	transform: translateX(calc(var(--brn-anim-dist) * -1));
}

.brn-zz--animate.brn-zz--fx-slide-end .brn-zz__item {
	transform: translateX(var(--brn-anim-dist));
}

/* In RTL the inline axis is mirrored, so the slide direction flips with it. */
.brn-zz--rtl.brn-zz--animate.brn-zz--fx-slide-start .brn-zz__item {
	transform: translateX(var(--brn-anim-dist));
}

.brn-zz--rtl.brn-zz--animate.brn-zz--fx-slide-end .brn-zz__item {
	transform: translateX(calc(var(--brn-anim-dist) * -1));
}

.brn-zz--animate.brn-zz--fx-flip-up .brn-zz__item {
	transform: perspective(900px) rotateX(-16deg) translateY(var(--brn-anim-dist));
	transform-origin: 50% 100%;
}

/* Raised cards drop in, lowered cards rise — the zigzag assembles itself. */
.brn-zz--animate.brn-zz--fx-zigzag .brn-zz__item {
	transform: translateY(calc(var(--brn-anim-dist) * -1));
}

.brn-zz--start-up.brn-zz--animate.brn-zz--fx-zigzag .brn-zz__item:nth-child(even),
.brn-zz--start-down.brn-zz--animate.brn-zz--fx-zigzag .brn-zz__item:nth-child(odd) {
	transform: translateY(var(--brn-anim-dist));
}

.brn-zz--animate.brn-zz--in .brn-zz__item {
	opacity: 1;
	transform: none;
	transition: opacity var(--brn-anim-duration) ease, transform var(--brn-anim-duration) var(--brn-anim-ease);
	transition-delay: calc(var(--brn-i, 0) * var(--brn-anim-stagger));
}

/* Dots pop in just behind their card. */
.brn-zz--animate.brn-zz--dot-pop .brn-zz__dot {
	scale: 0;
}

.brn-zz--animate.brn-zz--dot-pop.brn-zz--in .brn-zz__dot {
	scale: 1;
	transition: scale 460ms cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: calc(var(--brn-i, 0) * var(--brn-anim-stagger) + 160ms);
}

.brn-zz--animate .brn-zz__mask-path {
	transition: stroke-dashoffset calc(var(--brn-anim-duration) * 2.2) ease-out;
}

/* Elementor's editor renders inside an iframe; never leave content hidden there. */
.elementor-editor-active .brn-zz--animate .brn-zz__item {
	opacity: 1;
	transform: none;
}

.elementor-editor-active .brn-zz--animate .brn-zz__dot {
	scale: 1;
}

@media (prefers-reduced-motion: reduce) {
	.brn-zz--animate .brn-zz__item {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.brn-zz--animate .brn-zz__dot {
		scale: 1;
		transition: none;
	}

	.brn-zz__card,
	.brn-zz__inner {
		transition: none;
	}

	.brn-zz--animate .brn-zz__mask-path {
		transition: none;
	}
}

/* Stacked layout: the connector becomes a vertical dashed line. */
@media (max-width: 767px) {
	.brn-zz__items {
		padding-inline-start: calc(var(--brn-dot-size) / 2 + 4px);
	}
}