/* BibleSlide public pages: profile (/u/), link-in-bio (/@), ministry page (/m/). Mobile-first, system fonts (fast on slow networks). */
:root { --bg: #f4f6fb; --card: #fff; --ink: #0f1a3d; --muted: #5b6785; --line: #e3e8f3; --hero: linear-gradient(145deg, #2552c4 0%, #1e3a8a 55%, #0b1638 100%); --radius: 18px; }
.theme-clean { --bg: #ffffff; --card: #f7f8fb; --hero: linear-gradient(145deg, #eef2fa, #dfe6f5); }
.theme-worship { --bg: #f6f3ff; --hero: linear-gradient(145deg, #3b2a8f 0%, #1e1a4d 100%); }
.theme-minimal { --bg: #f7f7f7; --card: #fff; --ink: #161616; --muted: #595959; --line: #e4e4e4; --hero: #1d1d1d; }
.theme-dark { --bg: #0b1020; --card: #141b33; --ink: #eef2ff; --muted: #a6b0cf; --line: #26304f; --hero: linear-gradient(145deg, #1e3a8a, #0b1020); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body.bsp { min-height: 100vh; background: var(--bg); color: var(--ink); font: 400 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
svg { width: 22px; height: 22px; flex: none; }
h1, h2, h3 { line-height: 1.2; }

.bsp-preview { position: sticky; top: 0; z-index: 5; padding: 10px 16px; background: #fff3cc; color: #5c4300; font-weight: 600; text-align: center; }
.bsp-preview a { margin-left: 8px; }
.bsp-edit { position: fixed; top: 12px; right: 12px; z-index: 5; padding: 8px 14px; border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff; font-weight: 600; text-decoration: none; }

.bsp-avatar { display: grid; place-items: center; width: 112px; height: 112px; border: 4px solid var(--card); border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); }
.bsp-initials { display: inline-grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #f4b400, #ffd666); color: #2b1f00; font-weight: 800; }
.bsp-avatar.bsp-initials { font-size: 2.2rem; }
.bsp-role { margin: 2px 0 0; color: var(--muted); font-weight: 600; }
.bsp-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 12px 20px; border: 2px solid var(--accent); border-radius: 16px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-align: center; text-decoration: none; transition: transform .15s; }
.bsp-button:hover { transform: translateY(-2px); }
.bsp-button.is-ghost, .btn-outline .bsp-button { background: transparent; color: var(--ink); }
.btn-pill .bsp-button { border-radius: 999px; }
.btn-square .bsp-button { border-radius: 6px; }
.bsp-buttons { display: grid; gap: 12px; width: 100%; margin-top: 22px; }

/* link-in-bio */
.type-link { background: var(--hero); background-attachment: fixed; }
.bsp-link { display: flex; flex-direction: column; align-items: center; width: min(560px, 100%); margin: 0 auto; padding: 48px 20px 24px; text-align: center; color: #fff; }
.theme-clean .bsp-link { color: var(--ink); }
.bsp-link h1 { margin: 16px 0 0; font-size: 1.6rem; }
.bsp-link .bsp-role { color: inherit; opacity: .85; }
.bsp-intro { max-width: 46ch; margin: 12px 0 0; opacity: .92; }
.type-link .bsp-button.is-ghost, .type-link.btn-outline .bsp-button { color: inherit; }
.bsp-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px auto 0; padding: 0 20px; list-style: none; }
.bsp-socials a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; }
.theme-clean .bsp-socials a { background: #fff; color: var(--ink); border: 1px solid var(--line); }

/* profile */
.bsp-cover { height: clamp(150px, 28vw, 260px); background: var(--hero); background-size: cover; background-position: center; }
.bsp-profile { display: flex; flex-direction: column; align-items: center; width: min(680px, 100%); margin: -64px auto 0; padding: 0 20px 24px; text-align: center; }
.bsp-profile .bsp-avatar { width: 128px; height: 128px; }
.bsp-profile h1 { margin: 14px 0 0; font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem); }
.bsp-church { margin: 6px 0 0; font-weight: 600; }
.bsp-loc { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--muted); }
.bsp-loc svg { width: 18px; height: 18px; }
.bsp-bio { max-width: 56ch; margin: 16px 0 0; }
.bsp-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.bsp-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.bsp-links a:hover { border-color: var(--accent); }
.bsp-ll { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-weight: 600; text-decoration: none; }

/* ministry page */
.bsp-hero { display: grid; place-items: center; min-height: clamp(280px, 52vw, 460px); padding: 56px 20px; background: var(--hero); background-size: cover; background-position: center; color: #fff; text-align: center; }
.theme-clean .bsp-hero:not([style]) { color: var(--ink); }
.bsp-hero-in { max-width: 720px; }
.bsp-logo { width: 96px; height: 96px; border-radius: 22px; object-fit: cover; background: #fff; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); }
.bsp-kicker { margin: 16px 0 0; color: var(--accent); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; }
.bsp-hero h1 { margin: 6px 0 0; font-size: clamp(1.9rem, 1.4rem + 3vw, 3.2rem); }
.bsp-welcome { margin: 14px auto 0; max-width: 52ch; font-size: 1.1rem; opacity: .95; }
.bsp-ministry { width: min(860px, 100%); margin: 0 auto; padding: 8px 16px 24px; }
.bsp-sec { margin-top: 18px; padding: clamp(18px, 4vw, 28px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.bsp-sec h2 { margin: 0 0 12px; font-size: 1.3rem; }
.bsp-sec h2::after { content: ""; display: block; width: 44px; height: 4px; margin-top: 8px; border-radius: 4px; background: var(--accent); }
.bsp-sec p { margin: 0 0 12px; }
.bsp-sec .bsp-links { justify-content: flex-start; margin: 0; }
.bsp-mv { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.bsp-mv h3 { margin: 0 0 6px; font-size: 1rem; }
.bsp-services, .bsp-people { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bsp-services li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.bsp-services span { color: var(--accent); font-weight: 700; }
.theme-clean .bsp-services span, .theme-minimal .bsp-services span { color: var(--ink); }
.bsp-services small { grid-column: 1 / -1; color: var(--muted); }
.bsp-people { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.bsp-people li { display: flex; align-items: center; gap: 12px; }
.bsp-people .bsp-initials { width: 48px; height: 48px; flex: none; }
.bsp-people span:last-child { display: flex; flex-direction: column; }
.bsp-people small { color: var(--muted); }
.bsp-give .bsp-button { display: inline-flex; }

/* footer */
.bsp-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); color: var(--muted); font-size: .9rem; text-align: center; }
.type-link .bsp-foot { color: rgba(255, 255, 255, .8); }
.theme-clean.type-link .bsp-foot { color: var(--muted); }
.bsp-share { display: flex; gap: 10px; }
.bsp-share a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid currentColor; font-weight: 600; text-decoration: none; }
.bsp-foot p { margin: 0; }
.bsp-made { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.bsp-made img { border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }