/* =============================================================================
 * Members page: board of directors, leadership and committee cards.
 * Loaded by pages/members.html; pages/impact_makers.html reuses its palette,
 * header and LinkedIn control. Desktop (>=1024) is the reference; the
 * phone and tablet rules sit next to the component they adapt.
 * ========================================================================== */

.gov-team-page {
  --gov-green: #084c36;
  --gov-green-dark: #063828;
  --gov-green-light: #ebf4ef;
  --gov-gold: #c5a869;
  --gov-gold-dark: #9c7f3e;
  --gov-text: #152620;
  --gov-muted: #556860;
  --gov-border: #dce5e0;
  --gov-card-bg: #edf3f0;
  --gov-card-hover: #e5ece8;

  width: 100%;
  /* The tab tooltips are absolutely positioned and stay IN LAYOUT while hidden
     (they only fade with opacity/visibility, so the transition works). With five
     committees at least one of them always lands near a viewport edge and drags a
     horizontal scrollbar onto the page. `clip` on one axis only — never `hidden`,
     which would turn this into a scroll container and break the sticky tab bar —
     stops that without touching how the tooltip looks or where it opens. */
  overflow-x: clip;
  background: #ffffff;
  color: var(--gov-text);
  font-family: var(--font-sans);
}

.gov-container {
  width: min(1180px, calc(100% - 2.5rem));
  margin-inline: auto;
}

@media (max-width: 640px) {
  .gov-container {
    width: calc(100% - 2rem);
  }
}

/* ---- Page header ---- */
.gov-team-hero {
  padding: 2.5rem 0 3rem;
  background: #ffffff;
  border-bottom: 1px solid var(--gov-border);
}

.gov-hero-content {
  max-width: 780px;
}

.gov-title {
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
  font-weight: 700;
  color: var(--gov-text);
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

.gov-subtitle {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--gov-muted);
  margin: 0;
}

/* ---- Sections ---- */
.gov-section {
  padding: 3.5rem 0 4.5rem;
}

.gov-section--leadership {
  background: #fbfdfc;
  border-bottom: 1px solid var(--gov-border);
}

.gov-section--committees {
  background: #ffffff;
  scroll-margin-top: var(--header-height, 84px);
}

.gov-section-header {
  margin-bottom: 2.25rem;
}

.gov-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gov-text);
  line-height: 1.3;
  margin: 0;
  position: relative;
  padding-inline-start: 0.875rem;
  border-inline-start: 4px solid var(--gov-green);
}

@media (max-width: 640px) {
  .gov-team-hero {
    padding: 2rem 0;
  }

  .gov-section {
    padding: 2.25rem 0 3rem;
  }

  .gov-section-header {
    margin-bottom: 1.5rem;
  }

  .gov-section-title {
    font-size: 1.3rem;
  }
}

/* ---- Board cards (horizontal, chamfered corners) ---- */
.saudi-board-president-wrap {
  max-width: 574px;
  margin: 0 auto 2.5rem;
}

.saudi-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

/* Single-member committee: one track as wide as a normal column. */
.saudi-board-grid--single {
  grid-template-columns: minmax(0, calc((100% - 2rem) / 2));
  justify-content: start;
}

/* Tablet portrait: the two-up board at 2/3 width, not one 700px card per row. */
@media (min-width: 700px) and (max-width: 900px) {
  .saudi-board-grid {
    gap: 1.5rem;
  }

  .saudi-board-grid--single {
    grid-template-columns: minmax(0, calc((100% - 1.5rem) / 2));
  }
}

@media (max-width: 900px) {
  .saudi-board-president-wrap {
    max-width: 100%;
  }
}

