/**
 * Mainsail Homepage — structural section-rhythm helpers.
 *
 * MAM Phase 3.9. Deliberately minimal, per this phase's explicit
 * instruction to separate "functional completion" from "final aesthetic
 * consolidation" (deferred to a later phase). These classes exist only so
 * an administrator assembling the homepage's actual content in the block
 * editor has clean, consistent vertical rhythm and section separation to
 * apply via each Group block's "Additional CSS Class(es)" field — the same
 * pattern already established for Mainsail Journeys' component classes.
 * This is NOT the final Agent Image Panorama visual treatment.
 *
 * Continues the same token-with-fallback pattern used by every other
 * Mainsail module in this project (--mainsail-color-accent,
 * --mainsail-color-dark-surface, same sampled fallback values) — one more
 * consistent surface in the same visual system, not a new one.
 *
 * Every selector is scoped under one of the class names below — no bare
 * element selectors, no Kadence-class overrides, no !important.
 */

.mainsail-homepage__content {
	max-width: 100%;
}

/* Generic vertical rhythm for any homepage section (a Group block wrapping
   one composed piece — a search block, a community grid, a testimonial
   grid, a CTA row, etc.). */
.mainsail-home-section {
	padding: 3rem 1.25rem;
	max-width: 1280px;
	margin: 0 auto;
}

.mainsail-home-section--tight {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

/* Alternating tint for visual separation between adjacent sections, without
   a full redesign — a light neutral wash, not the final brand treatment. */
.mainsail-home-section--alt {
	background-color: rgba(0, 0, 0, 0.02);
}

/* Dark variant, reusing the same dark-surface token already established by
   every other Mainsail module, for a section that should read as a
   distinct "band" (e.g. wrapping a testimonials grid) — matches, does not
   duplicate, the treatment already used inside Mainsail Testimonials'
   own cards. */
.mainsail-home-section--dark {
	background-color: var(--mainsail-color-dark-surface, #222222);
	color: var(--mainsail-color-dark-surface-text, #f2f2f2);
}

/* A simple flex row for grouping call-to-action buttons/links (e.g. Buyer
   Guide / Seller Guide / Get a Valuation / Schedule a Tour) — layout only,
   no button skin is imposed here so Kadence's own Button block styling
   (or later aesthetic-phase styling) remains in full control of
   appearance. */
.mainsail-home-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

@media (max-width: 600px) {
	.mainsail-home-section {
		padding: 2rem 1rem;
	}

	.mainsail-home-cta-row {
		flex-direction: column;
		align-items: stretch;
	}
}