/* ============================================================
   MIND OF MERCY — HOMEPAGE (lean redesign)
   Extends css/style.css. Keeps the site's existing palette but
   uses it sparingly: one accent per section, generous white
   space, and dedicated image slots instead of stacked text.
   ============================================================ */

/* Hero image slot */
.hero-photo-frame{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}
.hero-photo-frame img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-trust-line{
  display: flex; align-items: center; gap: var(--space-3);
  color: rgba(255,255,255,.75); font-size: .88rem; margin-top: var(--space-2);
}
.hero-trust-line strong{ color: #fff; }

/* Quick access — icon + title only, single accent tint */
.quick-card{
  text-align: center; text-decoration: none; color: inherit;
  padding: var(--space-8) var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); transition: var(--transition);
}
.quick-card:hover{ border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.quick-icon{
  width: 46px; height: 46px; margin: 0 auto var(--space-4);
  border-radius: var(--radius); background: var(--blue-light);
  display: flex; align-items: center; justify-content: center;
}
.quick-card h4{ margin-bottom: .35rem; font-size: 1rem; }
.quick-card p{ font-size: .82rem; margin: 0; }

/* Programs — single-tone banner with faint motif, no rainbow cycling */
.program-card{
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  transition: var(--transition);
}
.program-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.program-banner{
  position: relative; height: 108px; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 100%);
  display: flex; align-items: flex-end; padding: var(--space-4); overflow: hidden;
}
.program-banner img.motif{
  position: absolute; right: -10px; top: -10px; width: 90px; height: 90px;
  opacity: .18; filter: brightness(0) invert(1);
}
.program-banner span{ position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: .92rem; }

/* Get Involved — image + copy split */
.involve-section{ background: var(--bg-alt); }
.involve-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.involve-photo{
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
  aspect-ratio: 5 / 4;
}
.involve-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Partner strip — compact, real logos or names only */
.partner-strip{ display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; align-items: center; }
.partner-pill{
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius-full);
  font-size: .82rem; font-weight: 600; color: var(--text-muted); text-decoration: none;
}
.partner-pill:hover{ border-color: var(--blue); color: var(--blue); }
.partner-pill img{ width: 20px; height: 20px; object-fit: contain; }

/* Responsive */
@media (max-width: 980px){
  .involve-grid{ grid-template-columns: 1fr; }
  .involve-photo{ order: -1; }
}