/* board.css — أعضاء مجلس الإدارة (2026-09-27)
 *
 * The page carried six cards, five of them named «يُعلن الاسم قبل الإطلاق
 * الرسمي», with an initial or a number in a gold disc where a face belongs.
 * The association's own profile document names nine members and carries their
 * portraits, so the page now shows them: the chair on his own, and the eight
 * who sit with him in one grid, names and titles only.
 *
 * The motion is the site's: the cards are already `.reveal`, so they arrive
 * with the page's own scroll reveal. What is added here is per-card: a stagger
 * down the grid so the row reads right to left, a lift under the pointer, and
 * a portrait that warms from a slight desaturation to full colour. Every one
 * of them stops under `prefers-reduced-motion`.
 */

/* ---------- The executive panel ----------
 *
 * The home page draws «نطاق عمل الجمعية» as a navy panel with the brand's
 * contour pattern behind it. Those rules live in home-sections.css, which
 * this page does not load, so the panel is restated here — only the parts
 * this one panel uses, at the same values, so the two pages stay one design.
 */

.mb-scope--inline { margin-top: var(--ds-s7, 40px); }
.mb-scope--inline .mb-scope__inner { max-width: 1360px; margin-inline: auto; }

.mb-scope--inline .mb-scope__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--ds-r-lg, 24px);
  padding: clamp(30px, 4vw, 54px) clamp(24px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  /* 135deg so the light corner is the one an RTL reader enters from. */
  background: linear-gradient(135deg,
    #10405a 0%,
    var(--ds-teal-900, #0a2a3d) 58%,
    #071e2b 100%);
}

.mb-scope--inline .mb-scope__contours {
  position: absolute;
  inset-block-end: -12%;
  inset-inline-start: -6%;
  inline-size: 62%;
  block-size: 150%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom left;
  opacity: .085;
  pointer-events: none;
}

.mb-scope--inline .mb-scope__body { position: relative; z-index: 1; }

.mb-scope--inline .mb-scope__title {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: #fff;
}

.mb-scope--inline .mb-scope__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.95;
  max-width: 68ch;
  color: rgba(255, 255, 255, .86);
}

.mb-scope--inline .mb-scope__action {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
}

.mb-scope--inline .mb-scope__cta.primary-button {
  gap: 10px;
  white-space: nowrap;
  box-shadow: inset 0 1px rgba(255, 255, 255, .2),
              0 6px 20px rgba(0, 0, 0, .28);
}

.mb-scope--inline .mb-scope__arrow {
  font-size: 1.05em;
  line-height: 1;
  transition: transform 200ms cubic-bezier(.22, .61, .36, 1);
}

.mb-scope--inline .mb-scope__cta:hover .mb-scope__arrow,
.mb-scope--inline .mb-scope__cta:focus-visible .mb-scope__arrow {
  transform: translateX(-4px);
}

@media (max-width: 899px) {
  .mb-scope--inline .mb-scope__panel { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px); }
  .mb-scope--inline .mb-scope__action { justify-content: stretch; }
  .mb-scope--inline .mb-scope__cta.primary-button { inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .mb-scope--inline .mb-scope__arrow { transition: none !important; }
  .mb-scope--inline .mb-scope__cta:hover .mb-scope__arrow { transform: none; }
}

/* ---------- The chair ---------- */

.board-chair {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: var(--ds-s6, 28px);
  max-width: 760px;
  margin: var(--ds-s7, 36px) auto var(--ds-s6, 28px);
  padding: var(--ds-s6, 28px);
  background: #fff;
  border: 1px solid var(--ds-line, #e3eaec);
  border-radius: var(--ds-r-lg, 22px);
  box-shadow: var(--ds-sh-1, 0 2px 10px rgba(10, 42, 61, .06));
  transition: transform 320ms cubic-bezier(.22, .61, .36, 1),
              box-shadow 320ms ease,
              border-color 320ms ease;
}

.board-chair:hover {
  transform: translateY(-4px);
  box-shadow: var(--ds-sh-2, 0 16px 38px rgba(10, 42, 61, .12));
  border-color: var(--ds-gold-300, #e0c264);
}

.board-chair .chair-photo {
  width: 200px;
  height: 200px;
  border-radius: var(--ds-r-md, 18px);
  object-fit: cover;
  object-position: center 22%;
  background: var(--ds-teal-050, #edf2f3);
  filter: saturate(.85);
  transition: filter 420ms ease, transform 620ms cubic-bezier(.22, .61, .36, 1);
}

.board-chair:hover .chair-photo {
  filter: saturate(1);
  transform: scale(1.035);
}

.board-chair .chair-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: start;
}

.board-chair .b-name {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ds-teal-900, #0a2a3d);
}

/* ---------- The eight ---------- */

.board-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-s5, 22px);
}

.board-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  /* The section's own card padding is built for a paragraph; these hold a
     photo and two lines, so they keep less air around them. */
  padding: var(--ds-s5, 24px) var(--ds-s4, 18px) !important;
}

