/**
 * Recovery Timeline Widget Styles
 * 
 * Scope: .dryazdani-recovery-timeline
 * Dependencies: design-system.css
 * 
 * Original Design: src/app/pages/NanoFazelift.tsx (Recovery Timeline section)
 * 
 * Key Design Values:
 * - Section padding: py-24 (96px)
 * - Badge: text-[#D4AF37] text-xs tracking-[0.3em] uppercase
 * - Title: text-5xl md:text-6xl (48px/60px) Playfair Display
 * - Label width: w-32 (128px)
 * - Gap: gap-8 (32px)
 * - Border: border-l-2 border-[#D4AF37]
 * - Phase spacing: space-y-8 (32px)
 */

/* Container */
.dryazdani-recovery-timeline {
	padding-block: var(--dryazdani-space-24); /* py-24 = 96px */
	background-color: var(--dryazdani-bg-white); /* bg-white */
}

/* Container with medium max-width */
.dryazdani-recovery-timeline__container {
	/* Base styles inherited from .dryazdani-container */
	/* max-width applied via .dryazdani-container--md */
}

/* Header */
.dryazdani-recovery-timeline__header {
	text-align: center;
	margin-block-end: 4rem; /* 64px = mb-16 */
}

.dryazdani-recovery-timeline__badge {
	color: var(--dryazdani-primary); /* #D4AF37 */
	font-size: var(--dryazdani-text-xs); /* 12px = text-xs */
	font-weight: var(--dryazdani-font-normal); /* 400 */
	letter-spacing: 0.3em; /* tracking-[0.3em] - custom value */
	text-transform: uppercase;
	margin-block-end: var(--dryazdani-space-6); /* 24px = mb-6 */
	line-height: var(--dryazdani-leading-none); /* 1 */
}

.dryazdani-recovery-timeline__title {
	font-family: var(--dryazdani-font-heading); /* Playfair Display */
	font-size: var(--dryazdani-text-5xl); /* 48px = text-5xl on mobile */
	font-weight: var(--dryazdani-font-normal); /* 400 */
	line-height: var(--dryazdani-leading-tight); /* 1.25 */
	color: var(--dryazdani-secondary); /* #2C2C2C */
	margin-block-end: var(--dryazdani-space-8); /* 32px = mb-8 */
}

@media (min-width: 768px) {
	.dryazdani-recovery-timeline__title {
		font-size: var(--dryazdani-text-6xl); /* 60px = text-6xl on md+ */
	}
}

/* Timeline Wrapper */
.dryazdani-recovery-timeline__timeline-wrapper {
	position: relative;
}

/* Timeline Line */
.dryazdani-recovery-timeline__line {
	position: absolute;
	left: 50%;
	inset-block-start: 0;
	inset-block-end: 0;
	width: 1px;
	background-color: var(--dryazdani-primary);
	opacity: 0.3;
	margin-inline-start: calc(-1px / 2);
}

[dir="rtl"] .dryazdani-recovery-timeline__line {
	left: auto;
	right: 50%;
}

/* Phases Container */
.dryazdani-recovery-timeline__phases {
	position: relative;
	z-index: 1;
}

/* Individual Phase (Inline Layout - Not used by default) */
.dryazdani-recovery-timeline__phase {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--dryazdani-space-6); /* 24px */
	margin-block-end: var(--dryazdani-space-8); /* 32px */
}

.dryazdani-recovery-timeline__phase:last-child {
	margin-block-end: 0;
}

/* Phase Content Containers */
.dryazdani-recovery-timeline__phase-content {
	display: flex;
}

.dryazdani-recovery-timeline__phase-content--left {
	justify-content: flex-end;
	text-align: end;
}

.dryazdani-recovery-timeline__phase-content--right {
	justify-content: flex-start;
	text-align: start;
}

/* Card (Inline Layout - Not used by default) */
.dryazdani-recovery-timeline__card {
	background-color: var(--dryazdani-bg-white);
	padding: var(--dryazdani-space-4); /* 16px */
	border-radius: var(--dryazdani-radius-sm); /* 4px */
	box-shadow: var(--dryazdani-shadow-sm);
	max-width: 100%;
	transition: var(--dryazdani-transition-normal);
}

.dryazdani-recovery-timeline__card:hover {
	box-shadow: var(--dryazdani-shadow-md);
}

/* Node (Inline Layout - Not used by default) */
.dryazdani-recovery-timeline__node-wrapper {
	position: relative;
	z-index: 2;
}

