/* index.css — styles unique to index.php (ECU-120A3 campaign).
   Loaded only when $page == 'index' (see inc/header.php).
   Add rules here only when style.css has no equivalent. */

/* Scroll-fill headline: ported from checking.css (not loaded on this page).
   The GSAP behavior itself is global in js/script.js. */
.fineprint h1 {
	white-space: normal !important;
}
.fineprint h1 .word {
	display: inline-block;
	margin-right: 0.25em;
}
.fineprint h1 .word span {
	opacity: 0.1;
}

/* Section 1 loan grid: spectre columns (5-up; 3-up at xl; 2-up at md; stacked at sm).
   Vertical dividers sit on the left edge of every item that is not first in its row. */
.loan-item {
	padding: 0 0.8rem;
}
.loan-item + .loan-item {
	border-left: 1px solid var(--slate-alt);
}
.loan-item:first-child {
	padding-left: 0;
}
@media (max-width: 1280px) {
	.loan-item {
		margin-bottom: 2rem;
	}
	.loan-item:nth-child(3n+1) {
		padding-left: 0;
		border-left: 0;
	}
}
@media (max-width: 840px) {
	.loan-item:nth-child(3n+1) {
		padding-left: 0.8rem;
		border-left: 1px solid var(--slate-alt);
	}
	.loan-item:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
}
@media (max-width: 600px) {
	.loan-item,
	.loan-item + .loan-item,
	.loan-item:nth-child(odd) {
		padding: 0;
		border-left: 0;
	}
}

/* Section 2 perk columns: light vertical dividers on the dark gradient, 2x2 below 840px */
.forward-perk + .forward-perk {
	border-left: 1px solid rgba(255, 255, 255, 0.45);
}
@media (max-width: 840px) {
	.forward-perk:nth-child(odd) {
		border-left: 0;
	}
	.forward-perk:nth-child(odd) {
		padding-left: 0;
	}
}
@media (max-width: 600px) {
	.forward-perk + .forward-perk {
		border-left: 0;
	}
}

/* Section 2 membership list: linked words are underlined and keep the white text color */
.forward-links a,
.forward-links a:visited {
	color: inherit;
	text-decoration: underline;
}

/* PLACEHOLDER background for Section 2 ("Owned by the people we serve"):
   near-black top, teal glow bottom-left, navy bottom-right. Swap for the final gradient. */
.bg-forward-mesh {
	background-color: #06040d;
	background-image:
		radial-gradient(ellipse 65% 45% at 0% 100%, #57e9c6 0%, rgba(87, 233, 198, 0) 100%),
		radial-gradient(ellipse 45% 35% at 100% 100%, #2a3a58 0%, rgba(42, 58, 88, 0) 100%),
		radial-gradient(ellipse 60% 40% at 0% 0%, #1a2a40 0%, rgba(26, 42, 64, 0) 100%);
}

/* Section 4 community block: ported unchanged from checking.css (not loaded on this page).
   Photo is shared with the Checking page (images/july2026/checking/). */
.community-parallax {
	position: relative;
	background-image: url('../images/july2026/checking/ecu_community-gradient.webp');
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 100px 20px 300px;
}
@media (max-width: 960px) {
	.community-parallax {
		background-attachment: scroll;
		background-position: center;
		background-size: cover;
		padding: 40px 20px;
	}
}
@supports (-webkit-touch-callout: none) {
	.community-parallax {
		background-attachment: scroll;
	}
}

.community-box {
	background-color: var(--white);
	transition: background-color .3s ease;
}
.community-box:hover {
	background-color: var(--sunsea);
}

/* Box row straddles the photo above and the darkblue block below (desktop only). */
.community-box-overlap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -80px;
	z-index: 2;
}
.community-copy-block {
	padding-top: 130px;
}
@media (max-width: 960px) {
	.community-box-overlap {
		position: static;
	}
	.community-copy-block {
		padding-top: 60px;
	}
}

.community-cta-col {
	border-left: 1px solid rgba(255, 255, 255, .25);
}
@media (max-width: 840px) {
	.community-cta-col {
		border-left: none;
	}
}

.divider.divider-full-width {
	height: 2px;
	width: 100%;
}