/**
 * DWoSO single-project.php styles. Same tokens as front-page.css/
 * single-program.css (see /BRAND.md).
 */

.dwoso-project-single {
	--navy: var(--ast-global-color-2, #0f172a);
	--purple: var(--ast-global-color-0, #563973);
	--purple-hover: var(--ast-global-color-1, #65408b);
	--text: var(--ast-global-color-3, #888686);
	--mint: var(--ast-global-color-4, #b3eed3);
	--offwhite: var(--ast-global-color-5, #fffefe);
}

.dwoso-project-single section {
	padding: 3rem 1.5rem;
}

.dwoso-project-single .dwoso-container {
	max-width: 1200px;
	margin: 0 auto;
}

.dwoso-project-single .dwoso-container--narrow {
	max-width: 750px;
}

/*
 * Full-bleed break-out, viewport-relative version — see astra-child's
 * single-project.css for the full explanation of why the plain
 * margin:calc(50% - 50vw) trick broke on this specific template.
 */
.dwoso-project-single .dwoso-full-bleed {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/*
 * Hero: the featured image (when one exists) sits as a right-side panel,
 * with the title/excerpt/meta on the left — not a full-bleed backdrop
 * behind the whole hero. A navy-to-transparent gradient over the image
 * (opaque where it meets the text side, fading out toward the photo) keeps
 * the text legible without fully hiding the photo. No image = plain navy
 * hero, unchanged from before.
 */
.dwoso-project-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--navy);
	color: var(--offwhite);
	padding: 4.5rem 1.5rem;
	min-height: 440px;
	display: flex;
	align-items: center;
}

.dwoso-project-hero-media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 60%;
}

.dwoso-project-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dwoso-project-hero-gradient {
	position: absolute;
	inset: 0;
	/* Opaque navy where the panel meets the title side (left edge of the
	   image), fading to transparent as the photo becomes the focus (right
	   edge of the hero). */
	background: linear-gradient(
		90deg,
		var(--navy) 0%,
		rgba(15, 23, 42, 0.86) 36%,
		rgba(15, 23, 42, 0.3) 72%,
		transparent 100%
	);
	pointer-events: none;
}

.dwoso-project-hero > .dwoso-container {
	position: relative;
	z-index: 1;
	width: 100%;
}

.dwoso-project-hero-content {
	max-width: 600px;
}

.dwoso-project-hero h1 {
	color: var(--offwhite);
	font-size: clamp(1.9rem, 3.6vw, 2.7rem);
	margin: 0.75rem 0 1rem;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.dwoso-project-hero-excerpt {
	color: #d7dbe4;
	font-size: 1.1rem;
	line-height: 1.6;
	margin: 0 0 1.5rem;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.dwoso-status-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.3rem 0.7rem;
	border-radius: 4px;
	background-color: var(--mint);
	color: var(--navy);
}

.dwoso-status-badge--completed {
	background-color: rgba(255, 255, 255, 0.15);
	color: var(--offwhite);
}

.dwoso-project-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.dwoso-project-meta-item {
	color: #d7dbe4;
	font-size: 0.92rem;
}

.dwoso-project-meta-item strong {
	color: var(--offwhite);
}

.dwoso-project-meta-item a {
	color: var(--mint);
	text-decoration: underline;
}

.dwoso-project-single-body {
	color: var(--text);
	font-size: 1.02rem;
	line-height: 1.75;
}

.dwoso-project-single-body p {
	margin: 0 0 1.25rem;
}

.dwoso-project-single-body ul {
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
}

.dwoso-project-single-body li {
	margin-bottom: 0.5rem;
}

.dwoso-project-single-cta {
	padding-top: 0;
}

.dwoso-project-single .dwoso-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.dwoso-project-single .dwoso-btn-outline {
	border: 2px solid var(--purple);
	color: var(--purple) !important;
}

.dwoso-project-single .dwoso-btn-outline:hover {
	background-color: var(--purple);
	color: #fff !important;
}

/* ---------- Responsive hero ----------
   A 60%-wide side panel gets too cramped below ~768px, so the image
   switches to full-bleed with a top-to-bottom gradient instead (photo
   visible up top, fading to solid navy at the bottom where the text sits)
   — same legibility goal, laid out for a narrow viewport. */
@media (max-width: 767px) {
	.dwoso-project-hero {
		min-height: 380px;
		align-items: flex-end;
		padding-top: 7rem;
	}

	.dwoso-project-hero-media {
		width: 100%;
	}

	.dwoso-project-hero-gradient {
		background: linear-gradient(
			180deg,
			rgba(15, 23, 42, 0.15) 0%,
			rgba(15, 23, 42, 0.75) 55%,
			var(--navy) 100%
		);
	}

	.dwoso-project-hero-content {
		max-width: 100%;
	}
}