.dryazdani-recovery-timeline__node {
	width: 3rem;
	height: 3rem;
	background-color: var(--dryazdani-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.dryazdani-recovery-timeline__node-inner {
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--dryazdani-bg-white);
	border-radius: 50%;
}

/* Phase Content Text (Inline Layout - Not used by default) */
.dryazdani-recovery-timeline__phase-label {
	font-size: var(--dryazdani-text-xl);
	font-weight: var(--dryazdani-font-bold);
	color: var(--dryazdani-primary);
	margin-block-end: var(--dryazdani-space-1); /* 4px */
	line-height: var(--dryazdani-leading-snug);
}

.dryazdani-recovery-timeline__phase-title {
	font-size: var(--dryazdani-text-lg);
	font-weight: var(--dryazdani-font-semibold);
	color: var(--dryazdani-text-primary);
	margin-block-end: var(--dryazdani-space-1); /* 4px */
	line-height: var(--dryazdani-leading-snug);
}

.dryazdani-recovery-timeline__phase-description {
	font-size: var(--dryazdani-text-sm);
	line-height: var(--dryazdani-leading-normal); /* 1.5 */
	color: var(--dryazdani-text-muted);
	margin: 0;
}

/* ==========================================================================
   Side Label Layout
   ========================================================================== */

/* Side Label Phase Wrapper */
.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase {
	grid-template-columns: 1fr;
	gap: 0;
	margin-block-end: var(--dryazdani-space-8); /* space-y-8 = 32px between items */
}

.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase:last-child {
	margin-block-end: 0; /* No margin on last item */
}

.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-wrapper {
	display: flex;
	align-items: flex-start; /* items-start */
	gap: var(--dryazdani-space-8); /* gap-8 = 32px */
}

/* Side Label Phase Label */
.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-label {
	width: 8rem; /* 128px = w-32 */
	flex-shrink: 0; /* flex-shrink-0 */
	text-align: end; /* text-right */
	font-family: var(--dryazdani-font-heading); /* Playfair Display */
	font-size: var(--dryazdani-text-3xl); /* 30px = text-3xl */
	font-weight: var(--dryazdani-font-normal); /* 400 */
	color: var(--dryazdani-primary); /* #D4AF37 */
	margin: 0;
	line-height: var(--dryazdani-leading-tight); /* 1.25 */
}

/* Side Label Border - using border-left on content wrapper */
.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-border {
	display: none; /* Hide the separate border element */
}

/* Side Label Content Wrapper */
.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-content-wrapper {
	flex: 1; /* flex-1 */
	border-inline-start: 2px solid var(--dryazdani-primary); /* border-l-2 border-[#D4AF37] */
	padding-inline-start: var(--dryazdani-space-8); /* pl-8 = 32px */
	padding-block-end: var(--dryazdani-space-8); /* pb-8 = 32px */
}

/* Don't show border for last phase - only padding-left, no padding-bottom */
.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase--last .dryazdani-recovery-timeline__phase-content-wrapper {
	padding-block-end: 0; /* No padding-bottom on last item */
}

/* Side Label Typography */
.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-title {
	font-family: var(--dryazdani-font-heading);
	font-size: var(--dryazdani-text-xl); /* 20px = text-xl */
	font-weight: var(--dryazdani-font-normal); /* 400 */
	color: var(--dryazdani-secondary); /* #2C2C2C */
	margin-block-end: var(--dryazdani-space-3); /* mb-3 = 12px */
	line-height: var(--dryazdani-leading-snug); /* 1.375 */
	margin-top: 0;
}

.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-description {
	font-size: var(--dryazdani-text-lg); /* 16px */
	line-height: var(--dryazdani-leading-relaxed); /* 1.9 = leading-relaxed */
	color: var(--dryazdani-text-body); /* #717171 */
	margin: 0;
}

/* Hide original timeline elements in side label layout */
.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__line,
.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__node-wrapper,
.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-content,
.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__card {
	display: none;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
	.dryazdani-recovery-timeline__title {
		font-size: 2.25rem; /* 36px = text-4xl */
	}

	.dryazdani-recovery-timeline__badge {
		font-size: 0.75rem;
		margin-block-end: 1rem;
	}

	.dryazdani-recovery-timeline__header {
		margin-block-end: 3rem;
	}

	/* Side label layout adjustments */
	.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-wrapper {
		gap: 1.5rem;
	}

	.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-label {
		width: 7rem;
		font-size: 1.5rem; /* 24px = text-2xl */
	}

	.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-content-wrapper {
		padding-inline-start: 1.5rem;
		padding-block-end: 1.5rem;
	}

	.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-title {
		font-size: 1.125rem; /* 18px = text-lg */
	}

	.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-description {
		font-size: 0.9375rem; /* 15px */
	}

	/* Inline layout (original timeline - Not used by default) */
	.dryazdani-recovery-timeline__phase {
		gap: var(--dryazdani-space-4); /* 16px */
		margin-block-end: var(--dryazdani-space-6); /* 24px */
	}

	.dryazdani-recovery-timeline__card {
		padding: var(--dryazdani-space-2); /* 8px */
	}

	.dryazdani-recovery-timeline__node {
		width: 2.5rem;
		height: 2.5rem;
	}

	.dryazdani-recovery-timeline__node-inner {
		width: 1.25rem;
		height: 1.25rem;
	}

	.dryazdani-recovery-timeline__phase-label {
		font-size: var(--dryazdani-text-lg);
	}

	.dryazdani-recovery-timeline__phase-title {
		font-size: var(--dryazdani-text-base);
	}
}

/* Responsive - Mobile */
@media (max-width: 767px) {
	.dryazdani-recovery-timeline {
		padding-block: var(--dryazdani-space-8); /* 32px */
	}

	.dryazdani-recovery-timeline__header {
		margin-block-end: 2.5rem; /* 40px */
	}

	.dryazdani-recovery-timeline__badge {
		font-size: 0.625rem; /* 10px - smaller on mobile */
		margin-block-end: 0.75rem;
	}

	.dryazdani-recovery-timeline__title {
		font-size: var(--dryazdani-text-3xl); /* 30px = text-3xl */
	}

	/* Stack timeline vertically on mobile (Inline layout - Not used by default) */
	.dryazdani-recovery-timeline__line {
		left: var(--dryazdani-space-6); /* 24px */
		transform: none;
	}

	[dir="rtl"] .dryazdani-recovery-timeline__line {
		left: auto;
		right: var(--dryazdani-space-6); /* 24px */
		transform: none;
	}

	.dryazdani-recovery-timeline__phase {
		grid-template-columns: auto 1fr;
		gap: var(--dryazdani-space-4); /* 16px */
		margin-block-end: var(--dryazdani-space-6); /* 24px */
	}

	.dryazdani-recovery-timeline__node-wrapper {
		grid-column: 1;
		grid-row: 1;
	}

	.dryazdani-recovery-timeline__phase-content {
		grid-column: 2;
		grid-row: 1;
		justify-content: flex-start !important;
		text-align: start !important;
	}

	.dryazdani-recovery-timeline__phase-content--right {
		display: none;
	}

	.dryazdani-recovery-timeline__phase-content--left {
		display: flex;
	}

	.dryazdani-recovery-timeline__node {
		width: 2rem;
		height: 2rem;
	}

	.dryazdani-recovery-timeline__node-inner {
		width: 1rem;
		height: 1rem;
	}

	.dryazdani-recovery-timeline__card {
		padding: var(--dryazdani-space-2); /* 8px */
	}

	.dryazdani-recovery-timeline__phase-label {
		font-size: var(--dryazdani-text-base);
	}

	.dryazdani-recovery-timeline__phase-title {
		font-size: var(--dryazdani-text-sm);
	}

	.dryazdani-recovery-timeline__phase-description {
		font-size: var(--dryazdani-text-xs);
	}

	/* Side Label Layout Mobile Adjustments */
	.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-wrapper {
		gap: 1rem; /* Reduce gap on mobile */
	}

	.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-label {
		width: 5rem; /* Narrower on mobile */
		font-size: 1.125rem; /* 18px = text-lg */
	}

	.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-content-wrapper {
		padding-inline-start: 1rem; /* 16px */
		padding-block-end: 1rem; /* 16px */
	}

	.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-title {
		font-size: var(--dryazdani-text-base);
		margin-block-end: 0.5rem;
	}

	.dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-description {
		font-size: var(--dryazdani-text-sm); /* 14px = text-sm */
	}
}

/* RTL Support */
[dir="rtl"] .dryazdani-recovery-timeline__phase-content--left {
	text-align: start;
}

[dir="rtl"] .dryazdani-recovery-timeline__phase-content--right {
	text-align: end;
}

/* RTL Support for Side Label Layout */
[dir="rtl"] .dryazdani-recovery-timeline.layout-side_label .dryazdani-recovery-timeline__phase-label {
	text-align: start; /* Right-aligned in RTL */
}

/* Border is handled by border-inline-start logical property, no RTL override needed */

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	.dryazdani-recovery-timeline__card {
		transition: none;
	}
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
	.dryazdani-recovery-timeline__card {
		border: 2px solid currentColor;
	}

	.dryazdani-recovery-timeline__line {
		background-color: currentColor;
		width: 2px;
	}

	.dryazdani-recovery-timeline__node {
		border: 2px solid currentColor;
	}
}

/* Print Styles */
@media print {
	.dryazdani-recovery-timeline__line {
		background-color: var(--dryazdani-text-primary);
	}

	.dryazdani-recovery-timeline__node {
		border: 2px solid var(--dryazdani-text-primary);
	}
}