/**
 * Public Website — Wards section (Phase 8)
 * Scoped `.pub-wd-*` (listing) / `.pub-wdd-*` (detail page).
 */

.pub-wd-header { background: var(--nkst-color-surface-alt, #f0f2f5); padding: 1.75rem 1rem; text-align: center; }
.pub-wd-header h1 { font-size: var(--nkst-font-xl, 22px); font-weight: 800; margin: 0 0 .5rem; color: var(--nkst-color-text, #1f2937); }
.pub-wd-header p { font-size: var(--nkst-font-sm, 14px); color: var(--nkst-color-text-muted, #6b7280); margin: 0; }

.pub-wd-section { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1rem; }
.pub-wd-section + .pub-wd-section { padding-top: 0; }
.pub-wd-section-narrow { max-width: 760px; }

.pub-wd-section-title { font-size: var(--nkst-font-lg, 19px); font-weight: 800; color: var(--nkst-color-text, #1f2937); margin: 0 0 .85rem; }

/* Section 2 — What is a Ward */
.pub-wd-explain-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px) { .pub-wd-explain-grid { grid-template-columns: repeat(2, 1fr); } }
.pub-wd-explain-card { background: #fff; border: 1px solid var(--nkst-color-border, #e5e7eb); border-radius: var(--nkst-radius-md, 12px); padding: 1rem; display: flex; gap: .75rem; align-items: flex-start; }
.pub-wd-explain-icon { width: 38px; height: 38px; border-radius: 50%; background: rgba(30,58,138,.08); color: var(--nkst-color-primary, #1e3a8a); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; }
.pub-wd-explain-title { font-size: var(--nkst-font-sm, 14px); font-weight: 800; color: var(--nkst-color-text, #1f2937); margin: 0 0 .25rem; }
.pub-wd-explain-text { font-size: var(--nkst-font-xs, 13px); color: var(--nkst-color-text-muted, #6b7280); line-height: 1.55; margin: 0; }

/* Section 3 — Search */
.pub-wd-search-wrap { position: relative; max-width: 480px; margin: 0 auto; }
.pub-wd-search-icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--nkst-color-text-muted, #6b7280); font-size: .9rem; }
.pub-wd-search-input { width: 100%; padding: .7rem .9rem .7rem 2.35rem; border-radius: var(--nkst-radius-md, 12px); border: 1px solid var(--nkst-color-border, #e5e7eb); font-size: var(--nkst-font-sm, 14px); box-sizing: border-box; }
.pub-wd-count { text-align: center; font-size: var(--nkst-font-2xs, 12px); color: var(--nkst-color-text-muted, #6b7280); margin-top: .6rem; }

/* Section 4 — Ward cards */
.pub-wd-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: 1rem; }
@media (min-width: 640px) { .pub-wd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pub-wd-grid { grid-template-columns: repeat(3, 1fr); } }

.pub-wd-card { background: #fff; border: 1px solid var(--nkst-color-border, #e5e7eb); border-radius: var(--nkst-radius-md, 12px); padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.pub-wd-card-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(5,150,105,.1); color: #059669; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.pub-wd-card-name { font-size: var(--nkst-font-md, 16px); font-weight: 800; color: var(--nkst-color-text, #1f2937); margin: 0; }
.pub-wd-card-desc { font-size: var(--nkst-font-xs, 13px); color: var(--nkst-color-text-muted, #6b7280); line-height: 1.5; margin: 0; }
.pub-wd-card-meta { font-size: var(--nkst-font-2xs, 12px); color: var(--nkst-color-text-muted, #6b7280); display: flex; flex-direction: column; gap: .3rem; }
.pub-wd-card-meta span { display: flex; align-items: center; gap: .4rem; }
.pub-wd-card-cta-row { display: flex; gap: .5rem; margin-top: auto; padding-top: .4rem; flex-wrap: wrap; }
.pub-wd-card-cta-row .pub-btn { font-size: var(--nkst-font-2xs, 12px); padding: .45rem .8rem; display: inline-flex; align-items: center; justify-content: center; }

.pub-wd-empty { background: #fff; border: 1px dashed var(--nkst-color-border, #e5e7eb); border-radius: var(--nkst-radius-md, 12px); padding: 2rem 1.25rem; text-align: center; color: var(--nkst-color-text-muted, #6b7280); grid-column: 1/-1; }
.pub-wd-empty i { font-size: 1.5rem; margin-bottom: .5rem; display: block; color: var(--nkst-color-border, #d1d5db); }
.pub-wd-empty p { font-size: var(--nkst-font-sm, 14px); margin: 0; }

/* Section 6 — Join CTA */
.pub-wd-join-band { background: linear-gradient(135deg, var(--nkst-color-primary, #1e3a8a), #16296b); border-radius: var(--nkst-radius-lg, 16px); padding: 2rem 1.25rem; text-align: center; color: #fff; }
.pub-wd-join-title { font-size: var(--nkst-font-lg, 19px); font-weight: 800; margin: 0 0 .4rem; }
.pub-wd-join-desc { font-size: var(--nkst-font-sm, 14px); color: rgba(255,255,255,.85); max-width: 46ch; margin: 0 auto 1.1rem; }
.pub-wd-join-actions { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; }
.pub-wd-join-actions .pub-btn { display: inline-flex; align-items: center; justify-content: center; }
.pub-wd-join-actions .pub-btn-primary { background: #fff; color: var(--nkst-color-primary, #1e3a8a); }
.pub-wd-join-actions .pub-btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }

/* ══════════════════════════════════
   WARD DETAIL PAGE
══════════════════════════════════ */
.pub-wdd-cover { padding: 2.25rem 1rem 1.75rem; text-align: center; color: #fff; background: linear-gradient(135deg, #059669, #064e3b); }
.pub-wdd-cover-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; margin: 0 auto .75rem; border: 3px solid rgba(255,255,255,.35); }
.pub-wdd-cover h1 { font-size: var(--nkst-font-xl, 22px); font-weight: 800; margin: 0; }

.pub-wdd-back { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--nkst-font-xs, 13px); font-weight: 700; color: var(--nkst-color-primary, #1e3a8a); text-decoration: none; margin-bottom: 1rem; }
.pub-wdd-block { background: #fff; border: 1px solid var(--nkst-color-border, #e5e7eb); border-radius: var(--nkst-radius-md, 12px); padding: 1.1rem; margin-bottom: 1rem; }
.pub-wdd-block-title { font-size: var(--nkst-font-md, 16px); font-weight: 800; margin: 0 0 .6rem; color: var(--nkst-color-text, #1f2937); }
.pub-wdd-block-text { font-size: var(--nkst-font-sm, 14px); line-height: 1.65; color: var(--nkst-color-text, #1f2937); margin: 0; }
.pub-wdd-inline-empty { font-size: var(--nkst-font-sm, 14px); color: var(--nkst-color-text-muted, #6b7280); text-align: center; padding: .5rem 0; margin: 0; }
.pub-wdd-cta-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.pub-wdd-cta-row .pub-btn { display: inline-flex; align-items: center; justify-content: center; }