/**
 * Community directories (page-community-directory.php) — the hero and the
 * search-zone extras from teacher- / homeschool-community-directory.html.
 * The page shell, filter sidebar, Top Picks and club cards come from
 * bundle-club-directory.css, loaded first.
 *
 * Hero values include issue 12 (commit 9b886ba / d44b2cf): wider text
 * column (1120px box, 960px lines), tighter padding and bullets, 64px title
 * on desktop, longer white fade — so the whole intro plus the button sit
 * above the fold on a 1366×768 laptop.
 */

/* ── HERO ── */
.cd-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 680px;
	border-bottom: 1px solid var(--border);
}
/* Background photo slot: 3200×1400, subject in the right third. The gradient
 * shows until one is uploaded (Theme Options → Community Directories). */
.cd-hero-bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #E8DDD2 0%, #D8CEC2 25%, #E4D8CC 50%, #DDD0C2 75%, #F0E8DC 100%);
	background-size: cover;
	background-position: center right;
}
.cd-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 62%, rgba(255,255,255,0.6) 82%, rgba(255,255,255,0) 98%);
}
.cd-hero-content {
	position: relative;
	z-index: 2;
	text-align: left;
	padding: 40px 72px 44px;
	max-width: 1120px;
}
.cd-hero-eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--stone);
	margin-bottom: 16px;
}
.cd-hero-title {
	font-family: 'Inter', sans-serif;
	font-size: 56px;
	font-weight: 700;
	color: var(--charcoal);
	line-height: 1.05;
	letter-spacing: -0.05em;
	margin-bottom: 20px;
}
/* 64px is the largest that stays on one line and keeps the button above the fold. */
@media (min-width: 961px) { .cd-hero-title { font-size: 64px; } }
.cd-hero-sub {
	font-family: var(--ff-body); /* Inter since changes-20-10-2026: directory heroes have no Playfair */
	font-size: 18px;
	font-weight: 400;
	color: var(--ink);
	line-height: 1.3;
	max-width: 960px;
	margin-bottom: 16px;
}
.cd-hero-sub-bold { font-weight: 700; }
.cd-hero-sub-light { font-weight: 400; }
.cd-hero-explainer {
	font-family: var(--ff-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--ink);
	line-height: 1.75;
	max-width: 960px;
	margin-bottom: 24px;
}
.cd-hero-explainer + .cd-hero-explainer { margin-top: -8px; }
.cd-hero-bullets {
	list-style: none;
	margin: 12px 0 16px;
	padding: 0;
	max-width: 960px;
}
.cd-hero-bullets li {
	font-family: var(--ff-body);
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
	color: var(--ink);
	line-height: 1.75;
	position: relative;
	padding-left: 26px;
	margin-bottom: 6px;
}
.cd-hero-bullets li:last-child { margin-bottom: 0; }
.cd-hero-bullets li::before {
	content: '\276F\276F';
	position: absolute;
	left: 0;
	top: 0.05em;
	color: var(--ink);
	font-style: normal;
	letter-spacing: -1px;
	font-size: 13px;
}
.cd-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cd-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--charcoal);
	color: #fff;
	border: 1px solid var(--charcoal);
	border-radius: 6px;
	padding: 13px 32px;
	font-family: var(--ff-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
}
.cd-hero-btn:hover { background: var(--mascot); border-color: var(--mascot); color: #fff; }
@media (max-width: 960px) { .cd-hero-content { padding: 48px 32px; } }
@media (max-width: 768px) {
	.cd-hero-title { font-size: 44px; }
	.cd-hero-sub { font-size: 14px; }
}

/* ── SEARCH ZONE: "Search it like you say it · Watch a Demo" ── */
.cd-demo-divider { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 320px; margin: 14px auto 0; }
.cd-search-tip { font-family: 'Playfair Display', serif; font-style: italic; font-size: 15px; color: var(--ink); flex-shrink: 0; }
.cd-demo-line { flex: 1; height: 1px; background: var(--border); }
.cd-demo-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 0;
	font-family: var(--ff-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
	transition: color 0.2s;
}
.cd-demo-toggle:hover { color: var(--mascot); }
.cd-demo-chevron { transition: transform 0.2s ease; }
.cd-demo-toggle.open .cd-demo-chevron { transform: rotate(180deg); }
.cd-demo-panel { max-width: 560px; margin: 0 auto; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, margin-top 0.3s ease; }
.cd-demo-panel.open { max-height: 360px; margin-top: 14px; }
@media (max-width: 600px) { .cd-demo-divider { display: none; } }

/* Sidebar: "(per month)" after the Price label. */
.filter-group-label-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--stone); }

/* ── #138 / #139 / #141 (directory headers, desktop + photo) ────────────── */
/* #139 — desktop (961px+): text column 880px (paragraphs 736px), heading 52px
 * so it stays on one line, and a white fade sized to the text in px: solid
 * behind the text, gone ~1080px from the left so the photo shows. */
@media (min-width: 961px) {
	.cd-hero-content { max-width: 880px; }
	.cd-hero-sub,
	.cd-hero-explainer,
	.cd-hero-bullets { max-width: 736px; }
	.cd-hero-title { font-size: 52px; }
	.cd-hero-overlay { background: linear-gradient(to right, rgba(255,255,255,0.94) 0px, rgba(255,255,255,0.9) 640px, rgba(255,255,255,0.8) 800px, rgba(255,255,255,0.3) 940px, rgba(255,255,255,0) 1080px); }
}
/* Tablet / phone: the text spans the full width, so an even wash keeps it readable. */
@media (max-width: 960px) {
	.cd-hero-overlay { background: rgba(255,255,255,0.9); }
}
/* #138 — header photos: right-anchored, cover, at every width. The teacher
 * photo strips (Oct 29 update) are composed with the left side clear, so no
 * zoom or crop; the cream fills behind them while the photo loads. */
.cd-hero-bg { background-size: cover; background-position: right center; background-repeat: no-repeat; }
.cd-hero--teacher .cd-hero-bg { background-color: #F4ECE2; }
/* #141 (Oct 29 update) — no white panel behind the search area: the page's
 * cream shows all the way across, like .main-search-zone in the prototype. */
.cd-search-zone { background: transparent; }
/* #141 — the same 1px line as under the header, full width. */
.section-rule { display: block; width: 100%; border: 0; border-top: 1px solid var(--border); margin: 0; height: 0; }