/**
 * Timeline Horizontal Block Styles
 *
 * Horizontal timeline with alternating cards above and below the line.
 * Based on: https://github.com/Dulanka-K/Horizontal-Timeline
 *
 * Features:
 * - Design system integration
 * - Horizontal scrolling on overflow
 * - Accessible year badges and markers
 * - Responsive layout with scroll on mobile
 * - Reduced motion support
 *
 * @package TMW_Blocks
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

.timeline-horizontal-block {
	--timeline-line-height: 3px;
	--timeline-dot-size: 30px;
	--timeline-card-width: 340px;
	--timeline-card-overlap: 100px;
	--timeline-height: 500px;

	overflow: hidden; /* Prevent timeline from causing horizontal page overflow */
}

/* ==========================================================================
   Preview Mode Styles
   ========================================================================== */

.timeline-horizontal-preview {
	background: var(--color-white);
	border: var(--border-width-thin) dashed var(--color-border);
	border-radius: var(--radius-card);
	padding: var(--space-lg);
}

.timeline-horizontal-preview .timeline-preview-title {
	margin-bottom: var(--space-xs);
}

.timeline-horizontal-preview .timeline-preview-subtitle {
	margin-bottom: var(--space-md);
}

.timeline-horizontal-preview .timeline-preview-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.timeline-horizontal-preview .timeline-preview-list li {
	margin-bottom: var(--space-xs);
}

.timeline-horizontal-preview .timeline-preview-more {
	font-style: italic;
}

/* ==========================================================================
   Section Header
   ========================================================================== */

.timeline-horizontal-block .section-header {
	text-align: left;
	max-width: var(--max-width-content-md);
	margin-bottom: var(--space-md);
}

.timeline-horizontal-block .section-title {
	margin: 0 0 var(--space-sm);
}

.timeline-horizontal-block .section-subtitle {
	font-size: var(--font-size-lead);
	margin: 0 0 var(--space-sm);
}

.timeline-horizontal-block .section-header .section-subtitle strong {
	color: var(--color-heading);
}

.timeline-horizontal-block .section-eyebrow {
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	margin-bottom: var(--space-sm);
}

/* ==========================================================================
   Timeline Wrapper (Contains entire timeline - controls z-index)
   ========================================================================== */

.timeline-horizontal-wrapper {
	position: relative;
	z-index: 1; /* Keep below site header */
	overflow: hidden; /* Prevent timeline from extending past container */
	margin-inline: auto;
	max-width: var(--max-width-content-2xl);
	padding-left: var(--space-2xl);
	padding-right: var(--space-2xl);
}

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

.timeline-horizontal-container {
	position: relative;
	width: 100%;
	overflow-x: auto;
	overflow-y: clip;
	padding: 0;

	/* Hide native scrollbar - using custom progress bar instead */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

.timeline-horizontal-container::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

/* Focus state for keyboard navigation */
.timeline-horizontal-container:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

/* Hide focus ring for mouse users, show only for keyboard */
.timeline-horizontal-container:focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   Progress Bar (Custom Scrollbar - Interactive)
   ========================================================================== */

.timeline-h-progress-container {
	position: relative;
	width: 100%;
	height: 6px;
	background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
	border-radius: var(--radius-full);
	margin: var(--space-lg) auto 0;
	overflow: hidden;
	cursor: pointer;
	transition: height 0.15s ease-out, background-color 0.15s ease-out;
}

/* Larger hit area and visual feedback on hover */
.timeline-h-progress-container:hover {
	height: 10px;
	background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* Active/dragging state */
.timeline-h-progress-container.is-dragging,
.timeline-h-progress-container:active {
	height: 10px;
	cursor: grabbing;
}

.timeline-h-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background-color: var(--color-primary);
	border-radius: var(--radius-full);
	transition: left 0.15s ease-out, width 0.15s ease-out;
	width: 15%;
	pointer-events: none; /* Allow clicks to pass through to container */
}

/* ==========================================================================
   Timeline Track (Horizontal Line)
   ========================================================================== */

/* Track element hidden - using ::before pseudo-element on entries for better alignment */
.timeline-h-track {
	display: none;
}

/* ==========================================================================
   Timeline Entries List
   ========================================================================== */

.timeline-h-entries {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
	z-index: 2;
	height: var(--timeline-height);
	min-width: max-content;
	padding-left: var(--space-lg);
	padding-right: var(--space-xl);
}

/* Timeline line positioned within entries for perfect dot alignment */
.timeline-h-entries::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: var(--timeline-line-height);
	background: color-mix(in srgb, var(--color-primary) 20%, transparent);
	z-index: 1;
	pointer-events: none;
}

