/* Volunteer Blue — Home Page (Focused Funnel) bands.
   Upload to: wp-content/themes/Zephyr-Child/css/vb-home.css
   (companion to the vb-home-bands.php mu-plugin, which also accepts a copy
   sitting beside itself in wp-content/mu-plugins/ as a fallback)
   All classes are vbh- prefixed so nothing collides with Zephyr/Impreza. */

.vbh-hero,
.vbh-band {
	--vbh-navy: #0a2852;
	--vbh-blue: #1a56b0;
	--vbh-sky: #38b6ff;
	--vbh-sky-soft: #e8f4ff;
	--vbh-red: #e03131;
	--vbh-ink: #20262e;
	--vbh-muted: #5a6675;
	--vbh-line: #e3e8ef;
	--vbh-radius: 14px;
	--vbh-shadow: 0 2px 14px rgba(10, 40, 82, .08);
	--vbh-shadow-lg: 0 10px 34px rgba(10, 40, 82, .16);
	--vbh-maxw: 1200px;
}

.vbh-wrap {
	max-width: var(--vbh-maxw);
	margin: 0 auto;
	padding: 0 22px;
}

/* ---------- Buttons ---------- */
.vbh-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--vbh-red);
	color: #fff !important;
	font-family: Kanit, inherit;
	font-weight: 800;
	font-size: 15px;
	line-height: 1.2;
	padding: 13px 26px;
	border-radius: 10px;
	text-decoration: none !important;
	border: 0;
	cursor: pointer;
	transition: transform .12s ease, filter .12s ease;
}

.vbh-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
	color: #fff !important;
}

.vbh-btn-navy { background: var(--vbh-navy); }
.vbh-btn-sky  { background: linear-gradient(var(--vbh-sky), var(--vbh-blue)); }

/* ---------- HERO ---------- */
.vbh-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	overflow: hidden;
}

.vbh-hero-inner {
	max-width: var(--vbh-maxw);
	margin: 0 auto;
	padding: 78px 22px 82px;
	text-align: center;
}

/* Rich-text headline. Inline colour/size set in the editor overrides these. */
.vbh-hero-headline {
	font-family: Kanit, Inter, system-ui, sans-serif;
	font-weight: 800;
	font-size: 46px;
	line-height: 1.06;
	letter-spacing: .2px;
	max-width: 19ch;
	margin: 0 auto 26px;
	text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}

.vbh-hero-headline p { margin: 0 0 .3em; color: inherit; }
.vbh-hero-headline p:last-child { margin-bottom: 0; }

.vbh-hero .vbh-btn {
	padding: 16px 42px;
	font-size: 20px;
	border-radius: 12px;
}

.vbh-hero-sub {
	font-family: Kanit, Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ffd7d7;
	margin-top: 22px;
}

.vbh-hero-sub p { margin: 0; color: inherit; }

@media (max-width: 760px) {
	.vbh-hero-inner { padding: 56px 22px 64px; }
	.vbh-hero-headline { font-size: 32px; }
	.vbh-hero .vbh-btn { font-size: 17px; padding: 14px 32px; }
	.vbh-hero-sub { font-size: 16px; }
}

/* ---------- BAND ---------- */
.vbh-band { padding: 58px 0; }

.vbh-band-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.vbh-kick {
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--vbh-sky);
}

.vbh-band-head h2 {
	font-family: Kanit, Inter, system-ui, sans-serif;
	margin: 6px 0 0;
	font-size: 32px;
	line-height: 1.15;
	color: var(--vbh-navy);
}

.vbh-more {
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	color: var(--vbh-blue);
	text-decoration: none;
}

/* ---------- CARDS ---------- */
.vbh-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	align-items: stretch;
}

.vbh-cards-2 { grid-template-columns: repeat(2, 1fr); }
.vbh-cards-1 { grid-template-columns: minmax(0, 560px); justify-content: center; }

@media (max-width: 1000px) {
	.vbh-cards, .vbh-cards-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.vbh-cards, .vbh-cards-2, .vbh-cards-1 { grid-template-columns: 1fr; }
}

.vbh-card {
	background: #fff;
	border: 1px solid var(--vbh-line);
	border-radius: var(--vbh-radius);
	box-shadow: var(--vbh-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .15s ease, box-shadow .15s ease;
}

.vbh-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--vbh-shadow-lg);
}

.vbh-card-pic {
	position: relative;
	height: 210px;
	background-color: #123f80;
	background-size: cover;
	background-position: center top;
}

.vbh-card-pill {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--vbh-red);
	color: #fff;
	font-family: Kanit, inherit;
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 999px;
}

.vbh-card-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.vbh-card-body h3 {
	font-family: Kanit, Inter, system-ui, sans-serif;
	margin: 0;
	font-size: 21px;
	line-height: 1.2;
	color: var(--vbh-navy);
}

.vbh-card-body h3 a {
	color: inherit;
	text-decoration: none;
}

.vbh-card-meta {
	font-size: 13.5px;
	color: var(--vbh-muted);
}

.vbh-card-body p {
	margin: 2px 0 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--vbh-ink);
}

.vbh-card-body .vbh-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* ---------- Editor-only empty state ---------- */
.vbh-empty {
	max-width: var(--vbh-maxw);
	margin: 24px auto;
	padding: 14px 18px;
	background: #fff8e6;
	border: 1px solid #f4e2b0;
	border-radius: 12px;
	color: #6b5200;
	font-size: 14px;
}

/* Keep the scroll target clear of the sticky header (mirrors the popup snippet). */
#take-action { scroll-margin-top: 100px; }