/*
 * CitySaver homepage redesign — scoped under .citysaver-home
 *
 * All rules are nested under .citysaver-home so this file cannot
 * leak into the rest of the WordPress site (events, coupons,
 * directory, posts, citysavior pages, etc.). The hero remains
 * styled by style.css and is untouched.
 */

.citysaver-home {
	--home-max-width: 1440px;
	--rail-width: 320px;
	--gap-lg: 24px;
	--gap-md: 16px;
	--gap-sm: 12px;
	--card-radius: 10px;
	--shadow-card-hover: 0 8px 20px rgba(15, 19, 32, 0.08);
	--rail-sticky-top: 92px;
	--rail-ad-creative-premium: 720px;
	--rail-ad-creative-square: 400px;
	--rail-ad-runway-premium: clamp(400px, 56vh, 840px);
	--rail-ad-runway-square: clamp(240px, 36vh, 560px);
	--rail-ad-gap-premium: clamp(48px, 8vh, 96px);
	--rail-ad-gap-square: clamp(32px, 6vh, 64px);

	--accent-need: #c53030;
	--accent-event: #2b6cb0;
	--accent-deal: #2f855a;
	--accent-news: var(--navy-700, #1a2a4f);
	--accent-update: var(--navy-700, #1a2a4f);
	--accent-conversation: #6b46c1;
	--accent-goodnews: #2c7a7b;
	--accent-resource: #4a5568;
	--accent-sponsor: var(--gold-500, #c79a3e);

	display: block;
	background: var(--ink-50, #f7f8fa);
}

/* Wider scoped container — applies only on the homepage. */
.citysaver-home .container {
	max-width: var(--home-max-width);
	padding-inline: clamp(16px, 3vw, 40px);
}

/* ---------- Below-hero sponsor frame ---------- */
.citysaver-home__after-hero {
	padding: 18px 0 6px;
}

/* Top-of-page slim sponsor strip (below hero) */
.citysaver-home__after-hero--top {
	padding: 4px 0 2px;
}
.citysaver-home__after-hero--top:not(:has(.sponsor-placement)) {
	display: none;
}
.citysaver-home__after-hero--top .cs-sponsor-frame--strip {
	border: 1px solid rgba(199, 154, 62, 0.3);
	background: linear-gradient(180deg, rgba(253, 249, 239, 0.7), rgba(255, 255, 255, 0.95));
	border-radius: 6px;
	padding: 4px 8px;
}
.citysaver-home__after-hero--top .cs-sponsor-frame__strip-row {
	display: flex;
	align-items: center;
	gap: 10px 12px;
	min-height: 0;
}
.citysaver-home__after-hero--top .cs-sponsor-frame__label {
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-600, #b97a1e);
	font-weight: 700;
	margin: 0;
	flex-shrink: 0;
	white-space: nowrap;
}
.citysaver-home__after-hero--top .cs-sponsor-frame__slot {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.citysaver-home__after-hero--top .sponsor-placement {
	margin: 0;
	padding: 0;
}
.citysaver-home__after-hero--top .sponsor-placement--has-banner-image {
	width: min(100%, 728px);
	margin: 0 auto;
	max-height: 56px;
}
@media (max-width: 768px) {
	.citysaver-home__after-hero--top .cs-sponsor-frame__strip-row {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}
	.citysaver-home__after-hero--top .cs-sponsor-frame__slot {
		justify-content: stretch;
	}
	.citysaver-home__after-hero--top .sponsor-placement--has-banner-image {
		max-height: none;
	}
}

.citysaver-home__after-hero .cs-sponsor-frame {
	border: 1px solid rgba(199, 154, 62, 0.35);
	background: linear-gradient(180deg, rgba(253, 249, 239, 0.85), rgba(255, 255, 255, 1));
	border-radius: var(--card-radius);
	padding: 14px 18px;
}
.citysaver-home__after-hero .cs-sponsor-frame__label {
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-600, #b97a1e);
	font-weight: 700;
	margin-bottom: 8px;
}
.citysaver-home__after-hero .sponsor-placement {
	margin: 0;
}
.citysaver-home__after-hero .sponsor-placement--has-banner-image {
	width: min(100%, 728px);
	margin: 0 auto;
}

/* Mid-page thin strips (e.g. HOME_AFTER_RESOURCES) */
.citysaver-home__after-hero .citysaver-home__grid .sponsor-placement--has-banner-image,
.citysaver-home .sponsor-placement--has-banner-image {
	width: min(100%, 728px);
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Main grid ---------- */
.citysaver-home__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap-lg);
	padding: 8px 0 48px;
}
@media (min-width: 1100px) {
	.citysaver-home__grid {
		grid-template-columns: minmax(0, 1fr) var(--rail-width);
	}
}

.citysaver-home__main {
	min-width: 0;
}

/* ---------- Title row + filter tabs ---------- */
.citysaver-home__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-md);
	margin-bottom: var(--gap-md);
	padding-bottom: 6px;
	border-bottom: 2px solid var(--navy-900, #0a1226);
}
.citysaver-home__title-row h2 {
	font-size: 1.6rem;
	margin: 0;
	color: var(--navy-900, #0a1226);
	letter-spacing: -0.01em;
}
.citysaver-feed-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.citysaver-feed-filters__tab {
	background: transparent;
	border: 1px solid var(--ink-200, #dde0e7);
	color: var(--ink-700, #3a4055);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.citysaver-feed-filters__tab:hover {
	border-color: var(--navy-700, #1a2a4f);
	color: var(--navy-900, #0a1226);
}
.citysaver-feed-filters__tab.is-active {
	background: var(--navy-900, #0a1226);
	color: #fff;
	border-color: var(--navy-900, #0a1226);
}

/* ---------- Editorial grid ---------- */
.citysaver-home__editorial {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--gap-md);
	margin-top: var(--gap-md);
}
.citysaver-home__compact-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--gap-md);
	margin-top: var(--gap-md);
}
.citysaver-home__feed {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--gap-md);
	margin-top: var(--gap-lg);
}

/* ---------- Base card ---------- */
.cs-card {
	background: #fff;
	border-radius: var(--card-radius);
	border: 1px solid var(--ink-100, #eceff4);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
	position: relative;
	text-decoration: none;
	color: inherit;
}
.cs-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
	border-color: var(--ink-200, #dde0e7);
}
.cs-card__media-link {
	display: block;
	line-height: 0;
	background: var(--ink-100, #eceff4);
}
.cs-card__media {
	width: 100%;
	height: 100%;
	max-height: 240px;
	object-fit: cover;
	display: block;
}
.cs-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
}
.cs-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.cs-card__date {
	font-size: 0.72rem;
	color: var(--ink-500, #6e7388);
	letter-spacing: 0.02em;
}
.cs-card__title {
	font-size: 1.1rem;
	line-height: 1.32;
	margin: 0;
	color: var(--navy-900, #0a1226);
	font-weight: 700;
}
.cs-card__title a {
	color: inherit;
	text-decoration: none;
}
.cs-card__title a:hover {
	color: var(--gold-600, #b97a1e);
}
.cs-card__title--medium {
	font-size: 1rem;
	line-height: 1.3;
}
.cs-card__title--compact {
	font-size: 0.95rem;
	line-height: 1.3;
}
.cs-card__title--rail {
	font-size: 0.92rem;
	line-height: 1.3;
	margin: 4px 0 2px;
}
.cs-card__excerpt {
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--ink-700, #3a4055);
	margin: 0;
}
.cs-card__excerpt--medium {
	font-size: 0.88rem;
}
.cs-card__excerpt--compact {
	font-size: 0.82rem;
	color: var(--ink-600, #545a6e);
}
.cs-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 0.78rem;
	color: var(--ink-500, #6e7388);
	margin-top: auto;
	padding-top: 4px;
}
.cs-card__source {
	font-weight: 600;
}
.cs-card__cta {
	font-weight: 700;
	color: var(--navy-800, #0f1e3d);
	text-decoration: none;
	white-space: nowrap;
}
.cs-card__cta:hover {
	color: var(--gold-600, #b97a1e);
}
.cs-card__cta--compact {
	font-size: 0.8rem;
	margin-top: 6px;
}

/* ---------- Variant: featured ---------- */
.cs-card--featured {
	grid-column: 1 / -1;
}
.cs-card--featured .cs-card__media,
.cs-card--featured .cs-card__placeholder {
	max-height: 360px;
	aspect-ratio: 16 / 8;
}
.cs-card--featured .cs-card__title {
	font-size: 1.55rem;
	line-height: 1.22;
}
.cs-card--featured .cs-card__excerpt {
	font-size: 1rem;
}
@media (min-width: 720px) {
	.cs-card--featured {
		display: grid;
		grid-template-columns: 1.3fr 1fr;
		gap: 0;
	}
	.cs-card--featured .cs-card__media,
	.cs-card--featured .cs-card__placeholder {
		max-height: none;
		height: 100%;
		min-height: 320px;
		aspect-ratio: auto;
	}
	.cs-card--featured .cs-card__body {
		padding: 22px 24px 24px;
	}
}

/* ---------- Variant: medium ---------- */
.cs-card--medium .cs-card__media,
.cs-card--medium .cs-card__placeholder {
	aspect-ratio: 16 / 9;
	max-height: 200px;
}

/* ---------- Variant: compact ---------- */
.cs-card--compact {
	flex-direction: row;
	min-height: 96px;
}
.cs-card__stripe {
	width: 4px;
	flex: 0 0 4px;
	background: var(--accent-news);
	display: block;
}
.cs-card__stripe--need { background: var(--accent-need); }
.cs-card__stripe--event { background: var(--accent-event); }
.cs-card__stripe--local_deal { background: var(--accent-deal); }
.cs-card__stripe--local_news { background: var(--accent-news); }
.cs-card__stripe--city_update { background: var(--accent-update); }
.cs-card__stripe--conversation { background: var(--accent-conversation); }
.cs-card__stripe--good_news { background: var(--accent-goodnews); }
.cs-card__stripe--resource { background: var(--accent-resource); }
.cs-card__stripe--community_sponsor { background: var(--accent-sponsor); }

.cs-card--compact .cs-card__body {
	padding: 12px 14px;
}

/* ---------- Need-medium accent ----------
 * When a Need lands in the medium variant (always, in the main feed) we want
 * it to read as an action card, not an article. Red left rail + title tint
 * makes the urgency visible without changing the layout.
 */
.citysaver-home .cs-card--medium[data-cs-card-kind="need"] {
	border-left: 3px solid var(--accent-need, #c53030);
}
.citysaver-home .cs-card--medium[data-cs-card-kind="need"] .cs-card__title--medium {
	color: #7a1c1c;
}

/* ---------- Variant: rail ---------- */
.cs-card--rail {
	display: grid;
	grid-template-columns: 72px 1fr;
	align-items: stretch;
	gap: 0;
	text-decoration: none;
}
.cs-card__rail-image {
	width: 72px;
	height: 72px;
	object-fit: cover;
	display: block;
}
.cs-card--rail .cs-card__placeholder {
	width: 72px;
	height: 72px;
	min-height: 72px;
}
.cs-card__rail-body {
	padding: 8px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.cs-card__rail-body .cs-card__date {
	font-size: 0.7rem;
}

/* ---------- Variant: sponsored frame ---------- */
.cs-sponsor-frame {
	border: 1px solid rgba(199, 154, 62, 0.45);
	background: linear-gradient(180deg, rgba(253, 249, 239, 0.6), #fff 60%);
}
.cs-sponsor-frame__label {
	font-size: 0.65rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-600, #b97a1e);
	font-weight: 700;
	padding: 8px 16px 0;
}
.cs-sponsor-frame__disclosure {
	font-size: 0.7rem;
	color: var(--ink-500, #6e7388);
	font-style: italic;
	padding-top: 4px;
}

/* ---------- Placeholders ---------- */
.cs-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 160px;
	background: linear-gradient(135deg, var(--accent-news), color-mix(in srgb, var(--accent-news) 60%, white));
	color: rgba(255, 255, 255, 0.92);
}
.cs-card__placeholder svg {
	width: 56px;
	height: 56px;
	opacity: 0.85;
}
.cs-card__placeholder--need { background: linear-gradient(135deg, var(--accent-need), color-mix(in srgb, var(--accent-need) 55%, white)); }
.cs-card__placeholder--event { background: linear-gradient(135deg, var(--accent-event), color-mix(in srgb, var(--accent-event) 55%, white)); }
.cs-card__placeholder--local_deal { background: linear-gradient(135deg, var(--accent-deal), color-mix(in srgb, var(--accent-deal) 55%, white)); }
.cs-card__placeholder--local_news { background: linear-gradient(135deg, var(--accent-news), color-mix(in srgb, var(--accent-news) 55%, white)); }
.cs-card__placeholder--city_update { background: linear-gradient(135deg, var(--accent-update), color-mix(in srgb, var(--accent-update) 55%, white)); }
.cs-card__placeholder--conversation { background: linear-gradient(135deg, var(--accent-conversation), color-mix(in srgb, var(--accent-conversation) 55%, white)); }
.cs-card__placeholder--good_news { background: linear-gradient(135deg, var(--accent-goodnews), color-mix(in srgb, var(--accent-goodnews) 55%, white)); }
.cs-card__placeholder--resource { background: linear-gradient(135deg, var(--accent-resource), color-mix(in srgb, var(--accent-resource) 55%, white)); }
.cs-card__placeholder--community_sponsor { background: linear-gradient(135deg, var(--accent-sponsor), color-mix(in srgb, var(--accent-sponsor) 50%, white)); color: var(--navy-900); }
.cs-card__placeholder--sponsored { background: linear-gradient(135deg, var(--accent-sponsor), color-mix(in srgb, var(--accent-sponsor) 50%, white)); color: var(--navy-900); }

/* ---------- Badges ---------- */
.cs-card__badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--accent-news);
	white-space: nowrap;
}
.cs-card__badge--need { background: var(--accent-need); }
.cs-card__badge--event { background: var(--accent-event); }
.cs-card__badge--local_deal { background: var(--accent-deal); }
.cs-card__badge--local_news { background: var(--accent-news); }
.cs-card__badge--city_update { background: var(--accent-update); }
.cs-card__badge--conversation { background: var(--accent-conversation); }
.cs-card__badge--good_news { background: var(--accent-goodnews); }
.cs-card__badge--resource { background: var(--accent-resource); }
.cs-card__badge--community_sponsor { background: var(--accent-sponsor); color: var(--navy-900, #0a1226); }

/* CitySavior faith badge tones */
.cs-card__badge--savior-prayer,
.cs-card__stripe--savior-prayer { background: #7c3aed; }
.cs-card__badge--savior-fellowship,
.cs-card__stripe--savior-fellowship { background: #5b21b6; }
.cs-card__badge--savior-teaching,
.cs-card__stripe--savior-teaching { background: #1d4ed8; }
.cs-card__badge--savior-event,
.cs-card__stripe--savior-event { background: var(--accent-event); }
.cs-card__badge--savior-resource,
.cs-card__stripe--savior-resource { background: var(--accent-resource); }
.cs-card__badge--savior-update,
.cs-card__stripe--savior-update { background: var(--accent-update); }
.cs-card__badge--savior-article,
.cs-card__stripe--savior-article { background: #b45309; }
.cs-card__badge--savior-service,
.cs-card__stripe--savior-service { background: var(--accent-need); }

/* ---------- Right rail ---------- */
.citysaver-right-rail {
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
	min-width: 0;
}

/* Sectioned sticky ad zones — only the ad card follows; modules scroll with the page. */
.citysaver-rail-ad-zone {
	min-width: 0;
}
.citysaver-rail-ad-sticky__label {
	padding: 0 0 6px;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-600, #b97a1e);
	font-weight: 700;
}
@media (min-width: 1100px) {
	.citysaver-rail-ad-sticky {
		position: sticky;
		top: var(--rail-sticky-top, 92px);
		z-index: 2;
	}
	/* Premium 300×600: sticky runway + visual gap before next module. */
	.citysaver-rail-ad-zone--premium,
	.citysaver-rail__ad--premium {
		min-height: calc(var(--rail-ad-creative-premium) + var(--rail-ad-runway-premium));
		margin-bottom: var(--rail-ad-gap-premium);
	}
	/* Mid-rail 300×300: shorter runway than premium. */
	.citysaver-rail-ad-zone--secondary,
	.citysaver-rail__ad--square {
		min-height: calc(var(--rail-ad-creative-square) + var(--rail-ad-runway-square));
		margin-bottom: var(--rail-ad-gap-square);
	}
}
.citysaver-right-rail__module {
	background: #fff;
	border: 1px solid var(--ink-100, #eceff4);
	border-radius: var(--card-radius);
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.citysaver-right-rail__module h3 {
	font-size: 0.92rem;
	margin: 0;
	color: var(--navy-900, #0a1226);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-weight: 800;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--ink-100, #eceff4);
}
.citysaver-right-rail__module .cs-card--rail {
	border: none;
	border-radius: 6px;
	background: var(--ink-50, #f7f8fa);
}
.citysaver-right-rail__module .cs-card--rail:hover {
	background: #fff;
	box-shadow: var(--shadow-card-hover);
}

/* Fallback: hide ad sticky modules if markup renders without a creative. */
.citysaver-rail-ad-zone:not(:has(.sponsor-placement)) {
	display: none;
}
.citysaver-right-rail__module:has(.cs-sponsor-frame__label):not(:has(.sponsor-placement)) {
	display: none;
}

/* Sized sponsor slots in the rail. Width-constrained so 300px creatives fit cleanly. */
.citysaver-right-rail .sponsor-placement {
	margin: 0 auto;
}
.citysaver-right-rail .sponsor-placement--premium {
	display: block;
	width: 300px;
	margin: 0 auto;
	padding: 0;
}
.citysaver-right-rail .sponsor-placement--premium .sponsor-card__image {
	aspect-ratio: 300 / 600;
	width: 100%;
	max-width: 300px;
	height: auto;
	object-fit: contain;
}
.citysaver-right-rail .sponsor-placement--medium-square {
	width: min(100%, 300px);
}

/* In-feed 300×300 sponsor (HOME_FEED_INLINE) */
.citysaver-home__feed-ad {
	margin: 12px 0 16px;
}
.citysaver-home__feed-ad .cs-sponsor-frame {
	border: 1px solid rgba(199, 154, 62, 0.35);
	background: linear-gradient(180deg, rgba(253, 249, 239, 0.85), rgba(255, 255, 255, 1));
	border-radius: var(--card-radius);
	padding: 14px 18px;
}
.citysaver-home__feed-ad .cs-sponsor-frame__label {
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-600, #b97a1e);
	font-weight: 700;
	margin-bottom: 8px;
}
.citysaver-home__feed-ad .sponsor-placement {
	margin: 0 auto;
	padding: 0;
}
.citysaver-home__feed-ad .sponsor-placement--medium-square {
	width: min(100%, 300px);
}
.citysaver-home__feed-ad:not(:has(.sponsor-placement)) {
	display: none;
}
.citysaver-right-rail .sponsor-placement--rectangle {
	width: 300px;
	min-height: 250px;
}

/* ---------- City Pulse module ---------- */
.citysaver-rail-pulse__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2f855a;
	margin-right: 8px;
	vertical-align: middle;
	animation: cs-pulse 2.2s ease-in-out infinite;
}
@keyframes cs-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(47, 133, 90, 0.7); }
	50%      { box-shadow: 0 0 0 10px rgba(47, 133, 90, 0); }
}
.citysaver-rail-pulse__line {
	font-size: 0.92rem;
	color: var(--ink-700, #3a4055);
	font-weight: 600;
	margin: 0;
}
.citysaver-rail-pulse__hint {
	font-size: 0.78rem;
	color: var(--ink-500, #6e7388);
	margin: 0;
}
.citysaver-rail-pulse__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 14px;
	margin: 12px 0 6px;
}
.citysaver-rail-pulse__stat {
	margin: 0;
}
.citysaver-rail-pulse__stat-label {
	font-size: 0.72rem;
	color: var(--ink-500, #6e7388);
	margin: 0;
}
.citysaver-rail-pulse__stat-value {
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--navy-800, #1f3354);
	margin: 2px 0 0;
}

/* ---------- Newsletter module ---------- */
.citysaver-rail-newsletter form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.citysaver-rail-newsletter input[type="email"] {
	border: 1px solid var(--ink-200, #dde0e7);
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 0.9rem;
}
.citysaver-rail-newsletter button {
	background: var(--navy-900, #0a1226);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 9px 12px;
	font-weight: 700;
	font-size: 0.88rem;
	cursor: pointer;
}
.citysaver-rail-newsletter button:hover { background: var(--gold-600, #b97a1e); }
.citysaver-rail-newsletter__copy {
	font-size: 0.82rem;
	color: var(--ink-600, #545a6e);
	margin: 0;
}
.citysaver-rail-newsletter__success {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #6ee7b7;
	border-radius: 6px;
	padding: 8px;
	font-size: 0.85rem;
}

/* ---------- Support module ---------- */
.citysaver-rail-support__cta {
	display: inline-block;
	background: var(--gold-500, #c79a3e);
	color: var(--navy-900, #0a1226);
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 6px;
	text-decoration: none;
	font-size: 0.88rem;
}
.citysaver-rail-support__cta:hover {
	background: var(--gold-600, #b97a1e);
	color: #fff;
}
.citysaver-rail-support__copy {
	font-size: 0.85rem;
	color: var(--ink-700, #3a4055);
	margin: 0;
}

/* ---------- Submit Posts module ---------- */
.citysaver-rail-submit-posts__cta {
	display: inline-block;
	background: var(--gold-500, #c79a3e);
	color: var(--navy-900, #0a1226);
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 6px;
	text-decoration: none;
	font-size: 0.88rem;
}
.citysaver-rail-submit-posts__cta:hover {
	background: var(--gold-600, #b97a1e);
	color: #fff;
}
.citysaver-rail-submit-posts__copy {
	font-size: 0.85rem;
	color: var(--ink-700, #3a4055);
	margin: 0;
}
.citysaver-rail-submit-posts__secondary {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.82rem;
	color: var(--ink-600, #545a6e);
	text-decoration: underline;
}
.citysaver-rail-submit-posts__secondary:hover {
	color: var(--navy-800, #152040);
}

.hero__submit-hint {
	margin: 10px 0 0;
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.75);
	max-width: 36rem;
}

/* ---------- City actions strip (homepage app shortcuts) ---------- */
.citysaver-city-actions {
	padding: 20px 0 8px;
	background: var(--ink-50, #f7f8fa);
	border-bottom: 1px solid var(--ink-100, #eef0f4);
}
.citysaver-city-actions__title {
	margin: 0 0 12px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-500, #6b7280);
}
.citysaver-city-actions__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.citysaver-city-actions__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.citysaver-city-actions__tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 72px;
	padding: 12px 14px;
	border: 1px solid var(--ink-200, #e2e5eb);
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(10, 18, 38, 0.04);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.citysaver-city-actions__tile:hover {
	border-color: var(--navy-300, #3d5a8a);
	box-shadow: 0 2px 8px rgba(10, 18, 38, 0.08);
}
.citysaver-city-actions__label {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--navy-900, #0a1226);
	line-height: 1.25;
}
.citysaver-city-actions__hint {
	font-size: 0.78rem;
	color: var(--ink-600, #545a6e);
	line-height: 1.35;
}

/* Compact Get involved / CitySavior quick-actions strip */
.citysaver-city-actions--compact {
	padding: 6px 0 4px;
}
.citysaver-city-actions--compact .container {
	display: flex;
	align-items: center;
	gap: 10px 12px;
	flex-wrap: wrap;
}
.citysaver-city-actions--compact .citysaver-city-actions__title {
	margin: 0;
	white-space: nowrap;
	flex-shrink: 0;
}
.citysaver-city-actions__grid--compact {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
	margin: 0;
	padding-left: 0;
	list-style: none;
}
.citysaver-city-actions__grid--compact > li {
	flex: 0 0 auto;
	min-width: 0;
}
.citysaver-city-actions--compact .citysaver-city-actions__tile {
	flex-direction: row;
	align-items: center;
	min-height: 38px;
	padding: 6px 12px;
	white-space: nowrap;
	border-radius: 999px;
}
.citysaver-city-actions--compact .citysaver-city-actions__label {
	font-size: 0.85rem;
}
.citysaver-city-actions--compact .citysaver-city-actions__hint {
	display: none;
}
@media (min-width: 900px) {
	.citysaver-city-actions--compact .container {
		flex-wrap: nowrap;
	}
	.citysaver-city-actions__grid--compact {
		flex: 1;
		flex-wrap: wrap;
		overflow: visible;
	}
}

@media (max-width: 768px) {
	.citysaver-city-actions--compact .citysaver-city-actions__tile {
		min-height: 44px;
	}
}

/* City Missions grid (civic homepage) */
.cs-city-missions {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem 1.25rem;
	border: 1px solid #d1d9e6;
	border-radius: 12px;
	background: #f8fafc;
}
.cs-city-missions__head {
	margin-bottom: 1rem;
}
.cs-city-missions__title {
	margin: 0;
	font-size: 1.125rem;
	color: #0a1226;
}
.cs-city-missions__subtitle,
.cs-city-missions__hint {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: #4b5563;
}
.cs-city-missions__hint {
	font-size: 0.8125rem;
	color: #6b7280;
}
.cs-city-missions__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}
.cs-city-missions__card {
	padding: 14px 16px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #fff;
}
.cs-city-missions__card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}
.cs-city-missions__badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.cs-city-missions__badge--urgent {
	background: #fee2e2;
	color: #991b1b;
}
.cs-city-missions__badge--important {
	background: #fef3c7;
	color: #92400e;
}
.cs-city-missions__card-title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
}
.cs-city-missions__card-title a {
	color: inherit;
	text-decoration: none;
}
.cs-city-missions__card-summary {
	margin: 6px 0 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: #1c2230;
}
.cs-city-missions__progress {
	margin-top: 10px;
}
.cs-city-missions__progress-meta {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 0.75rem;
	color: #6b7280;
}
.cs-city-missions__progress-track {
	margin-top: 4px;
	height: 6px;
	background: #eef0f4;
	border-radius: 999px;
	overflow: hidden;
}
.cs-city-missions__progress-fill {
	height: 100%;
	background: #0a1226;
}
.cs-city-missions__card-actions {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.cs-city-missions__cta {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 6px;
	background: #0a1226;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}
.cs-city-missions__view {
	font-size: 0.8125rem;
	color: #1e3a8a;
	text-decoration: none;
}
.cs-city-missions__footer {
	margin: 1rem 0 0;
	font-size: 0.875rem;
}

/* Church Missions grid (CitySavior landing) */
.cs-church-missions {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem 1.25rem;
	border: 1px solid #d4c4a8;
	border-radius: 12px;
	background: #faf8f3;
}
.cs-church-missions__head {
	margin-bottom: 1rem;
}
.cs-church-missions__title {
	margin: 0;
	font-size: 1.125rem;
	color: #0a1226;
}
.cs-church-missions__subtitle,
.cs-church-missions__hint {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: #4b5563;
}
.cs-church-missions__hint {
	font-size: 0.8125rem;
	color: #6b7280;
}
.cs-church-missions__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}
.cs-church-missions__card {
	padding: 14px 16px;
	border: 1px solid #e8e0d0;
	border-radius: 10px;
	background: #fff;
}
.cs-church-missions__card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}
.cs-church-missions__badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.cs-church-missions__badge--urgent {
	background: #fee2e2;
	color: #991b1b;
}
.cs-church-missions__badge--important {
	background: #fef3c7;
	color: #92400e;
}
.cs-church-missions__card-title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
}
.cs-church-missions__card-title a {
	color: inherit;
	text-decoration: none;
}
.cs-church-missions__card-summary {
	margin: 6px 0 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: #1c2230;
}
.cs-church-missions__progress {
	margin-top: 10px;
}
.cs-church-missions__progress-meta {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 0.75rem;
	color: #6b7280;
}
.cs-church-missions__progress-track {
	margin-top: 4px;
	height: 6px;
	background: #eef0f4;
	border-radius: 999px;
	overflow: hidden;
}
.cs-church-missions__progress-fill {
	height: 100%;
	background: #c79a3e;
}
.cs-church-missions__card-actions {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.cs-church-missions__cta {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 6px;
	background: #0a1226;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}
.cs-church-missions__view {
	font-size: 0.8125rem;
	color: #1e3a8a;
	text-decoration: none;
}
.cs-church-missions__footer {
	margin: 1rem 0 0;
	font-size: 0.875rem;
}

/* CitySavior faith module card stacks */
.cs-savior-faith-module__cards {
	display: grid;
	gap: var(--gap-md);
}
.editorial-lower-grid.cs-landing-lower-grid {
	display: grid;
	gap: var(--gap-lg);
}

/* ---------- Lower modules below feed ---------- */
.citysaver-home__lower-modules {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--gap-md);
	margin-top: var(--gap-lg);
}
.citysaver-home__lower-modules .citysaver-right-rail__module {
	background: linear-gradient(180deg, #fff, var(--ink-50, #f7f8fa));
}

/* ---------- Mobile order tweaks ---------- */
@media (max-width: 1099px) {
	.citysaver-right-rail {
		order: 3;
	}
	.citysaver-rail-ad-sticky {
		position: static;
	}
	.citysaver-rail-ad-zone,
	.citysaver-rail-ad-zone--premium,
	.citysaver-rail-ad-zone--secondary,
	.citysaver-rail__ad--premium,
	.citysaver-rail__ad--square {
		min-height: 0;
		margin-bottom: 0;
	}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.cs-card { transition: none; }
	.cs-card:hover { transform: none; }
	.citysaver-rail-pulse__dot { animation: none; }
	.citysaver-feed-filters__tab { transition: none; }
}

/* ---------- Community Discussion Layer (homepage engagement zones) ---------- */
.citysaver-home .cs-card__engagement {
	display: none;
	margin-top: 12px;
	padding: 12px 14px;
	border-top: 1px solid var(--ink-100, #eef0f4);
	background: rgba(107, 70, 193, 0.06);
	border-radius: 0 0 var(--card-radius, 10px) var(--card-radius, 10px);
	font-size: 13px;
	line-height: 1.4;
}
.citysaver-home .cs-card__engagement.cs-card__engagement--ready {
	display: block;
}
.citysaver-home .cs-card__engagement-heading {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-700, #4b5462);
}
.citysaver-home .cs-card__engagement-subtext {
	margin: 4px 0 8px;
	font-size: 12px;
	color: var(--ink-600, #6a7280);
}
.citysaver-home .cs-card__comment {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-bottom: 6px;
}
.citysaver-home .cs-card__comment-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 24px;
	background: var(--ink-100, #eef0f4);
}
.citysaver-home .cs-card__comment-bubble {
	flex: 1 1 auto;
	background: #fff;
	border: 1px solid var(--ink-100, #eef0f4);
	border-radius: 10px;
	padding: 6px 10px;
	color: var(--ink-800, #2d3340);
}
.citysaver-home .cs-card__comment-author {
	font-weight: 700;
	color: var(--ink-900, #1a1f2c);
}
.citysaver-home .cs-card__comment-body {
	color: var(--ink-700, #4b5462);
}
.citysaver-home .cs-card__engagement-counts {
	margin: 8px 0;
	font-size: 12px;
	color: var(--ink-600, #6a7280);
}
.citysaver-home .cs-card__engagement-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	color: #6b46c1;
	text-decoration: none;
}
.citysaver-home .cs-card__engagement-cta:hover {
	text-decoration: underline;
}

/* Compact variant — single row, no background. */
.citysaver-home .cs-card__engagement--compact {
	margin-top: 8px;
	padding: 6px 0 0;
	background: transparent;
	border-top: 1px dashed var(--ink-100, #eef0f4);
	border-radius: 0;
	font-size: 12px;
	color: var(--ink-600, #6a7280);
}
.citysaver-home .cs-card__engagement--compact.cs-card__engagement--ready {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}
.citysaver-home .cs-card__engagement-sep {
	color: var(--ink-400, #a8b0bb);
}

/* ---------- Engagement push-down on featured/medium ----------
 * The engagement zone should occupy the lower portion of the card body
 * instead of sitting just below meta with a blank gap above. We make the
 * body a flex column, drop meta's `margin-top: auto` (the slot now does
 * that job), and give the slot `margin-top: auto` so it absorbs the
 * empty space. min-height keeps the empty state visually present.
 */
.citysaver-home .cs-card--featured .cs-card__body:has(.cs-card__engagement),
.citysaver-home .cs-card--medium   .cs-card__body:has(.cs-card__engagement) {
	display: flex;
	flex-direction: column;
}
.citysaver-home .cs-card--featured .cs-card__body:has(.cs-card__engagement) .cs-card__meta,
.citysaver-home .cs-card--medium   .cs-card__body:has(.cs-card__engagement) .cs-card__meta {
	margin-top: 0;
}
.citysaver-home .cs-card--featured .cs-card__engagement.cs-card__engagement--ready,
.citysaver-home .cs-card--medium   .cs-card__engagement.cs-card__engagement--ready {
	margin-top: auto;
	min-height: 96px;
}

/* Compact variant should be visually subordinate — explicitly slim. */
.citysaver-home .cs-card--compact .cs-card__engagement--compact {
	margin-top: 6px;
	padding: 4px 0 0;
	font-size: 11px;
	line-height: 1.3;
}

/* ---------- Compact cards in editorial grids: push engagement to bottom ----------
 * CSS Grid equal-height rows can stretch compact cards well beyond their
 * natural height. For all compact cards inside the compact-row and feed
 * sections, push the engagement zone to the bottom of the card body so blank
 * space appears between content and engagement rather than below it.
 *
 * JS adds cs-card--expanded-compact to compact cards whose offsetHeight ≥280px
 * and removes cs-card__engagement--compact from their slot, causing the full
 * engagement zone (heading + CTA) to render instead of the slim one-liner.
 * PHP adds data-cs-grid-role="editorial-compact" to mark cards in these grids.
 */
.citysaver-home .citysaver-home__compact-row .cs-card--compact .cs-card__body,
.citysaver-home .citysaver-home__feed .cs-card--compact .cs-card__body {
	display: flex;
	flex-direction: column;
}

.citysaver-home .citysaver-home__compact-row .cs-card--compact .cs-card__engagement,
.citysaver-home .citysaver-home__feed .cs-card--compact .cs-card__engagement {
	margin-top: auto;
}

.citysaver-home .cs-card--expanded-compact .cs-card__body,
.citysaver-home article[data-cs-grid-role="editorial-compact"] .cs-card__body {
	display: flex;
	flex-direction: column;
}

.citysaver-home .cs-card--expanded-compact .cs-card__engagement.cs-card__engagement--ready,
.citysaver-home article[data-cs-grid-role="editorial-compact"] .cs-card__engagement.cs-card__engagement--ready {
	margin-top: auto;
	min-height: 96px;
}

/* ---------- Homepage reaction controls (Like / Boost) ----------
 * Lightweight engagement that lives inside the engagement zone alongside the
 * existing counts row. Clicking navigates to /r/like or /r/boost on the app
 * (with returnTo set to the current page), which authenticates the user (or
 * redirects to sign-in) and idempotently inserts the reaction before 302 back.
 * Viewer-has-reacted active state is intentionally omitted on the homepage —
 * counts only.
 */
.citysaver-home .cs-card__reactions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 8px;
}
.citysaver-home .cs-card__reaction {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border: 1px solid var(--ink-200, #dde0e7);
	border-radius: 999px;
	background: #fff;
	font-size: 12px;
	font-weight: 700;
	color: var(--ink-700, #3a4055);
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
}
.citysaver-home .cs-card__reaction:hover {
	border-color: var(--navy-700, #1a2a4f);
	color: var(--navy-900, #0a1226);
}
.citysaver-home .cs-card__reaction--boost {
	color: var(--accent-need, #c53030);
	border-color: rgba(197, 48, 48, 0.4);
}
.citysaver-home .cs-card__reaction--boost:hover {
	background: rgba(197, 48, 48, 0.08);
	color: #7a1c1c;
}
.citysaver-home .cs-card__reaction-icon {
	display: inline-block;
	font-size: 13px;
	line-height: 1;
}
.citysaver-home .cs-card__reaction-count {
	font-size: 12px;
	color: var(--ink-600, #6a7280);
}
.citysaver-home .cs-card__reaction-count--compact {
	font-size: 11px;
	font-weight: 700;
	color: var(--ink-500, #8a93a3);
}
/* Compact engagement: tighter sizing so the button doesn't dominate. */
.citysaver-home .cs-card__engagement--compact .cs-card__reaction {
	padding: 2px 8px;
	font-size: 11px;
}
.citysaver-home .cs-card__engagement--compact .cs-card__reactions {
	gap: 6px;
	margin-right: 6px;
}

/* Per-kind accent tints on the engagement zone background. */
.citysaver-home [data-cs-card-kind="existing_discussion"] .cs-card__engagement {
	background: rgba(107, 70, 193, 0.10);
}
.citysaver-home [data-cs-card-kind="need"] .cs-card__engagement {
	background: rgba(197, 48, 48, 0.06);
}
.citysaver-home [data-cs-card-kind="need"] .cs-card__engagement-cta {
	color: #c53030;
}

/* Secondary CTA (e.g. "Discuss this need" on stale needs). */
.citysaver-home .cs-card__engagement-secondary {
	margin-top: 6px;
}
.citysaver-home .cs-card__engagement-secondary-cta {
	font-size: 11px;
	font-weight: 600;
	color: var(--ink-600, #6a7280);
	text-decoration: none;
}
.citysaver-home .cs-card__engagement-secondary-cta:hover {
	text-decoration: underline;
}

/* Forum-thread link beneath need primary CTA. */
.citysaver-home .cs-card__engagement-forum-link {
	margin-top: 4px;
	font-size: 11px;
}
.citysaver-home .cs-card__engagement-forum-link-a {
	color: #6b46c1;
	text-decoration: none;
}
.citysaver-home .cs-card__engagement-forum-link-a:hover {
	text-decoration: underline;
}

/* ---------- Need chips (server-rendered, JS-independent) ---------- */
.citysaver-home .cs-need-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 8px;
}
.citysaver-home .cs-need-chips--compact {
	margin: 2px 0 6px;
}
.citysaver-home .cs-need-chip {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ink-50, #f5f7fb);
	color: var(--ink-700, #4b5462);
	white-space: nowrap;
}
.citysaver-home .cs-need-chip--urgent {
	background: #fee2e2;
	color: #991b1b;
}
.citysaver-home .cs-need-chip--featured {
	background: #fef3c7;
	color: #92400e;
}
.citysaver-home .cs-need-chip--category {
	background: var(--ink-100, #eef0f4);
	color: var(--ink-700, #4b5462);
}
.citysaver-home .cs-need-chip--status {
	background: var(--ink-50, #f5f7fb);
	color: var(--ink-600, #6a7280);
}