/* Landing page styles (scoped with fp- prefix) */
:root{
  --fp-bg: #ffffff;
  --fp-primary: #9E6224; /* warm brown */
  --fp-secondary: #F3D599; /* highlight */
  --fp-text: #1e1e1e;
  --fp-muted: #6b6b6b;
}

body.fp-landing { background: var(--fp-bg); color: var(--fp-text); }

/* HERO */
.fp-hero { padding: 72px 20px; position: relative; overflow: hidden; }
.fp-hero__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 420px; gap: 32px; align-items: center; }
.fp-hero__content h1 { font-size: 40px; line-height: 1.05; margin:0 0 12px; color:var(--fp-text); }
.fp-hero__content p { margin:0 0 18px; color:var(--fp-muted); font-size:1.05rem }
.fp-hero__cta { display:flex; gap:12px; flex-wrap:wrap }
.fp-btn { background: var(--fp-primary); color: #fff; border: none; padding: 12px 18px; border-radius: 8px; cursor:pointer; font-weight:600; transition: transform .18s ease, box-shadow .18s ease; }
.fp-btn--ghost { background: transparent; color: var(--fp-primary); border: 1px solid rgba(158,98,36,0.12); }
.fp-btn:hover{ transform: translateY(-3px); box-shadow: 0 8px 20px rgba(158,98,36,0.12); }
.fp-hero__visual { background: linear-gradient(135deg, rgba(158,98,36,0.06), rgba(243,213,153,0.06)); border-radius:16px; padding:18px; display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 18px rgba(0,0,0,0.04); }
.fp-hero__card { background: linear-gradient(180deg, rgba(243,213,153,0.18), rgba(255,255,255,0.8)); border-radius:12px; padding:20px; width:100%; max-width:360px; }
.fp-hero__meta { display:flex; gap:10px; align-items:center; margin-top:10px; }
.fp-chip { background: var(--fp-secondary); color: #3b2b1b; padding:6px 10px; border-radius:999px; font-weight:600; font-size:0.9rem }

/* QUICK INFO */
.fp-info { max-width:1200px; margin: 28px auto; display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.fp-info__card { background:#fff; border-radius:12px; padding:16px; border-left:6px solid var(--fp-secondary); box-shadow:0 6px 18px rgba(0,0,0,0.04); }
.fp-info__card h4 { margin:0 0 8px; color:var(--fp-primary) }
.fp-info__card p { margin:0; color:var(--fp-muted) }

/* ANNOUNCEMENTS */
.fp-announcements { max-width:1200px; margin: 20px auto; }
.fp-announcements__grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px; margin-top:12px }
.fp-ann-card { background:#fff; border-radius:12px; padding:14px; border:1px solid rgba(158,98,36,0.06); transition: transform .16s ease, box-shadow .2s ease; cursor:pointer }
.fp-ann-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(158,98,36,0.06); }
.fp-ann-card__title { font-weight:700; color:var(--fp-text); margin-bottom:6px }
.fp-ann-card__meta { font-size:0.85rem; color:var(--fp-muted); margin-bottom:8px }
/* priority badges */
.fp-ann-card__badge { display:inline-block; padding:6px 8px; border-radius:999px; font-weight:700; font-size:12px; margin-right:8px }
.fp-ann-card__badge.high { background: #ffe6e6; color:#b00000 }
.fp-ann-card__badge.med { background: #fff7e6; color:#b36b00 }
.fp-ann-card__badge.low { background: #e9f7ec; color:#0b7a3d }

/* EVENTS */
.fp-events { max-width:1200px; margin: 24px auto; }
.fp-events__grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap:18px }
.fp-event-card { background:#fff; border-radius:12px; overflow:hidden; border:1px solid rgba(0,0,0,0.04); box-shadow:0 6px 18px rgba(0,0,0,0.04); transition: transform .16s ease }
.fp-event-thumb { width:100%; height:180px; object-fit:cover; display:block }
.fp-event-body { padding:12px }
.fp-event-title { font-size:1.05rem; margin:0 0 6px; color:var(--fp-primary) }
/* event accent bar */
.fp-event-card::before { content:''; display:block; height:6px; background: linear-gradient(90deg, var(--fp-primary), #c07a3a); }

/* SERMONS */
.fp-sermons { max-width:1200px; margin: 24px auto; }
.fp-sermons__grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px }
.fp-sermon-card { background:#fff; border-radius:12px; overflow:hidden; border:1px solid rgba(0,0,0,0.04); transition: transform .16s ease }
.fp-sermon-thumb { height:160px; object-fit:cover; display:block }
.fp-sermon-body { padding:12px }
.fp-play-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.35)); opacity:0; transition: opacity .18s ease }
.fp-sermon-card:hover .fp-play-overlay { opacity:1 }

/* prominent play CTA */
.fp-play-circle { width:72px; height:72px; background: linear-gradient(180deg, var(--fp-primary), #c07a3a); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow: 0 8px 20px rgba(158,98,36,0.18); font-size:30px }
.fp-sermon-card:hover .fp-play-circle { transform: scale(1.03) }

/* DONATION */
.fp-donate { max-width:1200px; margin: 30px auto; display:flex; align-items:center; justify-content:space-between; gap:20px }
.fp-donate__cta { background: linear-gradient(90deg, var(--fp-primary), #c07a3a); color:#fff; padding:18px 24px; border-radius:12px; font-weight:700; cursor:pointer; border:none; transition: transform .16s ease }
.fp-donate__cta:hover { transform: translateY(-4px) }

/* MODALS: reuse existing modal-unique but add fp-modal content styles */
.fp-modal__content { border-radius:12px; padding:18px; max-width:900px; width:100%; box-shadow: 0 8px 28px rgba(0,0,0,0.26) }
.fp-modal__header { display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid rgba(0,0,0,0.06); padding-bottom:10px }
.fp-modal__title { color:var(--fp-primary); margin:0 }

/* modal body scroll */
.fp-modal__content .modal-body { max-height:64vh; overflow:auto; padding-top:12px }
.fp-modal__content .modal-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:12px }
.fp-modal-close { background:transparent; border:1px solid rgba(0,0,0,0.06); padding:8px 10px; border-radius:8px; cursor:pointer }

/* section scroll behavior */
.fp-announcements__grid, .fp-events__grid, .fp-sermons__grid { max-height:540px; overflow:auto; padding-right:6px }
.fp-announcements__grid::-webkit-scrollbar, .fp-events__grid::-webkit-scrollbar, .fp-sermons__grid::-webkit-scrollbar { width:10px }
.fp-announcements__grid::-webkit-scrollbar-thumb, .fp-events__grid::-webkit-scrollbar-thumb, .fp-sermons__grid::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(158,98,36,0.18), rgba(158,98,36,0.36)); border-radius:8px }
.fp-announcements__grid { gap:18px }

/* responsive */
@media (max-width: 980px) {
  .fp-hero__inner { grid-template-columns: 1fr; text-align: left }
  .fp-info { grid-template-columns: repeat(2,1fr) }
  .fp-donate { flex-direction: column; align-items:stretch }
}
@media (max-width: 600px) {
  .fp-hero { padding: 36px 16px }
  .fp-hero__content h1 { font-size: 28px }
  .fp-info { grid-template-columns: 1fr }
  .fp-announcements__grid { grid-template-columns: 1fr }
  .fp-events__grid { grid-template-columns: 1fr }
  .fp-sermons__grid { grid-template-columns: 1fr }
}

/* Decorative shapes */
.fp-deco-circle { position:absolute; right:-120px; top:-60px; width:320px; height:320px; background: radial-gradient(circle at 30% 30%, rgba(243,213,153,0.28), rgba(158,98,36,0.06)); border-radius:50%; pointer-events:none }
