/* =========================================================================
   FAISAL PREMIUM 2026 — Dynamic Team (مجلس الإدارة / فريقنا / إدارة الحسابات)
   Reference UX: businesseurope.eu/our-team — collapsible department accordions
   + clean premium photo cards + elegant full-bio modal.
   Brand colors: black / dark green / gold. RTL-safe, responsive, GPU-friendly.
   Scoped under .faisal-team. Rendered by [faisal_team].
   ========================================================================= */

.faisal-team{
  --t-dark:#061410;--t-green:#0D2518;--t-green2:#0F1E16;
  --t-gold:#C9A84C;--t-gold-l:#f5d169;--t-gold-m:#BFA06A;
  --t-primary:#006837;--t-text:#EAF1EC;--t-muted:#9CB1A4;
  --t-border:rgba(201,168,124,.22);
  position:relative;direction:rtl;
  font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
}
.faisal-team *{box-sizing:border-box}

/* ---------- Featured (Chairman / Managing Director) ---------- */
.faisal-team__featured{display:flex;justify-content:center;margin-bottom:2.5rem}
.faisal-team__featured .faisal-tcard{max-width:420px;width:100%}

/* =========================================================================
   COLLAPSIBLE DEPARTMENT ACCORDIONS — premium dark-glass containers
   ========================================================================= */
.faisal-team__accordions{display:flex;flex-direction:column;gap:1.5rem}

.faisal-team__dept{
  position:relative;border-radius:22px;overflow:hidden;
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(201,168,124,.10), transparent 60%),
    linear-gradient(180deg, rgba(13,37,24,.92), rgba(6,20,16,.96));
  -webkit-backdrop-filter:blur(14px) saturate(1.05);backdrop-filter:blur(14px) saturate(1.05);
  border:1px solid rgba(201,168,124,.34);
  box-shadow:0 18px 48px rgba(6,20,16,.30),inset 0 1px 0 rgba(255,255,255,.05);
}
.faisal-team__dept::before{
  content:"";position:absolute;inset-inline:16%;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--t-gold),transparent);
  opacity:.85;filter:drop-shadow(0 0 10px rgba(201,168,124,.55));
}

