/* DYW Supporters Directory */
.dyw-sup {
  --dyw-sup-navy: #1E2443;
  --dyw-sup-ink: #0F1E3D;
  --dyw-sup-yellow: #F5C542;
  --dyw-sup-controls-bg: #FCFBF8;
  --dyw-sup-name-columns: 3;
  --e-global-color-accent: var(--dyw-sup-navy);
  color: var(--dyw-sup-ink);
  font-family: inherit;
}
.dyw-sup *, .dyw-sup *::before, .dyw-sup *::after { box-sizing: border-box; }

/* Stat strip */
.dyw-sup__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(15,30,61,.12);
  border-bottom: 1px solid rgba(15,30,61,.12);
}
@media (min-width: 768px) { .dyw-sup__stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.dyw-sup__stat-n { font-family: "Barlow Condensed", Impact, sans-serif; font-size: 2.25rem; line-height: 1; font-weight: 700; }
@media (min-width: 768px) { .dyw-sup__stat-n { font-size: 3rem; } }
.dyw-sup__stat-l { margin-top: .35rem; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: rgba(15,30,61,.6); }

/* Controls bar */
.dyw-sup__controls {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1rem 0; border-bottom: 1px solid rgba(15,30,61,.12);
  position: sticky; top: 0; background: var(--dyw-sup-controls-bg); z-index: 5;
}
.dyw-sup__search {
  position: relative; flex: 1 1 260px; max-width: 380px;
}
.dyw-sup__search input {
  width: 100%; padding: .75rem 1rem .75rem 2.5rem;
  border: 1px solid rgba(15,30,61,.2); border-radius: 999px;
  background: #fff; font-size: 14px; color: #0F1E3D;
}
.dyw-sup__search input:focus { outline: none; border-color: #0F1E3D; }
.dyw-sup__search svg {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: rgba(15,30,61,.5);
}

.dyw-sup__az { display: flex; flex-wrap: wrap; gap: 2px; }
.dyw-sup__az button,
.dyw-sup__az button[type="button"] {
  appearance: none;
  width: 28px; height: 28px; border-radius: 999px; border: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: transparent !important; color: rgba(15,30,61,.7) !important; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: none !important; text-decoration: none !important;
}
.dyw-sup__az button:hover:not(:disabled),
.dyw-sup__az button:focus:not(:disabled) {
  background: var(--dyw-sup-yellow) !important;
  color: var(--dyw-sup-navy) !important;
}
.dyw-sup__az button.is-active,
.dyw-sup__az button[aria-pressed="true"] {
  background: var(--dyw-sup-navy) !important;
  color: #fff !important;
}
.dyw-sup__az button.is-active:hover,
.dyw-sup__az button.is-active:focus,
.dyw-sup__az button[aria-pressed="true"]:hover,
.dyw-sup__az button[aria-pressed="true"]:focus {
  background: var(--dyw-sup-navy) !important;
  color: #fff !important;
}
.dyw-sup__az button:disabled { color: rgba(15,30,61,.2); cursor: not-allowed; }
.dyw-sup__az button.is-all { width: auto; padding: 0 .75rem; }

/* Directory */
.dyw-sup__list { display: flex; flex-direction: column; gap: 3rem; padding: 3rem 0; }
.dyw-sup__group {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  padding-top: 2rem; border-top: 1px solid rgba(15,30,61,.12);
}
@media (min-width: 768px) { .dyw-sup__group { grid-template-columns: 2fr 10fr; } }

.dyw-sup__letter { font-family: "Barlow Condensed", Impact, sans-serif; font-size: 4rem; line-height: 1; font-weight: 700; }
@media (min-width: 768px) { .dyw-sup__letter { font-size: 5rem; } }
.dyw-sup__count { margin-top: .5rem; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: rgba(15,30,61,.5); }

.dyw-sup__names {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--dyw-sup-name-columns), minmax(0, 1fr)); column-gap: 2rem;
}
@media (max-width: 767px) { .dyw-sup__names { grid-template-columns: repeat(var(--dyw-sup-name-columns-mobile, 1), minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1023px) { .dyw-sup__names { grid-template-columns: repeat(var(--dyw-sup-name-columns-tablet, 2), minmax(0, 1fr)); } }

.dyw-sup__names li {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem 0; border-bottom: 1px solid rgba(15,30,61,.1);
  font-size: 14px; color: rgba(15,30,61,.85); line-height: 1.35;
}
.dyw-sup__dot { flex: none; width: 6px; height: 6px; border-radius: 999px; background: #F5C542; margin-top: .5rem; }

.dyw-sup__empty { padding: 6rem 0; text-align: center; color: rgba(15,30,61,.6); }
.dyw-sup__group.is-hidden { display: none; }
.dyw-sup__names li.is-hidden { display: none; }