.board-card .b-photo {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  background: var(--ds-teal-050, #edf2f3);
  filter: saturate(.85);
  transition: filter 420ms ease, transform 620ms cubic-bezier(.22, .61, .36, 1);
}

.board-card:hover .b-photo {
  filter: saturate(1);
  transform: scale(1.045);
}

/* A member whose portrait has not arrived yet. The first letter of the name
   stands in, on the same disc and at the same size, so the grid keeps its
   rhythm and nobody is represented by a stock face or a broken image. It is
   aria-hidden because the name is read out right below it. */
.board-card .b-monogram {
  display: grid;
  place-items: center;
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  color: var(--brand-teal, #12525C);
  background: var(--ds-teal-050, #edf2f3);
  border: 1px solid rgba(10, 42, 61, 0.08);
  user-select: none;
}

.board-card .b-name {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ds-teal-900, #0a2a3d);
  text-wrap: balance;
}

/* ---------- The title above the name ---------- */

.b-title {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--ds-r-pill, 999px);
  background: var(--ds-teal-050, #edf2f3);
  color: var(--ds-teal-700, #12525c);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2px;
}

.board-chair .b-title {
  align-self: flex-start;
  background: var(--ds-teal-700, #12525c);
  color: #fff;
}

.b-title--deputy {
  background: var(--ds-teal-500, #3d7580);
  color: #fff;
}

/* ---------- The gold rule that draws under a name ---------- */

.board-card .b-name::after,
.board-chair .b-name::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  margin-top: 8px;
  margin-inline: auto;
  background: var(--ds-gold-500, #c9a227);
  transition: width 320ms cubic-bezier(.22, .61, .36, 1);
}

.board-chair .b-name::after { margin-inline: 0 auto; }
.board-card:hover .b-name::after { width: 44px; }
.board-chair:hover .b-name::after { width: 60px; }

/* ---------- The arrival: the face settles after its card ----------
 *
 * The page's own `.reveal` already floats each card up as it comes into view.
 * The portrait inside it starts a little smaller and settles a moment later,
 * so a face arrives rather than appearing, and the row reads as nine people
 * taking their places (asked for on 2026-09-27).
 *
 * It is one transform and one opacity, both on the compositor, so nothing here
 * costs a layout.
 */

.board-card.reveal .b-photo,
.board-chair.reveal .chair-photo {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 520ms ease 120ms,
              transform 700ms cubic-bezier(.22, .61, .36, 1) 120ms,
              filter 420ms ease;
}

.board-card.reveal.is-visible .b-photo,
.board-chair.reveal.is-visible .chair-photo {
  opacity: 1;
  transform: scale(1);
}

/* The hover answers at once, and takes the transform back from the arrival. */
.board-card:hover .b-photo { transform: scale(1.045); transition-delay: 0ms; }
.board-chair:hover .chair-photo { transform: scale(1.035); transition-delay: 0ms; }

/* ---------- A gold ring under the pointer ----------
 *
 * The same gold the association marks giving with, at a fifth of its strength:
 * enough to say «this is the one you are reading», not enough to compete with
 * the face.
 */

.board-card .b-photo,
.board-chair .chair-photo {
  box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
}

.board-card:hover .b-photo,
.board-card:focus-within .b-photo {
  box-shadow: 0 0 0 5px rgba(201, 162, 39, .20);
}

.board-chair:hover .chair-photo,
.board-chair:focus-within .chair-photo {
  box-shadow: 0 0 0 6px rgba(201, 162, 39, .18);
}

/* The title pill rises with the card it belongs to. */
.board-card .b-title {
  transition: transform 320ms cubic-bezier(.22, .61, .36, 1),
              background-color 320ms ease;
}

.board-card:hover .b-title { transform: translateY(-2px); }

/* ---------- The stagger: each card a moment after the one before ---------- */

.board-grid .board-card:nth-child(1) { transition-delay: 0ms; }
.board-grid .board-card:nth-child(2) { transition-delay: 60ms; }
.board-grid .board-card:nth-child(3) { transition-delay: 120ms; }
.board-grid .board-card:nth-child(4) { transition-delay: 180ms; }
.board-grid .board-card:nth-child(5) { transition-delay: 240ms; }
.board-grid .board-card:nth-child(6) { transition-delay: 300ms; }
.board-grid .board-card:nth-child(7) { transition-delay: 360ms; }
.board-grid .board-card:nth-child(8) { transition-delay: 420ms; }

/* The delay is for the arrival only: a hover must answer at once. */
.board-grid .board-card:hover { transition-delay: 0ms; }

/* ---------- Keyboard ---------- */

.board-card:focus-within,
.board-chair:focus-within {
  outline: 3px solid var(--ds-teal-700, #12525c);
  outline-offset: 3px;
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1080px) {
  .board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .board-card .b-photo { width: 96px; height: 96px; }
  .board-card .b-name { font-size: .92rem; }
  .board-chair {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 18px;
  }
  .board-chair .chair-photo { width: 168px; height: 168px; }
  .board-chair .chair-text { align-items: center; text-align: center; }
  .board-chair .b-title { align-self: center; }
  .board-chair .b-name::after { margin-inline: auto; }
}

/* ---------- A visitor who asked for less motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .board-chair,
  .board-card,
  .board-chair .chair-photo,
  .board-card .b-photo,
  .board-card .b-title,
  .board-card .b-name::after,
  .board-chair .b-name::after {
    transition: none !important;
  }
  .board-chair:hover,
  .board-card:hover { transform: none; }
  .board-chair:hover .chair-photo,
  .board-card:hover .b-photo { transform: none; }
  .board-card:hover .b-title { transform: none; }
  /* A face that arrives by growing must still be there for a visitor who
     asked for no movement: it is simply present, at full size. */
  .board-card.reveal .b-photo,
  .board-chair.reveal .chair-photo {
    opacity: 1;
    transform: none;
  }
}