/**
 * Homepage — About Teaser
 *
 * 2-column: left 44% photo, right 56% text. Cream background.
 * Photo uses mix-blend-mode:multiply against cream until hero-candidate-nobg.png
 * is ready (same workaround as hero). Remove --blend class from pattern when done.
 *
 * Note: .pjcs-btn base + .pjcs-btn--ghost-navy defined in hero.css (enqueued globally).
 */

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

.pjcs-about-teaser {
	background-color: #FAF2F0;
	/* cream */
	overflow: hidden;
}

.pjcs-about-teaser__inner {
	display: flex;
	align-items: stretch;
	max-width: 1200px;
	margin-inline: auto;
}

/* =========================================================
   Left photo column — 44%
   ========================================================= */

.pjcs-about-teaser__photo-col {
	width: 44%;
	flex-shrink: 0;
	position: relative;
	min-height: 520px;
	background-color: #FAF2F0;
	/* cream — blend mode backdrop */
	overflow: hidden;
}

.pjcs-about-teaser__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/*
 * Temporary: knocks out the solid black background in hero-candidate.png
 * by multiplying dark pixels against the cream section background.
 * Remove this class from the <img> in homepage-about-teaser.php once
 * hero-candidate-nobg.png (transparent PNG) is in place.
 */
.pjcs-about-teaser__photo--blend {
	mix-blend-mode: multiply;
}

/* =========================================================
   Right text column — 56%
   ========================================================= */

.pjcs-about-teaser__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 96px 64px 96px 72px;
}

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

/* Heading */
.pjcs-about-teaser__heading {
	margin: 0 0 24px;
	font-family: 'Fraunces', serif;
	font-size: 40px;
	font-weight: 400;
	line-height: 1.15;
	color: #273965;
	/* navy */
}

/* Body */
.pjcs-about-teaser__body {
	margin: 0 0 36px;
	font-family: 'Libre Caslon Text', serif;
	font-size: 17px;
	line-height: 1.7;
	color: #2E2820;
	/* charcoal */
	max-width: 540px;
}

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

/* Mobile — stack: photo on top, text below. Tablet acts like desktop. */
@media (max-width: 768px) {

	.pjcs-about-teaser__inner {
		flex-direction: column;
	}

	.pjcs-about-teaser__photo-col {
		width: 100%;
		height: auto;
		min-height: 420px;
	}

	/* Adjust object-position so the top of his head isn't chopped */
	.pjcs-about-teaser__photo {
		object-position: 50% 10%;
	}

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

	.pjcs-about-teaser__heading {
		font-size: 28px;
	}

	.pjcs-about-teaser__body {
		font-size: 16px;
	}
}