/* ==========================================================================
   Individual Timeline Entry
   ========================================================================== */

.timeline-h-entry {
	position: relative;
	display: flex;
	flex-direction: column;
	width: var(--timeline-card-width);
	min-width: var(--timeline-card-width); /* Allow JS to increase width */
	height: 100%;
	flex-shrink: 0;

	/* Negative margin creates overlap effect */
	margin-right: calc(var(--timeline-card-overlap) * -1);
}

/* Last entry shouldn't have negative margin */
.timeline-h-entry:last-child {
	margin-right: 0;
}

/* Entry positioned ABOVE the line (odd entries: 0, 2, 4...) */
.timeline-h-entry--above {
	justify-content: flex-end;
	padding-bottom: calc(50% + var(--space-md));
}

/* Entry positioned BELOW the line (even entries: 1, 3, 5...) */
.timeline-h-entry--below {
	justify-content: flex-start;
	padding-top: calc(50% + var(--space-md));
}

/* ==========================================================================
   Timeline Marker (Dot)
   ========================================================================== */

.timeline-h-marker {
	position: absolute;
	left: 0;
	top: 50.5%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--timeline-dot-size);
	height: var(--timeline-dot-size);
	z-index: 3;
}

.timeline-h-dot {
	width: var(--timeline-dot-size);
	height: var(--timeline-dot-size);
	background: var(--color-primary);
	border: 8px solid var(--color-white);
	border-radius: 50%;
	transition: transform var(--transition-base), background-color var(--transition-base);
}

/* Hover and focus state for dot */
.timeline-h-entry:hover .timeline-h-dot,
.timeline-h-entry:focus-visible .timeline-h-dot {
	transform: scale(1.25);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 1%, transparent);
}

/* Focus visible state for keyboard navigation - highlight the year badge */
.timeline-h-entry:focus {
	outline: none;
}

.timeline-h-entry:focus-visible {
	outline: none;
}

.timeline-h-entry:focus-visible .timeline-h-year-badge {
	outline: 3px solid var(--color-primary);
	outline-offset: 3px;
	box-shadow: var(--shadow-focus);
}

.timeline-h-entry:focus-visible .timeline-h-dot {
	transform: scale(1.2);
	box-shadow: 0 0 0 4px var(--color-white), 0 0 0 8px rgba(var(--color-primary-rgb), 0.3);
}

@media (width >= 768px) {
	/* Fix last entry dot alignment - different layout context due to no negative margin */
	.timeline-h-entry:last-child .timeline-h-marker {
		top: 50%;
	}
}

/* ==========================================================================
   Timeline Card (Contains year badge + content)
   ========================================================================== */

.timeline-h-card {
	position: absolute;
	left: 0;
	padding-left: 0;
	width: 100%;
	background: transparent;
}

/* Above entries: card positioned above the line */
.timeline-h-entry--above .timeline-h-card {
	bottom: calc(50% + var(--timeline-dot-size) + var(--space-xs));
}

/* Below entries: card positioned below the line */
.timeline-h-entry--below .timeline-h-card {
	top: calc(50% + var(--timeline-dot-size) + var(--space-xs));
}

/* ==========================================================================
   Year Badge (Always above content, left-aligned)
   ========================================================================== */

.timeline-h-year-badge {
	display: inline-block;
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h5);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-button);
	margin-bottom: var(--space-sm);
	white-space: nowrap;
}

/* ==========================================================================
   Card Content
   ========================================================================== */

.timeline-h-card-title {
	font-weight: var(--font-weight-semibold);
	color: var(--color-heading);
	margin: 0 0 var(--space-xs);
}

.timeline-h-card-description p {
	margin: 0;
	position: relative;
	z-index: 10;
}

.timeline-h-card-description a {
	text-decoration: underline;
}

.timeline-h-card-description p + p {
	margin-top: var(--space-sm);
}

/* ==========================================================================
   Responsive: Large Desktop (1280px+)
   ========================================================================== */

@media (width >= 1280px) {
	.timeline-horizontal-block {
		--timeline-card-width: 380px;
		--timeline-card-overlap: 120px;
	}
}

/* ==========================================================================
   Responsive: Mobile (768px and below)
   ========================================================================== */

