/* ============================================
   SECTION STYLES
   Section-specific layouts and styling
   ============================================ */

/* Hero Section */
.section-hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4xl) 0;
}

.hero-content {
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}

.hero-title {
	font-size: var(--font-size-6xl);
	font-weight: var(--font-weight-extrabold);
	margin-bottom: var(--space-lg);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-tighter);
	line-height: var(--line-height-tight);
}

.hero-subtitle {
	font-size: var(--font-size-xl);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-2xl);
	line-height: var(--line-height-relaxed);
}

.highlight {
	color: var(--color-primary-light);
}

.hero-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-bottom: var(--space-2xl);
}

.hero-social {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-xl);
	margin-bottom: var(--space-2xl);
	flex-wrap: wrap;
}

.hero-info {
	margin-top: var(--space-2xl);
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-xl);
	max-width: 800px;
	margin: 0 auto;
}

.info-item {
	text-align: center;
}

.info-item h3 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--space-sm);
	color: var(--color-text-primary);
}

/* About Section */
.about-content {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: var(--space-3xl);
	align-items: start;
}

.about-image {
	position: relative;
}

.about-image img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-2xl);
	border: 2px solid var(--color-border-muted);
	box-shadow: 0 20px 60px var(--color-shadow-lg);
}

.about-sections {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xl);
	max-width: 700px;
}

.about-section {
	display: flex;
	flex-direction: column;
}

.about-section:first-child .about-heading {
	margin-top: 0;
}

.about-intro {
	font-size: var(--font-size-lg);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-xl);
	line-height: var(--line-height-relaxed);
}

.about-heading {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
	margin-top: var(--space-xl);
	margin-bottom: var(--space-md);
}

.about-section p {
	margin-bottom: var(--space-lg);
	color: var(--color-text-secondary);
	line-height: var(--line-height-relaxed);
}

.about-section p:last-child {
	margin-bottom: 0;
}

/* Work Experience */
.work-timeline {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	max-width: 1000px;
	margin: 0 auto;
}

.work-card {
	position: relative;
}

.work-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-lg);
	margin-bottom: var(--space-lg);
	flex-wrap: wrap;
}

.work-title-group {
	flex: 1;
}

.work-card h3 {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-sm);
	color: var(--color-text-primary);
}

.work-company {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
	margin-bottom: var(--space-xs);
}

.work-location {
	font-size: var(--font-size-base);
	color: var(--color-text-tertiary);
}

.work-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.work-list li {
	position: relative;
	padding-left: var(--space-xl);
	color: var(--color-text-secondary);
	line-height: var(--line-height-relaxed);
}

.work-list li::before {
	content: '▹';
	position: absolute;
	left: 0;
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-lg);
}

/* Flagship Project Section */
.section-flagship {
	padding: var(--space-4xl) 0;
	position: relative;
	overflow: hidden;
}

.flagship-header {
	text-align: center;
	margin-bottom: var(--space-3xl);
}

.flagship-badge {
	display: inline-block;
	padding: var(--space-sm) var(--space-lg);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-full);
	color: var(--color-primary-light);
	margin-bottom: var(--space-lg);
	box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
	animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
	0%, 100% {
		box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
	}
	50% {
		box-shadow: 0 4px 25px rgba(59, 130, 246, 0.2), 0 0 30px rgba(59, 130, 246, 0.1);
	}
}

.flagship-title {
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-extrabold);
	margin-bottom: var(--space-lg);
	background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-secondary-light) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	letter-spacing: var(--letter-spacing-tighter);
}

.flagship-subtitle {
	font-size: var(--font-size-xl);
	color: var(--color-text-secondary);
	max-width: 800px;
	margin: 0 auto;
	line-height: var(--line-height-relaxed);
}

.flagship-card {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	border-radius: var(--radius-2xl);
	overflow: hidden;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
	border: 2px solid transparent;
	background-clip: padding-box;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 30px rgba(59, 130, 246, 0.1);
	animation: border-glow 4s ease-in-out infinite;
}

