/**
 * Charlotte K Timeline — front-end styles (MOBILE-FIRST).
 *
 * Base rules = mobile (single column, rail on the left). Desktop layouts
 * (centred/alternating "mixed", plus the left/right side variants) are layered on
 * top from `@media (min-width: 981px)` — the Divi desktop breakpoint.
 *
 * Design principle: presentable with CSS ALONE. The vanilla JS only *animates*
 * (entrance reveal, active-line fill, icon activation). No `opacity:0` default —
 * the hidden-before-animation state is added by JS (`.mantys-timeline--js`), so
 * without/ before JS every item is fully visible.
 */

/* ======================================================================== *
 * BASE = MOBILE (single column, left rail)
 * ======================================================================== */
.mantys_timeline .mantys-timeline__container {
	position: relative;
}

.mantys_timeline .mantys-timeline__items {
	position: relative;
	z-index: 1;
}

/* Static rail + colored (active) rail — left column on mobile. */
.mantys_timeline .mantys-timeline__line,
.mantys_timeline .mantys-timeline__line-active {
	position: absolute;
	/* Bound the rail to the first/last icon centres (row padding-top 14 + icon
	   half 20). The JS refines these to the exact measured centres. */
	top: 34px;
	bottom: 34px;
	left: calc(var(--mantys-icon-size, 40px) / 2);
	transform: translateX(-50%);
	width: var(--mantys-tl-line-width, 2px);
	z-index: 0;
}

.mantys_timeline .mantys-timeline__line {
	background: var(--mantys-tl-line, #e4e7e8);
}

/* Colored fill: height 0 baseline (JS drives it on scroll). */
.mantys_timeline .mantys-timeline__line-active {
	background: var(--mantys-tl-line-active, #2c3d49);
	bottom: auto;
	height: 0;
	/* No height transition: the fill is updated every rAF on scroll, so it must
	   track the scroll 1:1 — a transition just makes it lag behind. */
}

/* Item row: icon on the left rail + card to its right. */
.mantys_timeline .mantys-timeline-item__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--mantys-icon-gap, 18px);
	padding: var(--mantys-step-gap, 14px) 0;
	text-align: left;
}

/* On-line icon pastille: a light circle (element) with the glyph painted on a
   ::before via CSS mask -> circle and glyph both recolourable, one DOM node,
   external SVG (not inline). */
