/*
  members-public.css: the Board, Committees, Past presidents and Member associations pages, and the
  same blocks placed as sections on any page (the Members module, public site). Loaded by the public
  layout on every page, because a section can sit on any page. The title band, section headings and
  formatted text come from content-public.css. Colours come from tokens only (StyleRules), so light
  and dark follow the theme, and layout uses logical properties, so Arabic needs nothing extra.
*/

/* ---- Page frame ---- */
.bfau-members-page {
  padding-block: 3.5rem 4.5rem;
}

.bfau-page-subtitle {
  margin-block: 0.75rem 0;
  color: color-mix(in srgb, var(--bfau-on-primary) 82%, transparent);
  font-size: 1.05rem;
}

.bfau-members-empty {
  max-inline-size: 32rem;
  margin-inline: auto;
  padding-block: 3rem;
  text-align: center;
  color: var(--bfau-text-muted);
}

.bfau-members-empty .bx {
  display: block;
  margin-block-end: 0.75rem;
  font-size: 3rem;
  color: var(--bfau-primary-text);
  opacity: 0.6;
}

.bfau-members-empty p,
.bfau-members-note {
  margin: 0;
  color: var(--bfau-text-muted);
}

.bfau-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-block-end: 1.5rem;
  color: var(--bfau-link);
  font-weight: 600;
}

[dir="rtl"] .bfau-back-link .bfau-flip {
  transform: scaleX(-1);
}

.bfau-see-all {
  display: inline-block;
  margin-block-start: 1.25rem;
  color: var(--bfau-link);
  font-weight: 600;
}

/* ---- A portrait or logo, or its placeholder ---- */
.bfau-picture {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bfau-primary-subtle);
  color: var(--bfau-primary-text);
}

.bfau-picture img {
  inline-size: 100%;
  block-size: 100%;
}

.bfau-picture-portrait {
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--bfau-surface), 0 0 0 5px var(--bfau-primary-border-subtle);
}

.bfau-picture-portrait img {
  object-fit: cover;
}

/* A logo is never cropped: it sits whole on a light tile, padded, in both themes. */
.bfau-picture-logo {
  border-radius: var(--bfau-radius-lg);
  border: 1px solid var(--bfau-border);
  background: var(--bfau-surface);
  padding: 0.6rem;
}

.bfau-picture-logo img {
  object-fit: contain;
}

/* Most logos are drawn for a light background: in dark mode their tile stays light (the theme's
   lightest ink) instead of turning dark around a white rectangle. */
[data-bs-theme="dark"] .bfau-picture-logo:not(.bfau-picture-empty) {
  background: var(--bfau-heading);
  border-color: transparent;
}

.bfau-picture-logo.bfau-picture-empty {
  background: var(--bfau-primary-subtle);
  border-color: var(--bfau-primary-border-subtle);
}

.bfau-picture-md {
  inline-size: 5.5rem;
  block-size: 5.5rem;
  font-size: 1.6rem;
}

.bfau-picture-lg {
  inline-size: 8rem;
  block-size: 8rem;
  font-size: 2.25rem;
}

.bfau-picture-hero {
  inline-size: 11rem;
  block-size: 11rem;
  font-size: 3.5rem;
}

.bfau-picture-tile {
  display: flex;
  inline-size: 100%;
  aspect-ratio: 1;
  font-size: clamp(2rem, 6vw, 3.25rem);
}

.bfau-picture-tile.bfau-picture-portrait {
  border-radius: 0;
  box-shadow: none;
}

.bfau-picture-initials {
  font-family: var(--bfau-font-heading);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ---- A person on the template's team card (board, committees, past presidents).
   The template draws the card on white; here it follows the theme's surface in both modes. ---- */
.team-item.bfau-team-item {
  block-size: calc(100% - 30px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--bfau-shadow-soft);
  border-radius: var(--bfau-radius-lg);
  overflow: hidden;
}

.team-item.bfau-team-item .content {
  flex: 1;
  padding: 1.25rem 1rem 1.4rem;
  background-color: var(--bfau-surface);
  box-shadow: none;
}

.team-item.bfau-team-item .content h3 {
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--bfau-heading);
}

