/**
 * Hero — "Open Editorial" design
 *
 * Layout: red stripe / navy accent bar / left 52% content / right 48% photo.
 * Animation: staggered fade-up entrance for text elements.
 * Tablet (≤1024px): stacked layout — photo on top, content below, full width.
 * Mobile (≤768px): photo hidden, content full width, CTAs stacked vertically.
 *
 * All positioning, blend modes, and gradient fades live here because they
 * cannot be expressed via block attributes.
 *
 * Blend-mode note: .pjcs-hero__photo--blend uses mix-blend-mode: multiply
 * to knock out the solid black background in hero-candidate.png. Remove that
 * class from patterns/hero.php once the transparent-background PNG is ready.
 */

/* =========================================================
   Outer shell
   ========================================================= */

.pjcs-hero {
	display: block;
}

/* =========================================================
   Red top stripe — 6px, full width
   ========================================================= */

.pjcs-hero__stripe {
	height: 6px;
	/* var(--wp--custom--top-stripe-height) */
	background-color: #CF3223;
	/* red */
}

/* =========================================================
   Hero body — the section below the stripe
   ========================================================= */

.pjcs-hero__body {
	position: relative;
	min-height: 600px;
	/* var(--wp--custom--hero-height) */
	background-color: #F7F4EF;
	/* offwhite */
	display: flex;
	overflow: hidden;
}

/* =========================================================
   Animations
   ========================================================= */

