/**
 * Homepage — American Spirit Teaser
 *
 * Layout: navy background / left 50% text column / right 50% photo column.
 * The right column shows jbSunSmall.png at saturate(0.7); renders as
 * solid navy until the photo is in place.
 *
 * Note: .pjcs-btn base styles live in hero.css (enqueued globally).
 * This file adds only the ghost-white variant used on dark/navy backgrounds.
 */

/* =========================================================
   Section shell
   ========================================================= */

.pjcs-spirit-teaser {
	display: flex;
	min-height: 540px;
	background-color: #273965; /* navy — also the fallback when photo is absent */
	overflow: hidden;
}

/* =========================================================
   Left text column — 50%
   ========================================================= */

.pjcs-spirit-teaser__content {
	width: 50%;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 96px 64px 96px 80px;
	position: relative;
	z-index: 2;
}

/* Eyebrow */
.pjcs-spirit-teaser__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 */
}

/* =========================================================
   Heading — split typographic treatment
   ========================================================= */

.pjcs-spirit-teaser__heading {
	margin: 0 0 28px;
	line-height: 1.05;
}

/* "Born here." — regular, white */
.pjcs-spirit-teaser__heading-line1 {
	display: block;
	font-family: 'Fraunces', serif;
	font-size: 44px;
	font-style: normal;
	font-weight: 400;
	color: #ffffff;
}

/* "Built here." — italic, slightly larger, white */
.pjcs-spirit-teaser__heading-line2 {
	display: block;
	font-family: 'Fraunces', serif;
	font-size: 50px; /* per spec: italic line slightly larger */
	font-style: italic;
	font-weight: 400;
	color: #ffffff;
}

/* Decorative rule — 48 × 3px, red */
.pjcs-spirit-teaser__rule {
	width: 48px;
	height: 3px;
	background-color: #CF3223; /* red */
	margin-bottom: 28px;
}

/* Teaser body — Libre Caslon Text italic, white 75% */
.pjcs-spirit-teaser__body {
	margin: 0 0 36px;
	font-family: 'Libre Caslon Text', serif;
	font-size: 18px;
	font-style: italic;
	line-height: 1.7;
	color: rgba( 255, 255, 255, 0.75 );
	max-width: 420px;
}

/* =========================================================
   Ghost-white button variant
   (Base .pjcs-btn styles defined in hero.css)
   ========================================================= */

.pjcs-btn--ghost-white {
	background-color: transparent;
	color: #ffffff;
	border-color: rgba( 255, 255, 255, 0.6 );
}

.pjcs-btn--ghost-white:hover,
.pjcs-btn--ghost-white:focus {
	background-color: rgba( 255, 255, 255, 0.12 );
	border-color: #ffffff;
	color: #ffffff;
	text-decoration: none;
}

.pjcs-btn--ghost-white:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* =========================================================
   Right photo column — 50%
   ========================================================= */

.pjcs-spirit-teaser__photo-col {
	flex: 1;
	position: relative;
	overflow: hidden;
}

.pjcs-spirit-teaser__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate( 0.7 );
}

/* Left edge fade — navy → transparent, 30% of photo column */
.pjcs-spirit-teaser__fade-left {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 30%;
	background: linear-gradient( to right, #273965 0%, transparent 100% );
	z-index: 1;
	pointer-events: none;
}

/* Bottom edge fade — hidden on desktop, shown when columns stack */
.pjcs-spirit-teaser__fade-bottom {
	display: none;
}

/* =========================================================
   Responsive
   ========================================================= */

/* Tablet — stack: photo strip on top, text below */
@media ( max-width: 1024px ) {

	.pjcs-spirit-teaser {
		flex-direction: column;
	}

	.pjcs-spirit-teaser__photo-col {
		order: 1;
		width: 100%;
		height: 300px;
		flex-shrink: 0;
	}

	/* Left fade irrelevant when stacked */
	.pjcs-spirit-teaser__fade-left {
		display: none;
	}

	/* Bottom fade softens the cut between photo and navy content */
	.pjcs-spirit-teaser__fade-bottom {
		display: block;
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		height: 80px;
		background: linear-gradient( to top, #273965 0%, transparent 100% );
		z-index: 1;
		pointer-events: none;
	}

	.pjcs-spirit-teaser__content {
		order: 2;
		width: 100%;
		padding: 56px 32px;
	}

	.pjcs-spirit-teaser__heading-line1 { font-size: 36px; }
	.pjcs-spirit-teaser__heading-line2 { font-size: 42px; }
}

/* Mobile */
@media ( max-width: 768px ) {

	.pjcs-spirit-teaser__photo-col { height: 240px; }

	.pjcs-spirit-teaser__content { padding: 48px 24px; }

	.pjcs-spirit-teaser__heading-line1 { font-size: 30px; }
	.pjcs-spirit-teaser__heading-line2 { font-size: 36px; }

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