/* =========================================================================
   FAISAL PREMIUM 2026 — Board of Directors (مجلس الإدارة)
   Premium fintech executive leadership cards: COMPACT photo header (~38% of
   card) + always-visible name/role/summary, with a glassmorphism biography
   panel that slides up on hover / focus / tap revealing the expanded bio.
   Theme colors: green #006837, gold #C9A84C, hero gradient #061410→#0F1E16.
   Scoped to .faisal-page-content. RTL-safe, responsive, accessible.
   ========================================================================= */

.faisal-page-content .board-hero{text-align:center}

/* ---- Grid: 3 / 2 / 1 (3–4 on very wide) ---- */
.faisal-page-content .team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;align-items:stretch;
}
@media(min-width:1500px){.faisal-page-content .team-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1024px){.faisal-page-content .team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.faisal-page-content .team-grid{grid-template-columns:1fr;max-width:26rem;margin-inline:auto}}

/* ---- Card shell — compact (smaller), glass + soft gradient ---- */
.faisal-page-content .team-card{
  position:relative;display:flex;flex-direction:column;height:100%;min-height:260px;
  border-radius:18px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(10,35,25,.95),rgba(5,20,15,.98));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(201,168,124,.22);
  box-shadow:0 12px 32px rgba(6,20,16,.16);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;
  outline:none;
}
.faisal-page-content .team-card--chair{border-color:rgba(201,168,76,.5)}

