/* =========================================================
   Supporters Page
   Initial layout pass + Individuals directory (demo scope)
   ========================================================= */

body.page-id-1203 {
  --wwrof-rail-shell: 1120px;
  --wwrof-rail-reading: 750px;
}

body.page-id-1203 .entry-content {
  display: grid;
  grid-template-columns:
    minmax(var(--wwrof-gutter, 16px), 1fr)
    minmax(0, var(--wwrof-rail-shell, 1120px))
    minmax(var(--wwrof-gutter, 16px), 1fr);
}

body.page-id-1203 .entry-content > * {
  grid-column: 2;
  min-width: 0;
}

body.page-id-1203 .wwrof-page-shell {
  padding-bottom: clamp(24px, 4vw, 44px);
}

/* Align hero content block with the same shell edge used by the grid/text below. */
body.page-id-1203 .wwrof-page-shell > .wwrof-hero.wwrof-hero--info .wwrof-reading-rail-left {
  width: 100%;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left;
}

body.page-id-1203 .wwrof-page-shell > .wwrof-hero.wwrof-hero--info .wwrof-reading-rail-left > .wp-block-heading,
body.page-id-1203 .wwrof-page-shell > .wwrof-hero.wwrof-hero--info .wwrof-reading-rail-left > p {
  width: min(100%, var(--wwrof-rail-reading, 750px));
  max-width: min(100%, var(--wwrof-rail-reading, 750px)) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

body.page-id-1203 .wwrof-page-shell > .wwrof-hero.wwrof-hero--info {
  padding-bottom: clamp(16px, 3vw, 32px);
}

/* Keep section headings/supporting copy on a left-anchored reading rail. */
body.page-id-1203 .entry-content > h2.wp-block-heading,
body.page-id-1203 .entry-content > p {
  width: min(100%, var(--wwrof-rail-reading, 750px));
  margin-left: 0;
  margin-right: auto;
  justify-self: start;
  text-align: left;
}

body.page-id-1203 .entry-content > h2.wp-block-heading {
  margin-top: clamp(14px, 2vw, 23px);
  margin-bottom: 10px;
}

body.page-id-1203 .wwrof-supporters-directory {
  width: min(100%, var(--wwrof-rail-shell, 1120px));
  margin: clamp(16px, 2.8vw, 28px) auto clamp(34px, 5vw, 48px);
}

body.page-id-1203 .wwrof-supporters-directory__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

body.page-id-1203 .wwrof-supporters-directory__search {
  min-height: 44px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--wwrof-border) 82%, var(--wwrof-accent) 18%);
  border-radius: 10px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--wwrof-bg) 94%, var(--wwrof-surface) 6%);
  color: var(--wwrof-text);
  font: inherit;
}

body.page-id-1203 .wwrof-supporters-directory__search:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--wwrof-focus);
}

body.page-id-1203 .wwrof-supporters-directory__count {
  color: var(--wwrof-muted);
  font-size: 0.92rem;
  white-space: nowrap;
}

body.page-id-1203 .wwrof-supporters-directory__viewport {
  margin-top: 14px;
  position: relative;
  max-height: clamp(300px, 55vh, 520px);
  overflow: auto;
  padding: 16px 0;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--wwrof-muted) 36%, transparent) transparent;
}

body.page-id-1203 .wwrof-supporters-directory__viewport::before,
body.page-id-1203 .wwrof-supporters-directory__viewport::after {
  content: "";
  position: sticky;
  left: 0;
  right: 0;
  z-index: 2;
  display: block;
  height: 28px;
  pointer-events: none;
}

body.page-id-1203 .wwrof-supporters-directory__viewport::before {
  top: 0;
  margin-bottom: -28px;
  background: linear-gradient(to bottom, var(--wwrof-bg) 0%, color-mix(in srgb, var(--wwrof-bg) 0%, transparent) 100%);
}

body.page-id-1203 .wwrof-supporters-directory__viewport::after {
  bottom: 0;
  margin-top: -28px;
  background: linear-gradient(to top, var(--wwrof-bg) 0%, color-mix(in srgb, var(--wwrof-bg) 0%, transparent) 100%);
}

/* Auto-disabled by JS when results do not overflow the viewport. */
body.page-id-1203 .wwrof-supporters-directory__viewport.wwrof-supporters-directory__viewport--no-fade::before,
body.page-id-1203 .wwrof-supporters-directory__viewport.wwrof-supporters-directory__viewport--no-fade::after {
  display: none;
}

body.page-id-1203 .wwrof-supporters-directory__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 8px 20px;
}

/* "No-border" subtle grid rows inspired by supporter strip tone. */
body.page-id-1203 .wwrof-supporters-directory__item {
  margin: 0;
  padding: 6px 2px;
  min-width: 0;
  color: color-mix(in srgb, var(--wwrof-text) 88%, var(--wwrof-muted) 12%);
}

body.page-id-1203 .wwrof-supporters-directory__label {
  display: block;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body.page-id-1203 .wwrof-supporters-directory__meta {
  display: block;
  margin-top: 2px;
  color: color-mix(in srgb, var(--wwrof-muted) 88%, transparent);
  font-size: 0.78rem;
  line-height: 1.25;
}

body.page-id-1203 .wwrof-supporters-directory__empty {
  margin: 4px 0 0;
  color: var(--wwrof-muted);
  font-size: 0.92rem;
}

@media (max-width: 922px) {
  body.page-id-1203 .wwrof-supporters-directory__toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body.page-id-1203 .wwrof-supporters-directory__count {
    white-space: normal;
  }

  body.page-id-1203 .wwrof-supporters-directory__grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px 14px;
  }
}