/**
 * American Spirit Page
 *
 * Editorial page — more generous spacing than Issues or About.
 * Section padding: 120px (not 96px). Body: Libre Caslon Text 19px, line-height 1.85.
 *
 * Covers:
 *   .pjcs-spirit-header        — Full-width navy page header
 *   .pjcs-spirit-opening       — Chunk 1: off-white, single column, opening essay
 *   .pjcs-spirit-pullquote     — Fraunces italic 28px pull quote (spirit page only)
 *   .pjcs-spirit-brooklyn      — Chunk 2: full-bleed bridge image + directional overlay
 *   .pjcs-spirit-closing       — Chunk 3: red CTA, Volunteer + Learn My Platform
 *
 * Note: .pjcs-btn base + .pjcs-btn--white + .pjcs-btn--ghost-white defined in
 * hero.css, volunteer-cta.css, and spirit-teaser.css respectively (all enqueued
 * before this file).
 */

/* =========================================================
   Page Header
   Navy background, 6px red stripe, editorial display heading.
   ========================================================= */

.pjcs-spirit-header {
	background-color: #273965; /* navy */
	position: relative;
	text-align: center;
	padding-block: 88px;
}

/* 6px red top stripe */
.pjcs-spirit-header__stripe {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 6px;
	background-color: #CF3223; /* red */
}

.pjcs-spirit-header__inner {
	max-width: 780px;
	margin-inline: auto;
	padding-inline: 32px;
}

/* Eyebrow */
.pjcs-spirit-header__eyebrow {
	margin: 0 0 24px;
	font-family: 'DM Sans', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #CF3223; /* red */
}

/* Page title — larger than issues header (72px vs 56px) */
.pjcs-spirit-header__heading {
	margin: 0;
	font-family: 'Fraunces', serif;
	font-size: 72px;
	font-weight: 400;
	line-height: 1.0;
	color: #ffffff;
}

/* =========================================================
   CHUNK 1 — Opening Statement
   Off-white, single column, max-width 720px, centered.
   120px padding — editorial breathing room.
   ========================================================= */

.pjcs-spirit-opening {
	background-color: #F7F4EF; /* off-white */
	padding-block: 120px;
}

.pjcs-spirit-opening__inner {
	max-width: 720px;
	margin-inline: auto;
	padding-inline: 32px;
}

/* Section heading */
.pjcs-spirit-opening__heading {
	margin: 0 0 40px;
	font-family: 'Fraunces', serif;
	font-size: 48px;
	font-weight: 400;
	line-height: 1.1;
	color: #273965; /* navy */
}

/* Body paragraphs — editorial line-height */
.pjcs-spirit-opening__body {
	margin: 0 0 32px;
	font-family: 'Libre Caslon Text', serif;
	font-size: 19px;
	line-height: 1.85;
	color: #2E2820; /* charcoal */
}

.pjcs-spirit-opening__body:last-of-type {
	margin-bottom: 0;
}

/* =========================================================
   Spirit Pull Quote
   Fraunces italic 28px — distinct from the Libre Caslon Text 20px pull
   quote used on the Issues page (.pjcs-pull-quote).
   Light variant (navy text) — used in Chunk 1.
   ========================================================= */

.pjcs-spirit-pullquote {
	margin: 48px 0 0;
	padding: 0 0 0 28px;
	border-left: 3px solid #CF3223; /* red */
	max-width: 640px;
}

.pjcs-spirit-pullquote p {
	margin: 0;
	font-family: 'Fraunces', serif;
	font-size: 28px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.35;
	color: #273965; /* navy */
}

/* =========================================================
   CHUNK 2 — The Brooklyn Bridge
   Full-width feature. Navy fallback background; jbSunSmall.png
   set as inline background-image from PHP.
   ::before pseudo-element provides the directional gradient overlay.
   Content: left-aligned max 640px, then full-width centered pull quote.
   ========================================================= */

.pjcs-spirit-brooklyn {
	position: relative;
	background-color: #273965; /* navy fallback — visible until jbSunSmall.png is loaded */
	background-size: cover;
	background-position: center center;
	padding-block: 120px;
}

/* Directional gradient overlay */
.pjcs-spirit-brooklyn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba( 39, 57, 101, 0.95 ) 0%,
		rgba( 39, 57, 101, 0.70 ) 60%,
		rgba( 39, 57, 101, 0.40 ) 100%
	);
	z-index: 0;
}

.pjcs-spirit-brooklyn__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 64px;
}

/* Left-aligned text block — max-width 640px */
.pjcs-spirit-brooklyn__content {
	max-width: 640px;
}

/* Eyebrow */
.pjcs-spirit-brooklyn__eyebrow {
	margin: 0 0 20px;
	font-family: 'DM Sans', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #CF3223; /* red */
}

/* Headline */
.pjcs-spirit-brooklyn__heading {
	margin: 0 0 16px;
	font-family: 'Fraunces', serif;
	font-size: 52px;
	font-weight: 400;
	line-height: 1.05;
	color: #ffffff;
}

/* Subhead — Fraunces italic */
.pjcs-spirit-brooklyn__subhead {
	margin: 0 0 40px;
	font-family: 'Fraunces', serif;
	font-size: 24px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
	color: #ffffff;
}

