/* Faith Formation (Preview) — ticket #35122. Scoped to .ffpreview (pageclass_sfx) so it never bleeds onto other pages. */
.ffpreview .preview-hero { position: relative; overflow: hidden; margin-bottom: 24px; }
.ffpreview .preview-hero-img { width: 100%; height: 320px; object-fit: cover; object-position: center 20%; display: block; }
.ffpreview .preview-hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(20,133,57,.78), rgba(80,129,179,.72)); }
.ffpreview .preview-hero-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: #ffffff !important; text-shadow: 0 2px 6px rgba(0,0,0,.4); }

.ffpreview .preview-grid { display: flex; flex-wrap: wrap; gap: 24px; margin: 24px 0; }
.ffpreview .preview-card { background: #fff; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.08); flex: 0 0 calc(33.333% - 16px); display: flex; flex-direction: column; border-radius: 0; transition: transform .18s ease, box-shadow .18s ease; }
.ffpreview .preview-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.14); }
.ffpreview .preview-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.ffpreview .preview-card h3 { text-align: center; margin: 14px 14px 4px; }
.ffpreview .preview-card p { text-align: center; margin: 0; padding: 6px 14px 16px; margin-top: auto; }

.ffpreview .preview-section { background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.06); padding: 28px 32px; margin-bottom: 24px; scroll-margin-top: 20px; }
.ffpreview .preview-section .contact-block { background: #f4f8f6; padding: 16px 20px; margin: 16px 0; }
.ffpreview a.button { border-radius: 0; }

@media (max-width: 900px) { .ffpreview .preview-card { flex: 0 0 calc(50% - 12px); } }
@media (max-width: 600px) { .ffpreview .preview-card { flex: 0 0 100%; } }