/*
 * SC3 Partners — Playbook page styling.
 * Extends tokens from home-patterns.css.
 */

/* Dark body for the playbook page. */
body.sc3-playbook-page {
	background-color: #0d0d0d !important;
	color: #fff;
}

/* ---------- Hero ---------- */
.sc3-section--playbook-hero,
.sc3-section--playbook-hero.wp-block-group {
	position: relative;
	overflow: hidden;
	padding: 0 !important;
	max-width: none;
	background:
		linear-gradient(134.86deg, rgb(18, 30, 38) 0%, rgb(13, 13, 13) 48%, rgb(13, 26, 34) 100%);
}

/* Section is full-bleed (gradient extends edge-to-edge). The inner
   .sc3-container handles the max-width: 1328 centered content. */

/* Soft circular glow in top-right (decorative, mirrors Figma). */
.sc3-section--playbook-hero::before {
	content: "";
	position: absolute;
	top: -100px;
	right: -80px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(126, 213, 247, 0.22) 0%, rgba(126, 213, 247, 0.06) 35%, rgba(126, 213, 247, 0) 70%);
	pointer-events: none;
	z-index: 0;
}

.sc3-playbook-hero__inner.sc3-container {
	position: relative;
	z-index: 1;
	padding-block: 96px 88px;
}

.sc3-section--playbook-hero .sc3-preheader {
	margin-bottom: 18px !important;
}

.sc3-heading--playbook-hero {
	font-size: clamp(38px, 4.5vw, 60px);
	line-height: 1.17;
	letter-spacing: -0.01em;
	font-weight: 300;
	margin: 0 0 18px !important;
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
	color: var(--sc3-text);
	max-width: 660px;
}

.sc3-heading--playbook-hero .sc3-line {
	display: block;
}

@media (max-width: 720px) {
	.sc3-heading--playbook-hero .sc3-line {
		display: inline;
	}
}

.sc3-playbook-hero__lede {
	max-width: 520px;
	font-size: 17px !important;
	margin: 0 0 28px !important;
}

.sc3-section--playbook-hero .sc3-button-row {
	margin-top: 0;
}

/* ---------- Sound Familiar ---------- */
.sc3-section--sound-familiar {
	background-color: var(--sc3-bg-alt);
}

.sc3-section--sound-familiar > .sc3-container {
	padding-block: 80px;
}

.sc3-sound-familiar__columns.wp-block-columns {
	gap: 64px;
	align-items: flex-start;
}

.sc3-sound-familiar__intro .sc3-preheader {
	margin-bottom: 18px !important;
}

.sc3-sound-familiar__intro .sc3-heading--sm {
	margin-bottom: 22px;
}

.sc3-sound-familiar__intro .sc3-body-lg {
	margin-bottom: 0 !important;
	max-width: 632px;
}

.sc3-sound-familiar__intro .sc3-button-row {
	margin-top: 30px;
}

.sc3-section--sound-familiar .sc3-arrow-list.wp-block-list {
	margin: 0 !important;
}

/* ---------- Solution ---------- */
.sc3-section--playbook-solution {
	background-color: var(--sc3-bg);
}

.sc3-section--playbook-solution > .sc3-container {
	padding-block: 80px;
}

.sc3-playbook-solution__columns.wp-block-columns {
	gap: 18px;
	align-items: center;
	margin-bottom: 32px;
}

/* Match Figma proportions: text col 800/1310 ≈ 61%, graphic col 510/1310 ≈ 39%. */
.sc3-playbook-solution__columns.wp-block-columns > .wp-block-column.sc3-playbook-solution__text {
	flex-basis: 61% !important;
	flex-grow: 0 !important;
	min-width: 0;
}

.sc3-playbook-solution__columns.wp-block-columns > .wp-block-column.sc3-playbook-solution__media {
	flex-basis: 39% !important;
	flex-grow: 0 !important;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.sc3-playbook-solution__text > .sc3-preheader,
.sc3-playbook-solution__text > .sc3-heading--md,
.sc3-playbook-solution__text > .sc3-body-lg {
	margin-bottom: 14px !important;
}

.sc3-playbook-solution__text > .sc3-heading--md {
	margin-top: 8px;
	margin-bottom: 18px !important;
}

.sc3-playbook-solution__graphic.wp-block-image {
	margin: 0;
	max-width: 510px;
	width: 100%;
}

.sc3-playbook-solution__graphic img {
	width: 100%;
	height: auto;
	opacity: 0.75;
}

.sc3-playbook-solution__footnote {
	margin: 30px 0 24px !important;
	font-size: 15px !important;
	text-align: center;
}

/* ---------- Leaders Who Have Made the Shift ---------- */
.sc3-section--leaders-shift {
	background-color: var(--sc3-bg);
}

.sc3-section--leaders-shift > .sc3-container {
	padding-block: 80px;
}

.sc3-section--leaders-shift .sc3-preheader {
	margin-bottom: 18px !important;
}

.sc3-section--leaders-shift .sc3-heading--sm {
	margin-bottom: 30px;
}

.sc3-leaders-grid.wp-block-columns {
	gap: 24px;
	margin-bottom: 30px;
}

.sc3-leaders-grid > .wp-block-column.sc3-testimonial {
	background-color: var(--sc3-bg-alt);
	border: 1px solid rgba(255, 255, 255, 0.07);
	padding: 37px 33px;
	flex-basis: calc(50% - 12px) !important;
	flex-grow: 0 !important;
	min-width: 0;
}

/* ---------- Process (3-step Get the Proven Framework) ---------- */
.sc3-section--playbook-process {
	background-color: var(--sc3-bg);
}

.sc3-section--playbook-process > .sc3-container {
	padding-block: 80px;
}

.sc3-section--playbook-process .sc3-preheader {
	margin-bottom: 16px !important;
}

.sc3-section--playbook-process .sc3-heading--sm {
	margin-bottom: 18px;
}

.sc3-process__investment {
	font-size: 14px !important;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--sc3-text-80) !important;
	margin: 0 0 30px !important;
	text-transform: none;
}

