/* ==========================================================
   PAIR OF DICE — ABOUT PAGE
   WPNFINITE FULL
   ========================================================== */

.pod-about-hero,
.pod-about-section,
.pod-about-ecosystem,
.pod-about-statement,
.pod-about-cta {
	--pod-bg: #030903;
	--pod-panel: #071107;
	--pod-panel-light: #0b180b;
	--pod-text: #f5fff5;
	--pod-muted: #9fb39f;
	--pod-primary: #52e052;
	--pod-border: rgba(148, 163, 184, .13);
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.pod-about-hero {
	position: relative;

	padding: clamp(70px, 9vw, 140px) 24px;

	overflow: hidden;

	background:
		radial-gradient(
			circle at 18% 25%,
			rgba(82, 224, 82, .11),
			transparent 32%
		),
		#030903;

	color: var(--pod-text);
}

.pod-about-hero > .wp-block-columns {
	width: min(1360px, 100%);
	margin: 0 auto;

	align-items: center !important;

	gap: clamp(45px, 7vw, 100px);
}

.pod-about-hero h1 {
	max-width: 800px;

	margin: 12px 0 25px;

	color: #fff;

	font-size: clamp(3.7rem, 7vw, 7.5rem);
	font-weight: 900;
	line-height: .91;
	letter-spacing: -.065em;
}

.pod-about-hero p {
	max-width: 680px;

	color: #b7cbb7;

	font-size: clamp(1rem, 1.4vw, 1.2rem);
	line-height: 1.75;
}

.pod-about-hero .wp-block-heading:first-child,
.pod-about-hero .wp-block-paragraph:first-child {
	color: var(--pod-primary);

	font-size: .7rem;
	font-weight: 900;
	letter-spacing: .2em;

	text-transform: uppercase;
}

.pod-about-hero-image img {
	width: 100%;
	aspect-ratio: 4 / 5;

	border: 1px solid var(--pod-border);
	border-radius: 28px;

	object-fit: cover;

	box-shadow:
		0 40px 100px rgba(0,0,0,.35);
}


/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.pod-about-hero .wp-block-button__link,
.pod-about-cta .wp-block-button__link {
	padding: 14px 22px;

	border-radius: 12px;

	background:
		linear-gradient(
			135deg,
			#76ff5b,
			#107c10
		);

	color: #021002;

	font-size: .8rem;
	font-weight: 900;

	box-shadow:
		0 14px 32px rgba(82, 224, 82,.18);

	transition:
		transform .2s ease,
		box-shadow .2s ease;
}

.pod-about-hero .wp-block-button__link:hover,
.pod-about-cta .wp-block-button__link:hover {
	transform: translateY(-2px);

	box-shadow:
		0 18px 40px rgba(82, 224, 82,.27);
}


/* ----------------------------------------------------------
   GENERAL CONTENT SECTIONS
   ---------------------------------------------------------- */

.pod-about-section,
.pod-about-mission,
.pod-about-culture {
	padding:
		clamp(70px, 8vw, 120px)
		max(24px, calc((100vw - 1280px) / 2));

	background: #040c04;

	color: var(--pod-text);
}

.pod-about-section h2,
.pod-about-mission h2,
.pod-about-culture h2 {
	max-width: 800px;

	color: #fff;

	font-size: clamp(2.6rem, 5vw, 5rem);
	font-weight: 880;
	line-height: .98;
	letter-spacing: -.055em;
}

.pod-about-section p,
.pod-about-mission p,
.pod-about-culture p {
	color: #b9cdb9;

	line-height: 1.75;
}


/* ----------------------------------------------------------
   THREE PILLARS
   ---------------------------------------------------------- */

.pod-about-pillars {
	margin-top: 55px;

	gap: 20px;
}

.pod-about-pillars > .wp-block-column {
	padding: 28px;

	border: 1px solid var(--pod-border);
	border-radius: 20px;

	background:
		linear-gradient(
			180deg,
			#0b180b,
			#061106
		);

	box-shadow:
		0 20px 50px rgba(0,0,0,.15);
}

.pod-about-pillars h3 {
	margin-top: 0;

	color: var(--pod-primary);

	font-size: .72rem;
	font-weight: 900;
	letter-spacing: .16em;

	text-transform: uppercase;
}


/* ----------------------------------------------------------
   MEDIA TEXT
   ---------------------------------------------------------- */

.pod-about-mission,
.pod-about-culture {
	gap: clamp(45px, 7vw, 90px);
}

.pod-about-mission img,
.pod-about-culture img {
	border: 1px solid var(--pod-border);
	border-radius: 26px;

	box-shadow:
		0 30px 80px rgba(0,0,0,.28);
}


/* ----------------------------------------------------------
   ECOSYSTEM
   ---------------------------------------------------------- */

.pod-about-ecosystem {
	padding:
		clamp(80px, 9vw, 135px)
		max(24px, calc((100vw - 1280px) / 2));

	background:
		radial-gradient(
			circle at 50% 0,
			rgba(82, 224, 82,.08),
			transparent 38%
		),
		#071207;

	color: var(--pod-text);
}

.pod-about-ecosystem > h2 {
	color: #fff;

	font-size: clamp(3rem, 6vw, 6rem);
	font-weight: 900;
	line-height: .94;
	letter-spacing: -.06em;
}

.pod-about-feature-grid {
	margin-top: 50px;

	gap: 18px;
}

.pod-about-feature-grid > .wp-block-column {
	padding: 25px;

	border: 1px solid var(--pod-border);
	border-radius: 18px;

	background: rgba(3, 10, 3,.68);
}

.pod-about-feature-grid h3 {
	color: #fff;

	font-size: 1.15rem;
	font-weight: 850;
}

.pod-about-feature-grid p {
	color: var(--pod-muted);

	font-size: .9rem;
	line-height: 1.65;
}


/* ----------------------------------------------------------
   STATEMENT
   ---------------------------------------------------------- */

.pod-about-statement {
	padding:
		clamp(100px, 12vw, 180px)
		max(24px, calc((100vw - 1100px) / 2));

	background: #010401;

	text-align: center;
}

.pod-about-statement h2 {
	margin: 15px auto 30px;

	color: #fff;

	font-size: clamp(3.3rem, 7vw, 7rem);
	font-weight: 900;
	line-height: .94;
	letter-spacing: -.065em;
}

.pod-about-statement p {
	max-width: 760px;
	margin: 0 auto 18px;

	color: #adc3ad;

	font-size: 1.05rem;
	line-height: 1.8;
}

.pod-about-statement-highlight {
	margin-top: 50px !important;

	color: var(--pod-primary) !important;

	font-size: clamp(3.5rem, 8vw, 8rem) !important;
}


/* ----------------------------------------------------------
   COMMUNITY IMAGE
   ---------------------------------------------------------- */

.pod-about-community-image {
	margin: 0;
	padding: 0;

	background: #030903;
}

.pod-about-community-image img {
	display: block;

	width: 100%;
	max-height: 680px;

	object-fit: cover;

	filter:
		brightness(.75)
		saturate(.82);
}


/* ----------------------------------------------------------
   FINAL CTA
   ---------------------------------------------------------- */

.pod-about-cta {
	padding:
		clamp(90px, 11vw, 160px)
		24px;

	background:
		radial-gradient(
			circle at 50% 30%,
			rgba(82, 224, 82,.12),
			transparent 40%
		),
		#030903;

	text-align: center;
}

.pod-about-cta > * {
	max-width: 900px;

	margin-left: auto;
	margin-right: auto;
}

.pod-about-cta h2 {
	color: #fff;

	font-size: clamp(3rem, 6vw, 6rem);
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.06em;
}

.pod-about-cta p {
	max-width: 680px;

	color: #b2c7b2;

	line-height: 1.75;
}

.pod-about-cta .wp-block-buttons {
	justify-content: center;

	margin-top: 30px;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 780px) {

	.pod-about-hero {
		padding-top: 65px;
	}

	.pod-about-hero h1 {
		font-size: clamp(3.2rem, 16vw, 5.3rem);
	}

	.pod-about-hero-image img {
		aspect-ratio: 16 / 11;

		border-radius: 20px;
	}

	.pod-about-pillars,
	.pod-about-feature-grid {
		gap: 14px;
	}

}


@media (max-width: 600px) {

	.pod-about-section,
	.pod-about-mission,
	.pod-about-culture,
	.pod-about-ecosystem {
		padding-left: 20px;
		padding-right: 20px;
	}

	.pod-about-pillars > .wp-block-column,
	.pod-about-feature-grid > .wp-block-column {
		padding: 22px;
	}

	.pod-about-statement {
		padding-left: 22px;
		padding-right: 22px;
	}

}

/* ==========================================================
   PAIR OF DICE ABOUT
   FULL-WIDTH / CONSTRAINED LAYOUT FIX
   ========================================================== */


/* ----------------------------------------------------------
   HERO — BREAK OUT OF GUTENBERG CONSTRAINED WIDTH
   ---------------------------------------------------------- */

.pod-about-hero {
	width: 100% !important;
	max-width: none !important;
}

.pod-about-hero > .wp-block-columns {
	width: min(1380px, calc(100% - 48px)) !important;
	max-width: none !important;

	margin-left: auto !important;
	margin-right: auto !important;
}


/* Prevent Gutenberg's constrained layout rule
   from shrinking the columns */

.pod-about-hero.is-layout-constrained
> .wp-block-columns {
	max-width: 1380px !important;
}


/* Give the copy column enough room */

.pod-about-hero
> .wp-block-columns
> .wp-block-column:first-child {
	flex-basis: 58% !important;
	min-width: 0 !important;
}

.pod-about-hero
> .wp-block-columns
> .wp-block-column:last-child {
	flex-basis: 42% !important;
	min-width: 0 !important;
}


/* Hero headline should wrap naturally — not word-by-word */

.pod-about-hero h1 {
	max-width: 850px !important;

	font-size: clamp(4.25rem, 6.5vw, 7rem) !important;
	line-height: 0.92 !important;

	word-break: normal !important;
	overflow-wrap: normal !important;
	hyphens: none !important;
}


/* ----------------------------------------------------------
   STANDARD ABOUT SECTIONS
   Give them a wider editorial canvas
   ---------------------------------------------------------- */

.pod-about-section {
	width: 100% !important;
	max-width: none !important;
}


/* Gutenberg constrained groups normally restrict each
   direct child individually. Override that here. */

.pod-about-section.is-layout-constrained > * {
	width: min(1280px, calc(100% - 48px)) !important;
	max-width: 1280px !important;

	margin-left: auto !important;
	margin-right: auto !important;
}


/* Keep copy readable while allowing the overall section
   to use the wider canvas */

.pod-about-intro > p:not(:first-child) {
	max-width: 900px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}


/* But headings should be allowed to breathe */

.pod-about-intro > h2 {
	max-width: 1050px !important;
}


/* Pillar cards should use the entire section width */

.pod-about-intro
> .pod-about-pillars {
	width: min(1280px, calc(100% - 48px)) !important;
	max-width: 1280px !important;
}


/* ----------------------------------------------------------
   MEDIA + TEXT SECTIONS
   ---------------------------------------------------------- */

.pod-about-mission,
.pod-about-culture {
	width: min(1380px, calc(100% - 48px)) !important;
	max-width: 1380px !important;

	margin-left: auto !important;
	margin-right: auto !important;

	padding-left: 0 !important;
	padding-right: 0 !important;
}


/* Stop the text side becoming excessively narrow */

.pod-about-mission .wp-block-media-text__content,
.pod-about-culture .wp-block-media-text__content {
	min-width: 0;

	padding-left: clamp(32px, 5vw, 80px) !important;
	padding-right: clamp(32px, 5vw, 80px) !important;
}


/* ----------------------------------------------------------
   ECOSYSTEM
   ---------------------------------------------------------- */

.pod-about-ecosystem {
	width: 100% !important;
	max-width: none !important;
}

.pod-about-ecosystem.is-layout-constrained > * {
	width: min(1280px, calc(100% - 48px)) !important;
	max-width: 1280px !important;

	margin-left: auto !important;
	margin-right: auto !important;
}

.pod-about-ecosystem > h2 {
	max-width: 1000px !important;

	margin-left: auto !important;
	margin-right: auto !important;
}


/* Feature cards need the full grid width */

.pod-about-ecosystem
> .pod-about-feature-grid {
	width: min(1280px, calc(100% - 48px)) !important;
	max-width: 1280px !important;
}


/* ----------------------------------------------------------
   LARGE STATEMENT
   ---------------------------------------------------------- */

.pod-about-statement {
	width: 100% !important;
	max-width: none !important;
}

.pod-about-statement.is-layout-constrained > * {
	width: min(1100px, calc(100% - 48px)) !important;
	max-width: 1100px !important;

	margin-left: auto !important;
	margin-right: auto !important;
}


/* ----------------------------------------------------------
   FINAL CTA
   ---------------------------------------------------------- */

.pod-about-cta {
	width: 100% !important;
	max-width: none !important;
}

.pod-about-cta.is-layout-constrained > * {
	width: min(1000px, calc(100% - 48px)) !important;
	max-width: 1000px !important;

	margin-left: auto !important;
	margin-right: auto !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

	.pod-about-hero
	> .wp-block-columns {
		width: min(100% - 36px, 1380px) !important;
		gap: 36px !important;
	}

	.pod-about-hero h1 {
		font-size: clamp(3.7rem, 10vw, 5.5rem) !important;
	}

	.pod-about-section.is-layout-constrained > *,
	.pod-about-ecosystem.is-layout-constrained > *,
	.pod-about-statement.is-layout-constrained > *,
	.pod-about-cta.is-layout-constrained > * {
		width: calc(100% - 36px) !important;
	}

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 781px) {

	.pod-about-hero
	> .wp-block-columns {
		display: flex !important;
		flex-direction: column !important;

		width: calc(100% - 32px) !important;
	}

	.pod-about-hero
	> .wp-block-columns
	> .wp-block-column:first-child,
	.pod-about-hero
	> .wp-block-columns
	> .wp-block-column:last-child {
		width: 100% !important;
		flex-basis: 100% !important;
	}

	.pod-about-hero h1 {
		max-width: 100% !important;

		font-size: clamp(3.25rem, 15vw, 5rem) !important;
	}

	.pod-about-mission,
	.pod-about-culture {
		width: calc(100% - 32px) !important;
	}

	.pod-about-mission .wp-block-media-text__content,
	.pod-about-culture .wp-block-media-text__content {
		padding: 30px 0 0 !important;
	}

}