
.public-page-main {
  min-height: 62vh;
  padding-bottom: 58px;
  background:
    radial-gradient(circle at top right, rgba(15, 102, 160, 0.06), transparent 28rem),
    linear-gradient(180deg, var(--white) 0%, var(--page) 100%);
}

.public-page-shell {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}

.public-page-hero {
  position: relative;
  overflow: hidden;
  width: 100vw;
  min-height: 180px;
  margin: 0 0 30px calc(50% - 50vw);
  padding: 38px max(var(--gutter-desktop), calc((100vw - 1180px) / 2 + var(--gutter-desktop)));
  color: var(--white);
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 31, 56, 0.98) 0%,
      rgba(6, 47, 84, 0.94) 38%,
      rgba(15, 102, 160, 0.76) 67%,
      rgba(4, 31, 56, 0.58) 100%
    ),
    url("../images/trackpic.png");
  background-position: center, center 56%;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 -3px 0 var(--gold);
}

.public-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 31, 56, 0.24), transparent 65%);
  pointer-events: none;
}

.public-page-hero h1 {
  position: relative;
  z-index: 1;
  max-width: 850px;
  margin: 0;
  color: var(--white);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.32);
  text-transform: uppercase;
}

.public-page-hero h1::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin-top: 13px;
  background: var(--gold);
  border-radius: 999px;
}

.public-page-hero p {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 15px 0 0;
  color: #f1f6fb;
  font-size: 1.04rem;
  line-height: 1.55;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}

.resource-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.resource-info,
.resource-card,
.officer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
}

.resource-info {
  padding: 24px;
}

.resource-info h2,
.resource-card h2 {
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 1.15rem;
}

.resource-info p,
.resource-card p {
  color: var(--muted);
  line-height: 1.65;
}

.resource-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
}

.resource-toolbar input,
.resource-toolbar select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
}

.resource-list {
  display: grid;
  gap: 14px;
}

.resource-card {
  display: grid;
  gap: 9px;
  padding: 20px;
}

.resource-action,
.public-email-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 42px;
  margin-top: 6px;
  padding: 9px 16px;
  color: var(--white);
  background: var(--blue);
  border: 1px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: 0 5px 14px rgba(6, 41, 74, 0.18);
  font-weight: 800;
  text-decoration: none;
  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.resource-action:hover,
.resource-action:focus-visible,
.public-email-button:hover,
.public-email-button:focus-visible {
  background: var(--blue-bright);
  box-shadow: 0 9px 20px rgba(6, 41, 74, 0.24);
  transform: translateY(-2px);
}

.officer-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.officer-group-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--navy);
  font-size: 1.05rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.officer-group-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-dark);
}

.officer-list {
  display: grid;
  gap: 12px;
}

.officer-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 104px;
  padding: 14px 16px;
}

.officer-role {
  display: block;
  margin-bottom: 3px;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.officer-card h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.18rem;
  line-height: 1.2;
}

.officer-area {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.resource-empty {
  padding: 26px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  text-align: center;
}

@media (max-width: 1100px) {

  .public-page-shell {
    padding-inline: var(--gutter-tablet);
  }

  .public-page-hero {
    padding-inline: max(var(--gutter-tablet), calc((100vw - 1180px) / 2 + var(--gutter-tablet)));
  }
}

@media (max-width: 900px) {
  .officer-groups,
  .resource-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {

  .public-page-main {
    padding-bottom: 40px;
  }

  .public-page-shell {
    padding-inline: var(--gutter-mobile);
  }

  .public-page-hero {
    min-height: 165px;
    padding: 28px var(--gutter-mobile);
    background-position: center, 62% center;
  }

  .resource-toolbar {
    grid-template-columns: 1fr;
  }

  .officer-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    min-height: 96px;
  }

  .public-email-button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 460px) {

  .public-page-shell {
    padding-inline: 18px;
  }

  .public-page-hero {
    padding-inline: 18px;
  }
}
.member-question-panel,.member-question-history{margin-bottom:18px;padding:20px;background:#fff;border:1px solid #dbe5ef;border-radius:10px;box-shadow:0 8px 24px rgba(5,42,74,.08)}.member-question-panel{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.4fr);gap:22px}.member-question-panel h2,.member-question-history h2,.resource-section-heading h2{margin:0 0 6px;color:#062f54}.resource-eyebrow{margin:0 0 4px;color:#075eae;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.member-question-form{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px}.member-question-form label{display:grid;gap:6px;color:#233f57;font-weight:800}.member-question-form textarea,.member-question-form select{width:100%;min-height:44px;padding:10px 11px;border:1px solid #bdccd9;border-radius:7px;font:inherit}.member-question-form textarea{min-height:105px;resize:vertical}.question-wide{grid-column:1/-1}.member-question-form button{min-height:44px;padding:10px 16px;color:#fff;background:#075eae;border:0;border-radius:7px;font-weight:850;cursor:pointer}.member-question-form .is-success{color:#1d5d34}.member-question-form .is-error{color:#8d2525}.member-question-card{margin-top:10px;padding:14px;border:1px solid #dbe5ef;border-radius:8px}.member-question-card>div{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.member-question-card time{margin-left:auto;color:#60768a;font-size:.82rem}.member-question-card h3{margin:10px 0 5px;color:#173a55}.member-question-card p{margin:5px 0}.question-pending{color:#60768a}.resource-section-heading{margin:22px 0 12px}@media(max-width:760px){.member-question-panel{grid-template-columns:1fr}.member-question-form{grid-template-columns:1fr}.question-wide{grid-column:auto}.member-question-form button{width:100%}.member-question-card time{width:100%;margin-left:0}}

