/* ============================================================================
   community-card.css — the shared community card + grid (Round 154).

   These rules used to live in a <style> block inside directory/index.php, which
   meant any OTHER page reusing the .dir-card class names got the markup with no
   styling at all. That's exactly what happened to the location landing pages:
   the cards rendered as unstyled blocks with the logo, affiliation and schedule
   spraying across the row.

   Extracted here verbatim and loaded globally from header.php, so /directory/
   and /communities/<region>/<city> render identical cards from one source.

   Required DOM (see bc_loc_card() in communities-location.php):
     a.dir-card
       div.dir-card-banner[.dir-card-banner-fallback]   <- 180px, NOT optional;
         span.dir-card-mono                                the card is a column
         div.dir-card-top-badges                           flex and collapses
       div.dir-card-body                                   without it
         div.dir-card-identity
           img.dir-card-logo | div.dir-card-initial
           div[style="flex:1;min-width:0"]              <- this wrapper matters:
             h3.dir-card-name                              without it the name,
             div.dir-card-loc                              location and
             div.dir-card-affil                            affiliation each
         p.dir-card-desc                                   become separate flex
         div.dir-card-footer                               children and spread
   ============================================================================ */

/* ── Card grid ───────────────────────────────────────────────────────────── */
.dir-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.dir-card {
  background:var(--bg-card,#21271b);
  border:1px solid var(--border-dim, rgba(255,255,255,.08));
  border-radius:var(--radius-lg, 14px); overflow:hidden;
  text-decoration:none; color:var(--fg,#e8e3d5);
  display:flex; flex-direction:column;
  transition:transform .22s, box-shadow .22s, border-color .22s;
}
.dir-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow-gold, 0 4px 24px rgba(196,163,90,.12));
  text-decoration:none; color:var(--fg,#e8e3d5);
  border-color:rgba(196,163,90,.22);
}
.dir-card-dim { opacity:.65; }

/* Card banner */
.dir-card-banner { height:180px; background-size:cover; background-position:center; background-color:var(--bg-raised,#1b2016); position:relative; flex-shrink:0; }
/* Accent-gradient + monogram fallback for cards without a banner (matches the
   homepage featured cards so both surfaces read as one design). */
.dir-card-banner-fallback { display:flex; align-items:center; justify-content:center; }
.dir-card-mono {
  width:64px; height:64px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display,'Cormorant Garant',Georgia,serif); font-size:1.8rem; font-weight:700;
  color:#fffdf8; box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.dir-card-top-badges { position:absolute; top:.8rem; left:.8rem; display:flex; gap:.3rem; flex-wrap:wrap; }
.dir-badge { font-family:'DM Sans',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:5px; padding:.2rem .55rem; backdrop-filter:blur(6px); }
.dir-badge-lt { background:rgba(11,13,10,.78); border:1px solid rgba(201,168,92,.3); color:var(--gold,#c9a85c); }
.dir-badge-paid { background:rgba(240,184,64,.14); border:1px solid rgba(240,184,64,.3); color:#f0c060; }
.dir-badge-pending { background:rgba(212,146,74,.14); border:1px solid rgba(212,146,74,.3); color:#d4924a; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:5px; padding:.2rem .55rem; }

/* Card body */
.dir-card-body { padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.dir-card-identity { display:flex; align-items:flex-start; gap:.8rem; }
.dir-card-logo { width:46px; height:46px; border-radius:10px; object-fit:cover; flex-shrink:0; border:1px solid rgba(255,255,255,.08); }
.dir-card-initial { width:46px; height:46px; border-radius:10px; background:rgba(196,163,90,.1); border:1px solid rgba(196,163,90,.15); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garant',serif; font-size:1.3rem; color:var(--gold,#c4a35a); flex-shrink:0; }
.dir-card-name { font-family:var(--font-display,'Cormorant Garant',Georgia,serif); font-size:1.3rem; font-weight:600; line-height:1.2; margin:0 0 .2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dir-card-loc { font-family:'DM Sans',sans-serif; font-size:.82rem; color:var(--gold,#c4a35a); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dir-card-affil { font-family:'DM Sans',sans-serif; font-size:.75rem; color:var(--fg-muted,#8a8375); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dir-card-desc { font-family:'DM Sans',sans-serif; font-size:.92rem; color:var(--fg-muted, rgba(232,227,213,.58)); line-height:1.6; margin:0; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.dir-card-footer { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; margin-top:auto; padding-top:.7rem; border-top:1px solid var(--border-dim, rgba(255,255,255,.06)); }
.dir-card-tags { display:flex; flex-wrap:wrap; gap:.3rem; flex:1; }
.dir-type-tag { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:var(--fg-muted, rgba(232,227,213,.45)); border-radius:20px; padding:.18rem .65rem; font-size:.72rem; font-weight:500; letter-spacing:.06em; font-family:'DM Sans',sans-serif; }
.dir-belief-tag { background:rgba(196,163,90,.08); border:1px solid rgba(196,163,90,.15); color:var(--gold-dim,#8a6e35); border-radius:20px; padding:.18rem .65rem; font-size:.72rem; font-weight:500; letter-spacing:.06em; font-family:'DM Sans',sans-serif; }
.dir-card-sched { font-family:'DM Sans',sans-serif; font-size:.72rem; color:var(--fg-dim, rgba(232,227,213,.3)); margin-left:auto; white-space:nowrap; }

/* Empty state */
.dir-empty { text-align:center; padding:5rem 1.5rem; font-family:'DM Sans',sans-serif; color:var(--fg-muted,#8a8375); }
.dir-empty-icon { font-size:2.2rem; margin-bottom:.7rem; }
.dir-empty p { font-size:.95rem; }