/**
 * Timeline Block Base Styles
 *
 * Provides minimal base styles and resets.
 * Most styles are generated dynamically per-instance via inline CSS.
 *
 * @package Timeline_Block
 */

/* Box-sizing reset for timeline block */
.timeline-block {
	box-sizing: border-box;
}

.timeline-block *,
.timeline-block *:before,
.timeline-block *:after {
	box-sizing: border-box;
}

.timeline-outer {
	position: relative;
}

.timeline-outer:before {
	content: '';
	border-color: transparent;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
}

/* Timeline date styling */
.timeline-date {
	font-weight: 900;
	font-size: 18px;
}

/* Timeline text styling */
.timeline-text {
	margin: 0;
	font-size: 14px;
}

.timeline-text p {
	margin: 0;
}

.timeline-text p + p {
	margin-top: 0.5em;
}

.timeline-text p:last-child {
	margin-bottom: 0;
}

/* Editor-specific styles */
.block-editor-block-list__layout .timeline-block {
	/* Ensure block doesn't overflow in editor */
	max-width: 100%;
}

/* Placeholder styles (when no sections exist) */
.timeline-block-placeholder {
	padding: 40px;
	text-align: center;
	background: #f0f0f0;
	border: 2px dashed #ccc;
	border-radius: 8px;
	color: #666;
}

.timeline-block-placeholder p {
	margin: 0;
}

/* Responsive adjustments
@media (max-width: 768px) {
	.timeline-caption {
		left: 55% !important;
		right: auto !important;
		width: 42% !important;
		max-width: none !important;
		font-size: 0.9em;
	}

	.timeline-date {
		font-size: 1em;
	}
}

@media (max-width: 480px) {
	.timeline-caption {
		width: 45% !important;
		padding: 8px !important;
	}

	.timeline-date {
		font-size: 0.95em;
		margin-bottom: 0.3em;
	}

	.timeline-text {
		font-size: 0.85em;
	}
}
 */