/* Body paragraphs */
.pjcs-spirit-brooklyn__body {
	margin: 0 0 28px;
	font-family: 'Libre Caslon Text', serif;
	font-size: 19px;
	line-height: 1.85;
	color: rgba( 255, 255, 255, 0.80 );
}

.pjcs-spirit-brooklyn__body:last-of-type {
	margin-bottom: 0;
}

/* Large centered pull quote — Fraunces italic 32px, white */
.pjcs-spirit-brooklyn__pullquote {
	margin: 72px auto 0;
	padding: 0;
	border: none;
	max-width: 680px;
	text-align: center;
}

.pjcs-spirit-brooklyn__pullquote p {
	margin: 0;
	font-family: 'Fraunces', serif;
	font-size: 32px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.3;
	color: #ffffff;
}

/* Caption */
.pjcs-spirit-brooklyn__caption {
	margin: 32px auto 0;
	max-width: 680px;
	text-align: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.50 );
}

/* =========================================================
   CHUNK 3 — Closing Vow
   Red background, centered, max-width 680px.
   Similar to .pjcs-volunteer-cta but Libre Caslon Text 19px body
   at 1.85 line-height (vs 18px / 1.6 in volunteer CTA).
   ========================================================= */

.pjcs-spirit-closing {
	background-color: #CF3223; /* red */
	padding-block: 96px;
	text-align: center;
}

.pjcs-spirit-closing__inner {
	max-width: 680px;
	margin-inline: auto;
	padding-inline: 32px;
}

/* Heading — Fraunces italic white */
.pjcs-spirit-closing__heading {
	margin: 0 0 28px;
	font-family: 'Fraunces', serif;
	font-size: 48px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.1;
	color: #ffffff;
}

/* Body paragraphs — Libre Caslon Text 19px, editorial line-height */
.pjcs-spirit-closing__body {
	margin: 0 0 24px;
	font-family: 'Libre Caslon Text', serif;
	font-size: 19px;
	line-height: 1.85;
	color: rgba( 255, 255, 255, 0.90 );
}

.pjcs-spirit-closing__body:last-of-type {
	margin-bottom: 0;
}

/* Button row */
.pjcs-spirit-closing__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	align-items: center;
	margin-top: 44px;
}

/* =========================================================
   Responsive — Tablet ( ≤ 1024px )
   ========================================================= */

@media ( max-width: 1024px ) {

	/* Page header */
	.pjcs-spirit-header__heading {
		font-size: 56px;
	}

	/* Chunk 1 */
	.pjcs-spirit-opening__heading {
		font-size: 38px;
	}

	/* Chunk 2 — image becomes full-bleed; overlay darkens to 90% */
	.pjcs-spirit-brooklyn::before {
		background: rgba( 39, 57, 101, 0.90 );
	}

	.pjcs-spirit-brooklyn__inner {
		padding-inline: 32px;
	}

	.pjcs-spirit-brooklyn__content {
		max-width: 100%;
	}

	.pjcs-spirit-brooklyn__heading {
		font-size: 40px;
	}

	/* Chunk 3 */
	.pjcs-spirit-closing__heading {
		font-size: 38px;
	}
}

/* =========================================================
   Responsive — Mobile ( ≤ 768px )
   ========================================================= */

@media ( max-width: 768px ) {

	/* All sections — reduce editorial padding */
	.pjcs-spirit-opening,
	.pjcs-spirit-brooklyn {
		padding-block: 80px;
	}

	.pjcs-spirit-closing {
		padding-block: 64px;
	}

	/* Page header */
	.pjcs-spirit-header {
		padding-block: 64px;
	}

	.pjcs-spirit-header__heading {
		font-size: 42px;
	}

	/* Chunk 1 */
	.pjcs-spirit-opening__heading {
		font-size: 32px;
	}

	.pjcs-spirit-opening__body {
		font-size: 17px;
	}

	/* Pull quote */
	.pjcs-spirit-pullquote p {
		font-size: 22px;
	}

	/* Chunk 2 */
	.pjcs-spirit-brooklyn__heading {
		font-size: 34px;
	}

	.pjcs-spirit-brooklyn__subhead {
		font-size: 20px;
	}

	.pjcs-spirit-brooklyn__body {
		font-size: 17px;
	}

	.pjcs-spirit-brooklyn__pullquote p {
		font-size: 24px;
	}

	.pjcs-spirit-brooklyn__pullquote {
		margin-top: 48px;
	}

	/* Chunk 3 */
	.pjcs-spirit-closing__heading {
		font-size: 32px;
	}

	.pjcs-spirit-closing__body {
		font-size: 17px;
	}
}

/* =========================================================
   Responsive — Small mobile ( ≤ 480px )
   ========================================================= */

@media ( max-width: 480px ) {

	.pjcs-spirit-header__heading {
		font-size: 36px;
	}

	/* Closing CTA buttons — stack vertically */
	.pjcs-spirit-closing__buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.pjcs-spirit-closing__buttons .pjcs-btn {
		text-align: center;
	}
}