/**
 * About Page - Timeline Section Styles
 * 
 * Scroll-driven reveal timeline with position-based item visibility.
 * Items reveal as left text scrolls to align with each item's anchor point.
 * 
 * @package Terra Health
 * @since 2.0.3
 */

/* ============================================
   Container & Layout
   ============================================ */

.about-timeline {
	padding: 4rem 1.5rem;
	background-color: var(--color-white, #ffffff);
}

.about-timeline__container {
	max-width: 1200px;
	margin: 0 auto;
}

/* Header */
.about-timeline__header {
	text-align: center;
	margin-bottom: 4rem;
}

.about-timeline__heading {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-primary, #1a1a1a);
	margin: 0 0 0.5rem 0;
}

.about-timeline__subheading {
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--color-text, #333333);
	margin: 0;
}

/* ============================================
   Timeline Layout
   ============================================ */

.about-timeline__wrapper {
	position: relative;
	padding: 2rem 0;
}

/* Vertical divider line */
.about-timeline__divider {
	position: absolute;
	left: 19px; /* Centered on dots (40px dot at left: 0, center = 20px, line width 2px = 19px start) */
	top: 26px; /* Align with dot center (6px top + 20px dot radius) */
	bottom: 0;
	width: 2px;
	background: linear-gradient(to bottom, var(--color-accent, #2d7e3e), transparent);
	z-index: 0;
}

/* ============================================
   Timeline Items Container
   ============================================ */

.about-timeline__items {
	padding: 0;
	position: relative;
	z-index: 1;
}

/* ============================================
   Timeline Item Styles
   ============================================ */

.about-timeline__item {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
	position: relative;
	
	/* Initial state: hidden */
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 400ms ease-out, transform 400ms ease-out;
}

/* Active state: when revealed */
.about-timeline__item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================
   Timeline Dot/Marker
   ============================================ */

.about-timeline__dot {
	position: absolute;
	left: 0;
	top: 6px;
	width: 40px;
	height: 40px;
	background-color: var(--color-secondary, #ffffff);
	border: 3px solid var(--color-accent, #2d7e3e);
	border-radius: 50%;
	flex-shrink: 0;
	z-index: 1;
	
	/* Smooth transitions */
	transition: all 300ms ease-out;
}

.about-timeline__item.is-visible .about-timeline__dot {
	background-color: var(--color-accent, #2d7e3e);
	box-shadow: 0 0 0 8px rgba(45, 126, 62, 0.1);
}

/* ============================================
   Timeline Content
   ============================================ */

.about-timeline__content {
	padding-left: 0;
}

.about-timeline__year {
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--color-accent, #2d7e3e);
	margin: 0 0 0.25rem 0;
}

.about-timeline__title {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-primary, #1a1a1a);
	margin: 0 0 0.5rem 0;
}

.about-timeline__content > p {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-text, #333333);
	margin: 0;
}

/* ============================================
   Hover State (Desktop)
   ============================================ */

@media (hover: hover) {
	.about-timeline__item:hover .about-timeline__dot {
		transform: scale(1.15);
		box-shadow: 0 0 0 12px rgba(45, 126, 62, 0.15);
	}

	.about-timeline__item:hover .about-timeline__title {
		color: var(--color-accent, #2d7e3e);
	}
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 1024px) {
	.about-timeline__wrapper {
		padding: 1.5rem 0;
	}
}

@media (max-width: 768px) {
	.about-timeline {
		padding: 3rem 1rem;
	}

	.about-timeline__header {
		margin-bottom: 3rem;
	}

	.about-timeline__heading {
		font-size: 2rem;
	}

	.about-timeline__subheading {
		font-size: 1rem;
	}

	.about-timeline__wrapper {
		gap: 1.5rem;
	}

	.about-timeline__item {
		grid-template-columns: 32px 1fr;
		gap: 1rem;
		margin-bottom: 2rem;
	}

	.about-timeline__dot {
		width: 32px;
		height: 32px;
		border-width: 2px;
		top: 4px;
	}

	.about-timeline__divider {
		left: 15px; /* Center of 32px dot */
		top: 20px; /* Align with dot center (4px top + 16px dot radius) */
	}

	.about-timeline__year {
		font-size: 0.85rem;
	}

	.about-timeline__title {
		font-size: 1.1rem;
	}

	.about-timeline__content > p {
		font-size: 0.95rem;
	}
}

@media (max-width: 480px) {
	.about-timeline {
		padding: 2rem 0.75rem;
	}

	.about-timeline__heading {
		font-size: 1.75rem;
	}

	.about-timeline__items {
		padding: 0;
	}

	.about-timeline__item {
		margin-bottom: 1.75rem;
	}

	.about-timeline__dot {
		width: 28px;
		height: 28px;
		border-width: 2px;
		top: 2px;
	}

	.about-timeline__divider {
		left: 13px; /* Center of 28px dot */
		top: 16px; /* Align with dot center (2px top + 14px dot radius) */
	}

	.about-timeline__items::before {
		left: 13px;
	}

	.about-timeline__title {
		font-size: 1rem;
	}
}

/* ============================================
   Dark Mode Support
   ============================================ */

@media (prefers-color-scheme: dark) {
	.about-timeline {
		background-color: var(--color-primary-dark, #1a1a1a);
	}

	.about-timeline__heading {
		color: var(--color-text-dark, #ffffff);
	}

	.about-timeline__subheading {
		color: var(--color-text-light-dark, #b0b0b0);
	}

	.about-timeline__content > p {
		color: var(--color-text-light-dark, #b0b0b0);
	}

	.about-timeline__dot {
		background-color: var(--color-primary-dark, #1a1a1a);
		border-color: var(--color-accent, #4caf50);
	}

	.about-timeline__item.is-visible .about-timeline__dot {
		background-color: var(--color-accent, #4caf50);
		box-shadow: 0 0 0 8px rgba(76, 175, 80, 0.1);
	}

	.about-timeline__items::before {
		background: linear-gradient(to bottom, var(--color-accent, #4caf50), transparent);
	}
}

/* ============================================
   Accessibility
   ============================================ */

/* High contrast mode */
@media (prefers-contrast: more) {
	.about-timeline__dot {
		border-width: 4px;
	}

	.about-timeline__title {
		font-weight: 700;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.about-timeline__item {
		transition: none;
		opacity: 1;
		transform: none;
	}

	.about-timeline__dot {
		transition: none;
	}

	.about-timeline__item.is-visible .about-timeline__dot {
		box-shadow: none;
	}
}

/* Focus visible for keyboard navigation */
.about-timeline__item:focus-within {
	outline: 2px solid var(--color-accent, #2d7e3e);
	outline-offset: 4px;
	border-radius: 4px;
}