/* Artmark Milestone Rail widget — a horizontal line with numbered milestones
   alternating above and below it, each with an icon tile, a number and a name.

   Namespaced .am-rail.

   Layout note: the rail is one CSS grid with three rows — content above, the
   line, content below. Every milestone emits its column index as `--i`, and
   both its card and its node are placed with `grid-column: var(--i)`. That is
   what lets the same markup become a VERTICAL rail below 1024px: the grid
   flips to two columns (nodes | cards) and the very same `--i` becomes the row
   instead. No duplicate markup, no JavaScript. */

.am-rail {
	width: 100%;
	background-color: #0b1116;
}

.am-rail__inner {
	width: 100%;
	max-width: none;
	margin: 0 auto;
}

/* Head ------------------------------------------------------------- */

.am-rail__head {
	margin-bottom: 72px;
}

/* Always rendered, but a plain block until the paragraph is filled — inside a
   block .am-rail__head it is layout-neutral and text-align still inherits
   through it, so a rail with no paragraph renders exactly as it did before. */
.am-rail__headmain {
	min-width: 0;
}

/* Split head: heading column beside the paragraph. The class is only emitted
   when the paragraph has content. */
.am-rail__head--split {
	display: flex;
	align-items: flex-start;
	gap: var(--am-rail-headgap, 48px);
}

/* The width comes in as a custom property rather than the control writing
   `flex` itself: the stacked layout below has to zero the basis (in a column
   flex, flex-basis is a height), and it can only do that without !important if
   no Elementor-generated rule is setting `flex` on this element. */
.am-rail__head--split .am-rail__headmain {
	flex: 0 0 var(--am-rail-headsplit, 55%);
	max-width: var(--am-rail-headsplit, 55%);
}

.am-rail__head--split .am-rail__headside {
	flex: 1 1 auto;
	min-width: 0;
}

.am-rail__para {
	margin: 0;
	max-width: var(--am-rail-paraw, none);
	font-size: 16px;
	line-height: 1.55;
	color: #b9c6d1;
}

.am-rail__labelrow {
	display: block;
	width: 100%;
}

.am-rail__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	border: 0 solid transparent;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #cfd8e0;
}

.am-rail__plus {
	font-size: 13px;
	line-height: 1;
}

/* background-clip: text over a linear gradient — the same technique as
   .am-tband__title, with both stops, their positions and the angle exposed as
   controls. Design default: linear-gradient(160.13deg, #FFFFFF 36.96%,
   #B4DDFF 64.38%). */
