/**
 * Career Journey Widget Styles
 *
 * Timeline-style narrative showcasing career milestones
 *
 * @package DrYazdani
 * @since 1.0.0
 */

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

.dryazdani-career-journey {
	background-color: var(--dryazdani-bg-white, #ffffff);
	padding: var(--dryazdani-space-24, 96px) var(--dryazdani-space-6, 24px);
}

.dryazdani-career-journey__container {
	max-width: 1200px;
	margin: 0 auto;
}

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

.dryazdani-career-journey__header {
	text-align: center;
	margin-bottom: var(--dryazdani-space-16, 64px);
}

.dryazdani-career-journey__eyebrow {
	color: var(--dryazdani-primary, #d4af37);
	font-size: var(--dryazdani-text-xs, 0.75rem);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin-bottom: var(--dryazdani-space-6, 24px);
	font-weight: var(--dryazdani-font-normal, 400);
}

.dryazdani-career-journey__heading {
	font-family: var(--dryazdani-font-heading, 'Playfair Display', serif);
	font-size: clamp(var(--dryazdani-text-5xl, 3rem), 5vw, var(--dryazdani-text-6xl, 3.75rem));
	line-height: 1.2;
	color: var(--dryazdani-secondary, #2c2c2c);
	margin: 0;
	font-weight: var(--dryazdani-font-normal, 400);
}

/* ==========================================================================
   Eras List
   ========================================================================== */

.dryazdani-career-journey__eras {
	display: flex;
	flex-direction: column;
	gap: var(--dryazdani-space-24, 96px);
}

.dryazdani-career-journey__era {
	position: relative;
}

/* Last era - no bottom margin */
.dryazdani-career-journey__era:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Era Header
   ========================================================================== */

.dryazdani-career-journey__era-header {
	display: flex;
	align-items: flex-start;
	gap: var(--dryazdani-space-4, 16px);
	margin-bottom: var(--dryazdani-space-8, 32px);
}

/* ==========================================================================
   Icon Circle
   ========================================================================== */

.dryazdani-career-journey__icon-circle {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: var(--dryazdani-primary, #d4af37);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: var(--dryazdani-transition-normal, all 300ms ease-out);
}

.dryazdani-career-journey__icon-circle i,
.dryazdani-career-journey__icon-circle svg {
	color: var(--dryazdani-secondary, #2c2c2c);
	fill: var(--dryazdani-secondary, #2c2c2c);
	font-size: 40px;
	width: 40px;
	height: 40px;
}

/* ==========================================================================
   Era Meta
   ========================================================================== */

.dryazdani-career-journey__era-meta {
	flex: 1;
	padding-top: var(--dryazdani-space-2, 8px);
}

.dryazdani-career-journey__era-title {
	font-family: var(--dryazdani-font-heading, 'Playfair Display', serif);
	font-size: clamp(var(--dryazdani-text-3xl, 2rem), 4vw, var(--dryazdani-text-4xl, 2.5rem));
	line-height: 1.2;
	color: var(--dryazdani-secondary, #2c2c2c);
	margin: 0 0 var(--dryazdani-space-2, 8px) 0;
	font-weight: var(--dryazdani-font-normal, 400);
}

.dryazdani-career-journey__date-label {
	color: var(--dryazdani-primary, #d4af37);
	font-size: var(--dryazdani-text-sm, 0.875rem);
	letter-spacing: var(--dryazdani-tracking-widest, 0.15em);
	text-transform: uppercase;
	font-weight: var(--dryazdani-font-medium, 500);
	margin-bottom: var(--dryazdani-space-6, 24px);
}

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

.dryazdani-career-journey__content {
	color: var(--dryazdani-secondary, #2c2c2c);
	font-size: clamp(var(--dryazdani-text-base, 1rem), 2vw, var(--dryazdani-text-lg, 1.125rem));
	line-height: var(--dryazdani-leading-relaxed, 1.9);
	padding-inline-start: var(--dryazdani-space-24, 96px);
}

.dryazdani-career-journey__content p {
	margin: 0 0 var(--dryazdani-space-6, 24px) 0;
}

.dryazdani-career-journey__content p:last-child {
	margin-bottom: 0;
}

/* Drop Cap Styling */
.dryazdani-career-journey__content--drop-cap p:first-of-type::first-letter {
	font-size: var(--dryazdani-text-7xl, 7rem);
	font-family: var(--dryazdani-font-heading, 'Playfair Display', serif);
	color: var(--dryazdani-primary, #d4af37);
	float: left;
	line-height: 0.8;
	margin-inline-end: var(--dryazdani-space-3, 12px);
	margin-top: var(--dryazdani-space-2, 8px);
	font-weight: var(--dryazdani-font-normal, 400);
}

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

/* Tablet */
@media (max-width: 1024px) {
	.dryazdani-career-journey {
		padding: var(--dryazdani-space-20, 80px) var(--dryazdani-space-6, 24px);
	}

	.dryazdani-career-journey__header {
		margin-bottom: var(--dryazdani-space-12, 48px);
	}

	.dryazdani-career-journey__eras {
		gap: var(--dryazdani-space-20, 80px);
	}

	.dryazdani-career-journey__content {
		padding-inline-start: var(--dryazdani-space-16, 64px);
	}

	.dryazdani-career-journey__content--drop-cap p:first-of-type::first-letter {
		font-size: var(--dryazdani-text-5xl, 5rem);
	}
}

/* Mobile */
@media (max-width: 767px) {
	.dryazdani-career-journey {
		padding: var(--dryazdani-space-16, 64px) var(--dryazdani-space-4, 16px);
	}

	.dryazdani-career-journey__header {
		margin-bottom: var(--dryazdani-space-10, 40px);
	}

	.dryazdani-career-journey__eyebrow {
		font-size: 0.625rem;
		letter-spacing: var(--dryazdani-tracking-ultra-wide, 0.2em);
		margin-bottom: var(--dryazdani-space-4, 16px);
	}

	.dryazdani-career-journey__heading {
		font-size: var(--dryazdani-text-4xl, 2.5rem);
	}

	.dryazdani-career-journey__eras {
		gap: var(--dryazdani-space-16, 64px);
	}

	.dryazdani-career-journey__era-header {
		flex-direction: column;
		gap: var(--dryazdani-space-3, 12px);
		margin-bottom: var(--dryazdani-space-6, 24px);
	}

	.dryazdani-career-journey__icon-circle {
		width: 64px;
		height: 64px;
	}

	.dryazdani-career-journey__icon-circle i,
	.dryazdani-career-journey__icon-circle svg {
		font-size: 32px;
		width: 32px;
		height: 32px;
	}

	.dryazdani-career-journey__era-meta {
		padding-top: 0;
	}

	.dryazdani-career-journey__era-title {
		font-size: var(--dryazdani-text-3xl, 2rem);
	}

	.dryazdani-career-journey__date-label {
		font-size: var(--dryazdani-text-xs, 0.75rem);
		letter-spacing: var(--dryazdani-tracking-widest, 0.1em);
		margin-bottom: var(--dryazdani-space-4, 16px);
	}

	.dryazdani-career-journey__content {
		padding-inline-start: 0;
		font-size: var(--dryazdani-text-base, 1rem);
		line-height: 1.8;
	}

	.dryazdani-career-journey__content p {
		margin-bottom: var(--dryazdani-space-5, 20px);
	}

	.dryazdani-career-journey__content--drop-cap p:first-of-type::first-letter {
		font-size: var(--dryazdani-text-4xl, 4rem);
		margin-inline-end: var(--dryazdani-space-2, 8px);
		margin-top: var(--dryazdani-space-1, 4px);
	}
}

/* ==========================================================================
   RTL Support
   ========================================================================== */

[dir="rtl"] .dryazdani-career-journey__content--drop-cap p:first-of-type::first-letter {
	float: right;
	margin-inline-start: var(--dryazdani-space-3, 12px);
	margin-inline-end: 0;
}

@media (max-width: 767px) {
	[dir="rtl"] .dryazdani-career-journey__content--drop-cap p:first-of-type::first-letter {
		margin-inline-start: var(--dryazdani-space-2, 8px);
		margin-inline-end: 0;
	}
}

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

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
	.dryazdani-career-journey__icon-circle {
		transition: none;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dryazdani-career-journey__icon-circle {
		border: 2px solid currentColor;
	}
}