@media (width <= 768px) {
	.timeline-horizontal-block {
		--timeline-dot-size: 24px;
	}

	.timeline-horizontal-block .section-header {
		text-align: center;
		max-width: none;
	}

	/* Hide progress bar on mobile - not needed for vertical layout */
	.timeline-h-progress-container {
		display: none;
	}

	/* Vertical timeline layout on mobile */
	.timeline-horizontal-container {
		overflow-x: visible;
		overflow-y: visible;
		padding: 0;
	}

	.timeline-h-entries {
		flex-direction: column;
		height: auto;
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
		gap: var(--space-lg);
	}

	/* Vertical line on the left - centered under dots */
	.timeline-h-entries::before {
		left: calc((var(--timeline-dot-size) / 2) - (var(--timeline-line-height) / 2));
		right: auto;
		top: 0;
		bottom: 0;
		width: var(--timeline-line-height);
		height: auto;
		transform: none;
	}

	.timeline-h-entry {
		width: 100%;
		min-width: 0; /* Reset desktop min-width to allow proper mobile sizing */
		height: auto;
		margin-right: 0;
		margin-bottom: var(--space-lg);
	}

	.timeline-h-entry:last-child {
		margin-bottom: 0;
	}

	.timeline-h-year-badge {
		z-index: 10;
		position: relative;
	}

	/* Reset above/below positioning - all cards on the right */
	.timeline-h-entry--above,
	.timeline-h-entry--below {
		justify-content: flex-start;
		padding-top: 0;
		padding-bottom: 0;
		max-width: 100%;
	}

	/* Marker positioned on the left edge - line is positioned to center under dot */
	.timeline-h-marker {
		left: 0;
		top: 0;
		transform: none;
	}

	.timeline-h-dot {
		border-width: 4px;
	}

	/* Card takes full width, positioned statically */
	.timeline-h-card {
		position: static;
		width: 100%;
		padding-left: var(--space-xl);
	}

	.timeline-h-card-description p {
		text-wrap: balance;
	}
}

/* ==========================================================================
   Responsive: Landscape Mobile - Keep Horizontal Layout
   ========================================================================== */

@media (width <= 991px) and (orientation: landscape) {
	.timeline-horizontal-block {
		--timeline-dot-size: 18px;
		--timeline-card-width: 300px;
		--timeline-card-overlap: 100px;
		--timeline-height: 200px;
	}

	.timeline-horizontal-wrapper {
		padding-left: var(--space-md);
		padding-right: var(--space-md);
	}

	/* Keep horizontal scrolling layout */
	.timeline-horizontal-container {
		overflow-x: auto !important;
		overflow-y: clip !important;
		padding: 0;
	}

	/* Horizontal entries layout */
	.timeline-h-entries {
		flex-direction: row !important;
		height: var(--timeline-height) !important;
		min-width: max-content !important;
		padding-left: var(--space-md) !important;
		padding-right: var(--space-lg) !important;
		gap: 0 !important;
	}

	/* Horizontal line */
	.timeline-h-entries::before {
		left: 0 !important;
		right: 0 !important;
		top: 50% !important;
		bottom: auto !important;
		width: auto !important;
		height: var(--timeline-line-height) !important;
		transform: translateY(-50%) !important;
	}

	.timeline-h-entry {
		width: var(--timeline-card-width) !important;
		min-width: var(--timeline-card-width) !important;
		height: 100% !important;
		margin-right: calc(var(--timeline-card-overlap) * -1) !important;
		margin-bottom: 0 !important;
	}

	.timeline-h-entry:last-child {
		margin-right: 0 !important;
	}

	/* Restore above/below positioning */
	.timeline-h-entry--above {
		justify-content: flex-end !important;
		padding-bottom: calc(50% + var(--space-xs)) !important;
		padding-top: 0 !important;
	}

	.timeline-h-entry--below {
		justify-content: flex-start !important;
		padding-top: calc(50% + var(--space-xs)) !important;
		padding-bottom: 0 !important;
	}

	/* Marker positioning */
	.timeline-h-marker {
		left: 0 !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
	}

	.timeline-h-dot {
		border-width: 4px;
	}

	/* Card positioning */
	.timeline-h-card {
		position: absolute !important;
		width: 100% !important;
		padding-left: 0 !important;
	}

	.timeline-h-entry--above .timeline-h-card {
		bottom: calc(50% + var(--timeline-dot-size) + var(--space-2xs)) !important;
		top: auto !important;
	}

	.timeline-h-entry--below .timeline-h-card {
		top: calc(50% + var(--timeline-dot-size) + var(--space-2xs)) !important;
		bottom: auto !important;
	}

	/* Compact typography */
	.timeline-h-year-badge {
		font-size: var(--font-size-small);
		padding: var(--space-2xs) var(--space-xs);
		margin-bottom: var(--space-2xs);
	}

	.timeline-h-card-title {
		font-size: var(--font-size-small);
		margin-bottom: var(--space-2xs);
	}

	.timeline-h-card-description {
		font-size: var(--font-size-small);
		line-height: var(--line-height-normal);
	}

	/* Show progress bar */
	.timeline-h-progress-container {
		display: block !important;
		margin-top: var(--space-sm);
	}

	/* Compact section header */
	.timeline-horizontal-block .section-header {
		text-align: left;
		margin-bottom: var(--space-sm);
	}

	.timeline-horizontal-block .section-subtitle {
		font-size: var(--font-size-body);
	}
}