.am-rail__title {
	margin: 0;
	max-width: var(--am-rail-titlew, 760px);
	font-size: 44px;
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.01em;
	background-image: linear-gradient(
		var(--am-rail-h-angle, 160.13deg),
		var(--am-rail-h-a, #ffffff) var(--am-rail-h-astop, 36.96%),
		var(--am-rail-h-b, #b4ddff) var(--am-rail-h-bstop, 64.38%)
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* "Solid Colour" fill mode — the class lands on the widget wrapper. */
.am-rail-fill-solid .am-rail__title {
	background-image: none;
	color: var(--am-rail-h-solid, #ffffff);
	-webkit-text-fill-color: currentColor;
}

/* Runs wrapped in {curly braces} in the heading field. The fill colour has to
   come back explicitly: in gradient mode the span inherits the parent's
   transparent text-fill and its own `color` would never be painted. */
.am-rail__hl {
	color: var(--am-rail-hl, #8fc9ee);
	-webkit-text-fill-color: currentColor;
}

/* Rail ------------------------------------------------------------- */

.am-rail__items {
	display: grid;
	grid-template-columns: repeat(var(--am-rail-cols, 7), minmax(0, 1fr));
	grid-template-rows: 1fr auto 1fr;
	align-items: center;
}

.am-rail__line {
	grid-row: 2;
	grid-column: 1 / -1;
	align-self: center;
	height: var(--am-rail-lineh, 1px);
	background-color: var(--am-rail-line, rgba(255, 255, 255, 0.22));
	background-image: repeating-linear-gradient(
		to right,
		var(--am-rail-dash, #2f9ee0) 0 var(--am-rail-dashlen, 22px),
		transparent var(--am-rail-dashlen, 22px)
			calc(var(--am-rail-dashlen, 22px) + var(--am-rail-dashgap, 28px))
	);
}

.am-rail__cell {
	grid-column: var(--i);
	grid-row: 1;
	align-self: end;
	min-width: 0;
	padding: 0 8px var(--am-rail-stemgap, 22px);
	text-align: center;
}

.am-rail__cell--down {
	grid-row: 3;
	align-self: start;
	padding: var(--am-rail-stemgap, 22px) 8px 0;
}

.am-rail__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--am-rail-tile, 44px);
	height: var(--am-rail-tile, 44px);
	margin-bottom: 14px;
	background-color: var(--am-rail-tilebg, #d6eafb);
	color: var(--am-rail-tilecolor, #0a7cc4);
}

.am-rail__icon img,
.am-rail__icon svg {
	display: block;
	width: var(--am-rail-icon, 20px);
	height: var(--am-rail-icon, 20px);
	object-fit: contain;
}

/* Transparent wrapper on the desktop rail — it exists so the phone layout can
   sit the icon tile beside the number and name instead of above them. */
.am-rail__text {
	display: block;
	min-width: 0;
}

.am-rail__num {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.18em;
	color: #8d99a5;
}

.am-rail__name {
	display: block;
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	color: #ffffff;
}

.am-rail__node {
	grid-column: var(--i);
	grid-row: 2;
	justify-self: center;
	align-self: center;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--am-rail-ring, 18px);
	height: var(--am-rail-ring, 18px);
	border: 1px solid var(--am-rail-ringcolor, #7fb8dd);
	border-radius: 50%;
	background-color: var(--am-rail-ringbg, #0b1116);
}

.am-rail__node::after {
	content: "";
	width: var(--am-rail-dot, 6px);
	height: var(--am-rail-dot, 6px);
	border-radius: 50%;
	background-color: var(--am-rail-dotcolor, #2f9ee0);
}

.am-rail-dot-no .am-rail__node::after {
	display: none;
}

/* Responsive ------------------------------------------------------- */

/* Seven milestones cannot share a phone's width, so the same grid becomes a
   vertical rail: two columns (nodes, then cards) with `--i` driving the row. */
@media (max-width: 1024px) {
	.am-rail__head {
		margin-bottom: 44px;
	}

	/* Stacked. The flex axis has flipped, so the percentage basis would be
	   read as a height — it has to go back to auto, not just widen. */
	.am-rail__head--split {
		flex-direction: column;
	}

	.am-rail__head--split .am-rail__headmain {
		flex: 0 0 auto;
		max-width: none;
	}

	.am-rail__title {
		font-size: 32px;
	}

	.am-rail__items {
		grid-template-columns: var(--am-rail-vcol, 30px) minmax(0, 1fr);
		grid-template-rows: none;
		column-gap: 16px;
		row-gap: var(--am-rail-vgap, 30px);
	}

	.am-rail__line {
		grid-column: 1;
		grid-row: 1 / -1;
		justify-self: center;
		align-self: stretch;
		width: var(--am-rail-lineh, 1px);
		height: auto;
		background-image: repeating-linear-gradient(
			to bottom,
			var(--am-rail-dash, #2f9ee0) 0 var(--am-rail-dashlen, 22px),
			transparent var(--am-rail-dashlen, 22px)
				calc(var(--am-rail-dashlen, 22px) + var(--am-rail-dashgap, 28px))
		);
	}

	.am-rail__cell,
	.am-rail__cell--down {
		grid-column: 2;
		grid-row: var(--i);
		align-self: center;
		padding: 0;
		text-align: left;
	}

	.am-rail__node {
		grid-column: 1;
		grid-row: var(--i);
	}

	.am-rail__icon {
		margin-bottom: 10px;
	}
}

@media (max-width: 767px) {
	.am-rail__title {
		font-size: 25px;
	}

	.am-rail__items {
		--am-rail-vcol: 22px;
		column-gap: 12px;
		row-gap: var(--am-rail-vgap-m, 24px);
	}

	/* On a phone the icon tile stacked over the number and name left each
	   milestone sprawling down the page with the text drifting away from its
	   node. Side by side it reads as one compact row per milestone, and the
	   node lines up with the middle of it. */
	.am-rail__cell,
	.am-rail__cell--down {
		display: flex;
		align-items: center;
		gap: var(--am-rail-iconGap-m, 14px);
	}

	.am-rail__icon {
		flex: 0 0 auto;
		width: var(--am-rail-tile-m, 38px);
		height: var(--am-rail-tile-m, 38px);
		margin-bottom: 0;
	}

	.am-rail__text {
		flex: 1 1 auto;
	}

	.am-rail__num {
		margin-bottom: 4px;
	}

	.am-rail__name {
		font-size: 14px;
		line-height: 1.3;
	}
}