/**
 * Board Members: the Meet the PTA page.
 *
 * Two sections: Board Members (large cards, 4 across) and Chairs (smaller
 * cards, 6 across: the exec board oversees the many chairs). Uses the theme's
 * brand tokens with fallbacks so the module degrades gracefully elsewhere.
 */

.pta-bm-section {
  margin: 0 0 40px;
}

.pta-bm-heading {
  text-align: center;
  margin: 0 0 20px;
}

.pta-bm-grid {
  display: grid;
  gap: 24px;
}
.pta-bm-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.pta-bm-grid--6 {
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.pta-bm-card {
  text-align: center;
}

/* Photo slot: square, rounded, framed in the site's primary with a soft drop
   shadow so filled positions read as cards lifted off the page. border-box
   keeps the border inside the 1/1 footprint instead of growing the tile. */
.pta-bm-photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--pta-radius, 10px);
  overflow: hidden;
  margin: 0 0 10px;
  box-sizing: border-box;
  border: 3px solid var(--pta-primary, #f4b41c);
  box-shadow: var(--pta-shadow-lift, 0 2px 18px rgba(0, 0, 0, 0.3));
}
.pta-bm-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Filled but no photo yet: initials, gold on black, over a faded logo
   watermark (--pta-bm-logo is injected from the theme's logo). */
.pta-bm-photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--pta-black, #141414);
}
.pta-bm-photo--initials::after,
.pta-bm-photo--open::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pta-bm-logo, none) center / 70% no-repeat;
  opacity: 0.14;
}
/* Bright primary, not plain primary: the same reason the staff pages use it
   on their dark strips. Plain primary on the dark tile is 2.89:1 for a blue
   brand (Cox), under the 3:1 bar even for large bold text; bright takes Cox to
   5.45 and Henry's gold from 9.99 to 11.93. */
.pta-bm-photo--initials span {
  position: relative;
  z-index: 1;
  color: var(--pta-primary-bright, var(--pta-primary, #f4b41c));
  font-weight: 800;
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Open position: cream card with a dashed border and the same faded logo
   watermark behind the label. It keeps the dashed border instead of the solid
   one, and stays flat, so an unfilled slot never reads as a person. Sites that
   want it raised turn on the shadow in the board settings. */
.pta-bm-photo--open {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--pta-cream, #fbf6ec);
  border: 2px dashed var(--pta-secondary, #d99a00);
  box-shadow: none;
}
.pta-bm--openshadow .pta-bm-photo--open {
  box-shadow: var(--pta-shadow-lift, 0 2px 18px rgba(0, 0, 0, 0.3));
}
.pta-bm-photo--open::after {
  opacity: 0.1;
}
.pta-bm-photo--open span {
  position: relative;
  z-index: 1;
}
.pta-bm-photo--open span {
  color: var(--pta-secondary, #d99a00);
  font-weight: 800;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pta-bm-name {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
}
.pta-bm-card--open .pta-bm-name {
  color: var(--pta-gray, #6b6b6b);
  font-weight: 600;
}

.pta-bm-role {
  margin: 2px 0 0;
  color: var(--pta-gray, #6b6b6b);
  font-size: 0.92em;
  line-height: 1.3;
}

.pta-bm-email {
  margin: 4px 0 0;
  font-size: 0.8em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.pta-bm-email a {
  color: var(--pta-secondary, #d99a00);
  text-decoration: none;
}
.pta-bm-email a:hover {
  text-decoration: underline;
}

/* Chairs cards are narrower; tighten their type a touch. */
.pta-bm-grid--6 .pta-bm-name {
  font-size: 0.95em;
}
.pta-bm-grid--6 .pta-bm-role {
  font-size: 0.85em;
}

/* ============================================================
   Chair Positions (recruiting page)
   ============================================================ */

.pta-bm-chairs {
  max-width: 920px;
  margin: 0 auto;
}

.pta-bm-chairrole {
  margin: 0 0 32px;
}

.pta-bm-chairrole-title {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--pta-primary, #f4b41c);
}

.pta-bm-chairrole-status {
  margin: 0 0 10px;
  font-size: 0.92em;
}
.pta-bm-chairrole-status a {
  color: var(--pta-secondary, #d99a00);
  text-decoration: none;
}
.pta-bm-chairrole-status a:hover {
  text-decoration: underline;
}

/* Name chip: the palette's primary paired with its own on-primary token, so
   the label stays readable whatever a site's brand colors are. Accent-on-dark
   reads fine for a gold palette but fails for a blue one (Cox: 2.9:1). */
.pta-bm-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--pta-primary, #f4b41c);
  color: var(--pta-on-primary, #141414);
  font-weight: 700;
  font-size: 0.85em;
}
.pta-bm-badge--open {
  background: var(--pta-cream, #fbf6ec);
  color: var(--pta-secondary, #d99a00);
  border: 1px dashed var(--pta-secondary, #d99a00);
}

.pta-bm-chairrole-desc {
  color: var(--pta-ink, #1f1f1f);
  line-height: 1.6;
}

/* Responsive: step the grids down together. */
@media (max-width: 960px) {
  .pta-bm-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .pta-bm-grid--6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .pta-bm-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pta-bm-grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .pta-bm-grid--6 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Chair Positions upgrades: person chips (photo + name), the
   time-commitment line, and standalone typography under foreign
   themes. Anchored articles clear sticky headers for jump links.
   ============================================================ */
.pta-bm-chairrole {
  scroll-margin-top: 110px;
}
.pta-bm-personchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 6px 0;
  vertical-align: middle;
}
.pta-bm-personchip-photo img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--pta-primary, #f4b41c);
}
.pta-bm-chairrole-time {
  margin: 6px 0 10px;
  color: var(--pta-ink, #1f1f1f);
}
.pta-bm-chairrole-time strong {
  color: var(--pta-black, #141414);
}
.pta-bm-chairrole-email {
  color: var(--pta-secondary, #d99a00);
  font-weight: 600;
}
.pta-bm-empty { text-align: center; color: var(--pta-gray, #6b6b6b); }

/* Standalone (foreign theme, as Cox was under Divi): a backstop for themes that
   give their content no width at all. Divi's own row caps first (1080px), so
   this never binds on Cox; it only stops the grid blowing out on a full-width
   theme. The PTA Foundry theme's container handles this on full-Foundry sites. */
.pta-bm-standalone {
  max-width: min(1440px, 94vw);
  margin-left: auto;
  margin-right: auto;
}