@media (max-width: 699px) {
  .saudi-board-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.saudi-board-card {
  position: relative;
  background: var(--gov-card-bg);
  border-radius: 4px;
  /* top-end and bottom-start corners cut on the diagonal */
  clip-path: polygon(0% 0%,
      calc(100% - 24px) 0%,
      100% 24px,
      100% 100%,
      24px 100%,
      0% calc(100% - 24px));
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 180px;
  overflow: hidden;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.saudi-board-card:hover {
  transform: translateY(-3px);
  background: var(--gov-card-hover);
  box-shadow: 0 12px 24px -6px rgba(8, 76, 54, 0.09);
}

.saudi-board-card--president {
  min-height: 300px;
  border-inline-start: 6px solid var(--gov-gold);
  background: #ebf3ef;
  box-shadow: 0 14px 32px -6px rgba(8, 76, 54, 0.12);
}

.saudi-board-card--president:hover {
  background: #e2ede7;
  box-shadow: 0 18px 36px -6px rgba(8, 76, 54, 0.16);
}

.saudi-board-card--vice {
  border-inline-start: 4px solid var(--gov-green);
}

/* Definite height so the portrait resolves height:100% instead of driving the card. */
.gov-section--leadership .saudi-board-card--vice {
  height: 235px;
}

.saudi-board-info {
  flex: 1;
  padding-block: 1.6rem 1.35rem;
  padding-inline: 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: 2;
}

.saudi-board-card--president .saudi-board-info {
  padding-block: 2.25rem 2rem;
  padding-inline: 2.25rem 1.75rem;
}

.saudi-board-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0c2b20;
  line-height: 1.25;
  margin: 0 0 0.35rem;
  overflow-wrap: anywhere;
}

.saudi-board-card--president .saudi-board-name {
  font-size: clamp(1.6rem, 1.35rem + 0.8vw, 2.05rem);
  margin-bottom: 0.5rem;
}

.saudi-board-role {
  font-size: 0.9375rem;
  color: var(--gov-green);
  line-height: 1.45;
  font-weight: 600;
  margin: 0;
  overflow-wrap: anywhere;
}

.saudi-board-card--president .saudi-board-role {
  font-size: 1.1rem;
  font-weight: 700;
}

.saudi-board-role--honor {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  color: var(--gov-green);
  font-weight: 600;
  line-height: 1.45;
}

.saudi-board-links {
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
}

.saudi-board-linkedin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(8, 76, 54, 0.05);
  color: #084c36;
  border: 1px solid rgba(8, 76, 54, 0.16);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(8, 76, 54, 0.04);
}

.saudi-board-linkedin-icon:hover {
  background: #084c36;
  color: #ffffff;
  border-color: #084c36;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(8, 76, 54, 0.22);
}

.saudi-board-linkedin-icon:focus-visible {
  background: #084c36;
  color: #ffffff;
  border-color: #084c36;
}

/* Thumb-sized target on touch layouts; the mark inside is the same. */
@media (max-width: 1023px) {
  .saudi-board-linkedin-icon {
    width: 40px;
    height: 40px;
  }
}

.saudi-board-photo-wrap {
  width: 42%;
  min-width: 155px;
  max-width: 200px;
  position: relative;
  overflow: hidden;
  background: #dfe7e3;
}

/* Out of flow, so the file's aspect ratio never sizes the card: the photo box
   is set by the card, and the photo only fills it. */
.saudi-board-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-x, 50%) 15%;
  /* Near the top, so a zoom grows downward and keeps the headroom. */
  transform-origin: var(--photo-x, 50%) 8%;
  scale: var(--photo-zoom, 1);
  transition: transform 0.35s ease;
  display: block;
}

/* Framing modifiers (assigned per file in public.py PHOTO_FRAMING): they move
   the crop inside the shared box, never the box itself. */
.saudi-board-photo--zoom {
  --photo-zoom: 1.3;
}

.saudi-board-photo--zoom-lg {
  --photo-zoom: 1.55;
}

.saudi-board-photo--focus-left {
  --photo-x: 38%;
}

.saudi-board-photo--focus-far-left {
  --photo-x: 22%;
}

/* Avatar placeholders, not photographs: a centred figure with fixed margins,
   so they are contained with even padding in the same box as the portraits. */
.saudi-board-photo--avatar {
  object-fit: contain;
  object-position: center;
  padding: 10%;
}

/* The placeholder's own field is white; the box matches it so nothing seams. */
.saudi-board-photo-wrap--avatar {
  background: #ffffff;
}

/* ---- Committee cards: one photo box and one card size per panel ---- */
.gov-committee-panel {
  --board-photo-w: clamp(8rem, 5.5rem + 8vw, 12.5rem);
}

/* Every row of a panel as tall as its tallest card. */
.gov-committee-panel .saudi-board-grid {
  grid-auto-rows: 1fr;
}

/* 200x235 on desktop: the leadership vice cards' photo box. */
.gov-committee-panel .saudi-board-card {
  min-height: calc(var(--board-photo-w) * 1.175);
}

.gov-committee-panel .saudi-board-photo-wrap {
  flex: 0 0 var(--board-photo-w);
  width: var(--board-photo-w);
  min-width: 0;
  max-width: none;
}

/* Name and role start at the same height on every card; LinkedIn sits at the
   same foot, whether or not the member has a longer role. */
.gov-committee-panel .saudi-board-info {
  justify-content: flex-start;
  min-width: 0;
}

.gov-committee-panel .saudi-board-links {
  margin-top: auto;
  padding-top: 0.8rem;
}

.saudi-board-card:hover .saudi-board-photo {
  transform: scale(1.04);
}

/* Soft inner edge so the photo blends into the card. */
[dir='rtl'] .saudi-board-photo-wrap {
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

[dir='ltr'] .saudi-board-photo-wrap {
  -webkit-mask-image: linear-gradient(to left, black 85%, transparent 100%);
  mask-image: linear-gradient(to left, black 85%, transparent 100%);
}

@media (max-width: 640px) {
  .saudi-board-president-wrap {
    margin-bottom: 1.5rem;
  }

  .saudi-board-card {
    min-height: 155px;
  }

  .saudi-board-card--president {
    min-height: 230px;
  }

  .gov-section--leadership .saudi-board-card--vice {
    height: 200px;
  }

  .saudi-board-info {
    padding-block: 1.15rem;
    padding-inline: 1.25rem 0.75rem;
  }

  .saudi-board-card--president .saudi-board-info {
    padding-block: 1.5rem;
    padding-inline: 1.25rem 0.75rem;
  }

  .saudi-board-name {
    font-size: 1.15rem;
  }

  .saudi-board-card--president .saudi-board-name {
    font-size: 1.45rem;
  }

  .saudi-board-card--president .saudi-board-role {
    font-size: 1rem;
  }

  .saudi-board-photo-wrap {
    width: 38%;
    min-width: 120px;
  }
}

/* ---- Committee tabs ---- */
/* Docked under the header rather than scrolling beneath it: the header is
   translucent, so this bar's rule and its green active indicator used to show
   straight through the chrome. Offset by the CONDENSED height — the header
   condenses on the first pixel of scroll. */
.gov-tabs-bar {
  display: flex;
  /* Five committees no longer fit one desktop row (three did), and this bar keeps
     overflow VISIBLE so the tooltip can escape it — so an over-wide row pushed the
     whole PAGE sideways. Wrapping is the only option that neither clips the
     tooltip nor shrinks the type. Mobile sets nowrap and scrolls instead. */
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 2px solid var(--gov-border);
  margin-bottom: 1.75rem;
  position: sticky;
  top: var(--header-height-condensed, 68px);
  z-index: var(--z-raised, 10);
  background: #ffffff;
  padding-block-start: 0.5rem;
  overflow: visible;
}

/* The tab and its info control are siblings (a focusable control cannot live
   inside a <button>). This wrapper is the flex item the bar lays out, and the
   trigger is pulled back into the tab's own end padding below, so the tab still
   paints its hover background and active underline underneath it — exactly as it
   did when the trigger was a child. */
.gov-tab-wrap {
  --gov-tab-pad-inline: 1.25rem;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.gov-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 0.875rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gov-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.gov-tab:hover {
  color: var(--gov-green);
  background: #f4f8f6;
}

.gov-tab.active {
  color: var(--gov-green);
  font-weight: 700;
  border-bottom-color: var(--gov-green);
  background: transparent;
}

.gov-tab-count {
  font-size: 0.8125rem;
  color: #7b8e85;
}

/* Hover/focus tooltip with the committee description. Below 1024px the same
   control expands the in-flow description instead (see the media query). */
.gov-tab-wrap--has-info .gov-tab {
  /* Room the trigger used to occupy as a flex child (0.4rem gap + 0.4rem margin
     + its 1.35rem box), so the tab's box is the width it always was. */
  padding-inline-end: calc(var(--gov-tab-pad-inline) + 2.15rem);
}

.gov-tab-info-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 9999px;
  background: rgba(8, 76, 54, 0.12);
  color: var(--gov-green);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  appearance: none;
  border: 0;
  padding: 0;
  /* Negative pull: lands the circle back inside the tab's end padding, in the
     same spot the old child element sat. */
  margin-inline-start: calc(-1 * (var(--gov-tab-pad-inline) + 1.35rem));
  cursor: help;
  transition: all 0.2s ease;
  z-index: 2;
}

.gov-tab.active + .gov-tab-info-trigger {
  background: var(--gov-green);
  color: #ffffff;
}

.gov-tab-info-trigger:hover,
.gov-tab.active + .gov-tab-info-trigger:hover {
  background: var(--gov-gold);
  color: #ffffff;
  transform: scale(1.15);
}

.gov-tab-tooltip-bubble {
  position: absolute;
  top: calc(100% + 12px);
  right: -10px;
  background: #061e15;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  padding: 0.85rem 1.15rem;
  border-radius: 8px;
  width: max-content;
  max-width: 320px;
  white-space: normal;
  text-align: right;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.5), 0 6px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 20;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

[dir='ltr'] .gov-tab-tooltip-bubble {
  right: auto;
  left: -10px;
  text-align: left;
}

.gov-tab-tooltip-bubble::after {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 18px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #061e15 transparent;
}

[dir='ltr'] .gov-tab-tooltip-bubble::after {
  right: auto;
  left: 18px;
}

/* The last tab's bubble anchors inward; anchored outward it (still in layout
   while hidden) ran past the viewport and forced a horizontal scrollbar. */
[dir='ltr'] .gov-tab-wrap:last-child .gov-tab-tooltip-bubble {
  left: auto;
  right: -10px;
}

[dir='ltr'] .gov-tab-wrap:last-child .gov-tab-tooltip-bubble::after {
  left: auto;
  right: 18px;
}

[dir='rtl'] .gov-tab-wrap:last-child .gov-tab-tooltip-bubble {
  right: auto;
  left: -10px;
}

[dir='rtl'] .gov-tab-wrap:last-child .gov-tab-tooltip-bubble::after {
  right: auto;
  left: 18px;
}

.gov-tab-info-trigger:hover .gov-tab-tooltip-bubble,
.gov-tab-info-trigger:focus-visible .gov-tab-tooltip-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Description in the flow of the panel; shown where the tooltip cannot work. */
.gov-committee-desc {
  display: none;
  margin: 0 0 1.5rem;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--gov-muted);
}

/* Below the desktop layout the tabs are one scrollable row bleeding to the
   container edges; the rule becomes an inset shadow so the active underline
   can overlap it. The hover tooltip is replaced by the in-flow description. */
@media (max-width: 1023px) {
  .gov-tabs-bar {
    flex-wrap: nowrap;
    gap: 0.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    border-bottom: 0;
    box-shadow: inset 0 -2px 0 var(--gov-border);
  }

  .gov-tabs-bar::-webkit-scrollbar {
    display: none;
  }

  .gov-tab-wrap {
    --gov-tab-pad-inline: 0.875rem;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .gov-tab {
    flex: 0 0 auto;
    margin-bottom: 0;
    min-height: 2.75rem;
    padding: 0.75rem 0.875rem;
    font-size: 0.9rem;
  }

  /* The trigger STAYS. Hiding it here was the whole bug: a touch device has no
     hover, so the control that reveals what a committee does simply vanished. */
  .gov-tab-info-trigger {
    cursor: pointer;
  }

  /* A 44px touch target around the 1.35rem circle, without changing its size or
     the tab's measurements. Transparent, so nothing looks different. */
  .gov-tab-info-trigger::before {
    content: '';
    position: absolute;
    inset: -0.7rem;
  }

  /* The floating bubble cannot work here: .gov-tabs-bar scrolls horizontally
     (overflow-x: auto), which clips anything escaping the bar. The description is
     shown in the panel below instead. */
  .gov-tab-tooltip-bubble {
    display: none;
  }

  /* Collapsed until the info control opens it — the point of the control is to
     REVEAL what the committee does, so it is not permanently on show. */
  .gov-committee-desc.is-open {
    display: block;
  }
}

@media (max-width: 640px) {
  .gov-tabs-bar {
    margin-inline: -1rem;
    padding-inline: 1rem;
  }
}

/* ---- Committee panels ---- */
.gov-committee-panel {
  display: none;
}

.gov-committee-panel.active {
  display: block;
  animation: gov-fade 0.25s ease;
}

@keyframes gov-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}