/* =============================================================
   sykimlaw litigation-timeline — patterns/home-litigation-timeline.php
   ============================================================= */

/* ── Section Header ── */
.sykim-timeline__eyebrow {
	font-size: var(--wp--preset--font-size--sm);
	font-family: var(--wp--preset--font-family--noto-sans-kr);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-500) !important;
}

.sykim-timeline__heading {
	word-break: keep-all;
}

.sykim-timeline__lead {
	color: rgba(255, 255, 255, 0.60) !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	line-height: 1.75;
	word-break: keep-all;
	max-width: 480px;
}

/* ── Steps Grid: 6-column ── */
.sykim-timeline-steps {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr);
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	padding-top: var(--wp--preset--spacing--xl);
}

/* ── Step Card ── */
.sykim-timeline-step {
	padding-right: var(--wp--preset--spacing--md);
	padding-left: var(--wp--preset--spacing--md);
	border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.sykim-timeline-step:first-child {
	border-left: none;
	padding-left: 0;
}

.sykim-timeline-step:last-child {
	padding-right: 0;
}

/* ── Step Number: gold bar above + Inter ── */
.sykim-timeline-step__num {
	position: relative;
	padding-top: 1.375rem;
	font-family: var(--wp--preset--font-family--inter) !important;
	font-size: 0.7rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--gold-500) !important;
	line-height: 1;
}

.sykim-timeline-step__num::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.5rem;
	height: 2px;
	background: var(--wp--preset--color--gold-500);
	opacity: 0.55;
}

/* ── Step Title ── */
.sykim-timeline-step__title {
	font-size: var(--wp--preset--font-size--md) !important;
	word-break: keep-all;
}

/* ── Step Description ── */
.sykim-timeline-step__desc {
	color: rgba(255, 255, 255, 0.52) !important;
	font-size: var(--wp--preset--font-size--xs) !important;
	line-height: 1.7;
	word-break: keep-all;
}

/* ── Entrance animation — staggered fade-in-up ── */
@keyframes sykim-step-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0);    }
}

.sykim-timeline-step {
	animation: sykim-step-in 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.sykim-timeline-step:nth-child(1) { animation-delay: 0.04s; }
.sykim-timeline-step:nth-child(2) { animation-delay: 0.10s; }
.sykim-timeline-step:nth-child(3) { animation-delay: 0.16s; }
.sykim-timeline-step:nth-child(4) { animation-delay: 0.22s; }
.sykim-timeline-step:nth-child(5) { animation-delay: 0.28s; }
.sykim-timeline-step:nth-child(6) { animation-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
	.sykim-timeline-step {
		animation: none !important;
	}
}

/* ── Tablet: 3×2 ── */
@media (max-width: 900px) {
	.sykim-timeline-steps {
		grid-template-columns: repeat(3, 1fr) !important;
		row-gap: var(--wp--preset--spacing--xl);
	}

	.sykim-timeline-step:nth-child(4) {
		border-left: none !important;
		padding-left: 0 !important;
	}

	.sykim-timeline-step:nth-child(4),
	.sykim-timeline-step:nth-child(5),
	.sykim-timeline-step:nth-child(6) {
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		padding-top: var(--wp--preset--spacing--xl);
	}
}

/* ── Mobile: single column ── */
@media (max-width: 599px) {
	.sykim-timeline-section {
		padding-left: var(--wp--preset--spacing--sm) !important;
		padding-right: var(--wp--preset--spacing--sm) !important;
		padding-top: var(--wp--preset--spacing--2xl) !important;
		padding-bottom: var(--wp--preset--spacing--2xl) !important;
	}

	.sykim-timeline-steps {
		grid-template-columns: 1fr !important;
		row-gap: 0 !important;
	}

	.sykim-timeline-step {
		border-left: none !important;
		border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
		padding: var(--wp--preset--spacing--md) 0 !important;
	}

	.sykim-timeline-step:first-child {
		border-top: none !important;
		padding-top: 0 !important;
	}

	/* Reset nth-child tablet overrides on mobile */
	.sykim-timeline-step:nth-child(4) {
		padding-left: 0 !important;
	}

	.sykim-timeline-step:nth-child(4),
	.sykim-timeline-step:nth-child(5),
	.sykim-timeline-step:nth-child(6) {
		border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
		padding-top: var(--wp--preset--spacing--md) !important;
	}
}