@keyframes pjcsHeroFadeUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.pjcs-hero__anim-fade-up {
	opacity: 0;
	/* Starting state for animation */
	animation: pjcsHeroFadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.pjcs-hero__anim-delay-1 {
	animation-delay: 0.1s;
}

.pjcs-hero__anim-delay-2 {
	animation-delay: 0.2s;
}

.pjcs-hero__anim-delay-3 {
	animation-delay: 0.3s;
}

.pjcs-hero__anim-delay-4 {
	animation-delay: 0.4s;
}

.pjcs-hero__anim-delay-5 {
	animation-delay: 0.5s;
}


/* =========================================================
   Navy left accent bar — 56px, full height, absolute
   ========================================================= */

.pjcs-hero__accent-bar {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 56px;
	/* var(--wp--custom--accent-bar-width) */
	background-color: #273965;
	/* navy */
	z-index: 2;
}

/* =========================================================
   Flag — decorative full-bleed background
   ========================================================= */

.pjcs-hero__flag {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.055;
	filter: saturate(0.6);
	z-index: 1;
	pointer-events: none;
	user-select: none;
}

/* =========================================================
   Left content column — 52%
   ========================================================= */

.pjcs-hero__content {
	position: relative;
	z-index: 3;
	width: 52%;
	box-sizing: border-box;
	/* Ensures padding is calculated within the width */
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;

	/*
	 * Left padding: 56px accent bar + 48px breathing room.
	 * Right padding: 48px gap before photo column.
	 */
	padding: 72px 48px 72px calc(56px + 48px);
}

/* Campaign logo in hero */
.pjcs-hero__logo-link {
	display: inline-block;
	margin-bottom: 28px;
}

.pjcs-hero__logo {
	display: block;
	height: 48px;
	width: auto;
	max-height: var(--wp--custom--logo-max-height, 48px);
}

/* Eyebrow */
.pjcs-hero__eyebrow {
	margin: 0 0 20px;
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(10px, 1.5vw, 12px);
	/* Scalable typography */
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #CF3223;
	/* red */
}

/* =========================================================
   Candidate name — split typographic treatment
   ========================================================= */

.pjcs-hero__name {
	margin: 0 0 4px;
	line-height: 0.93;
}

/* "Paul J." — regular weight, navy */
.pjcs-hero__name-first {
	display: block;
	font-family: 'Fraunces', serif;
	font-size: clamp(48px, 6vw, 72px);
	/* Scalable typography */
	font-style: normal;
	font-weight: 400;
	color: #273965;
	/* navy */
}

/* "Schultz" — italic, red, slightly larger */
.pjcs-hero__name-last {
	display: block;
	font-family: 'Fraunces', serif;
	font-size: clamp(54px, 7vw, 80px);
	/* Scalable typography */
	font-style: italic;
	font-weight: 400;
	color: #CF3223;
	/* red */
}

/* Office label */
.pjcs-hero__office {
	margin: 14px 0 22px;
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(39, 57, 101, 0.35);
	/* navy at 35% */
}

/* Decorative rule — 40 × 2px, red */
.pjcs-hero__rule {
	width: 40px;
	height: 2px;
	background-color: #CF3223;
	/* red */
	margin-bottom: 24px;
}

/* Tagline */
.pjcs-hero__tagline {
	margin: 0 0 40px;
	font-family: 'Libre Caslon Text', serif;
	font-size: clamp(16px, 2vw, 18px);
	/* Scalable typography */
	font-style: italic;
	line-height: 1.6;
	color: rgba(39, 57, 101, 0.55);
	/* navy at 55% */
	max-width: 480px;
}

/* =========================================================
   CTA buttons
   ========================================================= */

.pjcs-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* Shared button base */
.pjcs-btn {
	display: inline-block;
	box-sizing: border-box;
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 24px;
	border-radius: 2px;
	border: 2px solid transparent;
	line-height: 1;
	cursor: pointer;
	transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* "Volunteer" — red fill */
.pjcs-btn--red {
	background-color: #CF3223;
	color: #ffffff;
	border-color: #CF3223;
}

.pjcs-btn--red:hover,
.pjcs-btn--red:focus {
	filter: brightness(0.88);
	color: #ffffff;
	text-decoration: none;
}

/* "Read the Platform" — ghost, navy border */
.pjcs-btn--ghost-navy {
	background-color: transparent;
	color: #273965;
	border-color: #273965;
}

.pjcs-btn--ghost-navy:hover,
.pjcs-btn--ghost-navy:focus {
	background-color: #273965;
	color: #ffffff;
	text-decoration: none;
}

/* Focus ring — shared */
.pjcs-btn:focus-visible {
	outline: 2px solid #273965;
	outline-offset: 3px;
}

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

.pjcs-hero__photo-col {
	position: relative;
	z-index: 2;
	flex: 1;
	/* fills the remaining ~48% */
}

.pjcs-hero__photo-wrap {
	position: absolute;
	inset: 0;
}

/* Candidate photo — bottom-anchored, right-aligned */
.pjcs-hero__photo {
	position: absolute;
	bottom: 0;
	right: 0;
	height: 100%;
	width: auto;
	object-fit: cover;
	object-position: top center;
}

/*
 * Temporary blend mode — knocks out the solid black background in
 * hero-candidate.png against the offwhite (#F7F4EF) page colour.
 * Remove this class from the <img> in patterns/hero.php once
 * hero-candidate-nobg.png (transparent PNG) is ready.
 */
.pjcs-hero__photo--blend {
	mix-blend-mode: multiply;
}

/* Left gradient fade — wide soft blend, offwhite hold → transparent */
.pjcs-hero__fade-left {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 340px;
	background: linear-gradient(to right, #F7F4EF 0%, #F7F4EF 20%, transparent 100%);
	z-index: 3;
	pointer-events: none;
}

/* Bottom gradient fade — 100px, offwhite → transparent */
.pjcs-hero__fade-bottom {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 100px;
	background: linear-gradient(to top, #F7F4EF 0%, transparent 100%);
	z-index: 4;
	pointer-events: none;
}

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

/*
 * Tablet (≤1023px) — photo hidden, content full-width, text centred.
 * Breakpoint is 1023px (not 1024px) so a 1024px desktop window
 * stays on the full two-column layout.
 */
@media (max-width: 1023px) {

	.pjcs-hero__body {
		min-height: auto;
	}

	/* Accent bar hidden — only meaningful in side-by-side layout */
	.pjcs-hero__accent-bar {
		display: none;
	}

	/* Photo hidden on tablet — same treatment as mobile */
	.pjcs-hero__photo-col {
		display: none;
	}

	/* Content column: full width, generous padding, text centred */
	.pjcs-hero__content {
		width: 100%;
		padding: 56px 48px 72px;
	}

	.pjcs-hero__eyebrow,
	.pjcs-hero__name,
	.pjcs-hero__office,
	.pjcs-hero__tagline {
		text-align: center;
	}

	.pjcs-hero__rule {
		margin: 24px auto;
	}

	.pjcs-hero__tagline {
		margin: 0 auto 40px;
		max-width: 560px;
	}

	.pjcs-hero__ctas {
		justify-content: center;
	}
}

/* Mobile (≤768px) — tighter padding, vertically stacked CTAs */
@media (max-width: 768px) {

	.pjcs-hero__content {
		padding: 48px 32px;
	}

	.pjcs-hero__logo {
		width: 100%;
		height: auto;
		max-width: 240px;
	}

	.pjcs-hero__ctas {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.pjcs-btn {
		text-align: center;
		width: 100%;
		padding: 14px 24px;
	}
}