/**
 * Project CPT CSS
 *
 * Styles for project archive and single pages
 *
 * @package AWE_EV_Classic
 */

/* ==========================================================================
   Project Hero
   ========================================================================== */

.project-hero,
.event-hero,
.story-hero {
	position: relative;
	height: 500px;
	overflow: hidden;
	margin-bottom: var(--section-padding);
}

.project-hero .hero-image,
.event-hero .hero-image,
.story-hero .hero-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.project-hero .hero-image img,
.event-hero .hero-image img,
.story-hero .hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project-hero .hero-content,
.event-hero .hero-content,
.story-hero .hero-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: center;
}

.project-title,
.event-title,
.story-title {
	color: #fff;
	font-size: var(--font-size-4xl);
	margin-bottom: var(--spacing-md);
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.project-meta,
.event-meta,
.story-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
}

.meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background-color: rgba(255, 255, 255, 0.9);
	color: var(--color-text);
	font-size: var(--font-size-sm);
	font-weight: 600;
	border-radius: var(--radius-base);
}

.meta-status {
	text-transform: capitalize;
}

.status-active,
.status-ongoing {
	background-color: var(--color-success);
	color: #fff;
}

.status-completed {
	background-color: var(--color-info);
	color: #fff;
}

.status-planned {
	background-color: var(--color-warning);
	color: #fff;
}

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

.project-content,
.event-content,
.story-content,
.document-content {
	margin-bottom: var(--section-padding);
}

.project-section,
.event-section,
.story-section,
.document-section {
	margin-bottom: var(--spacing-3xl);
}

.project-section h2,
.event-section h2,
.story-section h2,
.document-section h2 {
	margin-bottom: var(--spacing-xl);
	padding-bottom: var(--spacing-md);
	border-bottom: 2px solid var(--color-border);
}

.project-summary .section-content,
.event-description .section-content,
.story-narrative .section-content {
	font-size: var(--font-size-lg);
	line-height: 1.8;
	color: var(--color-text-muted);
}

/* Project Info Grid */
.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--spacing-xl);
	padding: var(--spacing-xl);
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
}

.info-item h3 {
	font-size: var(--font-size-base);
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--spacing-sm);
}

.info-item p {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--color-text);
	margin: 0;
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.project-gallery,
.event-gallery {
	background-color: var(--color-surface);
	padding: var(--spacing-xl);
	border-radius: var(--radius-lg);
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--spacing-md);
	margin-top: var(--spacing-lg);
}

.gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-base);
	cursor: pointer;
	transition: transform var(--transition-base);
}

.gallery-item:hover {
	transform: scale(1.02);
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 4 / 3;
}

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

.related-projects,
.related-stories,
.related-documents {
	padding: var(--spacing-xl);
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-lg);
	margin-top: var(--spacing-lg);
}

.related-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.related-list li {
	padding: var(--spacing-sm) 0;
	border-bottom: 1px solid var(--color-border);
}

.related-list li:last-child {
	border-bottom: none;
}

.related-list a {
	color: var(--color-text);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--transition-fast);
}

.related-list a:hover {
	color: var(--color-primary);
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.project-hero,
	.event-hero,
	.story-hero {
		height: 400px;
	}

	.project-title,
	.event-title,
	.story-title {
		font-size: var(--font-size-3xl);
	}

	.gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

/* ==========================================================================
   PROJECT ARCHIVE PAGE (Mockup #4 Pattern)
   ========================================================================== */

.post-type-archive-project .filter-group .btn {
	align-self: flex-end;
	padding: 0.55rem 1.25rem;
	min-height: 42px;
}

.post-type-archive-project .no-results {
	max-width: 680px;
	margin: 0 auto;
	padding: 3rem 0;
	text-align: center;
}

.post-type-archive-project .no-results h2 {
	margin-bottom: 0.5rem;
}

.post-type-archive-project .no-results .btn {
	margin-top: 0.5rem;
}

@media (max-width: 768px) {
	.post-type-archive-project .filter-group .btn {
		width: 100%;
	}
}

/* ==========================================================================
   SINGLE PROJECT PAGE (Mockup #5 Pattern)
   ========================================================================== */

/* Project wrapper section */
.project-wrapper {
	padding: 3rem 0 2.5rem;
}

/* Project header and meta */
.project-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
	color: var(--color-muted);
}