/* Header / toggle */
.faisal-team__dept-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.3rem 1.6rem;background:transparent;border:0;cursor:pointer;
  font-family:inherit;text-align:start;color:var(--t-text);
  transition:background .3s ease;
}
.faisal-team__dept-toggle:hover{background:rgba(201,168,124,.06)}
.faisal-team__dept-toggle:focus-visible{outline:2px solid var(--t-gold);outline-offset:-3px;border-radius:18px}
.faisal-team__dept-titlewrap{display:flex;align-items:center;gap:.85rem;min-width:0}
.faisal-team__dept-ico{
  width:34px;height:34px;border-radius:11px;flex:0 0 auto;display:inline-block;position:relative;
  background:linear-gradient(140deg,rgba(201,168,76,.3),rgba(201,168,76,.1));
  border:1px solid rgba(201,168,124,.45);
}
.faisal-team__dept-ico::before{
  content:"";position:absolute;inset:8px;background-color:var(--t-gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Cpath d='M16 6a3 3 0 0 1 0 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Cpath d='M16 6a3 3 0 0 1 0 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.faisal-team__dept-title{font-size:1.25rem;font-weight:800;color:var(--t-gold);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 14px rgba(201,168,124,.3)}
.faisal-team__dept-count{
  flex:0 0 auto;font-size:.78rem;font-weight:800;color:var(--t-dark);
  background:linear-gradient(140deg,var(--t-gold),var(--t-gold-l));
  border-radius:999px;padding:.12rem .6rem;min-width:26px;text-align:center;
}
.faisal-team__dept-chevron{
  flex:0 0 auto;width:14px;height:14px;border-inline-end:2.5px solid var(--t-gold);border-bottom:2.5px solid var(--t-gold);
  transform:rotate(45deg);transition:transform .3s ease;margin-top:-4px;
}
.faisal-team__dept.is-open .faisal-team__dept-chevron{transform:rotate(-135deg);margin-top:4px}

/* Panel (slide + fade). JS sets max-height for the animation. */
.faisal-team__dept-panel{
  overflow:hidden;
  max-height:0;opacity:0;
  transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .3s ease,padding .3s ease;
  padding:0 1.6rem;
}
.faisal-team__dept.is-open .faisal-team__dept-panel{opacity:1;padding-bottom:1.8rem}
.faisal-team__dept-panel[hidden]{display:block}      /* keep animatable; JS manages aria */
.no-js .faisal-team__dept-panel{max-height:none!important;opacity:1;padding-bottom:1.8rem}

/* ---------- Card grid ---------- */
.faisal-team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;align-items:start;padding-top:.4rem}
@media(max-width:1100px){.faisal-team__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.faisal-team__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.faisal-team__grid{grid-template-columns:1fr;max-width:24rem;margin-inline:auto}}

/* =========================================================================
   MEMBER CARD — clean premium photo card (reference image)
   Equal photo sizes, no crop, full face & upper body via object-fit:contain.
   ========================================================================= */
.faisal-tcard{
  position:relative;display:flex;flex-direction:column;height:100%;cursor:pointer;
  border-radius:18px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(13,37,24,.7),rgba(6,20,16,.85));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--t-border);
  box-shadow:0 14px 34px rgba(6,20,16,.22);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease;
  outline:none;
}
.faisal-tcard__media{
  position:relative;height:300px;overflow:hidden;flex:0 0 auto;border-radius:16px;margin:.55rem .55rem 0;
  background:linear-gradient(180deg,#10231a,#0D2518);
}
.faisal-tcard__photo{
  width:100%;height:100%;display:block;object-fit:contain;object-position:center bottom;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.faisal-tcard__photo--empty{display:block;background:radial-gradient(circle at 50% 35%,rgba(201,168,124,.16),transparent 60%)}
.faisal-tcard__body{padding:1rem 1.1rem 1.25rem;display:flex;flex-direction:column;flex:1 1 auto}
.faisal-tcard__name{font-size:1.05rem;font-weight:800;color:#fff;margin:0 0 .2rem;line-height:1.4}
.faisal-tcard__role{font-size:.82rem;font-weight:700;color:var(--t-gold);line-height:1.5;margin-bottom:.55rem}
/* 2 short bio lines, auto-truncated, aligned to photo width */
.faisal-tcard__teaser{margin:0 0 .8rem;font-size:.82rem;line-height:1.7;color:var(--t-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.faisal-tcard__more{
  margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.35rem;
  font-family:inherit;font-size:.8rem;font-weight:800;cursor:pointer;
  color:var(--t-gold);background:transparent;border:0;padding:0;
  transition:gap .25s ease,color .25s ease;
}
.faisal-tcard__more:hover{color:var(--t-gold-l);gap:.6rem}
.faisal-tcard__more-arrow{transition:transform .25s ease}
.faisal-tcard:hover .faisal-tcard__more-arrow{transform:translateX(-4px)}

@media (hover:hover){
  .faisal-tcard:hover{transform:translateY(-6px);border-color:rgba(201,168,76,.55);box-shadow:0 26px 56px rgba(6,20,16,.34)}
  .faisal-tcard:hover .faisal-tcard__photo{transform:scale(1.05)}
}
.faisal-tcard:focus-visible{box-shadow:0 0 0 3px var(--t-gold),0 22px 50px rgba(6,20,16,.34)}

/* ---------- Featured gold card ---------- */
.faisal-tcard--gold{
  border:2px solid var(--t-gold);
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(201,168,124,.16), transparent 60%),
    linear-gradient(165deg,#103021 0%,#061410 100%);
  box-shadow:0 16px 40px rgba(6,20,16,.3),0 0 36px rgba(201,168,124,.26);
}
.faisal-tcard--gold .faisal-tcard__media{height:360px}
.faisal-tcard--gold .faisal-tcard__name{font-size:1.25rem}
.faisal-tcard--gold .faisal-tcard__role{font-size:.92rem}
.faisal-tcard__badge{
  position:absolute;z-index:3;top:.9rem;inset-inline-start:.9rem;
  font-size:.74rem;font-weight:800;color:var(--t-dark);
  background:linear-gradient(140deg,var(--t-gold),var(--t-gold-l));
  border-radius:999px;padding:.3rem .85rem;box-shadow:0 6px 18px rgba(201,168,76,.5);
}

/* ---------- Former members tint ---------- */
.faisal-tcard--former .faisal-tcard__role{color:var(--t-gold-m)}

/* fade-in on scroll */
.js .faisal-tcard{opacity:0;transform:translateY(20px)}
.js .faisal-tcard.in,.no-js .faisal-tcard{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}

/* =========================================================================
   FULL BIOGRAPHY MODAL — elegant popup (image + name + role + dept + bio)
   ========================================================================= */
.faisal-bio-modal{position:fixed;inset:0;z-index:99999;display:none;
  align-items:flex-start;justify-content:center;padding:5vh 1rem;
  background:rgba(4,12,9,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.faisal-bio-modal.is-open{display:flex}
.faisal-bio-modal__dialog{
  position:relative;width:100%;max-width:760px;margin:auto;border-radius:22px;direction:rtl;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(201,168,124,.14), transparent 60%),
    linear-gradient(170deg,#10231a 0%,#061410 100%);
  border:1.5px solid rgba(201,168,124,.5);
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 50px rgba(201,168,124,.22);
  padding:2rem 2rem 2.2rem;color:#fff;
  transform:translateY(18px) scale(.98);opacity:0;
  transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .3s ease;
}
.faisal-bio-modal.is-open .faisal-bio-modal__dialog{transform:none;opacity:1}
.faisal-bio-modal__close{
  position:absolute;top:1rem;inset-inline-end:1rem;width:40px;height:40px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.4rem;font-weight:900;line-height:1;
  color:var(--t-gold);background:rgba(201,168,124,.12);border:1px solid rgba(201,168,124,.4);
  transition:background .25s ease,color .25s ease}
.faisal-bio-modal__close:hover{background:var(--t-gold);color:var(--t-dark)}
.faisal-bio-modal__head{display:flex;align-items:center;gap:1.3rem;margin-bottom:1.3rem;padding-bottom:1.3rem;border-bottom:1px solid rgba(201,168,124,.22);flex-wrap:wrap}
.faisal-bio-modal__photo{width:120px;height:150px;flex:0 0 auto;border-radius:14px;object-fit:contain;object-position:center bottom;background:linear-gradient(180deg,#10231a,#0D2518);border:1px solid rgba(201,168,124,.3)}
.faisal-bio-modal__meta{flex:1 1 240px;min-width:200px}
.faisal-bio-modal__name{font-size:1.5rem;font-weight:800;color:#fff;margin:0 0 .4rem;line-height:1.35}
.faisal-bio-modal__role{font-size:.98rem;font-weight:700;color:var(--t-gold);display:block;line-height:1.5}
.faisal-bio-modal__dept{font-size:.85rem;font-weight:600;color:var(--t-gold-m);display:block;margin-top:.25rem}
.faisal-bio-modal__text{margin:0;color:rgba(255,255,255,.92);font-size:1rem;line-height:2;white-space:pre-line}
@media(max-width:520px){
  .faisal-bio-modal__dialog{padding:1.6rem 1.3rem 1.8rem}
  .faisal-bio-modal__name{font-size:1.25rem}
  .faisal-bio-modal__photo{width:96px;height:120px}
}

@media (prefers-reduced-motion:reduce){
  .faisal-tcard,.faisal-tcard__photo,.faisal-team__dept-panel,.faisal-team__dept-chevron,
  .faisal-bio-modal__dialog{transition:none!important}
  .js .faisal-tcard{opacity:1;transform:none}
}