/**
 * Edmonton City Homes, Communities Hub styles
 * assets/css/communities-hub.css
 *
 * Scoped styling for the "Edmonton Communities Hub" template
 * (page-edmonton-communities.php). Every selector in this file
 * starts with .communities-hub or .communities-hub__ so nothing
 * leaks into other templates. Loaded conditionally from
 * functions.php via is_page_template('page-edmonton-communities.php').
 *
 * Design tokens consumed from assets/css/tokens.css:
 *   --color-ink-strong, --color-ink, --color-ink-soft, --color-ink-inverse,
 *   --color-surface, --color-surface-elevated, --color-surface-sunken,
 *   --color-border, --color-border-strong,
 *   --color-accent, --color-accent-hover, --color-accent-soft,
 *   --font-display (Fraunces), --font-body (Inter),
 *   --text-xs..--text-3xl, --leading-tight..--leading-relaxed,
 *   --weight-regular..--weight-bold,
 *   --space-1..--space-9, --radius-md..--radius-full,
 *   --shadow-sm, --shadow-md, --shadow-focus,
 *   --ease-snappy, --duration-fast, --duration-base,
 *   --container-narrow, --container-wide.
 *
 * Design intent: refined editorial directory. Photos do the visual
 * work; chrome stays out of the way. Deep navy ink on a white
 * surface, single cyan-teal accent used sparingly (links, focus
 * rings, primary CTA). Generous vertical rhythm. No purple gradients,
 * no aggressive shadows, no over-rounded corners. The grid scales
 * from a single phone column up to a five-across desktop row so the
 * quadrant trio always lands as one visual gesture on wide screens.
 */


/* ============================================================
   1. CONTAINER
   ============================================================
   Wide directory container, not the editorial 800px column used
   by SEO landing pages. Horizontal padding scales up at desktop
   so the cards do not run to the very edge of the viewport.
   ============================================================ */

.communities-hub {
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--space-4);
	color: var(--color-ink);
	font-family: var(--font-body);
	background-color: var(--color-surface);
}

@media (min-width: 768px) {
	.communities-hub {
		padding-inline: var(--space-6);
	}
}

.communities-hub h1,
.communities-hub h2,
.communities-hub h3,
.communities-hub h4 {
	font-family: var(--font-display);
	line-height: var(--leading-tight);
}

.communities-hub p {
	font-family: var(--font-body);
	line-height: var(--leading-relaxed);
}


/* ============================================================
   2. HERO
   ============================================================
   Centred opening. Featured image is wide but not full-bleed,
   capped at the editorial narrow width so faces and detail stay
   legible. The intro paragraph below the H1 is the page content
   body from WP admin, so Rory can edit copy without touching code.
   ============================================================ */

.communities-hub__hero {
	padding-top: var(--space-8);
	padding-bottom: var(--space-7);
	text-align: center;
}

.communities-hub__hero-figure {
	max-width: var(--container-narrow);
	margin: 0 auto var(--space-6);
}

.communities-hub__hero-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.communities-hub__title {
	font-size: var(--text-3xl);
	font-weight: var(--weight-semibold);
	color: var(--color-ink-strong);
	line-height: var(--leading-tight);
	margin: 0 0 var(--space-4);
	letter-spacing: -0.01em;
}

.communities-hub__intro {
	max-width: 60ch;
	margin: 0 auto;
	font-size: var(--text-lg);
	color: var(--color-ink-soft);
	line-height: var(--leading-relaxed);
}

.communities-hub__intro p {
	margin: 0;
}

.communities-hub__intro p + p {
	margin-top: var(--space-3);
}


/* ============================================================
   3. SECTIONS (shared)
   ============================================================
   Each section gets the same vertical rhythm so the page reads as
   a stack of equal-weight blocks. A single hairline border on the
   first section visually separates the hero from the directory
   without resorting to a heavy divider.
   ============================================================ */

.communities-hub__section {
	padding-top: var(--space-9);
	padding-bottom: var(--space-9);
}

.communities-hub__section--quadrants {
	border-top: 1px solid var(--color-border);
}

.communities-hub__section-title {
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	color: var(--color-ink-strong);
	line-height: var(--leading-tight);
	margin: 0 0 var(--space-3);
	text-align: center;
	letter-spacing: -0.005em;
}

.communities-hub__section-intro {
	max-width: 60ch;
	margin: 0 auto var(--space-7);
	text-align: center;
	color: var(--color-ink-soft);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
}


/* ============================================================
   4. GRID (shared between quadrants and neighbourhoods)
   ============================================================
   Auto-fill grid by default so the layout flexes to any number
   of cards. The quadrants modifier forces a 5-across row at the
   1024px breakpoint so the full set of Edmonton quadrants reads
   as a single horizontal gesture when there is room.
   ============================================================ */

.communities-hub__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (min-width: 1024px) {
	.communities-hub__grid--quadrants {
		grid-template-columns: repeat(5, 1fr);
	}
}

.communities-hub__grid--neighbourhoods {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}


/* ============================================================
   5. CARD (shared between quadrants and neighbourhoods)
   ============================================================
   Image-led card with a dark gradient overlay at the bottom so
   the label reads cleanly against any photo. Rest state is a
   barely-there lift; hover lifts a little more. Coming-soon
   cards opt out of all interactivity styles and pick up a small
   greyscale filter so the visual distinction reinforces the
   "not yet" message without needing a heavy badge.
   ============================================================ */