/* ---- Photo header — TRANSPARENT, CLEAR portrait (no dark shadow overlay) ---- */
.faisal-page-content .team-card__media{
  position:relative;height:160px;overflow:hidden;flex:0 0 auto;
  background:transparent;
}
.faisal-page-content .team-card__photo{
  width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
/* (Photo dark-shadow overlay removed — portraits render clear & sharp.) */
/* Executive badge (position tag) over the photo */
.faisal-page-content .team-card__badge{
  position:absolute;bottom:.7rem;inset-inline-start:.8rem;z-index:2;
  font-size:.72rem;font-weight:800;color:var(--dark,#061410);
  background:linear-gradient(140deg,var(--gold,#C9A84C),var(--gold-light,#f5d169));
  border-radius:999px;padding:.28rem .8rem;box-shadow:0 6px 16px rgba(201,168,76,.4);
}
.faisal-page-content .team-card--chair .team-card__badge{box-shadow:0 6px 18px rgba(201,168,76,.55)}

/* ---- Always-visible head (name + role + summary) — compact ---- */
.faisal-page-content .team-card__head{
  position:relative;z-index:2;flex:1 1 auto;display:flex;flex-direction:column;
  padding:.85rem 1.15rem 1rem;text-align:start;
}
[dir="rtl"] .faisal-page-content .team-card__head{text-align:right}
.faisal-page-content .team-card__name{font-size:1.08rem;font-weight:800;color:#fff;margin:0 0 .3rem;line-height:1.4}
.faisal-page-content .team-card__role{display:block;font-size:.8rem;font-weight:700;color:var(--gold,#C9A84C);line-height:1.5}
/* gold accent divider line */
.faisal-page-content .team-card__line{display:block;width:46px;height:3px;border-radius:3px;margin:.6rem 0 .65rem;background:linear-gradient(90deg,var(--gold,#C9A84C),transparent)}
.faisal-page-content .team-card__summary{color:var(--gold-muted,#BFA06A);font-size:.88rem;line-height:1.7;margin:0 0 .7rem}
.faisal-page-content .team-card__more{
  margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;
  font-size:.82rem;font-weight:800;color:var(--gold,#C9A84C);
}
/* clean gold arrow accent (no star icon) */
.faisal-page-content .team-card__more::after{content:"←";font-weight:900;transition:transform .25s ease}
[dir="ltr"] .faisal-page-content .team-card__more::after{content:"→"}
.faisal-page-content .team-card:hover .team-card__more::after{transform:translateX(-4px)}
[dir="ltr"] .faisal-page-content .team-card:hover .team-card__more::after{transform:translateX(4px)}

/* ---- Toggle (mobile/keyboard) button ---- */
.faisal-page-content .team-card__toggle{
  position:absolute;top:.7rem;inset-inline-end:.7rem;z-index:5;
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(6,20,16,.55);color:var(--gold,#C9A84C);
  border:1px solid rgba(201,168,124,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:transform .3s ease,background .3s ease,color .3s ease;
}
.faisal-page-content .team-card__toggle .faisal-ico{width:18px;height:18px;background-color:currentColor}
.faisal-page-content .team-card__toggle:hover{background:var(--gold,#C9A84C);color:var(--dark,#061410)}

/* ---- Slide-up biography panel (covers full card) ---- */
.faisal-page-content .team-card__bio{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;justify-content:center;gap:.5rem;
  padding:1.7rem 1.5rem;color:#fff;
  background:linear-gradient(160deg,rgba(13,37,24,.94),rgba(6,20,16,.97));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:3px solid var(--gold,#C9A84C);
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  will-change:transform;overflow:auto;
}
.faisal-page-content .team-card__bio-name{font-size:1.05rem;font-weight:800;color:var(--gold,#C9A84C);line-height:1.45}
.faisal-page-content .team-card__bio-role{font-size:.8rem;font-weight:700;color:var(--gold-muted,#BFA06A);margin-bottom:.3rem}
.faisal-page-content .team-card__bio p{margin:0;color:#e9e4d8;font-size:.9rem;line-height:1.85}

/* ---- Reveal triggers ---- */
@media (hover:hover) and (pointer:fine){
  .faisal-page-content .team-card:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(6,20,16,.3);border-color:rgba(201,168,76,.6)}
  .faisal-page-content .team-card:hover .team-card__photo{transform:scale(1.08)}
  .faisal-page-content .team-card:hover .team-card__bio{transform:translateY(0)}
}
.faisal-page-content .team-card:focus-within .team-card__bio,
.faisal-page-content .team-card.is-open .team-card__bio{transform:translateY(0)}
.faisal-page-content .team-card.is-open{border-color:rgba(201,168,76,.6);box-shadow:0 28px 60px rgba(6,20,16,.3)}
.faisal-page-content .team-card.is-open .team-card__photo{transform:scale(1.08)}
.faisal-page-content .team-card:focus-visible{box-shadow:0 0 0 3px var(--gold,#C9A84C),0 28px 60px rgba(6,20,16,.3)}
.faisal-page-content .team-card__toggle:focus-visible{outline:2px solid var(--gold,#C9A84C);outline-offset:2px}
.faisal-page-content .team-card.is-open .team-card__toggle{background:var(--gold,#C9A84C);color:var(--dark,#061410)}

@media (prefers-reduced-motion:reduce){
  .faisal-page-content .team-card,.faisal-page-content .team-card__photo,
  .faisal-page-content .team-card__bio,.faisal-page-content .team-card__toggle{transition:none!important}
}

/* =========================================================================
   SPECIAL CHAIRMAN CARD — featured, visually distinct primary leadership
   Spans wider, gold premium border + glow, financial-pattern background.
   ========================================================================= */
/* Chairman is the SAME size as the other cards (no column span / no taller
   photo) — only a richer GOLD FRAME + glow + pattern set it apart. */
.faisal-page-content .team-card--chair{
  border:2px solid var(--gold,#C9A84C)!important;
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(201,168,124,.16), transparent 60%),
    repeating-linear-gradient(135deg, rgba(201,168,124,.05) 0 2px, transparent 2px 12px),
    linear-gradient(165deg,#103021 0%,#061410 100%);
  box-shadow:0 16px 40px rgba(6,20,16,.3), 0 0 0 1px rgba(201,168,124,.45), 0 0 36px rgba(201,168,124,.3);
}
/* double gold inner frame (matches the attached chairman card) */
.faisal-page-content .team-card--chair::after{
  content:"";position:absolute;inset:6px;border-radius:14px;pointer-events:none;z-index:1;
  border:1px solid rgba(201,168,124,.45);
}
.faisal-page-content .team-card--chair .team-card__line{background:linear-gradient(90deg,var(--gold,#C9A84C),var(--gold-light,#f5d169),transparent)}
@media (hover:hover) and (pointer:fine){
  .faisal-page-content .team-card--chair:hover{
    box-shadow:0 24px 56px rgba(6,20,16,.4), 0 0 0 1px rgba(201,168,124,.6), 0 0 56px rgba(201,168,124,.45);
  }
}

/* =========================================================================
   FORMER MEMBERS — same premium team-card design, legacy identity + years
   ========================================================================= */
.faisal-page-content .team-card--former{border-top:0}
.faisal-page-content .team-card--former .team-card__bar,
.faisal-page-content .team-card--former{border-color:rgba(201,168,124,.28)}
/* Legacy badge (distinct from active position tags) */
.faisal-page-content .team-card__badge--legacy{
  background:linear-gradient(140deg,rgba(201,168,124,.9),rgba(168,136,61,.9));
  color:#08130d;box-shadow:0 6px 16px rgba(201,168,76,.35);
}
/* Service-period line under the role */
.faisal-page-content .team-card__years{
  display:inline-block;font-size:.82rem;font-weight:800;color:var(--gold,#C9A84C);
  letter-spacing:.02em;margin-top:.25rem;
}

/* =========================================================================
   METALLIC GOLD TEXT — premium luxury treatment for names + titles
   ========================================================================= */
.faisal-page-content .board-hero .section__title,
.faisal-page-content .board-section .section__title,
.faisal-page-content .board-hof .section__title,
.faisal-page-content .team-card__name,
.faisal-page-content .team-card__bio-name{
  background:linear-gradient(180deg,#f5e7b8 0%,#C9A84C 45%,#a8883d 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#C9A84C;
}
/* Chairman name slightly larger gold */
/* Chairman name uses the same size as other cards (per request). */

/* =========================================================================
   LUXURY HERO — gold divider + soft animated light
   ========================================================================= */
.faisal-page-content .board-hero{position:relative;overflow:hidden}
.faisal-page-content .board-hero::before,
.faisal-page-content .board-hero::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle, rgba(201,168,124,.16), transparent 70%);
  animation:boardGlow 7s ease-in-out infinite;
}
.faisal-page-content .board-hero::before{width:340px;height:340px;top:-120px;inset-inline-end:-80px}
.faisal-page-content .board-hero::after{width:300px;height:300px;bottom:-130px;inset-inline-start:-90px;animation-delay:1.5s}
@keyframes boardGlow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.faisal-page-content .board-hero .section__header{position:relative;z-index:1}
/* elegant gold divider beneath the hero heading */
.faisal-page-content .board-hero .section__desc{position:relative;padding-top:1.4rem}
.faisal-page-content .board-hero .section__desc::before{
  content:"";position:absolute;top:0;inset-inline-start:50%;transform:translateX(50%);
  width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--gold,#C9A84C),transparent);
}
[dir="ltr"] .faisal-page-content .board-hero .section__desc::before{transform:translateX(-50%)}
.faisal-page-content .board-hero .section__desc::after{
  content:"◆";position:absolute;top:-.55rem;inset-inline-start:50%;transform:translateX(50%);
  color:var(--gold,#C9A84C);font-size:.7rem;background:transparent;
}
[dir="ltr"] .faisal-page-content .board-hero .section__desc::after{transform:translateX(-50%)}

/* =========================================================================
   FADE-IN ON SCROLL (uses theme .reveal pattern; falls back to visible)
   ========================================================================= */
.js .faisal-page-content .team-card.reveal{opacity:0;transform:translateY(26px)}
.js .faisal-page-content .team-card.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}

/* Former members grid — denser (matches reference single-row legacy showcase) */
.faisal-page-content .team-grid--former{grid-template-columns:repeat(5,1fr)}
@media(max-width:1280px){.faisal-page-content .team-grid--former{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.faisal-page-content .team-grid--former{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.faisal-page-content .team-grid--former{grid-template-columns:1fr;max-width:24rem;margin-inline:auto}}
/* Former cards are a touch shorter (no long bios up front) */
.faisal-page-content .team-card--former{min-height:240px}
.faisal-page-content .team-card--former .team-card__media{height:150px}