/* Mlokole Binti Church Core — components */
:root {
	--mlb-navy: #10244A;
	--mlb-navy-2: #0B1A37;
	--mlb-royal: #1D4ED8;
	--mlb-gold: #D4AF69;
	--mlb-gold-2: #C79B4B;
	--mlb-ivory: #F8F6F0;
	--mlb-white: #FFFFFF;
	--mlb-ink: #202938;
	--mlb-muted: #667085;
	--mlb-line: #E6E1D3;
	--mlb-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--mlb-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mlb-radius: 16px;
	--mlb-radius-sm: 10px;
	--mlb-space-1: 8px;
	--mlb-space-2: 16px;
	--mlb-space-3: 24px;
	--mlb-space-4: 40px;
	--mlb-space-5: clamp(56px, 8vw, 104px);
	--mlb-shadow: 0 1px 2px rgba(16, 36, 74, .06), 0 10px 28px rgba(16, 36, 74, .08);
	--mlb-shadow-lift: 0 2px 6px rgba(16, 36, 74, .08), 0 22px 48px rgba(16, 36, 74, .16);
	--mlb-ease: cubic-bezier(.22, .61, .36, 1);
	--mlb-fast: .2s;
	--mlb-med: .45s;
	--mlb-slow: .8s;
}

.mlb-wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }

/* ---------- Buttons ---------- */
.mlb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 26px;
	border-radius: 999px; border: 1.5px solid transparent;
	font: 600 15px/1.2 var(--mlb-body); letter-spacing: .01em;
	text-decoration: none !important; white-space: nowrap;
	transition: background-color var(--mlb-fast) ease, color var(--mlb-fast) ease, border-color var(--mlb-fast) ease, transform var(--mlb-fast) ease, box-shadow var(--mlb-fast) ease;
}
.mlb-btn .mlb-arrow { flex: none; transition: transform var(--mlb-fast) var(--mlb-ease); }
.mlb-btn:hover .mlb-arrow, .mlb-btn:focus-visible .mlb-arrow { transform: translateX(4px); }
.mlb-btn:active { transform: translateY(1px); }
.mlb-btn:focus-visible { outline: 3px solid var(--mlb-gold); outline-offset: 3px; }
.mlb-btn--primary { background: var(--mlb-navy); color: #fff !important; }
.mlb-btn--primary:hover { background: var(--mlb-royal); color: #fff !important; box-shadow: 0 10px 24px rgba(29, 78, 216, .25); }
.mlb-btn--gold { background: var(--mlb-gold); color: var(--mlb-navy) !important; }
.mlb-btn--gold:hover { background: #E2C281; color: var(--mlb-navy) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .25); }
.mlb-btn--ghost { background: rgba(255, 255, 255, .06); color: #fff !important; border-color: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mlb-btn--ghost:hover { background: #fff; color: var(--mlb-navy) !important; border-color: #fff; }
.mlb-btn--outline { background: transparent; color: var(--mlb-navy) !important; border-color: var(--mlb-navy); }
.mlb-btn--outline:hover { background: var(--mlb-navy); color: #fff !important; }

/* ---------- Hero carousel ---------- */
.mlb-hero {
	position: relative; isolation: isolate; overflow: hidden;
	height: clamp(540px, 86vh, 780px);
	background: var(--mlb-navy-2); color: #fff;
}
.mlb-hero__track { position: absolute; inset: 0; }
.mlb-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--mlb-slow) var(--mlb-ease), visibility 0s linear var(--mlb-slow); }
.mlb-hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity var(--mlb-slow) var(--mlb-ease), visibility 0s; z-index: 2; }
.mlb-hero__slide.is-leaving { visibility: visible; z-index: 1; }
.mlb-hero:not(.is-ready) .mlb-hero__slide:first-child { opacity: 1; visibility: visible; }
.mlb-hero__img {
	position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover; transform: scale(1.06); transition: transform 7s linear;
}
.mlb-hero__slide.is-active .mlb-hero__img { transform: scale(1); }
.mlb-hero__shade {
	position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(11, 26, 55, .88) 0%, rgba(11, 26, 55, .62) 42%, rgba(11, 26, 55, .12) 78%),
		linear-gradient(0deg, rgba(11, 26, 55, .55) 0%, rgba(11, 26, 55, 0) 40%);
}
.mlb-hero__content {
	position: relative; z-index: 2; height: 100%;
	width: min(1200px, 100% - 32px); margin-inline: auto;
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	padding: 40px 0 96px;
}
.mlb-hero__content > * { max-width: 640px; }
.mlb-hero__eyebrow {
	margin: 0 0 14px; color: var(--mlb-gold);
	font: 600 13px/1.3 var(--mlb-body); letter-spacing: .16em; text-transform: uppercase;
}
.mlb-hero__title {
	margin: 0 0 18px !important; color: #fff !important;
	font-family: var(--mlb-head) !important; font-weight: 700 !important;
	font-size: clamp(34px, 5.4vw, 66px) !important; line-height: 1.08 !important; letter-spacing: -.01em;
	text-wrap: balance;
}
.mlb-hero__text {
	margin: 0 0 30px; color: rgba(255, 255, 255, .9);
	font: 400 clamp(16px, 1.45vw, 19px)/1.65 var(--mlb-body); max-width: 520px;
}
.mlb-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* entrance */
.mlb-js .mlb-hero.is-ready .mlb-hero__slide .mlb-hero__content > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--mlb-ease), transform .7s var(--mlb-ease); }
.mlb-js .mlb-hero.is-ready .mlb-hero__slide.is-active .mlb-hero__content > * { opacity: 1; transform: none; }
.mlb-js .mlb-hero.is-ready .mlb-hero__slide.is-active .mlb-hero__content > :nth-child(2) { transition-delay: .12s; }
.mlb-js .mlb-hero.is-ready .mlb-hero__slide.is-active .mlb-hero__content > :nth-child(3) { transition-delay: .24s; }
.mlb-js .mlb-hero.is-ready .mlb-hero__slide.is-active .mlb-hero__content > :nth-child(4) { transition-delay: .36s; }