.flagship-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-2xl);
	padding: 2px;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4), rgba(6, 182, 212, 0.4), rgba(59, 130, 246, 0.4));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: rotate-gradient 8s linear infinite;
	z-index: -1;
}

@keyframes rotate-gradient {
	0% {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4), rgba(6, 182, 212, 0.4), rgba(59, 130, 246, 0.4));
	}
	33% {
		background: linear-gradient(225deg, rgba(139, 92, 246, 0.4), rgba(6, 182, 212, 0.4), rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4));
	}
	66% {
		background: linear-gradient(315deg, rgba(6, 182, 212, 0.4), rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4), rgba(6, 182, 212, 0.4));
	}
	100% {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4), rgba(6, 182, 212, 0.4), rgba(59, 130, 246, 0.4));
	}
}

@keyframes border-glow {
	0%, 100% {
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 30px rgba(59, 130, 246, 0.1);
	}
	50% {
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(59, 130, 246, 0.15), 0 0 50px rgba(139, 92, 246, 0.1);
	}
}

.flagship-card-inner {
	background: var(--color-bg-secondary);
	padding: var(--space-3xl);
	position: relative;
}

.flagship-icon-wrapper {
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-2xl);
}

.flagship-icon {
	width: 5rem;
	height: 5rem;
	color: var(--color-primary);
	position: relative;
	animation: icon-float 3s ease-in-out infinite;
}

.flagship-icon::before {
	content: '';
	position: absolute;
	inset: -20px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
	animation: icon-pulse 2s ease-in-out infinite;
	z-index: -1;
}

@keyframes icon-float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@keyframes icon-pulse {
	0%, 100% {
		opacity: 0.5;
		transform: scale(1);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.1);
	}
}

.flagship-icon svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.4));
}

.flagship-content {
	display: grid;
	gap: var(--space-2xl);
}

.flagship-description {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.flagship-intro {
	font-size: var(--font-size-lg);
	color: var(--color-text-primary);
	line-height: var(--line-height-relaxed);
}

.flagship-description p {
	color: var(--color-text-secondary);
	line-height: var(--line-height-relaxed);
}

.flagship-modules {
	margin-top: var(--space-lg);
	padding: var(--space-xl);
	background: rgba(59, 130, 246, 0.05);
	border-radius: var(--radius-xl);
	border: 1px solid rgba(59, 130, 246, 0.2);
}

.flagship-modules h4 {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary-light);
	margin-bottom: var(--space-md);
}

.modules-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--space-sm);
}

.modules-list li {
	position: relative;
	padding-left: var(--space-lg);
	color: var(--color-text-secondary);
	line-height: var(--line-height-relaxed);
}

.modules-list li::before {
	content: '▹';
	position: absolute;
	left: 0;
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-lg);
}

.modules-note {
	margin-top: var(--space-md);
	font-size: var(--font-size-sm);
	color: var(--color-text-tertiary);
	font-style: italic;
}

.flagship-tech {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-border-muted);
}

.flagship-note {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	font-style: italic;
	text-align: center;
	margin-top: var(--space-md);
}

.badge-featured {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
	border-color: var(--color-primary);
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.badge-featured:hover {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Projects Section */
.projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: var(--space-2xl);
}

.project-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.project-featured {
	border: 2px solid var(--color-primary);
	box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
}

.project-icon {
	width: 3rem;
	height: 3rem;
	color: var(--color-primary);
	margin-bottom: var(--space-lg);
}

.project-icon svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
}

.project-card h3 {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-md);
	color: var(--color-text-primary);
}

.project-card p {
	margin-bottom: var(--space-lg);
	color: var(--color-text-secondary);
	line-height: var(--line-height-relaxed);
}

.project-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
}

.project-note {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	font-style: italic;
	margin-bottom: var(--space-md);
}

.project-card > .button {
	margin-top: auto;
	align-self: flex-start;
}

/* AI Section */
.ai-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: var(--space-2xl);
}

.ai-card h3 {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-md);
	color: var(--color-text-primary);
}

