/**
 * Homepage — Where I Stand Issues Teaser
 *
 * Section intro + 7-card grid. Each card links to an anchored section on
 * the Where I Stand page. Cards use the shared stat-card visual language:
 * white background, 3px red top border, border-radius 2px.
 *
 * Note: .pjcs-btn base + .pjcs-btn--red defined in hero.css (enqueued globally).
 */

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

.pjcs-issues-teaser {
	background-color: #F7F4EF; /* offwhite */
	padding-block: 96px;
}

.pjcs-issues-teaser__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 32px;
}

/* =========================================================
   Section header
   ========================================================= */

.pjcs-issues-teaser__header {
	text-align: center;
	margin-bottom: 56px;
}

/* Eyebrow */
.pjcs-issues-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-issues-teaser__heading {
	margin: 0 0 16px;
	font-family: 'Fraunces', serif;
	font-size: 44px;
	font-weight: 400;
	line-height: 1.1;
	color: #273965; /* navy */
}

/* Subhead */
.pjcs-issues-teaser__subhead {
	margin: 0;
	font-family: 'Libre Caslon Text', serif;
	font-size: 17px;
	font-style: italic;
	line-height: 1.6;
	color: rgba( 39, 57, 101, 0.55 ); /* navy at 55% */
}

/* =========================================================
   Issues card grid — 3-column
   ========================================================= */

.pjcs-issues-teaser__grid {
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 28px 24px; /* row-gap slightly larger than column-gap */
}

/* Make <li> a flex container so the inner <a> card reliably fills the row height */
.pjcs-issues-teaser__grid > li {
	display: flex;
	flex-direction: column;
}

/* =========================================================
   Issue card
   ========================================================= */

.pjcs-issue-card {
	display: flex;
	flex-direction: column;
	flex: 1; /* fill the <li> flex container — replaces unreliable height: 100% */
	background-color: #ffffff;
	border-top: 3px solid #CF3223; /* red */
	border-radius: 2px;
	padding: 32px 28px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.pjcs-issue-card:hover,
.pjcs-issue-card:focus {
	box-shadow: 0 4px 24px rgba( 39, 57, 101, 0.12 );
	transform: translateY( -2px );
	text-decoration: none;
}

.pjcs-issue-card:focus-visible {
	outline: 2px solid #273965;
	outline-offset: 3px;
}

/* Card eyebrow */
.pjcs-issue-card__eyebrow {
	margin: 0 0 10px;
	font-family: 'DM Sans', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #CF3223; /* red */
}

/* Card heading */
.pjcs-issue-card__heading {
	margin: 0 0 12px;
	font-family: 'Fraunces', serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
	color: #273965; /* navy */
}

/* Card body */
.pjcs-issue-card__body {
	margin: 0;
	font-family: 'Libre Caslon Text', serif;
	font-size: 15px;
	line-height: 1.6;
	color: rgba( 46, 40, 32, 0.7 ); /* charcoal at 70% */
	flex: 1; /* push arrow to bottom */
}

/* Arrow — aligned to bottom of card */
.pjcs-issue-card__arrow {
	display: block;
	margin-top: 20px;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	color: #CF3223; /* red */
	transition: transform 0.15s ease;
}

.pjcs-issue-card:hover .pjcs-issue-card__arrow {
	transform: translateX( 4px );
}

/* =========================================================
   Section CTA
   ========================================================= */

.pjcs-issues-teaser__cta {
	display: flex;
	justify-content: center;
}

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

/* Tablet — 2-column grid */
@media ( max-width: 1024px ) {

	.pjcs-issues-teaser__grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.pjcs-issues-teaser__heading {
		font-size: 36px;
	}
}

/* Mobile — single column */
@media ( max-width: 640px ) {

	.pjcs-issues-teaser {
		padding-block: 64px;
	}

	.pjcs-issues-teaser__inner {
		padding-inline: 24px;
	}

	.pjcs-issues-teaser__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.pjcs-issues-teaser__heading {
		font-size: 30px;
	}

	.pjcs-issues-teaser__header {
		margin-bottom: 40px;
	}
}