/* ==========================================================================
   Dark Background Support
   Uses global dark-bg-detection.js system with [data-dark-bg="true"]
   ========================================================================== */

/* Section header text on dark backgrounds */
[data-dark-bg="true"] .timeline-horizontal-block .section-title,
[data-dark-bg="true"] .timeline-horizontal-block .section-subtitle,
[data-dark-bg="true"] .timeline-horizontal-block .section-eyebrow,
.timeline-horizontal-block[data-dark-bg="true"] .section-title,
.timeline-horizontal-block[data-dark-bg="true"] .section-subtitle,
.timeline-horizontal-block[data-dark-bg="true"] .section-eyebrow {
    color: var(--dark-bg-heading);
}

[data-dark-bg="true"] .timeline-horizontal-block .section-header .section-subtitle strong,
.timeline-horizontal-block[data-dark-bg="true"] .section-header .section-subtitle strong {
    color: var(--dark-bg-heading);
}

/* Timeline track line - use light color on dark backgrounds */
[data-dark-bg="true"] .timeline-horizontal-block .timeline-h-entries::before,
.timeline-horizontal-block[data-dark-bg="true"] .timeline-h-entries::before {
    background: color-mix(in srgb, var(--dark-bg-text) 30%, transparent);
}

/* Progress bar track on dark backgrounds */
[data-dark-bg="true"] .timeline-horizontal-block .timeline-h-progress-container,
.timeline-horizontal-block[data-dark-bg="true"] .timeline-h-progress-container {
    background-color: color-mix(in srgb, var(--dark-bg-text) 20%, transparent);
}

[data-dark-bg="true"] .timeline-horizontal-block .timeline-h-progress-container:hover,
.timeline-horizontal-block[data-dark-bg="true"] .timeline-h-progress-container:hover {
    background-color: color-mix(in srgb, var(--dark-bg-text) 30%, transparent);
}

/* Progress bar fill on dark backgrounds */
[data-dark-bg="true"] .timeline-horizontal-block .timeline-h-progress-bar,
.timeline-horizontal-block[data-dark-bg="true"] .timeline-h-progress-bar {
    background-color: var(--dark-bg-text);
}

/* Timeline dot border - use light color on dark backgrounds */
[data-dark-bg="true"] .timeline-horizontal-block .timeline-h-dot,
.timeline-horizontal-block[data-dark-bg="true"] .timeline-h-dot {
    border-color: var(--dark-bg-text);
}

/* Card title on dark backgrounds */
[data-dark-bg="true"] .timeline-horizontal-block .timeline-h-card-title,
.timeline-horizontal-block[data-dark-bg="true"] .timeline-h-card-title {
    color: var(--dark-bg-heading);
}

/* Card description on dark backgrounds */
[data-dark-bg="true"] .timeline-horizontal-block .timeline-h-card-description,
[data-dark-bg="true"] .timeline-horizontal-block .timeline-h-card-description p,
.timeline-horizontal-block[data-dark-bg="true"] .timeline-h-card-description,
.timeline-horizontal-block[data-dark-bg="true"] .timeline-h-card-description p {
    color: var(--dark-bg-text);
}

/* Links in card descriptions on dark backgrounds */
[data-dark-bg="true"] .timeline-horizontal-block .timeline-h-card-description a,
.timeline-horizontal-block[data-dark-bg="true"] .timeline-h-card-description a {
    color: var(--dark-bg-link);
}

[data-dark-bg="true"] .timeline-horizontal-block .timeline-h-card-description a:hover,
.timeline-horizontal-block[data-dark-bg="true"] .timeline-h-card-description a:hover {
    color: var(--dark-bg-link-hover);
    opacity: var(--dark-bg-link-hover-opacity, 0.85);
}

/* ==========================================================================
   Block Editor Adjustments
   ========================================================================== */

.editor-styles-wrapper .timeline-horizontal-block {
	margin-top: 0;
	margin-bottom: 0;
}

.editor-styles-wrapper .timeline-horizontal-container {
	overflow-x: auto;
}