.team-item.bfau-team-item .content span {
  margin-block-start: 0.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.team-item.bfau-team-item-sm .content {
  padding: 0.85rem 0.6rem 1rem;
}

.team-item.bfau-team-item-sm .content h3 {
  font-size: 1rem;
}

.team-item.bfau-team-item-sm .content span {
  font-size: 0.85rem;
}

.bfau-members-title h2 {
  margin-block-start: 0;
}

/* ---- A committee: heading, description, members ---- */
/* Between two committees on show: a search may hide the ones in between. */
.bfau-committee:not([hidden]) ~ .bfau-committee:not([hidden]) {
  margin-block-start: 3rem;
  padding-block-start: 3rem;
  border-block-start: 1px solid var(--bfau-border);
}

.bfau-committee-header {
  margin-block-end: 1.5rem;
}

.bfau-committee-name {
  margin-block-end: 0.5rem;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--bfau-heading);
}

.bfau-committee-description {
  max-inline-size: 48rem;
  margin: 0;
  color: var(--bfau-text-muted);
}

/* ---- An association's card, and its own page ---- */
.bfau-association-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  block-size: 100%;
  padding: 1.5rem 1rem;
  border: 1px solid var(--bfau-border);
  border-radius: var(--bfau-radius-lg);
  background: var(--bfau-surface);
  box-shadow: var(--bfau-shadow-soft);
  color: var(--bfau-heading);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bfau-association-card:hover,
.bfau-association-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--bfau-primary-border-subtle);
  box-shadow: var(--bfau-shadow);
  color: var(--bfau-heading);
}

.bfau-association-name {
  font-weight: 700;
  line-height: 1.45;
}

.bfau-association-year {
  margin-block-start: -0.4rem;
  color: var(--bfau-text-muted);
  font-size: 0.875rem;
}

.bfau-association-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--bfau-border);
  border-radius: var(--bfau-radius-lg);
  background: var(--bfau-surface);
  box-shadow: var(--bfau-shadow-soft);
}

.bfau-association-aside-heading {
  align-self: stretch;
  margin-block: 1.5rem 0.75rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--bfau-border);
  font-size: 1.05rem;
  color: var(--bfau-heading);
}

.bfau-association-contact {
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bfau-association-contact li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.4rem;
  overflow-wrap: anywhere;
}

.bfau-association-contact .bx {
  flex: none;
  color: var(--bfau-primary-text);
  font-size: 1.2rem;
}

.bfau-association-description {
  white-space: pre-line;
}

.bfau-association-officers-block {
  margin-block-start: 1rem;
}

.bfau-association-president {
  align-self: stretch;
  margin-block-start: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: var(--bfau-radius);
  background: var(--bfau-primary-subtle);
  text-align: center;
}

.bfau-association-president-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bfau-muted);
}

.bfau-association-president-name {
  display: block;
  margin-block-start: 0.2rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bfau-heading);
}

.bfau-association-officers-heading {
  margin-block: 2rem 1rem;
  font-size: 1.05rem;
  color: var(--bfau-heading);
}

.bfau-association-officers {
  margin: 0;
}

.bfau-association-officer {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--bfau-border);
  border-radius: var(--bfau-radius);
  background: var(--bfau-surface);
}

.bfau-association-officer-president {
  border-color: var(--bfau-primary);
}

.bfau-association-officer-name {
  font-weight: 600;
  color: var(--bfau-heading);
}

.bfau-association-officer-role {
  font-size: 0.875rem;
  color: var(--bfau-muted);
}

.bfau-association-officer-years {
  margin-inline-start: 0.25rem;
}

@media (max-width: 575.98px) {
  .bfau-members-page {
    padding-block: 2rem 3rem;
  }

  .team-item.bfau-team-item .content {
    padding: 0.9rem 0.5rem 1rem;
  }

  .team-item.bfau-team-item .content h3 {
    font-size: 1rem;
  }
}