/* ============================================================
   Timeline preset — .rb-uniblock--timeline
   Directions: alternate / left / right
   Layouts:    plain / card
   Dot pos:    axis / title / none
   Dot styles: circle / filled / square / diamond
   ============================================================ */

/* --- CSS variable defaults --- */
.rb-uniblock--timeline {
	--rbu-tl-line-color:     var(--theme-palette-color-1, #e63946);
	--rbu-tl-line-width:     2px;
	--rbu-tl-dot-size:       16px;
	--rbu-tl-dot-color:      var(--rbu-tl-line-color);
	--rbu-tl-dot-bg:         #fff;
	--rbu-tl-dot-border:     3px;
	--rbu-tl-title-size:     2rem;
	--rbu-tl-title-weight:   700;
	--rbu-tl-title-lh:       1.2;
	--rbu-tl-title-color:    inherit;
	--rbu-tl-text-size:      0.95rem;
	--rbu-tl-text-color:     inherit;
	--rbu-tl-caption-color:  var(--theme-palette-color-5, #888);
	--rbu-tl-value-size:     1rem;
	--rbu-tl-item-gap:       40px;
	--rbu-tl-axis-gap:       32px;     /* gap between axis and content edge */
	--rbu-tl-axis-width:     80px;     /* center column width (alternate) */
	--rbu-tl-content-pad:    0px;
	--rbu-tl-img-size:       180px;
	--rbu-tl-card-bg:        var(--theme-palette-color-8, #f9f9f9);
	--rbu-tl-card-shadow:    0 1px 6px rgba(0, 0, 0, 0.08);
	--rbu-tl-card-radius:    10px;
	--rbu-tl-card-pad:       20px;
	--rbu-tl-btn-color:      var(--theme-palette-color-1);
}

/* -------------------------------------------------------
   Shared: dot shape
   ------------------------------------------------------- */

.rb-ub-tl-dot {
	display:      block;
	width:        var(--rbu-tl-dot-size);
	height:       var(--rbu-tl-dot-size);
	border-radius: 50%;
	border:       var(--rbu-tl-dot-border) solid var(--rbu-tl-dot-color);
	background:   var(--rbu-tl-dot-bg);
	box-sizing:   border-box;
	flex-shrink:  0;
	position:     relative;
	z-index:      1;
}

.rb-uniblock--tl-dot-filled .rb-ub-tl-dot {
	background: var(--rbu-tl-dot-color);
}

.rb-uniblock--tl-dot-square .rb-ub-tl-dot {
	border-radius: 0;
}

.rb-uniblock--tl-dot-diamond .rb-ub-tl-dot {
	border-radius: 0;
	transform:    rotate(45deg);
}

/* Icon as dot */
.rb-ub-tl-dot--icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           var(--rbu-tl-dot-size);
	height:          var(--rbu-tl-dot-size);
	border-radius:   50%;
	background:      var(--rbu-tl-dot-color);
	color:           #fff;
	overflow:        hidden;
	border:          none;
}

.rb-ub-tl-dot--icon svg {
	width:  60%;
	height: 60%;
}

/* -------------------------------------------------------
   Shared: typography & image
   ------------------------------------------------------- */

.rb-ub-tl-title {
	display:       block;
	font-size:     var(--rbu-tl-title-size);
	font-weight:   var(--rbu-tl-title-weight);
	line-height:   var(--rbu-tl-title-lh);
	color:         var(--rbu-tl-title-color);
	margin-bottom: 0.35em;
}

.rb-ub-tl-text {
	font-size:   var(--rbu-tl-text-size);
	line-height: 1.6;
	color:       var(--rbu-tl-text-color);
	margin:      0;
}

.rb-ub-tl-caption {
	font-size:  0.8rem;
	color:      var(--rbu-tl-caption-color);
	margin-top: 0.4em;
	margin-bottom: 0;
}

.rb-ub-tl-value {
	display:      block;
	font-size:    var(--rbu-tl-value-size);
	color:        var(--theme-palette-color-1);
	margin-bottom: 0.3em;
}

.rb-ub-tl-img {
	width:        var(--rbu-tl-img-size);
	height:       var(--rbu-tl-img-size);
	object-fit:   cover;
	border-radius: 50%;
	display:      block;
	margin-bottom: 16px;
}

/* -------------------------------------------------------
   Shared: layout variants (plain / card)
   ------------------------------------------------------- */

/* Card: white box */
.rb-uniblock--tl-layout-card .rb-ub-tl-content {
	background:    var(--rbu-tl-card-bg) !important;
	box-shadow:    var(--rbu-tl-card-shadow) !important;
	border-radius: var(--rbu-tl-card-radius) !important;
	padding:       var(--rbu-tl-card-pad) !important;
}

/* -------------------------------------------------------
   Shared: buttons
   ------------------------------------------------------- */

.rb-ub-tl-link {
	display:     inline-block;
	margin-top:  0.75em;
	font-size:   0.875rem;
}

.rb-uniblock--tl-btn-underline .rb-ub-tl-link {
	border-bottom:   1px solid currentColor;
	color:           var(--rbu-tl-btn-color);
	text-decoration: none;
	padding-bottom:  2px;
}

.rb-uniblock--tl-btn-ghost .rb-ub-tl-link {
	border:       1px solid var(--rbu-tl-btn-color);
	color:        var(--rbu-tl-btn-color);
	padding:      5px 14px;
	border-radius: 4px;
	text-decoration: none;
}

/* -------------------------------------------------------
   Direction: ALTERNATE (zigzag, center line)
   ------------------------------------------------------- */

.rb-uniblock--tl-dir-alternate .rb-ub-tl-track {
	display:               grid;
	grid-template-columns: 1fr var(--rbu-tl-axis-width) 1fr;
	row-gap:               var(--rbu-tl-item-gap);
	position:              relative;
}

.rb-uniblock--tl-dir-alternate .rb-ub-tl-track::before {
	content:    '';
	position:   absolute;
	top:        0;
	bottom:     0;
	left:       50%;
	transform:  translateX(-50%);
	width:      var(--rbu-tl-line-width);
	background: var(--rbu-tl-line-color);
	pointer-events: none;
}

.rb-uniblock--tl-dir-alternate .rb-ub-tl-item {
	grid-column:           1 / -1;
	display:               grid;
	grid-template-columns: subgrid;
	align-items:           start;
}

/* Node always in the center column */
.rb-uniblock--tl-dir-alternate .rb-ub-tl-node {
	display:         flex;
	justify-content: center;
	align-items:     flex-start;
	padding-top: calc(
		var(--rbu-tl-title-size) * var(--rbu-tl-title-lh) / 2
		- var(--rbu-tl-dot-size) / 2
	);
	position: relative;
	z-index:  1;
}

/* Content left (odd items) */
.rb-uniblock--tl-dir-alternate .rb-ub-tl-item--left .rb-ub-tl-content {
	position:       relative;
	overflow:       visible;
	text-align:     right;
	display:        flex;
	flex-direction: column;
	align-items:    flex-end;
	padding:        var(--rbu-tl-content-pad);
}

/* Content right (even items) */
.rb-uniblock--tl-dir-alternate .rb-ub-tl-item--right .rb-ub-tl-content {
	position:       relative;
	overflow:       visible;
	text-align:     left;
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	padding:        var(--rbu-tl-content-pad);
}

/*
 * Horizontal connector from content edge to axis center.
 * left:100% / right:100% = starts at content column boundary.
 * width = axis_width/2 → reaches center of axis column exactly.
 */
.rb-uniblock--tl-dir-alternate .rb-ub-tl-content::before {
	content:  '';
	position: absolute;
	top: calc(
		var(--rbu-tl-title-size) * var(--rbu-tl-title-lh) / 2
		- var(--rbu-tl-line-width) / 2
	);
	height:     var(--rbu-tl-line-width);
	width:      calc(var(--rbu-tl-axis-width) / 2);
	background: var(--rbu-tl-line-color);
}

/* Left content → connector goes right to axis */
.rb-uniblock--tl-dir-alternate .rb-ub-tl-item--left .rb-ub-tl-content::before {
	left: 100%;
}

/* Right content → connector goes left to axis */
.rb-uniblock--tl-dir-alternate .rb-ub-tl-item--right .rb-ub-tl-content::before {
	right: 100%;
}

/* -------------------------------------------------------
   Direction: LEFT (axis left, content right)
   ------------------------------------------------------- */

.rb-uniblock--tl-dir-left .rb-ub-tl-track {
	position:       relative;
	display:        flex;
	flex-direction: column;
	gap:            var(--rbu-tl-item-gap);
}

.rb-uniblock--tl-dir-left .rb-ub-tl-track::before {
	content:    '';
	position:   absolute;
	top:        0;
	bottom:     0;
	left:       calc(var(--rbu-tl-dot-size) / 2 - var(--rbu-tl-line-width) / 2);
	width:      var(--rbu-tl-line-width);
	background: var(--rbu-tl-line-color);
	pointer-events: none;
}

.rb-uniblock--tl-dir-left .rb-ub-tl-item {
	display:     flex;
	align-items: flex-start;
	gap:         var(--rbu-tl-axis-gap);
}

.rb-uniblock--tl-dir-left .rb-ub-tl-node {
	flex-shrink:  0;
	width:        var(--rbu-tl-dot-size);
	display:      flex;
	justify-content: center;
	align-items:  flex-start;
	padding-top: calc(
		var(--rbu-tl-title-size) * var(--rbu-tl-title-lh) / 2
		- var(--rbu-tl-dot-size) / 2
	);
	position: relative;
	z-index:  1;
}

.rb-uniblock--tl-dir-left .rb-ub-tl-content {
	flex:     1;
	min-width: 0;
	position: relative;
	padding:  var(--rbu-tl-content-pad);
}

/* -------------------------------------------------------
   Direction: RIGHT (axis right, content left)
   ------------------------------------------------------- */

.rb-uniblock--tl-dir-right .rb-ub-tl-track {
	position:       relative;
	display:        flex;
	flex-direction: column;
	gap:            var(--rbu-tl-item-gap);
}

.rb-uniblock--tl-dir-right .rb-ub-tl-track::before {
	content:    '';
	position:   absolute;
	top:        0;
	bottom:     0;
	right:      calc(var(--rbu-tl-dot-size) / 2 - var(--rbu-tl-line-width) / 2);
	width:      var(--rbu-tl-line-width);
	background: var(--rbu-tl-line-color);
	pointer-events: none;
}

.rb-uniblock--tl-dir-right .rb-ub-tl-item {
	display:        flex;
	flex-direction: row-reverse;
	align-items:    flex-start;
	gap:            var(--rbu-tl-axis-gap);
}

.rb-uniblock--tl-dir-right .rb-ub-tl-node {
	flex-shrink:  0;
	width:        var(--rbu-tl-dot-size);
	display:      flex;
	justify-content: center;
	align-items:  flex-start;
	padding-top: calc(
		var(--rbu-tl-title-size) * var(--rbu-tl-title-lh) / 2
		- var(--rbu-tl-dot-size) / 2
	);
	position: relative;
	z-index:  1;
}

.rb-uniblock--tl-dir-right .rb-ub-tl-content {
	flex:      1;
	min-width: 0;
	text-align: right;
	display:   flex;
	flex-direction: column;
	align-items: flex-end;
	position:  relative;
	padding:   var(--rbu-tl-content-pad);
}

/* -------------------------------------------------------
   Dot position: TITLE (dot inside content near title)
   ------------------------------------------------------- */

/* flex-row wrapper: [dot?][body][dot?] */
.rb-uniblock--tl-dotpos-title .rb-ub-tl-row {
	display:     flex;
	align-items: flex-start;
	gap:         10px;
	width:       100%;
}

/* body takes remaining width */
.rb-uniblock--tl-dotpos-title .rb-ub-tl-body {
	flex:      1;
	min-width: 0;
}

/* align dot with center of title first line */
.rb-uniblock--tl-dotpos-title .rb-ub-tl-dot {
	flex-shrink: 0;
	margin-top: calc(
		var(--rbu-tl-title-size) * var(--rbu-tl-title-lh) / 2
		- var(--rbu-tl-dot-size) / 2
	);
}

/* Dot-pos-none: safety net (dot not in HTML anyway) */
.rb-uniblock--tl-dotpos-none .rb-ub-tl-dot {
	display: none;
}

/*
 * direction=left/right + dot_pos=title:
 * Without correction the empty node div (width=dot_size) + axis_gap pushes
 * content ~50px away from the axis line, making them look disconnected.
 * Fix: collapse node and gap so the dot in content lands on the axis line.
 */
.rb-uniblock--tl-dir-left.rb-uniblock--tl-dotpos-title .rb-ub-tl-node,
.rb-uniblock--tl-dir-right.rb-uniblock--tl-dotpos-title .rb-ub-tl-node {
	display: none;
}

.rb-uniblock--tl-dir-left.rb-uniblock--tl-dotpos-title .rb-ub-tl-item,
.rb-uniblock--tl-dir-right.rb-uniblock--tl-dotpos-title .rb-ub-tl-item {
	gap: 0;
}


/* -------------------------------------------------------
   Mobile: все варианты сворачиваются в left-mode ≤ 640px
   ------------------------------------------------------- */

@media (max-width: 640px) {
	/* Alternate → behave like left direction */
	.rb-uniblock--tl-dir-alternate .rb-ub-tl-track {
		display:        flex;
		flex-direction: column;
		gap:            var(--rbu-tl-item-gap);
		grid-template-columns: none;
	}

	.rb-uniblock--tl-dir-alternate .rb-ub-tl-track::before {
		left:      calc(var(--rbu-tl-dot-size) / 2 - var(--rbu-tl-line-width) / 2);
		transform: none;
	}

	.rb-uniblock--tl-dir-alternate .rb-ub-tl-item {
		display:     flex;
		align-items: flex-start;
		gap:         var(--rbu-tl-axis-gap);
	}

	.rb-uniblock--tl-dir-alternate .rb-ub-tl-node {
		flex-shrink: 0;
		width:       var(--rbu-tl-dot-size);
	}

	.rb-uniblock--tl-dir-alternate .rb-ub-tl-filler {
		display: none;
	}

	/* Reset right-aligned content */
	.rb-uniblock--tl-dir-alternate .rb-ub-tl-item--left .rb-ub-tl-content,
	.rb-uniblock--tl-dir-alternate .rb-ub-tl-item--right .rb-ub-tl-content {
		text-align:     left;
		padding-right:  0;
		padding-left:   0;
		align-items:    flex-start;
	}

	/* Hide horizontal connector lines on mobile */
	.rb-uniblock--tl-dir-alternate .rb-ub-tl-content::before {
		display: none;
	}

	/* Card layout: reset alternate-specific margins */
	.rb-uniblock--tl-dir-alternate.rb-uniblock--tl-layout-card .rb-ub-tl-content {
		margin-right: 0 !important;
		margin-left:  0 !important;
	}

	/* Right direction → also becomes left-style on mobile */
	.rb-uniblock--tl-dir-right .rb-ub-tl-item {
		flex-direction: row;
	}

	.rb-uniblock--tl-dir-right .rb-ub-tl-track::before {
		left:  calc(var(--rbu-tl-dot-size) / 2 - var(--rbu-tl-line-width) / 2);
		right: auto;
	}

	.rb-uniblock--tl-dir-right .rb-ub-tl-content {
		text-align:  left;
		align-items: flex-start;
	}

	/* dot_pos=title: flip row so dot ends up on left (axis side) on mobile */
	.rb-uniblock--tl-dir-alternate.rb-uniblock--tl-dotpos-title .rb-ub-tl-item--left .rb-ub-tl-row,
	.rb-uniblock--tl-dir-right.rb-uniblock--tl-dotpos-title .rb-ub-tl-row {
		flex-direction: row-reverse;
	}

	/* Reset text-align inside body for reversed rows */
	.rb-uniblock--tl-dir-alternate.rb-uniblock--tl-dotpos-title .rb-ub-tl-item--left .rb-ub-tl-body,
	.rb-uniblock--tl-dir-right.rb-uniblock--tl-dotpos-title .rb-ub-tl-body {
		text-align: left;
	}

	/* Images: smaller on mobile */
	.rb-ub-tl-img {
		--rbu-tl-img-size: 100px;
	}
}