.project-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.project-meta-label {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	color: var(--color-muted);
}

/* Featured image */
.project-featured-image {
	margin-bottom: 2rem;
	border-radius: 1.25rem;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(195, 142, 129, 0.18), rgba(198, 191, 169, 0.25));
	border: 1px solid rgba(229, 223, 215, 0.9);
	box-shadow: var(--shadow-soft);
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.project-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

.project-featured-image span {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
	font-weight: 500;
	padding: 1rem;
	text-align: center;
}

/* Project body content */
.project-body {
	font-size: 0.98rem;
	max-width: 760px;
}

.project-body p {
	margin-bottom: 1.1rem;
	color: var(--color-muted);
	line-height: 1.7;
}

.project-body h2,
.project-body h3 {
	margin-top: 2rem;
	color: var(--color-dark);
}

/* Project outcomes section */
.project-outcomes {
	margin-top: 1.25rem;
}

.project-outcomes h3 {
	margin-bottom: 0.5rem;
	color: var(--color-dark);
}

.project-outcomes ul {
	margin: 0;
	padding-left: 1.2rem;
	color: var(--color-muted);
}

.project-outcomes li {
	margin-bottom: 0.4rem;
	line-height: 1.6;
}

/* Project highlight box */
.project-highlight {
	margin-top: 2rem;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(198, 191, 169, 0.45);
	background: linear-gradient(135deg, rgba(198, 191, 169, 0.08), rgba(195, 142, 129, 0.06));
	padding: 1.5rem 1.75rem;
	box-shadow: var(--shadow-soft);
	max-width: 760px;
}

.project-highlight blockquote {
	margin: 0 0 0.75rem;
	font-style: italic;
	color: var(--color-dark);
	font-size: 1rem;
	line-height: 1.6;
}

.project-highlight small {
	display: block;
	margin-bottom: 1rem;
	color: var(--color-muted);
}

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

.project-highlight-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	font-size: 0.9rem;
	margin-top: 1rem;
}

.project-highlight-stat {
	min-width: 120px;
}

.project-highlight-stat span:first-child {
	display: block;
	font-weight: 600;
	color: var(--color-muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.25rem;
}

.project-highlight-stat span:last-child {
	display: block;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-primary);
}

/* Back link */
.project-back {
	margin-top: 2rem;
	font-size: 0.9rem;
}

.project-back a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.project-back a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

.project-back a span {
	font-size: 1rem;
	line-height: 1;
}

/* Related projects section */
.related-projects {
	padding: 2.5rem 0 3.5rem;
}

.related-projects__header {
	margin-bottom: 1.5rem;
}

.related-projects__header h2 {
	font-size: 1.6rem;
	margin-bottom: 0.25rem;
	color: var(--color-dark);
}

.related-projects__header p {
	font-size: 0.95rem;
	color: var(--color-muted);
	max-width: 720px;
}

.related-card {
	text-align: left;
}

.related-card .badge {
	margin-bottom: 0.45rem;
}

.related-card .card__title {
	margin-bottom: 0.5rem;
}

.related-card .card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.related-card .card__title a:hover {
	color: var(--color-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.project-wrapper {
		padding: 2rem 0 2rem;
	}

	.project-meta-row {
		gap: 0.75rem 1rem;
		font-size: 0.85rem;
	}

	.project-featured-image {
		min-height: 180px;
	}

	.project-body {
		font-size: 0.95rem;
	}

	.project-highlight {
		padding: 1.25rem 1.5rem;
	}

	.project-highlight-stats {
		gap: 1rem;
	}

	.project-highlight-stat {
		min-width: 100px;
	}

	.related-projects__header h2 {
		font-size: 1.4rem;
	}
}