/* community-single.css — Community single page layout
 *
 * CSS ownership: section spacing, page grids, page-specific layouts.
 * Does not duplicate: card, button, form, FAQ, or CTA component styles.
 *
 * Reference: COMMUNITY_SINGLE_RESPONSIVE_SPEC.md
 * Template: single-community.php
 *
 * Section sequence:
 *   1. Breadcrumb (in hero area)
 *   2. Community Hero        .community-hero
 *   3. Community Overview    .community-overview
 *   4. Community Features    .feature-card-grid (component)
 *   5. Location & Access     .community-location
 *   6. House Models          .community-models
 *   7. Community Gallery     .community-gallery
 *   8. Site Development Plan .community-site-plan
 *   9. Who This Fits         .community-fit
 *  10. For OFWs              .ofw-callout (component)
 *  11. Testimonials          .testimonial-block (component)
 *  12. Related Guides        .community-guides
 *  13. FAQ Accordion         .faq-block (component)
 *  14. Final CTA             .final-cta (component)
 */

/* ─── 2. Community Hero ─────────────────────────────────── */

/* Full-bleed image hero with overlay and content positioned
   in the lower portion of the image area. */

.community-hero {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: flex-end;
	padding-bottom: 4rem;
	background-color: var(--green-dark);
	overflow: hidden;
}

/* Background image div (style set inline via PHP) */
.community-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

/* Dark overlay for text legibility */
.community-hero__overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top,
		rgba(22, 44, 31, 0.9) 0%,
		rgba(22, 44, 31, 0.5) 50%,
		rgba(22, 44, 31, 0.2) 100%
	);
	z-index: 1;
}

/* Content sits above overlay */
.community-hero .container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.community-hero__content {
	max-width: 680px;
}

/* Province eyebrow label */
.community-hero__province {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 500;
	color: var(--gold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}

/* Community name H1 */
.community-hero__title {
	font-family: var(--font-serif);
	font-size: clamp(32px, 4.5vw, 56px);
	font-weight: 600;
	color: var(--white);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 0.75rem;
}

/* Tagline */
.community-hero__tagline {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 300;
	color: rgba(247, 247, 245, 0.65);
	line-height: 1.7;
	margin: 0 0 2rem;
	max-width: 560px;
}

/* CTA pair */
.community-hero__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Breadcrumb positioning within community hero */
.single-community .breadcrumb {
	position: relative;
	z-index: 2;
	padding-top: 1.25rem;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* ─── 3. Community Overview ─────────────────────────────── */

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

/* Editorial body text above facts */
.community-overview__body {
	max-width: 720px;
	margin-bottom: 2.5rem;
}

.community-overview__body p {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 300;
	color: var(--charcoal);
	line-height: 1.8;
}

/* Facts grid — four rows displayed as a definition list */
.community-overview__facts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border-top: 1px solid var(--cream-dark);
	border-left: 1px solid var(--cream-dark);
}

.community-overview__fact {
	padding: 1.25rem 1.5rem;
	border-right: 1px solid var(--cream-dark);
	border-bottom: 1px solid var(--cream-dark);
}

.community-overview__fact dt {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 500;
	color: var(--muted);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 0.375rem;
}

.community-overview__fact dd {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 400;
	color: var(--charcoal);
	line-height: 1.5;
}

.community-overview__developer-tagline {
	display: block;
	font-size: 12px;
	font-weight: 300;
	color: var(--muted);
	margin-top: 2px;
}

/* ─── 4. Community Features — page spacing only ─────────── */

/* Visual styles live in feature-card-grid.css.
   Background alternation set here. */

.single-community .feature-card-grid {
	background-color: var(--cream);
}

.single-community .feature-card-grid__item {
	background-color: var(--cream-dark);
}

/* ─── 5. Location & Access ──────────────────────────────── */

.community-location {
	padding: var(--space-xl) 0;
	background-color: var(--green);
}

.community-location .section-label {
	color: rgba(247, 247, 245, 0.45);
}

/* Body text */
.community-location__body {
	max-width: 720px;
	margin-bottom: 2rem;
}

.community-location__body p {
	font-family: var(--font-sans);
	font-size: 14.5px;
	font-weight: 300;
	color: rgba(247, 247, 245, 0.75);
	line-height: 1.8;
}

/* Nearby establishments */
.community-location__nearby {
	border-top: 1px solid rgba(247, 247, 245, 0.15);
	padding-top: 1.5rem;
	margin-top: 1.5rem;
}

.community-location__nearby h3 {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--white);
	margin-bottom: 1rem;
}

.community-location__nearby-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem 2rem;
	list-style: none;
}

.community-location__nearby-list li {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 300;
	color: rgba(247, 247, 245, 0.7);
	padding-left: 1rem;
	position: relative;
}

.community-location__nearby-list li::before {
	content: '·';
	position: absolute;
	left: 0;
	color: var(--gold);
	font-weight: 700;
}

/* ─── 6. House Models ───────────────────────────────────── */

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

.community-models__heading {
	font-family: var(--font-serif);
	font-size: clamp(22px, 2.5vw, 32px);
	font-weight: 600;
	color: var(--green-dark);
	margin-bottom: 2rem;
	max-width: 640px;
}

/* Three-column grid — matches COMMUNITY_SINGLE_RESPONSIVE_SPEC */
.community-models__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* ─── 7. Community Gallery ──────────────────────────────── */

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

