/* homepage.css — Homepage page layout
 *
 * CSS ownership: section wrappers, grid orchestration, page-specific heading
 * styles. Component visual styles remain in component CSS files.
 *
 * Template: front-page.php
 *
 * Section sequence:
 *   1. Homepage Hero       .homepage-hero (hero.css — two-column + collapse)
 *   2. Credentials         .homepage-credentials (credential-strip.css)
 *   3. Featured Communities .homepage-communities
 *   4. OFW Callout         .ofw-callout (ofw-callout.css)
 *   5. Testimonials        .testimonial-block (testimonial-block.css)
 *   6. Guides Teaser       .homepage-guides
 *   7. Final CTA           .final-cta (final-cta.css)
 */

/* ─── 3. Featured Communities section ──────────────────── */

.homepage-communities {
	padding: var(--space-xl) 0;
	background-color: var(--white);
}

.homepage-communities__heading {
	font-family: var(--font-serif);
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 600;
	color: var(--green-dark);
	margin-bottom: 2rem;
}

/* Grid lives in community-card.css (.homepage-communities__grid) */

.homepage-communities__footer {
	margin-top: 2.5rem;
	text-align: center;
}

/* ─── 6. Guides teaser section ──────────────────────────── */

.homepage-guides {
	padding: var(--space-xl) 0;
	background-color: var(--cream);
}

.homepage-guides__heading {
	font-family: var(--font-serif);
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 600;
	color: var(--green-dark);
	margin-bottom: 2rem;
}

/* Three-column teaser grid */
.homepage-guides__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.homepage-guides__footer {
	margin-top: 2.5rem;
	text-align: center;
}

/* ─── Guide card teaser override (homepage context) ─────── */

/* Guide cards on homepage use the --teaser modifier.
   guide-card.css handles base teaser styles.
   This context ensures they sit on the cream background. */

.homepage-guides .guide-card--teaser {
	border-left-color: rgba(200, 169, 106, 0.3);
}

.homepage-guides .guide-card--teaser:hover {
	border-left-color: var(--gold);
}

/* ─── Responsive — 1024px ───────────────────────────────── */

@media ( max-width: 1024px ) {

	/* Communities grid handled in community-card.css */

	.homepage-guides__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ─── Responsive — 640px ────────────────────────────────── */

@media ( max-width: 640px ) {

	.homepage-communities {
		padding: var(--space-lg) 0;
	}

	.homepage-guides {
		padding: var(--space-lg) 0;
	}

	.homepage-guides__grid {
		grid-template-columns: 1fr;
	}

	.homepage-communities__footer,
	.homepage-guides__footer {
		text-align: left;
	}

	.homepage-communities__footer .btn,
	.homepage-guides__footer .btn {
		width: 100%;
		text-align: center;
	}
}