/* ===========================
   WPUMX Social Wall v2 — Responsive & Clean
   =========================== */

/* Base */
.wpumx-sw2{
  --skn-red:#d11d2d;--card:#fff;--fg:#0f0f14;--muted:#667085;--b:#e5e7eb;--b2:#f3f4f6;
  --rad:14px;--shadow:0 8px 28px rgba(17,24,39,.06);
  --gap-xs:6px;--gap-sm:8px;--gap:12px;--gap-lg:14px;
}
.wpumx-sw2 *{box-sizing:border-box}
.wpumx-sw2 a{color:var(--fg);text-decoration:underline}
.wpumx-sw2 .muted{color:var(--muted)}
@media (prefers-reduced-motion: reduce){
  .wpumx-sw2 *, .wpumx-sw2 *::before, .wpumx-sw2 *::after{animation:none!important;transition:none!important}
}

/* Grid */
.wpumx-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:16px}
@media (max-width:1200px){.wpumx-grid{grid-template-columns:1.4fr .95fr}}
@media (max-width:980px){.wpumx-grid{grid-template-columns:1fr}}
/* single-column variant for public wall */
.wpumx-grid.wpumx-grid--single{grid-template-columns:1fr}

/* Offset first sidebar card */
.wpumx-side > .wpumx-card:first-child{margin-top:45px;margin-bottom:25px}
@media (max-width:980px){.wpumx-side > .wpumx-card:first-child{margin-top:0;margin-bottom:16px}}

