/* Curated photography integration — revised after visual review.
 * Photography supports the existing premium Telos system rather than becoming
 * a full-page collage. Images are darkened/cropped intentionally for legibility.
 */

/* Homepage hero — keep the mission copy dominant while the cross remains a
 * clear, hopeful focal point on the open right side of the composition. */
.telos-hero {
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(circle at 88% 28%, rgba(244, 212, 73, 0.13), transparent 34%),
		linear-gradient(135deg, #142f35, #1c5663);
}

.telos-hero::before {
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	width: auto;
	height: 100%;
	aspect-ratio: 4 / 3;
	background:
		linear-gradient(180deg, rgba(13, 36, 41, 0.02), rgba(13, 36, 41, 0.24)),
		linear-gradient(90deg, rgba(20, 47, 53, 0.34), rgba(20, 47, 53, 0.08) 58%, transparent),
		url('../images/photography/hero-sunset-cross-2400.webp') 60% center / cover no-repeat;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 6%, rgba(0, 0, 0, 0.84) 24%, #000 37%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 6%, rgba(0, 0, 0, 0.84) 24%, #000 37%);
	content: "";
	pointer-events: none;
}

.telos-hero::after {
	z-index: 0;
	display: block;
	background: linear-gradient(90deg, rgba(20, 47, 53, 0.78) 0%, rgba(20, 47, 53, 0.64) 36%, rgba(20, 47, 53, 0.34) 52%, rgba(20, 47, 53, 0.08) 68%, transparent 82%);
}

/* Future section — keep the summit and people visible while preserving a dark
 * reading surface behind the heading. */
.telos-future {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #173f48;
	color: #fff;
}

.telos-future::before {
	position: absolute;
	z-index: -2;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(23, 63, 72, 0.94) 0%, rgba(23, 63, 72, 0.85) 32%, rgba(23, 63, 72, 0.62) 46%, rgba(23, 63, 72, 0.25) 62%, rgba(23, 63, 72, 0.12) 100%),
		url('../images/photography/future-shared-hope.webp') center 46% / cover no-repeat;
	content: "";
}

.telos-future::after {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.08) 55%, rgba(0, 0, 0, 0.22));
	content: "";
	pointer-events: none;
}

.telos-future .telos-eyebrow { color: var(--telos-color-warm, #f4d449); }
.telos-future h2 { color: #fff; }

.telos-future .telos-outcome {
	box-sizing: border-box;
	height: 100%;
	margin-block-start: 0 !important;
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(248, 247, 242, 0.97);
	color: #24383d;
	transform: translateY(0);
	box-shadow: 0 1rem 2.8rem rgba(12, 34, 39, 0.13);
	transition:
		transform 180ms ease,
		box-shadow 180ms ease;
}

.telos-future .telos-outcomes {
	align-items: stretch;
}

@media (hover: hover) and (pointer: fine) {
	.telos-future .telos-outcome:hover {
		z-index: 1;
		transform: translateY(-0.42rem);
		box-shadow: 0 1.5rem 3.5rem rgba(12, 34, 39, 0.22);
	}
}

/* Orphan Care Compass — clean photographic panel. The old oversized orbit is
 * intentionally removed because it competes with the photography and headline. */
.telos-compass-visual {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(23rem, 34vw, 31rem);
	border: 1px solid rgba(255, 255, 255, 0.2);
	background:
		linear-gradient(180deg, rgba(17, 49, 56, 0.08), rgba(17, 49, 56, 0.28)),
		url('../images/photography/compass-direction.webp') 48% center / cover no-repeat;
	box-shadow: 0 1.6rem 4rem rgba(11, 35, 41, 0.22);
}

.telos-compass-visual::after {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(244, 212, 73, 0.16);
	content: "";
	pointer-events: none;
}

.telos-compass-orbit {
	display: none !important;
}

/* Technology Is a Tool — photography stays subtle behind the editorial list. */
.telos-why-page .telos-section--ink {
	background:
		linear-gradient(90deg, #24383d 0%, #24383d 47%, rgba(36, 56, 61, 0.97) 65%, rgba(36, 56, 61, 0.88) 100%),
		url('../images/photography/technology-collaboration.webp') right center / 52% auto no-repeat,
		#24383d;
}

.telos-why-page .telos-principle-list {
	background: rgba(20, 47, 53, 0.28);
}

/* Help Build — restore a deliberate CTA block. A photograph behind a large
 * action headline made this section noisy and reduced CTA contrast. */
.telos-help-build {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(circle at 88% 18%, rgba(74, 154, 174, 0.25), transparent 30%),
		linear-gradient(135deg, #174a55 0%, #1c5663 58%, #214f59 100%) !important;
	color: #fff;
}

.telos-help-build::before,
.telos-help-build::after {
	display: none !important;
}

.telos-help-build-inner {
	align-items: end;
	gap: clamp(2rem, 5vw, 5rem);
}

.telos-help-build .telos-eyebrow {
	color: var(--telos-color-warm, #f4d449);
}

.telos-help-build h2,
.telos-help-build .telos-copy {
	color: #fff;
	text-shadow: none;
}

.telos-help-build .wp-block-button__link {
	border-color: var(--telos-color-warm, #f4d449) !important;
	background: var(--telos-color-warm, #f4d449) !important;
	color: #24383d !important;
	box-shadow: 0 0.8rem 2rem rgba(10, 31, 36, 0.16);
}

@media (max-width: 900px) {
	.telos-hero::before,
	.telos-hero::after {
		display: none;
	}

	.telos-hero {
		background:
			linear-gradient(180deg, rgba(20, 47, 53, 0.58) 0%, rgba(20, 47, 53, 0.56) 54%, rgba(20, 47, 53, 0.7) 100%),
			linear-gradient(90deg, rgba(20, 47, 53, 0.42), rgba(23, 71, 81, 0.1)),
			url('../images/photography/hero-sunset-cross-1200.webp') 64% center / cover no-repeat,
			#173f48;
	}

	.telos-future::before {
		background:
			linear-gradient(180deg, rgba(23, 63, 72, 0.74) 0%, rgba(23, 63, 72, 0.52) 55%, rgba(23, 63, 72, 0.36) 100%),
			url('../images/photography/future-shared-hope.webp') 56% top / cover no-repeat;
	}

	.telos-why-page .telos-section--ink {
		background:
			linear-gradient(180deg, rgba(36, 56, 61, 0.88) 0%, rgba(36, 56, 61, 0.78) 64%, rgba(36, 56, 61, 0.68) 100%),
			url('../images/photography/technology-collaboration.webp') center / cover no-repeat,
			#24383d;
	}
}

@media (max-width: 600px) {
	.telos-future .telos-outcomes {
		margin-block-start: 8rem;
	}

	.telos-compass-visual {
		min-height: 20rem;
		background-position: 45% center;
	}

	.telos-why-page .telos-principle-list {
		background: rgba(20, 47, 53, 0.5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.telos-future .telos-outcome {
		transition: none;
	}

	.telos-future .telos-outcome:hover {
		transform: none;
	}
}