/* ============================================================
   ZR — Forum / Articles (React-canvas pixel match)
   ============================================================ */
.zr-forum{
  /* Theme fallbacks */
  --zr-wrap: 1200px;
  --zr-hero-bg: #f6f9f8;
  --zr-text: #0f172a;          /* slate-900 */
  --zr-muted-2: #64748b;       /* slate-500/600 */
  --zr-border: #e2e8f0;        /* slate-200 */
  --zr-chip: #f1f5f9;          /* slate-100 */
  --zr-card: #ffffff;
  --zr-primary: var(--zr-green, #0d4b3e);
  --zr-primary-weak: color-mix(in srgb, var(--zr-primary) 12%, white);
  --zr-radius-xl: 20px;        /* rounded-2xl feel */
  --zr-radius-md: 12px;
  --zr-shadow-card: 0 8px 28px rgba(2,6,23,.08);

  /* Keep page look like the React canvas */
  background: #fff;
}

/* Neutralize theme constraints inside this template */
#zr-forum .entry-content > *,
#zr-forum .wp-block-group > *,
#zr-forum article,
#zr-forum .alignwide,
#zr-forum .alignfull { max-width: none !important; }
#zr-forum * { box-sizing: border-box; }

/* ---------- HERO ---------- */
.zr-forum__hero{ background: var(--zr-hero-bg); border-bottom: 1px solid rgba(15,23,42,.06); }
.zr-forum__wrap{ max-width: var(--zr-wrap); margin-inline: auto; padding-inline: 24px; }
.zr-forum__hero-inner{ padding: 72px 0 48px; text-align: center; }
.zr-forum__hero-title{ margin:0; font-weight:800; letter-spacing:-.02em; color:var(--zr-text); font-size:clamp(32px,4.5vw,64px); }
.zr-forum__hero-sub{ margin:16px auto 0; color:var(--zr-muted-2); max-width:720px; font-size:18px; }

/* ---------- LAYOUT ---------- */
.zr-forum__content{ display:grid; grid-template-columns:1fr; gap:32px; padding-top:56px; }
@media (min-width:1024px){ .zr-forum__content{ grid-template-columns:300px 1fr; } }
.zr-forum__aside{ position:sticky; top:24px; height:fit-content; }

/* ---------- SIDEBAR PANEL ---------- */
.zr-forum__card{ border:1px solid var(--zr-border); background:var(--zr-card); border-radius:var(--zr-radius-xl); overflow:hidden; }
.zr-forum__card-h{ padding:16px 16px 8px; font-weight:700; }
.zr-forum__card-b{ padding:0 16px 16px; }

/* ---------- FILTERS ---------- */
.zr-forum__filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.zr-forum__pill{ border:1px solid var(--zr-border); background:#fff; color:#0b1221; border-radius:9999px; padding:8px 12px; font-size:14px; line-height:1; transition:border-color .15s, background-color .15s, color .15s, box-shadow .15s; }
.zr-forum__pill:hover{ border-color: var(--zr-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--zr-primary) 20%, transparent); }
.zr-forum__pill.is-active{ background: var(--zr-primary); border-color: var(--zr-primary); color:#fff; }

.zr-forum__sort-l{ display:block; margin:12px 0 6px; color:var(--zr-muted-2); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.zr-forum__sort{
  width:100%; border:1px solid var(--zr-border); border-radius:var(--zr-radius-md); background:#fff;
  padding:10px 12px; font-size:14px; appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%), linear-gradient(135deg, #94a3b8 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}

/* ---------- GRID ---------- */
/* Auto-fill prevents the lonely narrow card problem and matches React’s responsive feel */
.zr-forum__grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:24px;
  align-items: stretch;
}
@media (max-width:639.98px){ .zr-forum__grid{ grid-template-columns:1fr; } }

/* ---------- POST CARD ---------- */
.zr-forum__card--post{
  display:flex; flex-direction:column; border:1px solid var(--zr-border);
  border-radius:var(--zr-radius-xl); background:#fff; overflow:hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.zr-forum__card--post:hover{ box-shadow: var(--zr-shadow-card); transform: translateY(-1px); }

.zr-forum__media{ aspect-ratio:16/9; background: linear-gradient(135deg,#eef2f6,#f8fafc); overflow:hidden; }
.zr-forum__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.zr-forum__ph{ width:100%; height:100%; background-image: linear-gradient(135deg,#eef2f6,#f8fafc); }

/* Body */
.zr-forum__post{ padding:16px; display:flex; flex-direction:column; gap:8px; }
.zr-forum__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
.zr-forum__tag{ background:var(--zr-chip); border:1px solid var(--zr-border); border-radius:9999px; padding:6px 10px; font-size:12px; color:#0b1221; }

/* Title (2 lines), Excerpt (3 lines) — line clamps like React */
.zr-forum__title{ margin:2px 0 6px 0; font-weight:800; color:var(--zr-text); font-size:20px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.zr-forum__title a{ color:inherit; text-decoration:none; }
.zr-forum__title a:hover{ color:var(--zr-primary); }
.zr-forum__excerpt{ margin:0 0 8px; color:var(--zr-muted-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Meta row + buttons */
.zr-forum__meta{ display:flex; align-items:center; gap:16px; color:var(--zr-muted-2); font-size:14px; }
.zr-forum__meta-item{ display:inline-flex; align-items:center; gap:8px; }
.zr-forum__meta .i{ width:16px; height:16px; flex:0 0 16px; color:#475569; }

.zr-forum__btn{ border:1px solid var(--zr-border); border-radius:var(--zr-radius-md); padding:8px 12px; display:inline-flex; gap:8px; align-items:center; text-decoration:none; color:var(--zr-text); background:#fff; font-weight:600; transition:border-color .15s ease, background-color .15s ease, color .15s ease; }
.zr-forum__btn:hover{ border-color:var(--zr-primary); }
.zr-forum__btn--ghost{ margin-left:auto; }
.zr-forum__btn--primary{ border-color:var(--zr-primary); background:var(--zr-primary); color:#fff; }
.zr-forum__chev{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:9999px; background:var(--zr-primary-weak); margin-left:4px; }

/* More */
.zr-forum__more{ display:grid; place-items:center; text-align:center; margin-top:24px; }
.zr-forum__more .zr-forum__btn{ margin:0 auto; }

/* Normalize form controls font to theme */
.zr-forum select, .zr-forum button { font-family: inherit; }

/* a11y helper */
.zr-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }