/**
 * Timeline block styles (shared front-end + editor canvas).
 *
 * Free tier: vertical layout only (the `is-layout-horizontal` state class
 * ships for contract parity; the Pro extension brings its own stylesheet
 * for that layout). Every consumer carries its own fallback so an unset
 * variable never collapses the rendering (zero-emission rule — render.php
 * only declares variables that deviate from the defaults below).
 *
 * Geometry: the line's distance from the card edge is derived once as
 * --wpminty-tl-offset (marker half + breathing room). Segments, markers
 * and carets are real elements — pseudo elements are off limits on canvas
 * blocks (core injects inset:0 overlays).
 */

.wpminty-tl {
	--wpminty-tl-offset: calc(var(--wpminty-tl-icon-size, 40px) / 2 + clamp(14px, 2vw, 22px));
	/* Active item gap, switched per viewport by the media queries below.
	 * render.php only emits the --wpminty-tl-gap{-desktop,-tablet,-mobile}
	 * variants the core Block spacing control configured (zero-emission). */
	--wpminty-tl-gap: var(--wpminty-tl-gap-desktop, clamp(32px, 5vw, 48px));
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Vertical rhythm between items; the segment spans across this exact gap
 * so the line stays continuous. clamp() keeps the default responsive. */
.wpminty-tl > li:not(:first-child) {
	margin-top: var(--wpminty-tl-gap);
}

.wpminty-tl__item {
	position: relative;
	/* Active card inner gap, switched per viewport by the media queries
	 * below; item/render.php emits the configured variants only. */
	--wpminty-tl-card-gap: var(--wpminty-tl-card-gap-desktop, 0px);
}

/* ---------------------------------------------------------------------------
 * Connecting line segment (one per item, bridging into the next)
 * ------------------------------------------------------------------------- */

.wpminty-tl__segment {
	position: absolute;
	top: 0;
	bottom: calc(-1 * var(--wpminty-tl-gap));
	width: var(--wpminty-tl-line-width, 2px);
	background-color: var(--wpminty-tl-line-color, var(--wp--preset--color--divider, currentColor));
	pointer-events: none;
	z-index: 0;
}

/* No line below the last item (:last-of-type ignores the non-li editor
 * appender sibling). */
.wpminty-tl > li:last-of-type > .wpminty-tl__segment {
	display: none;
}

/* Dashed style paints through a repeating gradient instead of borders, so
 * width and centering behave identically to the solid line. */
.wpminty-tl.is-line-dashed .wpminty-tl__segment {
	background-color: transparent;
	background-image: repeating-linear-gradient(
		to bottom,
		var(--wpminty-tl-line-color, var(--wp--preset--color--divider, currentColor)) 0,
		var(--wpminty-tl-line-color, var(--wp--preset--color--divider, currentColor)) 6px,
		transparent 6px,
		transparent 12px
	);
}

/* ---------------------------------------------------------------------------
 * Marker (icon badge or plain dot, centered on the line)
 * ------------------------------------------------------------------------- */

.wpminty-tl__marker {
	position: absolute;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wpminty-tl-icon-size, 40px);
	height: var(--wpminty-tl-icon-size, 40px);
	border-radius: var(--wpminty-tl-icon-radius, 50%);
	background-color: var(--wpminty-tl-icon-bg, var(--wp--preset--color--base, #fff));
	color: var(--wpminty-tl-icon-color, var(--wp--preset--color--primary, currentColor));
	/* Ring echoes the line color so the marker reads as a node on the line. */
	box-shadow: 0 0 0 var(--wpminty-tl-line-width, 2px) var(--wpminty-tl-line-color, var(--wp--preset--color--divider, currentColor));
	z-index: 2;
}

.wpminty-tl__marker svg {
	width: 55%;
	height: 55%;
	fill: currentColor;
}

/* Icon-less marker: a small dot in the line color, ringed by the marker
 * background so the line visually passes behind it. */
.wpminty-tl__marker--dot {
	width: calc(var(--wpminty-tl-icon-size, 40px) * 0.4);
	height: calc(var(--wpminty-tl-icon-size, 40px) * 0.4);
	margin-top: calc(var(--wpminty-tl-icon-size, 40px) * 0.3);
	background-color: var(--wpminty-tl-line-color, var(--wp--preset--color--divider, currentColor));
	box-shadow: 0 0 0 3px var(--wpminty-tl-icon-bg, var(--wp--preset--color--base, #fff));
}

/* ---------------------------------------------------------------------------
 * Card caret (rotated square inheriting the item background; invisible on
 * transparent items by construction)
 * ------------------------------------------------------------------------- */

.wpminty-tl__caret {
	position: absolute;
	top: calc(var(--wpminty-tl-icon-size, 40px) / 2);
	width: 12px;
	height: 12px;
	transform: translateY(-50%) rotate(45deg);
	background-color: inherit;
	pointer-events: none;
	display: none;
	z-index: 1;
}

.wpminty-tl.has-caret .wpminty-tl__caret {
	display: block;
}

/* ---------------------------------------------------------------------------
 * Card and date
 * ------------------------------------------------------------------------- */

.wpminty-tl__card {
	position: relative;
	min-width: 0;
}

/* Card inner rhythm from the core Block spacing control: consecutive
 * direct children (date + saved inner blocks) are spaced by the bridged
 * gap. The editor appender is excluded so the canvas preview matches the
 * front end. The `revert` fallback keeps natural block margins untouched
 * while no gap is configured; adjacent margins collapse, so the effective
 * spacing equals the configured value. */
.wpminty-tl__card > *:not(.block-list-appender) + *:not(.block-list-appender) {
	margin-block-start: var(--wpminty-tl-card-gap, revert);
}

.wpminty-tl__date {
	display: block;
	/* Part of the card gap system: when a Block spacing value is set the
	 * date contributes exactly that rhythm (collapsed with the sibling's
	 * margin-block-start), otherwise the original 0.4em stands. */
	margin-block-end: var(--wpminty-tl-card-gap, 0.4em);
	color: var(--wpminty-tl-date-color, inherit);
	font-family: var(--wpminty-tl-date-font-family, inherit);
	font-size: var(--wpminty-tl-date-font-size, inherit);
	font-style: var(--wpminty-tl-date-font-style, inherit);
	font-weight: var(--wpminty-tl-date-font-weight, inherit);
	line-height: var(--wpminty-tl-date-line-height, inherit);
	letter-spacing: var(--wpminty-tl-date-letter-spacing, inherit);
	text-decoration: var(--wpminty-tl-date-text-decoration, inherit);
	text-transform: var(--wpminty-tl-date-text-transform, inherit);
}

/* ---------------------------------------------------------------------------
 * Alignment: single side left / single side right / alternate
 * ------------------------------------------------------------------------- */

.wpminty-tl.is-align-left > li {
	margin-inline-start: calc(2 * var(--wpminty-tl-offset));
}

.wpminty-tl.is-align-left .wpminty-tl__segment,
.wpminty-tl.is-align-left .wpminty-tl__marker {
	left: calc(-1 * var(--wpminty-tl-offset));
	transform: translateX(-50%);
}

.wpminty-tl.is-align-left .wpminty-tl__caret {
	left: -6px;
}

.wpminty-tl.is-align-right > li {
	margin-inline-end: calc(2 * var(--wpminty-tl-offset));
}

.wpminty-tl.is-align-right .wpminty-tl__segment,
.wpminty-tl.is-align-right .wpminty-tl__marker {
	right: calc(-1 * var(--wpminty-tl-offset));
	transform: translateX(50%);
}

.wpminty-tl.is-align-right .wpminty-tl__caret {
	right: -6px;
}

/* Alternate: the line runs down the container center. `of li` keeps the
 * parity count immune to the editor's .block-list-appender siblings. */
.wpminty-tl.is-align-alternate > li:nth-child(odd of li) {
	margin-inline-end: calc(50% + var(--wpminty-tl-offset));
}

.wpminty-tl.is-align-alternate > li:nth-child(odd of li) .wpminty-tl__segment,
.wpminty-tl.is-align-alternate > li:nth-child(odd of li) .wpminty-tl__marker {
	right: calc(-1 * var(--wpminty-tl-offset));
	transform: translateX(50%);
}

.wpminty-tl.is-align-alternate > li:nth-child(odd of li) .wpminty-tl__caret {
	right: -6px;
}

.wpminty-tl.is-align-alternate > li:nth-child(even of li) {
	margin-inline-start: calc(50% + var(--wpminty-tl-offset));
}

.wpminty-tl.is-align-alternate > li:nth-child(even of li) .wpminty-tl__segment,
.wpminty-tl.is-align-alternate > li:nth-child(even of li) .wpminty-tl__marker {
	left: calc(-1 * var(--wpminty-tl-offset));
	transform: translateX(-50%);
}

.wpminty-tl.is-align-alternate > li:nth-child(even of li) .wpminty-tl__caret {
	left: -6px;
}

/* ---------------------------------------------------------------------------
 * Responsive gap switching (theme.json viewport: tablet 960px / mobile
 * 600px). Undefined variants fall through to the next-wider viewport.
 * ------------------------------------------------------------------------- */

/* Must mirror theme.json settings.viewport (tablet: 960px). */
@media (max-width: 960px) {
	.wpminty-tl {
		--wpminty-tl-gap: var(--wpminty-tl-gap-tablet, var(--wpminty-tl-gap-desktop, clamp(32px, 5vw, 48px)));
	}

	.wpminty-tl__item {
		--wpminty-tl-card-gap: var(--wpminty-tl-card-gap-tablet, var(--wpminty-tl-card-gap-desktop, 0px));
	}
}

/* ---------------------------------------------------------------------------
 * Mobile (theme.json viewport: mobile 600px) — alternate collapses to a
 * single left-hand column.
 * ------------------------------------------------------------------------- */

/* Must mirror theme.json settings.viewport (mobile: 600px). */
@media (max-width: 600px) {
	.wpminty-tl {
		--wpminty-tl-gap: var(--wpminty-tl-gap-mobile, var(--wpminty-tl-gap-tablet, var(--wpminty-tl-gap-desktop, clamp(32px, 5vw, 48px))));
	}

	.wpminty-tl__item {
		--wpminty-tl-card-gap: var(--wpminty-tl-card-gap-mobile, var(--wpminty-tl-card-gap-tablet, var(--wpminty-tl-card-gap-desktop, 0px)));
	}

	.wpminty-tl.is-align-alternate > li:nth-child(odd of li),
	.wpminty-tl.is-align-alternate > li:nth-child(even of li) {
		margin-inline-start: calc(2 * var(--wpminty-tl-offset));
		margin-inline-end: 0;
	}

	.wpminty-tl.is-align-alternate > li:nth-child(odd of li) .wpminty-tl__segment,
	.wpminty-tl.is-align-alternate > li:nth-child(odd of li) .wpminty-tl__marker,
	.wpminty-tl.is-align-alternate > li:nth-child(even of li) .wpminty-tl__segment,
	.wpminty-tl.is-align-alternate > li:nth-child(even of li) .wpminty-tl__marker {
		right: auto;
		left: calc(-1 * var(--wpminty-tl-offset));
		transform: translateX(-50%);
	}

	.wpminty-tl.is-align-alternate > li .wpminty-tl__caret {
		right: auto;
		left: -6px;
	}
}

/* ---------------------------------------------------------------------------
 * Sidebar-only default icon preview (never part of the timeline layout)
 * ------------------------------------------------------------------------- */

.wpminty-tl-icon-preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: currentColor;
}

.wpminty-tl-icon-preview svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}