.sc3-process-grid.wp-block-columns {
	gap: 1px;
	background-color: var(--sc3-border-6);
	border: 1px solid var(--sc3-border-6);
	margin-bottom: 40px;
}

.sc3-process-card.wp-block-column {
	background-color: var(--sc3-bg);
	padding: 40px 32px;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sc3-process-card__num {
	font-size: 44px !important;
	font-weight: 300;
	line-height: 1;
	color: var(--sc3-accent) !important;
	margin: 0 !important;
	letter-spacing: -0.01em;
}

.sc3-process-card__title {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: #fff !important;
	margin: 0 !important;
}

.sc3-process-card__body {
	font-size: 14px !important;
	line-height: 1.65;
	color: var(--sc3-text-55) !important;
	margin: 0 !important;
}

.sc3-process-card__list.wp-block-list,
ul.sc3-process-card__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sc3-process-card__list li {
	position: relative;
	padding: 0 0 6px 18px !important;
	font-size: 14px !important;
	line-height: 1.5;
	color: var(--sc3-text-55) !important;
}

.sc3-process-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 8px;
	height: 1px;
	background-color: var(--sc3-accent);
}

/* ---------- Worth Every Penny ---------- */
.sc3-section--investment {
	background-color: var(--sc3-bg);
}

.sc3-section--investment > .sc3-container {
	padding-block: 64px;
}

.sc3-investment__wrap.wp-block-group {
	max-width: 720px;
	margin-inline: 0 !important;
}

.sc3-investment__wrap > .sc3-preheader {
	margin-bottom: 14px !important;
}

.sc3-investment__wrap > .sc3-heading--md {
	margin: 0 0 20px !important;
}

.sc3-investment__wrap > .sc3-body-lg {
	margin: 0 0 16px !important;
}

.sc3-investment__wrap > .sc3-button-row {
	margin-top: 26px;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.sc3-playbook-hero__inner.sc3-container {
		padding-block: 72px 56px;
	}

	.sc3-section--sound-familiar > .sc3-container,
	.sc3-section--playbook-solution > .sc3-container,
	.sc3-section--leaders-shift > .sc3-container,
	.sc3-section--playbook-process > .sc3-container,
	.sc3-section--investment > .sc3-container {
		padding-block: 56px;
	}

	/* Sound familiar: stack */
	.sc3-sound-familiar__columns.wp-block-columns {
		gap: 36px;
		flex-wrap: wrap !important;
	}

	.sc3-sound-familiar__columns.wp-block-columns > .wp-block-column.sc3-sound-familiar__intro,
	.sc3-sound-familiar__columns.wp-block-columns > .wp-block-column.sc3-sound-familiar__list-wrap {
		flex-basis: 100% !important;
		flex-grow: 1 !important;
	}

	/* Solution: stack */
	.sc3-playbook-solution__columns.wp-block-columns {
		flex-wrap: wrap !important;
		gap: 32px;
	}

	.sc3-playbook-solution__columns.wp-block-columns > .wp-block-column.sc3-playbook-solution__text,
	.sc3-playbook-solution__columns.wp-block-columns > .wp-block-column.sc3-playbook-solution__media {
		flex-basis: 100% !important;
		flex-grow: 1 !important;
	}

	.sc3-playbook-solution__graphic {
		max-width: 380px;
		margin-inline: auto !important;
	}

	/* Leaders: stack */
	.sc3-leaders-grid.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.sc3-leaders-grid.wp-block-columns > .wp-block-column.sc3-testimonial {
		flex-basis: 100% !important;
		flex-grow: 1 !important;
	}

	/* Process: stack */
	.sc3-process-grid.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.sc3-process-grid.wp-block-columns > .wp-block-column.sc3-process-card {
		flex-basis: 100% !important;
		flex-grow: 1 !important;
	}

	/* Hero soft glow stays but smaller. */
	.sc3-section--playbook-hero::before {
		width: 360px;
		height: 360px;
		top: -80px;
		right: -120px;
	}
}

@media (max-width: 600px) {
	.sc3-playbook-hero__inner.sc3-container {
		padding-block: 56px 40px;
	}

	.sc3-section--sound-familiar > .sc3-container,
	.sc3-section--playbook-solution > .sc3-container,
	.sc3-section--leaders-shift > .sc3-container,
	.sc3-section--playbook-process > .sc3-container,
	.sc3-section--investment > .sc3-container {
		padding-block: 40px;
	}

	.sc3-leaders-grid > .wp-block-column.sc3-testimonial {
		padding: 28px 24px;
	}

	.sc3-process-card.wp-block-column {
		padding: 32px 24px;
	}

	.sc3-process-card__num {
		font-size: 36px !important;
	}
}