/* ── Rijuna Love Story Timeline ───────────────────────────────────────────── */

.rijuna-tl-wrapper {
	position: relative;
	padding: 20px 0 4px;

	/* CSS vars dengan default — di-override oleh Elementor */
	--rijuna-tl-dot-r: 9px;
	--rijuna-tl-pad: 40px;
}

/* ── Garis Vertikal Tengah ────────────────────────────────────────────────── */

.rijuna-tl-wrapper::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background-color: #C0A275;
	transform: translateX(-50%);
	z-index: 0;
}

/* ── Item ─────────────────────────────────────────────────────────────────── */

.rijuna-tl-item {
	position: relative;
	width: 50%;
	margin-bottom: 48px;
	box-sizing: border-box;
}

/* Item Kiri (ganjil) */
.rijuna-tl-odd {
	padding-right: var(--rijuna-tl-pad, 40px);
	padding-left: 0;
	left: 0;
}

/* Item Kanan (genap) */
.rijuna-tl-even {
	padding-left: var(--rijuna-tl-pad, 40px);
	padding-right: 0;
	left: 50%;
}

/* ── Garis Horizontal Penghubung (Connector) ──────────────────────────────── */

.rijuna-tl-item::after {
	content: '';
	position: absolute;
	top: 50%;
	height: 2px;
	width: calc(var(--rijuna-tl-pad, 40px) - var(--rijuna-tl-dot-r, 9px));
	background-color: #C0A275;
	transform: translateY(-50%);
	z-index: 0;
}

.rijuna-tl-odd::after {
	right: var(--rijuna-tl-dot-r, 9px);
}

.rijuna-tl-even::after {
	left: var(--rijuna-tl-dot-r, 9px);
}

/* ── Titik (Dot) ──────────────────────────────────────────────────────────── */

.rijuna-tl-dot {
	position: absolute;
	width: calc(var(--rijuna-tl-dot-r, 9px) * 2);
	height: calc(var(--rijuna-tl-dot-r, 9px) * 2);
	border-radius: 50%;
	background-color: #C0A275;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	box-shadow: 0 0 0 3px #fff;
}

.rijuna-tl-odd .rijuna-tl-dot {
	right: calc(var(--rijuna-tl-dot-r, 9px) * -1);
}

.rijuna-tl-even .rijuna-tl-dot {
	left: calc(var(--rijuna-tl-dot-r, 9px) * -1);
}

/* Ikon hati di dalam dot */
.rijuna-tl-dot.rijuna-tl-heart::before {
	content: '\2665'; /* ♥ */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: calc(var(--rijuna-tl-dot-r, 9px) * 0.8);
	line-height: 1;
	color: #ffffff;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */

.rijuna-tl-card {
	background-color: #ffffff;
	border-radius: 12px;
	padding: 16px 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	position: relative;
	z-index: 1;
}

/* Ekor segitiga pada card mengarah ke dot */
.rijuna-tl-odd .rijuna-tl-card::after {
	content: '';
	position: absolute;
	right: -8px;
	top: 50%;
	transform: translateY(-50%);
	border-left: 8px solid #ffffff;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

.rijuna-tl-even .rijuna-tl-card::before {
	content: '';
	position: absolute;
	left: -8px;
	top: 50%;
	transform: translateY(-50%);
	border-right: 8px solid #ffffff;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

/* ── Foto ─────────────────────────────────────────────────────────────────── */

.rijuna-tl-photo {
	margin-bottom: 12px;
	overflow: hidden;
}

.rijuna-tl-photo img {
	width: 100%;
	max-height: 200px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* ── Tipografi ────────────────────────────────────────────────────────────── */

.rijuna-tl-date {
	font-family: Poppins, sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: #C0A275;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}

.rijuna-tl-title {
	font-family: 'Dancing Script', cursive;
	font-size: 18px;
	font-weight: 700;
	color: #2D3B6E;
	margin-bottom: 8px;
	line-height: 1.3;
}

.rijuna-tl-desc {
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #6B7280;
	line-height: 1.6;
	margin: 0;
}

/* ── Animasi Scroll ───────────────────────────────────────────────────────── */

[data-animate="yes"] .rijuna-tl-item {
	opacity: 0;
	transition-property: opacity, transform;
	transition-timing-function: ease-out;
	transition-duration: 0.6s;
}

[data-animate="yes"] .rijuna-tl-odd {
	transform: translateX(-32px);
}

[data-animate="yes"] .rijuna-tl-even {
	transform: translateX(32px);
}

[data-animate="yes"] .rijuna-tl-item.rijuna-tl-visible {
	opacity: 1;
	transform: translateX(0);
}

/* ── Responsive Mobile ────────────────────────────────────────────────────── */

@media (max-width: 767px) {

	/* Pindahkan garis ke kiri */
	.rijuna-tl-wrapper::before {
		left: 16px;
	}

	/* Semua item full-width, rata kiri */
	.rijuna-tl-item,
	.rijuna-tl-even {
		width: 100%;
		left: 0;
		padding-right: 0;
		padding-left: 48px;
	}

	/* Dot di sisi kiri */
	.rijuna-tl-odd .rijuna-tl-dot,
	.rijuna-tl-even .rijuna-tl-dot {
		left: calc(16px - var(--rijuna-tl-dot-r, 9px));
		right: auto;
		top: 20px;
		transform: none;
	}

	/* Connector di sisi kiri */
	.rijuna-tl-odd::after,
	.rijuna-tl-even::after {
		left: calc(16px + var(--rijuna-tl-dot-r, 9px));
		right: auto;
		top: calc(20px + var(--rijuna-tl-dot-r, 9px) - 1px);
		width: calc(48px - 16px - var(--rijuna-tl-dot-r, 9px));
		transform: none;
	}

	/* Ekor segitiga seragam ke kiri */
	.rijuna-tl-odd .rijuna-tl-card::after,
	.rijuna-tl-even .rijuna-tl-card::before,
	.rijuna-tl-odd .rijuna-tl-card::before {
		display: none;
	}

	.rijuna-tl-even .rijuna-tl-card::after {
		content: '';
		position: absolute;
		left: -8px;
		top: calc(20px + var(--rijuna-tl-dot-r, 9px) - 8px);
		border-right: 8px solid #ffffff;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		border-left: none;
		right: auto;
		transform: none;
	}

	.rijuna-tl-card::after {
		content: '';
		position: absolute;
		left: -8px !important;
		right: auto !important;
		top: calc(20px + var(--rijuna-tl-dot-r, 9px) - 8px) !important;
		border-right: 8px solid #ffffff !important;
		border-left: none !important;
		border-top: 8px solid transparent !important;
		border-bottom: 8px solid transparent !important;
		transform: none !important;
	}

	/* Animasi mobile: hanya fade, tidak slide */
	[data-animate="yes"] .rijuna-tl-odd,
	[data-animate="yes"] .rijuna-tl-even {
		transform: translateY(16px);
	}

	[data-animate="yes"] .rijuna-tl-item.rijuna-tl-visible {
		transform: translateY(0);
	}
}