.communities-hub__card {
	position: relative;
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	color: inherit;
	transition:
		transform var(--duration-base) var(--ease-snappy),
		box-shadow var(--duration-base) var(--ease-snappy);
}

a.communities-hub__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

a.communities-hub__card:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 4px var(--color-accent-soft),
		var(--shadow-md);
}

.communities-hub__card-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--color-surface-sunken);
	filter: brightness(0.95);
}

.communities-hub__card-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--space-4);
	/* Gradient uses the same deep navy as --color-surface-inverse /
	   --color-ink-strong (#0a1628), expressed as rgba so we can fade it. */
	background: linear-gradient(
		to top,
		rgba(10, 22, 40, 0.85) 0%,
		rgba(10, 22, 40, 0.55) 50%,
		rgba(10, 22, 40, 0) 100%
	);
	color: var(--color-ink-inverse);
}

.communities-hub__card-name {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	color: var(--color-ink-inverse);
}

.communities-hub__card-badge {
	display: inline-block;
	margin-top: var(--space-2);
	padding: var(--space-1) var(--space-3);
	background: var(--color-ink-inverse);
	color: var(--color-ink-strong);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--radius-full);
}

.communities-hub__card--coming-soon {
	cursor: default;
}

.communities-hub__card--coming-soon:hover {
	transform: none;
	box-shadow: var(--shadow-sm);
}

.communities-hub__card--coming-soon .communities-hub__card-image {
	filter: grayscale(40%) brightness(0.95);
}


/* ============================================================
   6. QUADRANT GROUPING (Tier 2 neighbourhoods grouped by quadrant)
   ============================================================
   Each quadrant's neighbourhoods sit under a left-aligned H3 with
   a hairline underline. Grouping reinforces that "find a
   neighbourhood" still flows through the quadrant mental model.
   ============================================================ */

.communities-hub__quadrant-group {
	margin-bottom: var(--space-8);
}

.communities-hub__quadrant-group:last-child {
	margin-bottom: 0;
}

.communities-hub__quadrant-heading {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	color: var(--color-ink);
	margin: 0 0 var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}


/* ============================================================
   7. CTA SECTION
   ============================================================
   Subtle elevated background so the closing block reads as a
   slight pause. Negative horizontal margins break the band out
   to the viewport edge while the inner copy stays centred in
   the narrow editorial column. Primary CTA is the only place
   on the page where the accent colour appears as a fill.
   ============================================================ */

.communities-hub__section--cta {
	background: var(--color-surface-elevated);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: var(--space-6);
	padding-right: var(--space-6);
}

.communities-hub__section--cta > * {
	max-width: var(--container-narrow);
	margin-left: auto;
	margin-right: auto;
}

.communities-hub__cta-text {
	max-width: 60ch;
	margin: 0 auto var(--space-5);
	text-align: center;
	color: var(--color-ink);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
}

.communities-hub__cta-actions {
	display: flex;
	gap: var(--space-3);
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--space-5);
}

.communities-hub__cta-button {
	display: inline-block;
	min-width: 220px;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	text-align: center;
	text-decoration: none;
	transition: all var(--duration-base) var(--ease-snappy);
}

.communities-hub__cta-button--primary {
	background: var(--color-accent);
	color: var(--color-ink-inverse);
	border: 1px solid var(--color-accent);
}

.communities-hub__cta-button--primary:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
}

.communities-hub__cta-button--secondary {
	background: var(--color-surface);
	color: var(--color-ink);
	border: 1px solid var(--color-border-strong);
}

.communities-hub__cta-button--secondary:hover {
	border-color: var(--color-ink);
	background: var(--color-surface-elevated);
}

.communities-hub__cta-button:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

.communities-hub__cta-disclosure {
	text-align: center;
	color: var(--color-ink-soft);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	margin: 0;
}


/* ============================================================
   8. RESPONSIVE OVERRIDES
   ============================================================
   Compress vertical rhythm and tighten card sizing on phones so
   the page still feels generous without forcing endless scroll.
   The quadrant grid drops to two columns at phone width and the
   cards become squares; the wider 4/5 portrait ratio is for the
   neighbourhood photos where vertical real estate helps the
   image read.
   ============================================================ */

@media (max-width: 767px) {

	.communities-hub {
		padding-inline: var(--space-3);
	}

	.communities-hub__section {
		padding-top: var(--space-7);
		padding-bottom: var(--space-7);
	}

	.communities-hub__title {
		/* Override --text-3xl's 3rem minimum so the hero title does not
		   dominate small viewports. */
		font-size: clamp(2rem, 7vw, 3rem);
	}

	.communities-hub__grid--quadrants {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}

	.communities-hub__grid--quadrants .communities-hub__card {
		aspect-ratio: 1 / 1;
	}
}

@media (max-width: 480px) {

	.communities-hub__cta-actions {
		flex-direction: column;
	}

	.communities-hub__cta-button {
		width: 100%;
	}
}


/* ============================================================
   9. ACCESSIBILITY & MOTION
   ============================================================
   Honour the user's reduced-motion preference site-wide for this
   template. The focus-visible backstop guarantees that keyboard
   focus is never invisible, even on selectors not explicitly
   styled above.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

	.communities-hub *,
	.communities-hub *::before,
	.communities-hub *::after {
		transition: none !important;
		transform: none !important;
	}
}

.communities-hub *:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}