/* ==========================================================================
   Package J — Find a District (/districts) and the live leadership listings
   on the static leadership pages. KGF tokens only (see style.css :root).
   ========================================================================== */

/* ---- Portrait cards (leadership-list.js and district pages) ------------- */
.lj-leader-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin-top:26px}
.lj-leader-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}
.lj-leader-card:hover{box-shadow:0 12px 30px rgba(8,12,22,.10);transform:translateY(-2px)}
.lj-leader-photo{aspect-ratio:4/5;overflow:hidden;background:var(--offwhite)}
.lj-leader-photo img{width:100%;height:100%;object-fit:cover;display:block}
.lj-leader-photo.is-empty{display:grid;place-items:center;background:linear-gradient(140deg,var(--navy),var(--blue))}
.lj-leader-photo.is-empty span{font-family:var(--font-serif);font-size:3.2rem;color:var(--gold)}
.lj-leader-body{padding:20px 22px 24px}
.lj-leader-office{display:block;margin-bottom:6px;color:var(--gold-deep);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.lj-leader-card h3{margin:0;color:var(--navy);font-size:1.12rem;line-height:1.3}
.lj-leader-title{margin:4px 0 0;color:var(--blue);font-size:.84rem;font-weight:700}
.lj-leader-body p{margin:10px 0 0;color:var(--muted);font-size:.9rem;line-height:1.6}
.lj-leader-body .lj-leader-title{margin-top:4px}
.section.navy .lj-leader-card h3{color:var(--navy)}
[data-leadership].is-filled>.lj-leader-grid{margin-top:0}

/* ---- Find a District ------------------------------------------------------ */
.lj-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.lj-filter .pill{transition:background .15s ease,color .15s ease}
.lj-filter .pill.is-active,.lj-filter .pill:hover{background:var(--blue);color:#fff}
.lj-muted{color:var(--muted)}

.lj-nation{margin-bottom:44px}
.lj-nation-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:22px;border-bottom:2px solid var(--gold)}
.lj-nation-head h2{margin:4px 0 0}
.lj-nation-leader{margin:0;color:var(--ink);font-size:.92rem}
.lj-region{margin-bottom:28px}
.lj-region h3{margin:0 0 14px;color:var(--navy);font-size:1.15rem}
.lj-region-sub{display:block;margin-top:2px;color:var(--muted);font-size:.8rem;font-weight:600}

.lj-district-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.lj-district-card{display:flex;flex-direction:column;gap:10px;padding:22px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--sky);border-radius:var(--radius);transition:box-shadow .2s ease,transform .2s ease}
.lj-district-card:hover{box-shadow:0 12px 30px rgba(8,12,22,.10);transform:translateY(-2px)}
.lj-dc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lj-status{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep)}
.lj-status.is-formed{color:var(--blue)}
.lj-district-card h4{margin:0;font-size:1.08rem;line-height:1.3}
.lj-district-card h4 a{color:var(--navy)}
.lj-district-card h4 a:hover{color:var(--royal)}
.lj-city{margin:-6px 0 0;color:var(--muted);font-size:.86rem}
.lj-district-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:.88rem}
.lj-district-card dt{color:var(--muted);font-weight:700}
.lj-district-card dd{margin:0;color:var(--ink)}
.lj-formation p{margin:6px 0 0;color:var(--muted);font-size:.8rem}
.lj-district-card .btn{align-self:flex-start;margin-top:auto}

.lj-bar{height:8px;overflow:hidden;border-radius:999px;background:var(--line)}
.lj-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
.lj-bar-lg{height:12px;margin:14px 0 12px}

.lj-meeting{white-space:normal;font-size:1.02rem;color:var(--ink)}
.lj-oversight-head{margin:40px 0 0;color:var(--navy)}

@media (max-width:640px){
  .lj-nation-head{align-items:flex-start;flex-direction:column}
  .lj-leader-grid,.lj-district-grid{grid-template-columns:1fr}
}