/**
 * CaryTamura — the /neighborhoods/ page.
 *
 * Loaded on that page only, after page-hero.css and sections.css. It tunes the
 * CT Page Hero band to the live neighborhoods hero and lays out Areas of
 * Expertise: a Loop Grid of every published Neighborhood (rb_re_neighborhood,
 * Query ID `ct_neighborhoods`, in each record's Order) through
 * CT Loop – Neighborhood Card. Start Your Property Search (sections.css) and
 * Work With Cary are the global templates.
 *
 * VALUES. Measured from carytamura.com/neighborhoods at 1440, 1024, 768 and
 * 375 wide (FACT). Cards are 10:7 at every width, two across above 768 and one
 * from 768; the zoom and LEARN MORE reveal run above 1024, LEARN MORE shows at
 * rest from 1024 to 769 and not at all from 768; sections leave the 12px frame
 * from 767.
 */

/* ------------------------------------------------------------------ hero --
 * The shared intro band: 600px, framed 12px, one flat 45% scrim. */
.ct-page-hero.e-con {
	--width: calc(100% - 2 * var(--ct-body-padding));
	margin: var(--ct-body-padding) var(--ct-body-padding) 0;
	min-height: 0;
	height: 600px;
	padding: 0 var(--ct-body-padding);
}

.ct-page-hero::before {
	background-color: var(--ct-overlay-strong);
}

.ct-page-hero::after {
	content: none;
}

.ct-page-hero .ct-page-hero__title {
	max-width: 900px;
}

.ct-page-hero .ct-page-hero__title .elementor-heading-title {
	margin: 0 0 24px;
	font-size: var(--ct-size-h1);
	line-height: 1.25;
}

.ct-page-body:has(.ct-hoods) {
	padding-block: 0;
}

/* ------------------------------------------------------- areas of expertise */
.ct-hoods.e-con {
	--width: calc(100% - 2 * var(--ct-body-padding));
	--padding-top: var(--ct-section-padding);
	--padding-bottom: var(--ct-section-padding);
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 32px;
	--flex-wrap: nowrap;    /* Elementor's phone wrap undersizes the 10:7 grid */
	margin-inline: var(--ct-body-padding);
}

.ct-hoods .ct-hoods__title {
	width: 100%;
	max-width: 860px;
	margin-inline: auto;
}

.ct-hoods__title .elementor-heading-title {
	font-family: var(--ct-font-display);
	font-size: var(--ct-size-h2);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	color: var(--ct-ink);
}

.ct-hoods__grid .elementor-loop-container {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
}

/* ------------------------------------------------------------------- card --
 * Photo cropped to 10:7, a flat 30% scrim, the name centred and, on desktop
 * hover, the photo zooms 1.1 while LEARN MORE opens beneath the name (0.4s). */
.ct-hood-card.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
	--justify-content: center;
	--align-items: center;
	position: relative;
	aspect-ratio: 10 / 7;
	overflow: hidden;
}

.ct-hood-card .ct-hood-card__img {
	position: absolute;
	inset: 0;
	margin: 0;
}

.ct-hood-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease-in-out;
}

.ct-hood-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

.ct-hood-card .ct-hood-card__name,
.ct-hood-card .ct-hood-card__more {
	position: static;
	z-index: 2;
	width: 70%;
	text-align: center;
}

.ct-hood-card__name .elementor-heading-title {
	position: relative;
	z-index: 2;
	margin: 0 0 25px;
	font-family: var(--ct-font-display);
	font-size: var(--ct-size-h3);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ct-on-dark);
}

.ct-hood-card__name .elementor-heading-title a {
	position: static;
	color: inherit;
	text-decoration: none;
}

/* The name's link covers the whole card, so the photo is one target. */
.ct-hood-card__name .elementor-heading-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.ct-hood-card__name .elementor-heading-title a:focus-visible {
	outline: none;
}

.ct-hood-card:has(a:focus-visible) {
	outline: 2px solid var(--ct-accent);
	outline-offset: -2px;
}

/* LEARN MORE is the shared inverse button (buttons-links.css: white fill,
 * accent label; hover clears the fill to a white label, 200ms), linked to the
 * record like the card and lifted above the card's link so it takes its own
 * hover and click. */
.ct-hood-card .ct-hood-card__more {
	position: relative;
	z-index: 4;
	overflow: hidden;
	transition: max-height 0.4s linear, opacity 0.4s linear;
}

/* LEARN MORE stays open on tablets, which have no hover; desktop reveals it. */
@media (min-width: 1025px) {
	.ct-hood-card .ct-hood-card__more {
		max-height: 0;
		opacity: 0;
	}

	.ct-hood-card:hover .ct-hood-card__img img {
		transform: scale(1.1);
	}

	.ct-hood-card:hover .ct-hood-card__more {
		max-height: 90px;
		opacity: 1;
	}
}

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 768px) {
	.ct-page-hero .ct-page-hero__title .elementor-heading-title {
		font-size: 32px;
	}

	.ct-hoods.e-con {
		--padding-top: var(--ct-section-padding-compact);
		--padding-bottom: var(--ct-section-padding-compact);
	}

	.ct-hoods__grid .elementor-loop-container {
		grid-template-columns: minmax(0, 1fr);
	}

	.ct-hood-card .ct-hood-card__more {
		display: none;
	}

	.ct-hood-card__name .elementor-heading-title {
		margin-bottom: 0;
	}
}

@media (max-width: 767px) {
	.ct-page-hero.e-con {
		--width: 100%;
		margin: 0;
	}

	.ct-hoods.e-con {
		--width: 100%;
		--row-gap: 16px;
		margin-inline: 0;
	}

	.ct-hoods .ct-hoods__title {
		padding-inline: 25px;
	}

	.ct-hoods__title .elementor-heading-title {
		font-size: 32px;
		line-height: 1.4;
	}

	.ct-hood-card__name .elementor-heading-title {
		font-size: var(--ct-size-h4);
		line-height: 1.6;
	}
}