/* ============================================================================
   Key for Change — homepage body content slot (task 12636)

   The clean, whitespace-forward LIGHT band between the dark hero and the footer.
   Intentionally empty for the concept: a subtle dashed placeholder shows it is a
   deliberate, ready-to-fill slot rather than a broken/blank page. All values via
   var(--k4c-*) — never hard-code a hex or a pixel here.

   Loaded at asset priority 81 (after hero, before custom.css @80).
   ========================================================================== */

.k4c-body {
  background: var(--k4c-white);          /* distinct light band below the dark hero */
  color: var(--k4c-grey);                /* dark-grey #222 body text, ready to use   */
  padding-block: var(--k4c-section-pad); /* generous, whitespace-forward rhythm      */
  /* Never collapse to zero height while empty — keeps the rhythm between the
     hero and the footer even with no modules in place yet. */
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Subtle centred "intentional empty slot" marker. Minimal markup, easy to strip
   out when real modules land. */
.k4c-body__placeholder {
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--k4c-space-9) var(--k4c-space-6);
  text-align: center;
  border: 2px dashed var(--k4c-grey-200);
  border-radius: var(--k4c-radius-lg);
  background: var(--k4c-purple-50);      /* faintest purple wash so it reads on white */
}

.k4c-body__eyebrow {
  margin: 0 0 var(--k4c-space-3);
}

.k4c-body__marker {
  margin: 0 0 var(--k4c-space-3);
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-bold);
  font-size: var(--k4c-fs-xl);
  color: var(--k4c-purple);
}

.k4c-body__note {
  margin: 0 auto;
  max-width: 44ch;
  font-size: var(--k4c-fs-md);
  line-height: var(--k4c-lh-body);
  color: var(--k4c-grey-600);            /* muted secondary text */
}

/* Comfortable on small screens — tighten the placeholder padding a touch. */
@media (max-width: 600px) {
  .k4c-body { min-height: 50vh; }
  .k4c-body__placeholder { padding: var(--k4c-space-7) var(--k4c-space-5); }
}