/* =====================================================================
   pages/members.css — Member organisations directory page.
   Adds the member grid + card layout (.mem-grid / .mem / .mem-logo).
   .mem-type colour variants and .next-step live in common.css.
   ===================================================================== */

body.skin .view-pirt-members-directory{
  display:block !important;
  width:100% !important;
  grid-template-columns:none !important;
  gap:0 !important;
}

body.skin #block-pirt-main-content .views-element-container > .view-pirt-members-directory,
body.skin #block-pirt-main-content .views-element-container > [class*="js-view-dom-id-"].view-pirt-members-directory{
  display:block !important;
  width:100% !important;
  grid-template-columns:none !important;
  gap:0 !important;
}

body.skin .view-pirt-members-directory > *{
  grid-column:1 / -1 !important;
}

body.skin .view-pirt-members-directory .view-content{
  display:block !important;
  width:100% !important;
  grid-template-columns:none !important;
  gap:0 !important;
}

body.skin .view-pirt-members-directory .views-row{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.pirt-members-toolbar{
  margin-bottom:18px;
}

body.skin .pirt-members-toolbar .filters{
  flex:0 0 auto;
  flex-wrap:nowrap !important;
  width:auto;
}

body.skin .pirt-members-toolbar .filters label{
  display:inline-flex !important;
  margin:0 4px 0 0 !important;
}

body.skin .pirt-members-toolbar .filters select{
  flex:0 0 auto;
  width:auto !important;
  min-width:180px;
}

.pirt-members-tagrow a.pill{
  text-decoration:none;
}

body.skin #mem-list.mem-grid,
.mem-grid{
  display:grid !important;
  width:100%;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
}
.mem{
  min-height:100%;
  background:#fff;border:1px solid var(--sp-line);
  border-radius:var(--sp-radius-md);padding:22px 18px;
  box-shadow:var(--sp-shadow);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .25s,box-shadow .25s,border-color .25s;
  color:inherit;text-decoration:none;
  overflow:hidden;
}
a.mem:hover{transform:translateY(-3px);box-shadow:var(--sp-shadow-md);border-color:var(--sp-primary);color:inherit}
div.mem{cursor:default}
/* 2026-05-17: unified RECTANGULAR logo slot for ALL member cards. Two
   variants render in the same 200×88 footprint so the grid stays uniform:
     .mem-logo--brand        → org's real brand logo, native aspect, white bg.
     .mem-logo--placeholder  → acronym text on a DASHED-outline plate with a
                               muted "Logo to come" caption so editors can
                               spot which members still need a logo upload. */
.mem-logo{
  width:100%;
  max-width:200px;
  height:88px;
  border-radius:10px;
  margin:6px auto 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.mem-logo img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:0;
  display:block;
}

/* Brand variant — pure white surface, 1px solid border, contains real logo. */
.mem-logo--brand{
  background:#fff;
  padding:10px 14px;
  box-shadow:inset 0 0 0 1px var(--sp-line);
}

/* Placeholder variant — dashed outline + acronym + "Logo to come" caption.
   Visually distinct so editors can quickly see which members still need
   a brand asset. NOT a fake photo — explicit "missing" affordance. */
.mem-logo--placeholder{
  flex-direction:column;
  gap:4px;
  padding:8px 12px;
  background:repeating-linear-gradient(135deg,
    rgba(232,238,243,.45) 0 8px,
    rgba(232,238,243,.85) 8px 16px);
  box-shadow:inset 0 0 0 1.5px var(--sp-line);
  outline:1.5px dashed rgba(91,123,156,.45);
  outline-offset:-6px;
}
.mem-logo--placeholder .mem-logo__acronym{
  font-weight:800;
  font-size:22px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--sp-primary);
  line-height:1;
}
.mem-logo--placeholder .mem-logo__missing{
  font-size:9px;
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:#6b7480;
  opacity:.85;
}
.mem-type{
  font-size:9.5px;padding:3px 9px;letter-spacing:1.2px;
  border-radius:999px;text-transform:uppercase;font-weight:800;
  margin-bottom:8px;align-self:center;
  background:rgba(0,145,194,.1);color:#006a9c;
}
.mem .acr{
  font-size:11px;font-weight:700;color:var(--sp-primary);
  text-transform:uppercase;letter-spacing:1.2px;margin-bottom:4px;
}
.mem h4{font-size:14.5px;font-weight:700;color:var(--sp-secondary-d);margin-bottom:8px;line-height:1.35}
.mem p{font-size:12.5px;color:var(--sp-muted);line-height:1.55;margin:0}

/* Closing call-out card on members page */
.cta-block{
  margin-top:48px;padding:32px;
  background:#fff;border:1px solid var(--sp-line);
  border-radius:14px;text-align:center;
}
.cta-block h3{font-size:20px;color:var(--sp-secondary-d);margin-bottom:10px}
.cta-block p{
  color:var(--sp-muted);font-size:14.5px;
  margin:0 auto 18px;max-width:560px;
}
.member-body-actions{margin-top:32px}
.member-contact-copy{font-size:13.5px;color:var(--sp-muted);line-height:1.6;margin-bottom:14px}
.member-contact-link{margin-top:8px}
.member-portal-heading{margin-top:0}
.member-portal-cta-grid{grid-template-columns:repeat(2,1fr)}
.member-portal-org-card{text-align:center}
.member-portal-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#018081,#0054A4);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;margin:0 auto 12px}
.member-portal-org-name{font-size:15px;font-weight:700;color:var(--sp-secondary-d)}
.member-portal-acronym{font-size:12.5px;color:var(--sp-muted);margin-bottom:14px}
.member-portal-edit{display:block;margin-top:10px;font-size:12px;color:var(--sp-muted);font-weight:600;text-transform:uppercase;letter-spacing:1px}
.member-portal-contact-copy{font-size:13px;color:var(--sp-muted);line-height:1.6;margin-bottom:12px}

@media (max-width:1024px){
  body.skin #mem-list.mem-grid,
  .mem-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (max-width:880px){
  body.skin #mem-list.mem-grid,
  .mem-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:560px){
  body.skin #mem-list.mem-grid,
  .mem-grid{grid-template-columns:1fr !important}
}