/* Cards */
.wpumx-card{background:var(--card);border:1px solid var(--b);border-radius:var(--rad);box-shadow:var(--shadow);overflow:hidden}
.wpumx-card__hd{padding:12px 14px;border-bottom:1px solid var(--b);display:flex;align-items:center;gap:8px;min-height:44px}
.wpumx-card h3{margin:0;font-size:clamp(16px,1.7vw,18px);color:#0f172a;line-height:1.2}

/* Composer spacing + hide helper */
#wpumx-public-composer{margin-bottom:16px}
#wpumx-public-composer.is-hidden{display:none}
@media (max-width:640px){#wpumx-public-composer{margin-bottom:20px}}

/* Hide comment inputs for guests */
.is-guest .comm-form{display:none}

/* Tabs */
.wpumx-tabs{display:flex;gap:8px;margin:0 0 12px 0;flex-wrap:wrap}
.wpumx-tab{background:#fff;border:1px solid var(--b);color:#111;border-radius:999px;padding:8px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:36px}
.wpumx-tab.is-active{background:#7b1113;border-color:#7b1113;color:#fff}
.wpumx-panel{display:none}
.wpumx-panel.is-active{display:block}

/* Feed wrapper */
.wpumx-feed{display:flex;flex-direction:column;gap:10px;padding:10px 14px;background:var(--b2)}
.wpumx-feed.one{background:#fff}
@media (max-width:540px){.wpumx-feed{padding:8px}}

/* Post item */
.wpumx-item{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:12px;border:1px solid var(--b);border-radius:12px;padding:12px;background:#fff;align-items:start
}
.wpumx-item .content-col{min-width:0}
.wpumx-item > .comm-wrap{grid-column:1 / -1}
.wpumx-item .content-col > .meta,
.wpumx-item .content-col > .body,
.wpumx-item .content-col > .wpumx-gallery{width:100%}

/* Meta row */
.wpumx-item .meta{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;min-width:0;row-gap:4px
}
.wpumx-item .meta .spacer{flex:1 1 auto}
.wpumx-item .name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wpumx-item .time{font-size:12px;color:var(--muted);white-space:nowrap}

/* Tighten activity header so no “mystery gap” when it wraps */
.wpumx-feed[data-kind="activity"] .wpumx-item .meta .spacer{display:none}
.wpumx-feed[data-kind="activity"] .wpumx-item .meta .wpumx-badge{margin-left:auto}

/* ===== Pills / Badges ===== */
.wpumx-sw2 .permalink-pill,
.wpumx-sw2 .wpumx-badge{
  --pill-bg:#f3f4f6; --pill-b:#e5e7eb; --pill-fg:#0f0f14;
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; font-size:12.5px; font-weight:700; line-height:1.1;
  background:var(--pill-bg); color:var(--pill-fg);
  border:1px solid var(--pill-b); border-radius:999px;
  white-space:nowrap; text-decoration:none; min-height:28px; gap:6px;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.wpumx-item .meta .permalink-pill{ margin-left:auto; align-self:center }
.wpumx-sw2 .permalink-pill i{margin-right:6px}

/* Float mode for permalink in body, to wrap text around it */
.wpumx-sw2 .permalink-pill--float{ float:right; margin:2px 0 8px 10px }

/* Body text */
.wpumx-item .body{font-size:clamp(14px,1.5vw,15px);line-height:1.55;color:#111;overflow-wrap:anywhere}

/* Avatars */
.ava{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;flex:0 0 40px}
.ava-letter{display:grid;place-items:center;background:#111;color:#fff;font-weight:700;line-height:1;border:1px solid #000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);width:var(--s,40px);height:var(--s,40px);border-radius:50%}
@media (max-width:480px){
  .ava,.ava-letter{width:32px;height:32px;--s:32px}
}

/* Gallery */
.wpumx-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.wpumx-feed.one .wpumx-gallery{grid-template-columns:repeat(2,1fr)}
@media (max-width:780px){.wpumx-gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.wpumx-gallery{grid-template-columns:1fr}}
.wpumx-gallery .img-wrap{position:relative;display:block}
.wpumx-gallery img{width:100%;height:auto;object-fit:contain;border-radius:10px;border:1px solid var(--b);background:#fff;cursor:zoom-in;display:block}
.img-del{position:absolute;top:6px;right:6px;background:#111;color:#fff;border:0;border-radius:999px;width:32px;height:32px;display:grid;place-items:center;opacity:.88;cursor:pointer}
.img-del:hover{opacity:1}

/* Topbar */
.wpumx-topbar{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:0 0 12px}
.wpumx-topbar__title{margin:0;font-size:18px;line-height:1.5}
.wpumx-topbar .btn{white-space:nowrap}
@media (max-width:640px){
  .wpumx-topbar{flex-wrap:wrap;gap:8px}
  .wpumx-topbar__title{font-size:16px}
}

/* Post form */
.wpumx-postform{
  display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:12px 14px;border-bottom:1px solid var(--b);background:#fff
}
.wpumx-postform .form-col{min-width:0}
.wpumx-postform textarea{
  width:100%;font-family: inherit; border-radius:12px;border:1px solid var(--b);background:#fff;color:#111;padding:10px 12px;resize:vertical;line-height:1.35;min-height:84px
}
.wpumx-postform .row.attach{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.wpumx-postform .thumbs{display:flex;gap:6px;flex-wrap:wrap}
.wpumx-postform .thumbs .ph{position:relative}
.wpumx-postform .thumbs img{width:60px;height:60px;object-fit:cover;border-radius:8px;border:1px solid var(--b);display:block}
.wpumx-postform .thumbs .x{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border:0;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;cursor:pointer}
.wpumx-postform .char{font-size:12px;color:var(--muted);margin-left:auto}
@media (max-width:520px){
  .wpumx-postform{grid-template-columns:36px 1fr;gap:10px;padding:10px}
  .wpumx-postform .thumbs img{width:54px;height:54px}
}

/* Comments */
.comm-wrap{margin-top:12px;padding-top:10px;border-top:1px dashed var(--b);width:100%}
.comm{
  display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:flex-start;padding:8px 0
}
.comm .ava,.comm .ava-letter{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block}
.comm .c-body{
  font-size:14px;color:#111;background:#fff;border:1px solid var(--b);border-radius:12px;padding:8px 10px;line-height:1.4;width:100%;overflow-wrap:anywhere
}
.comm .c-meta{font-size:12px;color:var(--muted);margin-top:4px}
@media (max-width:480px){
  .comm{grid-template-columns:28px 1fr;gap:8px}
  .comm .ava,.comm .ava-letter{width:28px;height:28px}
}

/* Reply form */
.comm-form{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px;width:100%}
.comm-form input[type="text"]{
  width:100%;height:100px;padding:0 12px;border-radius:12px;border:1px solid var(--b);background:#fff;color:#111;font-size:14px;line-height:42px;outline:none
}
.comm-form input[type="text"]::placeholder{color:#9ca3af}
.comm-form input[type="text"]:focus{border-color:#d1d5db;box-shadow:0 0 0 3px rgba(17,24,39,.06)}
.comm-form .btn{
  width:100%;height:44px;padding:0 14px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;line-height:1
}

/* Buttons */
.btn, .btn:link, .btn:visited{
  appearance:none;border:1px solid var(--b);border-radius:999px;padding:8px 14px;background:#fff;color:#111;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;min-height:36px
}
.btn-primary{background:#7b1113; color:#fff}
.btn-danger{background:#111;border-color:#000;color:#fff}
.btn-tiny{padding:6px 8px;border-radius:8px;min-height:32px}

/* Side lists */
.wpumx-list{padding:0 6px 2px 18px}
.wpumx-list.wpumx-list--spaced .side-itm{margin:14px 0}
.side-itm{display:grid;grid-template-columns:32px 1fr;gap:10px;padding:8px 0;border-bottom:1px dashed var(--b);align-items:center}
.side-itm:last-child{border-bottom:0}
.side-itm .avatar-col .ava{width:32px;height:32px;border-radius:50%;object-fit:cover}
.side-itm .icon-col{width:32px;display:grid;place-items:center;color:var(--skn-red)}
.side-itm .title{font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-itm .sub{font-size:12.5px;color:var(--muted);margin-top:3px}
@media (max-width:520px){
  .side-itm{grid-template-columns:28px 1fr;gap:8px}
  .side-itm .avatar-col .ava{width:28px;height:28px}
}

/* Mini cards */
.wpumx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:25px}
@media (max-width:1024px){.wpumx-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.wpumx-cards{grid-template-columns:1fr}}
.wpumx-card-mini{border:1px solid var(--b);border-radius:12px;background:#fff;padding:12px}
.wpumx-card-mini .top{font-size:13px;color:#111;margin-bottom:6px}
.wpumx-card-mini .title{display:block;font-weight:700;margin-bottom:6px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpumx-card-mini .thumb img{width:100%;height:auto;border-radius:10px;border:1px solid var(--b);display:block}

/* Toasts */
.wpumx-toast-wrap{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:999999}
.wpumx-toast{background:#111;border:1px solid #000;color:#fff;padding:10px 12px;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.35);max-width:min(320px,90vw);font-size:14px;opacity:0;transform:translateY(6px);animation:wpumx-toast-in .2s ease forwards}
@keyframes wpumx-toast-in{to{opacity:1;transform:none}}
@media (max-width:420px){
  .wpumx-toast-wrap{left:10px;right:10px;bottom:10px}
  .wpumx-toast{max-width:100%}
}

/* Safety: if a badge gets rendered after .meta, still keep it tight */
.wpumx-feed[data-kind="activity"] .wpumx-item > .content-col > .wpumx-badge{margin-left:auto;display:inline-flex}


/* Lightbox */
#wpumxLightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:999999;padding:4vw}
#wpumxLightbox img{max-width:92vw;max-height:92vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5);display:block}
#wpumxLightbox.is-open{display:flex}

/* ===========================
   NEW: extra responsive refinements
   =========================== */

/* Large tablets / small laptops */
@media (max-width: 1024px){
  .wpumx-grid{gap:14px}
  .wpumx-card__hd{padding:10px 12px;min-height:40px}
  .wpumx-item{gap:10px;padding:10px}
  .wpumx-item .meta{gap:6px}
}

/* Narrow tablets */
@media (max-width: 780px){
  .wpumx-feed{gap:8px;padding:8px 10px}
  .wpumx-item{grid-template-columns:42px minmax(0,1fr)}
  .wpumx-item .body{font-size:15px}
  .wpumx-topbar{gap:8px}
}

/* Phones (portrait-ish) */
@media (max-width: 640px){
  .wpumx-grid{gap:12px}
  .wpumx-card{border-radius:12px}
  .wpumx-item{
    grid-template-columns:38px minmax(0,1fr);
    padding:10px;border-radius:12px
  }
  .wpumx-item .meta{row-gap:2px}
  .wpumx-item .meta .name{max-width:64%}
  .wpumx-sw2 .permalink-pill{font-size:12px;min-height:26px;padding:5px 9px}
  /* If a pill is floated inside body, stop floating on small screens */
  .wpumx-sw2 .permalink-pill--float{float:none;display:inline-flex;margin:6px 0}
}

/* Smaller phones */
@media (max-width: 520px){
  .wpumx-feed{padding:8px}
  .wpumx-item{grid-template-columns:34px 1fr;gap:9px}
  .wpumx-item .body{font-size:14.5px;line-height:1.52}
  .wpumx-item .meta .name{max-width:60%}
  .wpumx-topbar__title{font-size:15px}
  .wpumx-postform textarea{min-height:78px}
}

/* Very small phones */
@media (max-width: 420px){
  .wpumx-item{grid-template-columns:32px 1fr;padding:9px;border-radius:10px}
  .wpumx-item .meta{gap:5px}
  .wpumx-item .meta .time{font-size:11.5px}
  .wpumx-sw2 .permalink-pill{font-size:11.5px;padding:4px 8px}
  .wpumx-gallery{gap:6px}
  .comm .c-body{font-size:13.5px;padding:7px 9px}
}