/* controls */
.mlb-hero__nav {
	position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px; border-radius: 50%; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .12) !important; color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .35) !important;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	cursor: pointer; box-shadow: none !important;
	transition: background-color var(--mlb-fast) ease, color var(--mlb-fast) ease, transform var(--mlb-fast) ease;
}
.mlb-hero__nav:hover { background: #fff !important; color: var(--mlb-navy) !important; }
.mlb-hero__nav:focus-visible, .mlb-hero__dot:focus-visible, .mlb-hero__pause:focus-visible { outline: 3px solid var(--mlb-gold); outline-offset: 3px; }
.mlb-hero__nav--prev { left: clamp(12px, 2.5vw, 32px); }
.mlb-hero__nav--next { right: clamp(12px, 2.5vw, 32px); }
.mlb-hero__nav[hidden], .mlb-hero__dots[hidden] { display: none !important; }

.mlb-hero__dots {
	position: absolute; z-index: 5; bottom: 34px; left: 50%; transform: translateX(-50%);
	width: min(1200px, 100% - 32px);
	display: flex; align-items: center; gap: 10px;
}
.mlb-hero__dot {
	position: relative; width: 34px; height: 24px; padding: 0 !important; margin: 0;
	background: none !important; border: 0 !important; box-shadow: none !important; cursor: pointer;
}
.mlb-hero__dot span { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: rgba(255, 255, 255, .38); overflow: hidden; }
.mlb-hero__dot span::after { content: ""; position: absolute; inset: 0; background: var(--mlb-gold); transform: scaleX(0); transform-origin: left; }
.mlb-hero__dot.is-active { width: 56px; }
.mlb-hero__dot.is-active span::after { transform: scaleX(1); }
.mlb-hero.is-ticking .mlb-hero__dot.is-active span::after { animation: mlb-progress var(--mlb-interval, 6s) linear both; }
@keyframes mlb-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mlb-hero__pause {
	width: 34px; height: 34px; margin-left: 6px; padding: 0 !important; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .12) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .35) !important; cursor: pointer; box-shadow: none !important;
}
.mlb-hero__pause .i-play { display: none; }
.mlb-hero.is-paused .mlb-hero__pause .i-play { display: block; }
.mlb-hero.is-paused .mlb-hero__pause .i-pause { display: none; }

@media (max-width: 767px) {
	.mlb-hero { min-height: 560px; height: 88svh; max-height: 720px; }
	.mlb-hero__shade { background: linear-gradient(0deg, rgba(11, 26, 55, .92) 0%, rgba(11, 26, 55, .7) 45%, rgba(11, 26, 55, .2) 100%); }
	.mlb-hero__content { justify-content: flex-end; padding: 32px 0 104px; }
	.mlb-hero__text { margin-bottom: 22px; }
	.mlb-hero__actions { width: 100%; }
	.mlb-hero__actions .mlb-btn { flex: 1 1 100%; }
	.mlb-hero__nav { top: auto; bottom: 22px; transform: none; width: 44px; height: 44px; }
	.mlb-hero__nav--prev { left: auto; right: 72px; }
	.mlb-hero__nav--next { right: 16px; }
	.mlb-hero__dots { bottom: 30px; left: 16px; transform: none; width: auto; }
	.mlb-hero__dot { width: 22px; }
	.mlb-hero__dot.is-active { width: 40px; }
}

/* ---------- Section heads ---------- */
.mlb-section-head { text-align: center; max-width: 720px; margin: 0 auto var(--mlb-space-4); }
.mlb-section-title {
	margin: 0 0 12px !important; color: var(--mlb-navy) !important;
	font-family: var(--mlb-head) !important; font-weight: 700 !important;
	font-size: clamp(30px, 3.6vw, 46px) !important; line-height: 1.12 !important;
}
.mlb-section-title::after { content: ""; display: block; width: 56px; height: 3px; margin: 16px auto 0; border-radius: 3px; background: var(--mlb-gold); }
.mlb-section-intro { margin: 0; color: var(--mlb-muted); font: 400 17px/1.7 var(--mlb-body); }
.mlb-section-foot { display: flex; justify-content: center; margin-top: var(--mlb-space-4); }

/* ---------- Programs ---------- */
.mlb-programs { padding: var(--mlb-space-5) 0; background: var(--mlb-ivory); }
.mlb-grid { display: grid; gap: 24px; }
.mlb-grid + .mlb-grid { margin-top: 24px; }
.mlb-grid--featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mlb-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199px) { .mlb-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .mlb-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) { .mlb-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
	.mlb-grid--featured, .mlb-grid--compact { grid-template-columns: 1fr; }
	.mlb-grid { gap: 18px; }
}

.mlb-card {
	position: relative; display: flex; flex-direction: column; height: 100%;
	background: var(--mlb-white); border: 1px solid var(--mlb-line); border-radius: var(--mlb-radius);
	overflow: hidden; box-shadow: var(--mlb-shadow);
	transition: transform var(--mlb-med) var(--mlb-ease), box-shadow var(--mlb-med) var(--mlb-ease), border-color var(--mlb-fast) ease;
}
.mlb-card:hover { transform: translateY(-6px); box-shadow: var(--mlb-shadow-lift); border-color: rgba(212, 175, 105, .6); }
.mlb-card:focus-within { box-shadow: var(--mlb-shadow-lift), 0 0 0 3px var(--mlb-gold); }
.mlb-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #E9E5DA; }
.mlb-card--featured .mlb-card__media { aspect-ratio: 4 / 3; }
.mlb-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--mlb-ease); }
.mlb-card:hover .mlb-card__media img { transform: scale(1.06); }
.mlb-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16, 36, 74, .28), rgba(16, 36, 74, 0) 45%); pointer-events: none; }
.mlb-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--mlb-navy), #1B3A73); }
.mlb-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.mlb-card--featured .mlb-card__body { padding: 26px 28px 28px; }
.mlb-card__label { margin: 0 0 8px; color: var(--mlb-gold-2); font: 600 12px/1.3 var(--mlb-body); letter-spacing: .14em; text-transform: uppercase; }
.mlb-card__title { margin: 0 0 10px !important; font-family: var(--mlb-head) !important; font-weight: 700 !important; font-size: 22px !important; line-height: 1.25 !important; }
.mlb-card--featured .mlb-card__title { font-size: clamp(24px, 2.2vw, 28px) !important; }
.mlb-card__link { color: var(--mlb-navy) !important; text-decoration: none !important; }
.mlb-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mlb-card__link:focus-visible { outline: none; }
.mlb-card__text { margin: 0 0 16px; color: var(--mlb-muted); font: 400 15px/1.65 var(--mlb-body); }
.mlb-card__meta { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--mlb-ink); font: 500 13.5px/1.4 var(--mlb-body); }
.mlb-card__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--mlb-royal); font: 600 14.5px/1.2 var(--mlb-body); }
.mlb-card__cta .mlb-arrow { transition: transform var(--mlb-fast) var(--mlb-ease); }
.mlb-card:hover .mlb-card__cta .mlb-arrow { transform: translateX(5px); }