.ai-card p {
	margin-bottom: var(--space-lg);
	color: var(--color-text-secondary);
	line-height: var(--line-height-relaxed);
}

/* Technologies Section */
.technologies-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: var(--space-2xl);
}

.tech-category {
	padding: var(--space-2xl);
}

.tech-category-header {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	margin-bottom: var(--space-xl);
	padding-bottom: var(--space-md);
	border-bottom: 2px solid var(--color-border-muted);
}

.tech-icon {
	font-size: var(--font-size-3xl);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
}

.tech-category h3 {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	margin: 0;
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-tight);
}

/* Education Section */
.education-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: var(--space-2xl);
	max-width: 1000px;
	margin: 0 auto;
}

/* Previous Experience */
.previous-exp-toggle {
	width: 100%;
	border-radius: var(--radius-xl);
	padding: var(--space-xl) var(--space-2xl);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all var(--transition-base);
	margin-bottom: 0;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border-muted);
	text-align: left;
}

.previous-exp-toggle:hover {
	background: var(--color-bg-tertiary);
	border-color: var(--color-border-primary);
	transform: translateY(-2px);
}

.toggle-title {
	margin: 0;
	color: var(--color-text-primary);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
}

.toggle-icon {
	font-size: var(--font-size-lg);
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
	transition: transform var(--transition-base);
}

.toggle-icon.expanded {
	transform: rotate(180deg);
}

.previous-exp-content {
	display: none;
	padding-top: var(--space-2xl);
}

.previous-exp-content[style*="display: block"] {
	display: block;
}

.previous-exp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: var(--space-2xl);
}

/* Contact Section */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-2xl);
	max-width: 1000px;
	margin: 0 auto;
}

.contact-card {
	text-align: center;
}

.contact-card h3 {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-lg);
	color: var(--color-text-primary);
}

.contact-social {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-lg);
	margin-top: var(--space-xl);
	flex-wrap: wrap;
}

/* Footer */
.footer {
	padding: var(--space-2xl) 0;
	border-top: 1px solid var(--color-border-muted);
	text-align: center;
}

.footer-content {
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer-logo {
	height: 60px;
	width: auto;
}

/* Responsive */
@media (max-width: 768px) {
	.hero-title {
		font-size: var(--font-size-4xl);
	}
	
	.hero-subtitle {
		font-size: var(--font-size-lg);
	}
	
	.about-content {
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
	}
	
	.about-image {
		max-width: 280px;
		margin: 0 auto;
	}
	
	.work-header {
		flex-direction: column;
	}
	
	.flagship-title {
		font-size: var(--font-size-4xl);
	}
	
	.flagship-subtitle {
		font-size: var(--font-size-lg);
	}
	
	.flagship-card-inner {
		padding: var(--space-2xl);
	}
	
	.flagship-icon {
		width: 4rem;
		height: 4rem;
	}
	
	.modules-list {
		grid-template-columns: 1fr;
	}
	
	.projects-grid {
		grid-template-columns: 1fr;
	}
	
	.contact-grid {
		grid-template-columns: 1fr;
	}
	
	.contact-social {
		flex-direction: column;
		gap: var(--space-md);
	}
}

@media (max-width: 480px) {
	.hero-title {
		font-size: var(--font-size-3xl);
	}
	
	.hero-actions {
		flex-direction: column;
		align-items: stretch;
	}
	
	.hero-social {
		flex-direction: column;
		width: 100%;
	}
	
	.hero-social .social-link {
		width: 100%;
		max-width: 280px;
	}
	
	.info-grid {
		grid-template-columns: 1fr;
	}
	
	.flagship-title {
		font-size: var(--font-size-3xl);
	}
	
	.flagship-subtitle {
		font-size: var(--font-size-base);
	}
	
	.flagship-card-inner {
		padding: var(--space-xl);
	}
	
	.flagship-icon {
		width: 3.5rem;
		height: 3.5rem;
	}
	
	.flagship-modules {
		padding: var(--space-lg);
	}
}