/* ============================================
   Formation page polish (text-only styling)
   ============================================ */

/* Dropcap on the opening paragraph */
.dropcap::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: 0.9;
  padding: 0.04em 0.18em 0.06em 0.16em;
  margin: 0.12em 0.3em 0.02em 0;
  font-weight: 800;
  color: #f5e7c5;
  background:
    radial-gradient(circle at 30% 25%, rgba(250,225,175,.25), rgba(60,50,30,.35)),
    linear-gradient(145deg, rgba(76,63,38,.35), rgba(26,20,12,.6));
  border: 1px solid rgba(199,167,107,.45);
  border-radius: .25rem;
  box-shadow:
    inset 0 1px 2px rgba(255,240,200,.15),
    inset 0 -2px 3px rgba(0,0,0,.45),
    0 2px 10px rgba(0,0,0,.4),
    0 0 4px rgba(199,167,107,.25);
  text-shadow:
    0 0 2px rgba(248,233,180,.35),
    0 0 6px rgba(255,219,160,.15),
    1px 1px 0 rgba(0,0,0,.35),
    -1px -1px 0 rgba(255,255,255,.05);
}

/* Section subheads (if you ever add them) */
.fx-subhead {
  margin-top: 1.8rem;
  margin-bottom: 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e9c477; /* brass accent */
}

/* Fancy blockquotes (Spurgeon etc.) */
.fx-quote {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid #b9854e;
  background: rgba(233,196,119,0.08);
  font-style: italic;
  color: #f4ecd8;
}

/* Optional callout paragraph */
.fx-callout {
  background: #111;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid #c7a76b;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  margin: 1.2rem 0;
}

/* Optional brass divider for section breaks */
.fx-divider {
  position: relative;
  height: 1px;
  margin: 1.5rem 0 1.8rem;
  background: linear-gradient(90deg, transparent, rgba(233,196,119,0.6), transparent);
  box-shadow: 0 0 18px rgba(233,196,119,0.25);
}
/* === Extra spacing between numbered practices === */
.prose ol > li {
  margin-bottom: 1.25rem; /* or 1.5rem if you want slightly more air */
}
/* Put practice titles on their own line and push scripture refs underneath */
.beliefs-card ol > li strong {
  display: block;
  margin-bottom: 0.25rem; /* tweak to 0.4–0.5rem if you want a bit more space */
}

/* =========================================================
   FORMATION: widen 2-column layout on desktop
   - prevents squat cards
   - reduces the "gulf" between columns
   ========================================================= */

@media (min-width: 1024px) {
  /* Let this page use more of the desktop canvas */
  main#page-beliefs-formation.container {
    max-width: 1600px;
  }

  /* Reduce inter-column gulf + ensure full-width cards */
  #page-beliefs-formation .beliefs-grid {
    gap: 2rem;
    align-items: start;
  }

  /* If your global .grid-2 defines fixed-ish columns, override for this page */
  #page-beliefs-formation.grid-2,
  #page-beliefs-formation .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-beliefs-formation .beliefs-grid > *,
  #page-beliefs-formation .beliefs-card {
    width: 100%;
    max-width: none;
  }
}