/* /community/ landing - hero, nearby cards, how-it-works.
   global-v3.css owns the tokens, .mfa-btn, .mfa-h2 and .mfa-shell; nothing here
   redefines a primitive. Every token below is checked against the global sheet -
   a var() fallback would render fine while quietly inventing a name. */

.mfa-cidx { display: flex; flex-direction: column; }

/* ---- hero ---- */

.mfa-cidx-hero {
  background: var(--mfa-green-dark);
  color: var(--mfa-white);
  border-radius: var(--mfa-radius-md);
  padding: var(--mfa-space-6) var(--mfa-space-4);
}
.mfa-cidx-hero-inner { max-width: 46ch; }
.mfa-cidx-title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 var(--mfa-space-3);
  color: var(--mfa-white);
  text-wrap: balance;
}
.mfa-cidx-tagline {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 var(--mfa-space-4);
  color: var(--mfa-white);
  opacity: .92;
}
.mfa-cidx-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mfa-space-3); }
.mfa-cidx-hero-note { font-size: 14px; color: var(--mfa-white); opacity: .85; }

/* ---- card grid ---- */

.mfa-cidx-grid {
  display: grid;
  /* Sized to the CONTAINER, not the viewport: this grid sits in the middle
     column of a three-column page on one route and full width on another,
     and a viewport breakpoint cannot tell those apart. */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--mfa-space-3);
}

.mfa-cidx-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--mfa-space-4);
  background: var(--mfa-white);
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-md);
}
/* Action left, badge right, pinned to the bottom of the card so a row of cards
   of different heights still lines its controls up. margin-top:auto is what
   does that - the card is already a column flex. */
.mfa-cidx-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mfa-space-2);
  margin-top: auto;
  padding-top: 4px;
}
.mfa-cidx-card-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--mfa-ink);
  line-height: 1.3;
  /* Directory names run long and are frequently all-caps. */
  overflow-wrap: anywhere;
}
.mfa-cidx-card-where { font-size: 14px; color: var(--mfa-muted); }
.mfa-cidx-card-stats { font-size: 13px; color: var(--mfa-muted); }

/* ---- badges: the three states this page exists to distinguish ---- */

.mfa-cidx-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.mfa-cidx-badge--active { background: var(--mfa-mint-bg); color: var(--mfa-green-dark); }
.mfa-cidx-badge--mine   { background: var(--mfa-green-dark); color: var(--mfa-white); }
.mfa-cidx-badge--mod    { background: var(--mfa-mint-bg); color: var(--mfa-green-dark); margin-left: 6px; }

/* The CTA is a link-styled control, not a button: ten filled buttons stacked
   down a page read as ten equal demands. The card is the unit; this is its verb. */
.mfa-cidx-cta {
  align-self: center;
  padding: 10px 0;          /* keeps the 44px touch target without a filled box */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--mfa-teal-dark);
  cursor: pointer;
  text-decoration: none;
}
.mfa-cidx-cta:hover { text-decoration: underline; }
.mfa-cidx-cta[disabled] { opacity: .6; cursor: default; text-decoration: none; }

.mfa-cidx-loading,
.mfa-cidx-empty { font-size: 15px; color: var(--mfa-muted); margin: 0; }
.mfa-cidx-error { font-size: 14px; color: var(--mfa-danger); margin: 4px 0 0; }
.mfa-cidx-browse { font-size: 15px; margin: var(--mfa-space-3) 0 0; }
/* On the 44px floor like every other control. It measured 18px - a bare inline
   link in a paragraph - which is fine to read and awkward to hit on the phones
   that are most of this traffic. Found in a mobile sweep, not by looking. */
.mfa-cidx-browse a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---- how it works ---- */

.mfa-cidx-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mfa-space-3);
}
.mfa-cidx-step {
  padding: var(--mfa-space-4);
  background: var(--mfa-white);
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-md);
}
/* Numbered because these ARE a sequence - start, grow, hand over - and the
   order is the instruction, not decoration. */
.mfa-cidx-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--mfa-mint-bg);
  color: var(--mfa-green-dark);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: var(--mfa-space-2);
}
.mfa-cidx-step-title { font-size: 17px; font-weight: 800; color: var(--mfa-ink); margin: 0 0 6px; line-height: 1.3; }
.mfa-cidx-step p { font-size: 15px; color: var(--mfa-ink); line-height: 1.6; margin: 0; }

/* ---- the member's own communities, in the left column ---- */

.mfa-cidx-mine-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-md);
  background: var(--mfa-white);
  text-decoration: none;
  min-height: 44px;
  justify-content: center;
}
.mfa-cidx-mine-link:hover { border-color: var(--mfa-teal-dark); }
.mfa-cidx-mine-name { font-size: 14px; font-weight: 700; color: var(--mfa-ink); line-height: 1.3; overflow-wrap: anywhere; }
.mfa-cidx-mine-meta { font-size: 12px; color: var(--mfa-muted); }
.mfa-cidx-none { font-size: 14px; color: var(--mfa-muted); line-height: 1.55; margin: 0 0 var(--mfa-space-2); }

@media (min-width: 601px) {
  .mfa-cidx-hero { padding: var(--mfa-space-7) var(--mfa-space-6); }
}