/*
 * OrgTree — cosuite.css
 * Styles for the CoSuite™ page ONLY (template-parts/page-cosuite.php).
 * Enqueued conditionally on the /cosuite/ page — see inc/enqueue.php.
 *
 * The page's pinwheel graphic is the shared wheel component (inc/wheel.php,
 * assets/css/wheel.css) — this file covers everything else on the page:
 * the hero, the wrapper around the wheel, the static "Seven Conditions"
 * list, the roots-to-fruit values grid, and the closing "together" band.
 *
 * The original bespoke seven-petal diagram (a different, JS-driven
 * implementation of the same idea, predating the shared wheel) was retired
 * in Task 8 along with assets/js/cosuite-diagram.js.
 */

/* ------------------------------------------------------------------------ */
/* Hero / intro                                                              */
/* ------------------------------------------------------------------------ */

/* Full-bleed mature-tree render behind the copy; scrim darkest on the left
   (where the text sits) and clearing to the right so the tree reads through. */
.cosuite-hero.page-hero--media {
	background:
		linear-gradient(90deg, rgba(14, 15, 16, 0.94) 0%, rgba(14, 15, 16, 0.66) 50%, rgba(14, 15, 16, 0.34) 100%),
		url("../tree/mature.jpg") center / cover no-repeat var(--ink-900);
}

/* Eyebrow / heading / sub now come from the shared .page-hero__* rules in
   base.css so this hero matches the homepage hero exactly. Only the extra
   quote + kicker below the sub are cosuite-specific. */
.cosuite-hero__quote {
	border-left: none;
	max-width: 40ch;
	margin: 0 0 var(--space-lg);
}

.cosuite-hero__quote p {
	color: var(--cream);
	font-size: var(--text-xl);
	max-width: none;
}

.cosuite-hero__kicker {
	color: var(--gold);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------------ */
/* Wheel section wrapper — the pinwheel graphic itself is the shared wheel  */
/* component (inc/wheel.php, assets/css/wheel.css); this just centres it.   */
/* ------------------------------------------------------------------------ */

.cosuite-diagram-section {
	text-align: center;
}

/* ------------------------------------------------------------------------ */
/* Static "Seven Conditions" list — always visible, IP-safe, JS-independent  */
/* ------------------------------------------------------------------------ */

/* Faint, unlabelled exploded-tree texture behind the conditions list — pure
   decoration, never competing with the text sat on top of it. Path is
   relative to this stylesheet's own URL (assets/css/cosuite.css), which WP
   preserves when it enqueues the file, so no PHP constant is needed here. */
.cosuite-conditions {
	position: relative;
	isolation: isolate;
}

.cosuite-conditions::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../tree/exploded.jpg");
	background-size: cover;
	background-position: center;
	opacity: 0.07;
	z-index: -1;
	pointer-events: none;
}

.cosuite-conditions__heading {
	text-align: center;
	color: var(--gold);
	margin-bottom: var(--space-xl);
}

.cosuite-conditions__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--space-lg);
}

.cosuite-conditions__item {
	display: flex;
	gap: var(--space-sm);
	padding: var(--space-md);
	background-color: color-mix(in srgb, var(--black) 35%, transparent);
	border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
	border-radius: var(--radius);
}

.cosuite-conditions__number {
	flex-shrink: 0;
	font-family: var(--font-heading);
	color: color-mix(in srgb, var(--gold) 55%, transparent);
	font-size: var(--text-lg);
}

.cosuite-conditions__heading-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2xs);
	margin-bottom: var(--space-2xs);
}

.cosuite-conditions__element {
	font-family: var(--font-heading);
	color: var(--gold);
	font-size: var(--text-lg);
}

.cosuite-conditions__condition {
	color: color-mix(in srgb, var(--cream) 70%, transparent);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.cosuite-conditions__strapline {
	font-family: var(--font-accent);
	font-style: italic;
	color: color-mix(in srgb, var(--cream) 85%, transparent);
	margin-bottom: var(--space-2xs);
}

.cosuite-conditions__question {
	color: color-mix(in srgb, var(--cream) 90%, transparent);
	font-size: var(--text-sm);
}

/* ------------------------------------------------------------------------ */
/* Roots-to-fruit values — supporting exploded-labelled.jpg visual           */
/* ------------------------------------------------------------------------ */

.cosuite-values__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-xl);
	align-items: center;
}

.cosuite-values__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1376 / 768;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.cosuite-values__heading {
	color: var(--gold);
	margin-bottom: var(--space-sm);
}

.cosuite-values__body {
	color: color-mix(in srgb, var(--cream) 85%, transparent);
	max-width: 48ch;
}

@media (max-width: 61.99rem) {
	.cosuite-values__grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.cosuite-values__body {
		margin-inline: auto;
	}
}

/* ------------------------------------------------------------------------ */
/* "Together" band                                                          */
/* ------------------------------------------------------------------------ */

.cosuite-together {
	text-align: center;
}

.cosuite-together__heading {
	color: var(--gold);
	margin-bottom: var(--space-sm);
}

.cosuite-together__body {
	color: color-mix(in srgb, var(--cream) 85%, transparent);
	max-width: 55ch;
	margin-inline: auto;
}