/*
 * Masjid Ar-Rahman page — ported unchanged from site.legacy.css. Loaded
 * only on this page via inc/enqueue/styles.php's page-slug matching
 * (page-masjid.php -> masjid.css).
 */

.masjid-offerings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.masjid-offering { padding: 36px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow-sm); }
.masjid-offering .icon-wrap { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; background: var(--forest); }
.masjid-offering .icon { width: 22px; height: 22px; color: white; }
.masjid-offering h3 { margin: 40px 0 14px; }
.masjid-offering p { color: var(--slate); }

.governance-list { display: grid; gap: 1px; border-radius: var(--radius); overflow: hidden; background: var(--stone); }
.governance-item { display: grid; grid-template-columns: 58px 1fr; gap: 22px; padding: 30px; background: var(--white); }
.governance-item .icon { width: 30px; height: 30px; color: var(--forest); }
.governance-item p { margin-top: 8px; color: var(--slate); }
/* Inside a .section-navy chapter (Masjid's "Visit, pray and take part"),
   the governance-item card itself stays white, so its text needs to stay
   dark rather than inheriting the section's white heading color. */
.section-navy .governance-item h3 { color: var(--navy); }
.section-navy .governance-item p { color: var(--slate); }
.section-navy .governance-item .card-link { color: var(--blue); }

/* --- Scale-down pass, same as the other converted pages --- */
.page-hero h1 {
    font-size: clamp(2.25rem, 3.4vw, 3.4rem);
}

.sticky-title h2,
.section-head h2,
.purpose-copy h2,
.faq-intro h2 {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}

.section-head .lead {
    margin-top: 18px;
}

@media (max-width: 820px) {
    .masjid-offerings { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .masjid-offerings { grid-template-columns: 1fr; }
    .masjid-offering {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        column-gap: 15px;
        min-height: 0;
        padding: 20px;
    }
    .masjid-offering > .icon-wrap { grid-row: 1 / span 3; }
    .masjid-offering h3 { margin: 0 0 7px; font-size: 1.18rem; }
    .masjid-offering p { grid-column: 2; }
}