/* ===================================
   Project Page Styles
   =================================== */

/* Header Navigation */
.header__nav {
	margin-top: var(--spacing-md);
	animation: fadeIn 0.8s ease-out 0.6s both;
}

.header__nav-link {
	color: var(--color-text-light);
	font-size: var(--font-size-small);
	padding: var(--spacing-xs) var(--spacing-md);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--radius-sm);
	display: inline-block;
	transition: all var(--transition-base);
}

.header__nav-link:hover,
.header__nav-link:focus {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--color-primary);
	color: var(--color-primary-light);
}

/* Project Article */
.project {
	max-width: 800px;
	animation: fadeIn 0.8s ease-out 0.4s both;
}

.project__header {
	margin-bottom: var(--spacing-xl);
	animation: fadeIn 0.6s ease-out 0.5s both;
}

.project__title {
	font-size: var(--font-size-h1);
	color: var(--color-text-primary);
	margin-bottom: var(--spacing-sm);
	line-height: var(--line-height-heading);
}

.project__meta {
	color: var(--color-text-secondary);
	font-size: var(--font-size-large);
	margin-bottom: 0;
}

/* Project Sections */
.project__section {
	margin-bottom: var(--spacing-xl);
	animation: fadeIn 0.6s ease-out both;
}

.project__section:nth-child(1) { animation-delay: 0.6s; }
.project__section:nth-child(2) { animation-delay: 0.7s; }
.project__section:nth-child(3) { animation-delay: 0.8s; }
.project__section:nth-child(4) { animation-delay: 0.9s; }
.project__section:nth-child(5) { animation-delay: 1s; }
.project__section:nth-child(6) { animation-delay: 1.1s; }
.project__section:nth-child(7) { animation-delay: 1.2s; }
.project__section:nth-child(8) { animation-delay: 1.3s; }

.project__section-title {
	color: var(--color-text-primary);
	border-bottom: 2px solid var(--color-primary);
	padding-bottom: var(--spacing-xs);
	margin-bottom: var(--spacing-md);
}

.project__list {
	list-style: none;
	padding-left: 0;
}

.project__list li {
	padding-left: var(--spacing-lg);
	margin-bottom: var(--spacing-sm);
	position: relative;
}

.project__list li::before {
	content: "→";
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
	position: absolute;
	left: 0;
}

.project__note {
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	font-style: italic;
	background-color: var(--color-bg-secondary);
	padding: var(--spacing-sm);
	border-left: 3px solid var(--color-primary);
	border-radius: var(--radius-sm);
}

/* Result Boxes */
.result-box {
	background-color: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
}

.result-box--success {
	background-color: #f0f9f6;
	border-color: var(--color-primary);
}

.result-box__title {
	font-size: var(--font-size-h4);
	margin-bottom: var(--spacing-md);
	color: var(--color-text-primary);
}

.result-box__content p:last-child,
.result-box__content ul:last-child {
	margin-bottom: 0;
}

/* Code Blocks */
.code-block {
	display: block;
	background-color: #2d2d2d;
	color: #f8f8f2;
	padding: var(--spacing-sm);
	border-radius: var(--radius-sm);
	font-family: 'Courier New', monospace;
	font-size: var(--font-size-small);
	overflow-x: auto;
	margin: var(--spacing-sm) 0;
}

.code-block--wrap {
	white-space: pre-wrap;
	word-break: break-all;
}

/* Technology Tags */
.tech-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
}

.tech-tag {
	display: inline-block;
	background-color: var(--color-primary);
	color: var(--color-text-light);
	padding: var(--spacing-xs) var(--spacing-md);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
}

/* Team Members */
.team-list {
	list-style: none;
	padding-left: 0;
}

.team-list li {
	padding: var(--spacing-sm) 0;
}

.team-list a {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.project__title {
		font-size: var(--font-size-h2);
	}

	.result-box {
		padding: var(--spacing-md);
	}

	.code-block {
		font-size: 12px;
	}
}