/* Home page sections below the hero - modern design.
   Loaded only when $homeStyle = 'modern' in index.php (set to 'classic' to revert). Scoped to body.hp-modern. */

body.hp-modern { background: #f5f7f2; }

/* shared headings */
body.hp-modern .section-label {
  display: inline-block; padding: .35rem .9rem; border-radius: 999px;
  background: #fff1ea; border: 1px solid #ffd9c9; font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #c4401a;
}
body.hp-modern .section-label::before, body.hp-modern .section-label::after { display: none; }
body.hp-modern .section-title { font-family: var(--font-display, 'Playfair Display', serif); color: #1c3b36; font-size: clamp(1.9rem, 4.2vw, 2.8rem); }
body.hp-modern .btn { border-radius: 999px; font-weight: 700; }
body.hp-modern .btn.btn-outline { background: #fff; color: #234e48; border: 2px solid #234e48; }
body.hp-modern .btn.btn-outline:hover { background: #234e48; color: #fff; }

/* ---------- announcements: spacing + softer look ---------- */
body.hp-modern .anniversary-section { position: relative; }
body.hp-modern .anniversary-section:nth-of-type(odd) { background: #fff; }
body.hp-modern .anniversary-heading { font-family: var(--font-display, 'Playfair Display', serif); }
body.hp-modern .anniversary-eyebrow { border-radius: 999px; }
body.hp-modern .anniversary-invite-img { border-radius: 22px; box-shadow: 0 24px 60px rgba(35, 78, 72, .25); }
body.hp-modern .anniversary-detail-item { border-radius: 14px; }

/* ---------- devotion + quick links ---------- */
body.hp-modern .home-devotion-section {
  position: relative; padding: 4.5rem 0; overflow: hidden;
  background: linear-gradient(160deg, #16322e 0%, #234e48 55%, #2b5c54 100%); isolation: isolate;
}
body.hp-modern .home-devotion-section::before { content: ""; position: absolute; z-index: -1; width: 380px; height: 380px; border-radius: 50%; right: -100px; top: -140px; background: #f57450; opacity: .2; filter: blur(80px); }
body.hp-modern .home-devotion-section::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 28px 28px; }
body.hp-modern .hds-devotion-card { border-radius: 28px; box-shadow: 0 26px 60px rgba(0, 0, 0, .35); overflow: hidden; }
body.hp-modern .hds-title { font-family: var(--font-display, 'Playfair Display', serif); }
body.hp-modern .hds-verse { border-radius: 18px; }
body.hp-modern .hds-cta { border-radius: 999px; background: linear-gradient(135deg, #f57450, #e8431e); color: #fff; box-shadow: 0 10px 24px rgba(245, 116, 80, .4); }
body.hp-modern .hds-ql-nav { display: grid; gap: .8rem; }
body.hp-modern .hds-ql-item {
  border-radius: 20px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
body.hp-modern .hds-ql-item:hover { transform: translateX(6px); background: rgba(255,255,255,.17); border-color: #ffb199; }
body.hp-modern .hds-ql-icon { border-radius: 14px; background: linear-gradient(135deg, #f57450, #e8431e); color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
body.hp-modern .hds-ql-text strong { color: #fff; }
body.hp-modern .hds-ql-text small { color: rgba(255,255,255,.72); }
body.hp-modern .hds-ql-arrow { color: #ffb199; }

/* ---------- service times ---------- */
body.hp-modern .service-times { padding: 4.2rem 0; background: #f5f7f2; background-image: radial-gradient(rgba(35,78,72,.05) 1px, transparent 1px); background-size: 28px 28px; }
body.hp-modern .service-times-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; }
body.hp-modern .service-card {
  position: relative; padding: 1.6rem 1.3rem 1.4rem; text-align: center; border-radius: 24px;
  background: #fff; border: 1px solid #e4eae1; box-shadow: 0 12px 30px rgba(35,78,72,.09);
  opacity: 1; transform: none; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.hp-modern .service-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, #f57450, #ffd0a8 60%, #3fb7a3); }
body.hp-modern .service-card:hover { transform: translateY(-6px); border-color: #f57450; box-shadow: 0 22px 46px rgba(35,78,72,.16); }
body.hp-modern .service-icon {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto .9rem; font-size: 1.7rem;
  border-radius: 20px; background: linear-gradient(135deg, #fff1ea, #ffe2d3); box-shadow: 0 8px 18px rgba(245,116,80,.22);
}
body.hp-modern .service-card h3 { font-family: var(--font-display, 'Playfair Display', serif); color: #1c3b36; }
body.hp-modern .service-time { display: inline-block; margin: .3rem 0 .5rem; padding: .3rem .9rem; border-radius: 999px; background: #234e48; color: #fff; font-weight: 700; font-size: .9rem; }
body.hp-modern .service-desc { color: #5b6b65; font-size: .9rem; }
body.hp-modern .service-desc i { color: #f57450; }

/* ---------- welcome ---------- */
body.hp-modern .welcome-section { padding: 5rem 0; background: #fff; }
body.hp-modern .welcome-text { color: #4d5d57; line-height: 1.85; }
body.hp-modern .image-frame { position: relative; border-radius: 30px; }
body.hp-modern .image-frame img { border-radius: 26px; box-shadow: 0 26px 60px rgba(35,78,72,.28); }
body.hp-modern .image-decoration { border-radius: 30px; border: 3px solid #f57450; opacity: .5; }

/* ---------- events preview ---------- */
body.hp-modern .events-preview { padding: 5rem 0; background: #f5f7f2; }
body.hp-modern .events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.3rem; }
body.hp-modern .event-card {
  display: flex; gap: 1.1rem; align-items: center; padding: 1.2rem 1.3rem; border-radius: 22px;
  background: #fff; border: 1px solid #e4eae1; box-shadow: 0 12px 30px rgba(35,78,72,.09);
  opacity: 1; transform: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.hp-modern .event-card:hover { transform: translateY(-5px); border-color: #f57450; box-shadow: 0 22px 44px rgba(35,78,72,.16); }
body.hp-modern .event-date { flex-shrink: 0; display: grid; place-items: center; width: 70px; height: 78px; border-radius: 18px; background: linear-gradient(135deg, #f57450, #e8431e); color: #fff; box-shadow: 0 10px 22px rgba(245,116,80,.4); }
body.hp-modern .date-day { font-family: var(--font-display, 'Playfair Display', serif); font-size: 1.9rem; font-weight: 700; line-height: 1; color: #fff; }
body.hp-modern .date-month { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffe2d3; }
body.hp-modern .event-details h3 { font-family: var(--font-display, 'Playfair Display', serif); color: #1c3b36; }
body.hp-modern .events-preview .btn-text { display: inline-flex; padding: .8rem 1.6rem; border-radius: 999px; background: #234e48; color: #fff; }

/* ---------- latest sermon: scripture spotlight ---------- */
body.hp-modern .latest-sermon {
  position: relative; padding: 5rem 1.25rem; text-align: center; color: #fff; overflow: hidden; isolation: isolate;
  background: linear-gradient(155deg, #16322e 0%, #234e48 55%, #3a1f1a 140%);
}
body.hp-modern .latest-sermon::before { content: "\201C"; position: absolute; z-index: -1; left: 50%; top: -1.2rem; transform: translateX(-50%); font-family: var(--font-display, 'Playfair Display', serif); font-size: 18rem; line-height: 1; color: #f57450; opacity: .18; }
body.hp-modern .latest-sermon .section-label { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #ffd9c9; }
body.hp-modern .latest-sermon .section-title { color: #fff; }
body.hp-modern .sermon-title { max-width: 820px; margin: 1.2rem auto 1rem; font-family: var(--font-display, 'Playfair Display', serif); font-style: italic; font-weight: 600; font-size: clamp(1.3rem, 3.2vw, 2rem); line-height: 1.5; color: #fff; }
body.hp-modern .sermon-speaker { display: inline-block; padding: .4rem 1.1rem; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); font-weight: 700; color: #ffd0a8; }

/* ---------- dark theme ---------- */
html[data-theme="dark"] body.hp-modern { background: #121c1a; }
html[data-theme="dark"] body.hp-modern .service-times, html[data-theme="dark"] body.hp-modern .events-preview { background: #121c1a; background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 28px 28px; }
html[data-theme="dark"] body.hp-modern .welcome-section { background: #16221f; }
html[data-theme="dark"] body.hp-modern .service-card, html[data-theme="dark"] body.hp-modern .event-card { background: #1a2623; border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] body.hp-modern .section-title, html[data-theme="dark"] body.hp-modern .service-card h3, html[data-theme="dark"] body.hp-modern .event-details h3 { color: #f1f6f3; }
html[data-theme="dark"] body.hp-modern .welcome-text, html[data-theme="dark"] body.hp-modern .service-desc { color: #aebdb6; }

@media (max-width: 640px) {
  body.hp-modern .home-devotion-section, body.hp-modern .events-preview, body.hp-modern .welcome-section, body.hp-modern .latest-sermon { padding-top: 3rem; padding-bottom: 3rem; }
  body.hp-modern .latest-sermon::before { font-size: 11rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.hp-modern .service-card, body.hp-modern .event-card, body.hp-modern .hds-ql-item { transition: none !important; }
}

body.hp-modern .service-time { font-family: var(--font-body, 'Source Sans 3', sans-serif); font-variant-numeric: lining-nums; }
body.hp-modern .hds-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.4rem; }

body.hp-modern .service-times-grid { overflow: visible; }
@media (max-width: 640px) {
  body.hp-modern .service-times-grid { display: grid !important; grid-template-columns: 1fr !important; overflow: visible !important; }
  body.hp-modern .service-card { min-width: 0 !important; width: auto !important; }
}
body.hp-modern .latest-sermon::before { top: -3rem; }
body.hp-modern .latest-sermon .sermon-content { padding-top: 2.2rem; }