.mantys_timeline .mantys-timeline-item__icon {
	position: relative;
	flex: 0 0 auto;
	width: var(--mantys-icon-size, 40px);
	height: var(--mantys-icon-size, 40px);
	border-radius: 50%;
	background: var(--mantys-icon-circle, #ecf4f7);
	/* Smooth colour change as the track reaches the icon (divi-pixel parity). */
	transition: background-color var(--mantys-icon-transition, 300ms) ease;
}

.mantys_timeline .mantys-timeline-item__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	/* border-radius so that if no mask is set (e.g. builder preview before the
	   glyph URL resolves) it degrades to a dark dot, never a square. */
	border-radius: 50%;
	background-color: var(--mantys-icon-color, #2c3d49);
	-webkit-mask: var(--mantys-icon-mask) center / 48% no-repeat;
	mask: var(--mantys-icon-mask) center / 48% no-repeat;
	transition: background-color var(--mantys-icon-transition, 300ms) ease;
}

/* Active state (JS, once the scroll passes the icon): the circle fills with the
   progression colour (same as the active line, so track + active pastilles share
   one colour) and the glyph is knocked out to the circle colour. */
.mantys_timeline .mantys-timeline-item__icon.mantys-active {
	/* Defaults to the progression colour (track + active pastilles match) but can
	   be overridden independently via the "Couleur des pastilles actives" field. */
	background: var(--mantys-icon-active, var(--mantys-tl-line-active, #2c3d49));
}

.mantys_timeline .mantys-timeline-item__icon.mantys-active::before {
	background-color: var(--mantys-icon-active-glyph, var(--mantys-icon-circle, #ecf4f7));
}

/* Card. */
.mantys_timeline .mantys-timeline-item__card {
	position: relative;
	flex: 1 1 auto;
	max-width: 550px;
	background: var(--mantys-tl-card-bg, #f2f3f3);
	border-radius: var(--mantys-card-radius, 8px);
	padding: var(--mantys-card-pad, 20px 22px);
	border: var(--mantys-card-border-w, 0) solid var(--mantys-card-border-c, transparent);
	text-align: var(--mantys-text-align, inherit);
	box-shadow: var(--mantys-card-shadow, 0 12px 30px rgba(8, 63, 78, 0.06));
}

/* Card arrow: a small triangle between the card and the icon, filled with the
   card colour. Base = icon on the left (mobile / normal rows) -> points left. */
.mantys_timeline .mantys-timeline--arrow .mantys-timeline-item__card::after {
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -8px;
	right: 100%;
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-right-color: var(--mantys-tl-card-bg, #f2f3f3);
}

.mantys_timeline .mantys-timeline-item__ribbon {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
	margin-bottom: 6px;
}

.mantys_timeline .mantys-timeline-item__card > :last-child {
	margin-bottom: 0;
}

/* Global text colours set at the timeline level (a step can still override its
   own title/text colour, which wins by specificity). */
.mantys_timeline .mantys_timeline_item__title {
	color: var(--mantys-title-color, inherit);
	font-size: var(--mantys-title-size, inherit);
	font-weight: var(--mantys-title-weight, inherit);
	line-height: var(--mantys-title-lh, inherit);
	letter-spacing: var(--mantys-title-ls, inherit);
	text-transform: var(--mantys-title-tt, none);
	/* Title alignment: dedicated override wins, else follows the shared
	   "title + text" alignment, else inherits the row/layout default. A direct
	   declaration here beats the inherited text-align of the alternating rows. */
	text-align: var(--mantys-title-align, var(--mantys-text-align, inherit));
}

.mantys_timeline .mantys_timeline_item__content {
	color: var(--mantys-body-color, inherit);
	font-size: var(--mantys-body-size, inherit);
	font-weight: var(--mantys-body-weight, inherit);
	line-height: var(--mantys-body-lh, inherit);
	/* Body follows the shared "title + text" alignment (else the layout default). */
	text-align: var(--mantys-text-align, inherit);
}

/* ======================================================================== *
 * DESKTOP >= 981px (Divi breakpoint): side + alternating layouts
 * ======================================================================== */
@media (min-width: 981px) {
	.mantys_timeline .mantys-timeline-item__row {
		gap: var(--mantys-icon-gap, 24px);
		padding: var(--mantys-step-gap, 16px) 0;
	}

	.mantys_timeline .mantys-timeline-item__icon {
		width: var(--mantys-icon-size, 44px);
		height: var(--mantys-icon-size, 44px);
	}

	.mantys_timeline .mantys-timeline-item__card {
		padding: var(--mantys-card-pad, 24px 28px);
	}

	/* Rail bounds at the first/last icon centres (row padding-top 16 + half 22). */
	.mantys_timeline .mantys-timeline__line,
	.mantys_timeline .mantys-timeline__line-active {
		top: 38px;
		bottom: 38px;
	}

	/* ---- Right layout: rail on the right, all cards to its left ---------- */
	.mantys_timeline .mantys-timeline--layout-right .mantys-timeline__line,
	.mantys_timeline .mantys-timeline--layout-right .mantys-timeline__line-active {
		left: auto;
		right: calc(var(--mantys-icon-size, 44px) / 2);
		transform: translateX(50%);
	}

	.mantys_timeline .mantys-timeline--layout-right .mantys-timeline-item__row {
		flex-direction: row-reverse;
		text-align: right;
	}

	/* ---- Mixed layout: centre rail, alternating columns ----------------- */
	/* Alternation is keyed on the Divi module wrapper `.mantys_timeline_item` (each
	   row is an only-child of its own wrapper -> nth-child targets the wrapper). */
	.mantys_timeline .mantys-timeline--layout-mixed .mantys-timeline__line,
	.mantys_timeline .mantys-timeline--layout-mixed .mantys-timeline__line-active {
		left: 50%;
		transform: translateX(-50%);
	}

	.mantys_timeline .mantys-timeline--layout-mixed .mantys_timeline_item {
		box-sizing: border-box;
		width: 50%;
	}

	/* startpos-left: odd on the left column, even on the right (and vice-versa). */
	.mantys_timeline .mantys-timeline--start-left .mantys_timeline_item:nth-child(even),
	.mantys_timeline .mantys-timeline--start-right .mantys_timeline_item:nth-child(odd) {
		margin-left: 50%;
	}

	/* Left-column rows: icon on the inner (centre) edge, text right-aligned. */
	.mantys_timeline .mantys-timeline--start-left .mantys_timeline_item:nth-child(odd) .mantys-timeline-item__row,
	.mantys_timeline .mantys-timeline--start-right .mantys_timeline_item:nth-child(even) .mantys-timeline-item__row {
		flex-direction: row-reverse;
		text-align: right;
	}

	/* Straddle the centre rail using ONLY the margin toward the line, so the
	   icon<->card gap (where the arrow lives) is preserved and the arrow keeps a
	   margin from the icon. Default = icon on the left of its card (normal rows). */
	.mantys_timeline .mantys-timeline--layout-mixed .mantys-timeline-item__icon {
		margin-left: calc(var(--mantys-icon-size, 44px) / -2);
		margin-right: 0;
	}

	/* Reversed rows: icon on the right of its card -> straddle to the right. */
	.mantys_timeline .mantys-timeline--start-left .mantys_timeline_item:nth-child(odd) .mantys-timeline-item__icon,
	.mantys_timeline .mantys-timeline--start-right .mantys_timeline_item:nth-child(even) .mantys-timeline-item__icon {
		margin-left: 0;
		margin-right: calc(var(--mantys-icon-size, 44px) / -2);
	}

	/* Reversed rows (icon on the right) -> card arrow on the right edge, points right. */
	.mantys_timeline .mantys-timeline--arrow.mantys-timeline--layout-right .mantys-timeline-item__card::after,
	.mantys_timeline .mantys-timeline--arrow.mantys-timeline--start-left .mantys_timeline_item:nth-child(odd) .mantys-timeline-item__card::after,
	.mantys_timeline .mantys-timeline--arrow.mantys-timeline--start-right .mantys_timeline_item:nth-child(even) .mantys-timeline-item__card::after {
		right: auto;
		left: 100%;
		border-right-color: transparent;
		border-left-color: var(--mantys-tl-card-bg, #f2f3f3);
	}
}

/* ======================================================================== *
 * ANIMATION (JS-added state only)
 * ======================================================================== */
.mantys_timeline.mantys-timeline--js .mantys-timeline-item__card:not(.mantys-anim-in) {
	opacity: 0;
}

.mantys_timeline .mantys-timeline-item__card.mantys-anim-in {
	opacity: 1;
	animation-duration: 600ms;
	animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
	.mantys_timeline.mantys-timeline--js .mantys-timeline-item__card {
		opacity: 1 !important;
		animation: none !important;
	}
}

/* Entrance keyframes (the JS sets `animation-name: mantys-<value>` from data-anim).
   Only the shipped subset; an unknown value simply reveals without motion. */
@keyframes mantys-fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes mantys-fadeInLeftShort {
	from { opacity: 0; transform: translateX(-40px); }
	to   { opacity: 1; transform: none; }
}
@keyframes mantys-fadeInRightShort {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: none; }
}
@keyframes mantys-fadeInUpShort {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: none; }
}
@keyframes mantys-fadeInDownShort {
	from { opacity: 0; transform: translateY(-40px); }
	to   { opacity: 1; transform: none; }
}
@keyframes mantys-zoomInShort {
	from { opacity: 0; transform: scale(0.85); }
	to   { opacity: 1; transform: none; }
}