/* Single image — full width */
.community-gallery__single {
	margin-top: 1rem;
}

.community-gallery__single .community-gallery__image {
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: cover;
	display: block;
}

/* Multi-image grid — three columns default */
.community-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	margin-top: 1rem;
}

.community-gallery__item {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--cream);
}

.community-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform var(--transition-medium);
}

.community-gallery__item:hover .community-gallery__image {
	transform: scale(1.04);
}

/* ─── 8. Site Development Plan ──────────────────────────── */

.community-site-plan {
	padding: var(--space-xl) 0;
	background-color: var(--cream);
	border-top: 1px solid var(--cream-dark);
}

.community-site-plan__download {
	margin-top: 1.25rem;
}

/* ─── 9. Who This Community Fits ────────────────────────── */

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

.community-fit__heading {
	font-family: var(--font-serif);
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 600;
	color: var(--green-dark);
	margin-bottom: 2rem;
	max-width: 640px;
}

/* Rendell's Perspective block */
.community-fit__perspective {
	background-color: var(--white);
	border-left: 3px solid var(--gold);
	padding: 2rem;
	max-width: 800px;
	margin-bottom: 2rem;
}

.community-fit__perspective-label {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 500;
	color: var(--gold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.community-fit__perspective p {
	font-family: var(--font-sans);
	font-size: 14.5px;
	font-weight: 300;
	color: var(--charcoal);
	line-height: 1.8;
	margin-bottom: 0.75em;
}

.community-fit__perspective p:last-child {
	margin-bottom: 0;
}

.community-fit__cta {
	margin-top: 0.5rem;
}

/* ─── 10. For OFWs — page spacing override ──────────────── */

/* ofw-callout styles live in ofw-callout.css.
   No page-level override needed. */

/* ─── 11. Testimonials — page spacing only ─────────────── */

/* testimonial-block styles live in testimonial-block.css. */

/* ─── 12. Related Guides ────────────────────────────────── */

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

/* Three-column grid — matches COMMUNITY_SINGLE_RESPONSIVE_SPEC */
.community-guides__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 1.5rem;
}

/* Guide card (smaller variant for related guides context) */
.community-guides__card {
	background-color: var(--white);
	border: 1px solid var(--cream-dark);
	transition: transform var(--transition-base),
	            box-shadow var(--transition-base);
}

.community-guides__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}

.community-guides__card-link {
	display: block;
	padding: 1.25rem;
	text-decoration: none;
	color: inherit;
}

.community-guides__cat {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 500;
	color: var(--gold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}

.community-guides__title {
	font-family: var(--font-serif);
	font-size: clamp(15px, 1.8vw, 18px);
	font-weight: 600;
	color: var(--green-dark);
	line-height: 1.25;
	margin: 0 0 0.625rem;
	transition: color var(--transition-base);
}

.community-guides__card:hover .community-guides__title {
	color: var(--green);
}

.community-guides__excerpt {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 300;
	color: var(--muted);
	line-height: 1.6;
	margin: 0 0 0.625rem;
}

.community-guides__read-time {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 500;
	color: var(--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ─── 13. FAQ — page spacing only ───────────────────────── */

/* faq-block styles live in faq-block.css. */

/* ─── 14. Final CTA — page spacing only ────────────────── */

/* final-cta styles live in final-cta.css. */

/* ─────────────────────────────────────────────────────────
   RESPONSIVE — 1024px
   ───────────────────────────────────────────────────────── */

@media ( max-width: 1024px ) {

	/* Hero */
	.community-hero {
		min-height: 400px;
		padding-bottom: 3rem;
	}

	/* Overview facts: 2-col → 1-col */
	.community-overview__facts {
		grid-template-columns: 1fr;
	}

	/* Location nearby: 2-col → 1-col */
	.community-location__nearby-list {
		grid-template-columns: 1fr;
	}

	/* Models: 3-col → 2-col (per spec) */
	.community-models__grid {
		grid-template-columns: 1fr 1fr;
	}

	/* Gallery: 3-col stays at 1024px (per spec) */

	/* Related guides: 3-col → 2-col */
	.community-guides__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE — 640px
   ───────────────────────────────────────────────────────── */

@media ( max-width: 640px ) {

	/* Hero */
	.community-hero {
		min-height: 340px;
		padding-bottom: 2.5rem;
	}

	.community-hero__actions {
		flex-direction: column;
	}

	.community-hero__actions .btn {
		width: 100%;
		text-align: center;
	}

	/* Overview */
	.community-overview {
		padding: var(--space-lg) 0;
	}

	/* Location */
	.community-location {
		padding: var(--space-lg) 0;
	}

	/* Models: 2-col → 1-col */
	.community-models {
		padding: var(--space-lg) 0;
	}

	.community-models__grid {
		grid-template-columns: 1fr;
	}

	/* Gallery: 3-col → 2-col (per spec: two-column at 640px) */
	.community-gallery {
		padding: var(--space-lg) 0;
	}

	.community-gallery__grid {
		grid-template-columns: 1fr 1fr;
		gap: 0.375rem;
	}

	/* Site plan */
	.community-site-plan {
		padding: var(--space-lg) 0;
	}

	/* Who this fits */
	.community-fit {
		padding: var(--space-lg) 0;
	}

	.community-fit__perspective {
		padding: 1.25rem;
	}

	/* Related guides: 2-col → 1-col */
	.community-guides {
		padding: var(--space-lg) 0;
	}

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