/* ---------- About highlights (existing welcome section) ---------- */
.mlb-highlights { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mlb-highlights li {
	display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px;
	background: var(--mlb-white); border: 1px solid var(--mlb-line); border-radius: 999px;
	color: var(--mlb-navy); font: 500 14px/1.3 var(--mlb-body);
}
.mlb-highlights__mark { width: 8px; height: 8px; border-radius: 50%; background: var(--mlb-gold); flex: none; }

/* ---------- Events ---------- */
.mlb-events { padding: var(--mlb-space-5) 0; background: var(--mlb-white); }
.mlb-events__list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.mlb-event { display: flex; gap: 18px; padding: 20px; background: var(--mlb-ivory); border: 1px solid var(--mlb-line); border-radius: var(--mlb-radius); transition: transform var(--mlb-med) var(--mlb-ease), box-shadow var(--mlb-med) var(--mlb-ease); }
.mlb-event:hover { transform: translateY(-4px); box-shadow: var(--mlb-shadow); }
.mlb-event__date { flex: none; width: 72px; padding: 10px 0; text-align: center; border-radius: 12px; background: var(--mlb-navy); color: #fff; }
.mlb-event__date .d { display: block; font: 700 28px/1 var(--mlb-head); }
.mlb-event__date .m { display: block; margin-top: 4px; color: var(--mlb-gold); font: 600 11px/1.2 var(--mlb-body); letter-spacing: .08em; text-transform: uppercase; }
.mlb-event__title { margin: 0 0 6px !important; font: 700 19px/1.3 var(--mlb-head) !important; }
.mlb-event__title a { color: var(--mlb-navy) !important; text-decoration: none; }
.mlb-event__title a:hover { color: var(--mlb-royal) !important; }
.mlb-event__meta { margin: 0 0 6px; color: var(--mlb-ink); font: 500 14px/1.5 var(--mlb-body); }
.mlb-event__text { margin: 0; color: var(--mlb-muted); font: 400 14.5px/1.6 var(--mlb-body); }

/* ---------- Program page ---------- */
.mlb-pintro { padding: 40px 0 var(--mlb-space-4); background: var(--mlb-ivory); }
.mlb-breadcrumb ol { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 500 14px/1.4 var(--mlb-body); color: var(--mlb-muted); }
.mlb-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--mlb-gold-2); }
.mlb-breadcrumb a { color: var(--mlb-navy); text-decoration: none; }
.mlb-breadcrumb a:hover { color: var(--mlb-royal); text-decoration: underline; }
.mlb-pintro__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.mlb-pintro__grid:not(:has(.mlb-pintro__facts)) { grid-template-columns: minmax(0, 1fr); }
.mlb-pintro__copy { max-width: 72ch; }
.mlb-pintro__lead { margin: 0 0 18px; color: var(--mlb-navy); font: 500 clamp(19px, 1.8vw, 23px)/1.55 var(--mlb-body); }
.mlb-pintro__content { color: var(--mlb-ink); font: 400 17px/1.75 var(--mlb-body); }
.mlb-pintro__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.mlb-pintro__facts { padding: 24px; background: var(--mlb-white); border: 1px solid var(--mlb-line); border-top: 3px solid var(--mlb-gold); border-radius: var(--mlb-radius); box-shadow: var(--mlb-shadow); }
.mlb-pintro__facts dl { margin: 0; }
.mlb-pintro__facts dt { color: var(--mlb-muted); font: 600 12px/1.3 var(--mlb-body); letter-spacing: .12em; text-transform: uppercase; }
.mlb-pintro__facts dd { margin: 4px 0 16px; color: var(--mlb-navy); font: 600 16px/1.5 var(--mlb-body); }
@media (max-width: 860px) { .mlb-pintro__grid { grid-template-columns: 1fr; gap: 24px; } }
.mlb-related { padding: var(--mlb-space-5) 0; background: var(--mlb-white); }

/* ---------- Reveal ---------- */
.mlb-js .mlb-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--mlb-ease), transform .7s var(--mlb-ease); }
.mlb-js .mlb-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.mlb-hero__img, .mlb-hero__slide.is-active .mlb-hero__img { transform: none !important; transition: none !important; }
	.mlb-hero__slide, .mlb-hero__slide.is-active { transition: none !important; }
	.mlb-js .mlb-hero.is-ready .mlb-hero__slide .mlb-hero__content > * { opacity: 1; transform: none; transition: none; }
	.mlb-card, .mlb-card:hover, .mlb-card__media img { transform: none !important; transition: none !important; }
	.mlb-js .mlb-reveal { opacity: 1; transform: none; }
}

/* ---------- v1.0.1 refinements ---------- */
.mlb-grid--compact { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; }
@media (min-width: 768px) {
	.mlb-hero__content, .mlb-hero__dots { width: min(1200px, 100% - 184px); }
}
@media (min-width: 1400px) {
	.mlb-hero__content, .mlb-hero__dots { width: min(1200px, 100% - 32px); }
}
@media (max-width: 767px) {
	.mlb-hero { height: calc(100svh - 170px) !important; min-height: 540px; max-height: 700px; }
}

@media (max-width: 400px) {
	.mlb-btn { white-space: normal; text-align: center; padding: 12px 20px; font-size: 14.5px; }
	.mlb-hero__title { font-size: 32px !important; }
}