@charset "UTF-8";

/* =========================================================
   ghaithkfmc — صفحة من نحن (about-page.php)
   Built on the design tokens and sections of ghaith.css.
   ========================================================= */

/* ============ من نحن + قصتنا ============ */
.about-desc p + p{margin-top:12px}
.story{
  position:relative;margin-top:30px;padding:26px 28px 24px;border-radius:var(--radius);
  background:var(--cream);border:1px solid var(--line);border-inline-start:4px solid var(--gold-500);
}
.story h3{font-size:19px;margin-bottom:8px}
.story-body{color:var(--ink-2);font-size:15.3px}
.story-body p + p{margin-top:10px}

/* ============ الرؤية والرسالة ============ */
.vm{background:var(--cream)}
.vm-grid{display:grid;gap:22px;grid-template-columns:1fr}
.vm-card{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:36px 32px;transition:transform .3s,box-shadow .3s;
}
.vm-card::after{
  content:"";position:absolute;top:0;inset-inline:0;height:4px;
  background:linear-gradient(90deg,var(--green-600),var(--gold-500));
}
.vm-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.vm-ic{
  width:68px;height:68px;border-radius:50%;display:grid;place-items:center;margin-bottom:20px;
  background:var(--green-800);border:3px solid var(--gold-300);box-shadow:0 10px 24px rgba(11,77,52,.20);
}
.vm-ic svg{width:30px;height:30px;stroke:var(--gold-300)}
.vm-card h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:10px}
.vm-text{color:var(--ink-2);font-size:16px;line-height:1.95}

/* ============ أهدافنا ============ */
.goals{background:#fff}
.goals-grid{display:grid;gap:20px;grid-template-columns:1fr;counter-reset:g}
.goal{
  position:relative;background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;transition:transform .3s,box-shadow .3s,background .3s;
}
.goal:hover{background:#fff;transform:translateY(-6px);box-shadow:var(--shadow)}
.goal-n{
  display:block;font-size:44px;font-weight:900;line-height:1;margin-bottom:16px;
  background:linear-gradient(135deg,var(--gold-500),var(--gold-700));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.goal h3{font-size:19px;margin-bottom:6px}
.goal p{color:var(--muted);font-size:15px;line-height:1.8}

/* ============ قيمنا ============ */
.values{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,var(--green-900) 0%,var(--green-700) 55%,var(--green-800) 100%);
}
.values::before{
  content:"";position:absolute;inset-inline-start:-140px;top:-140px;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,rgba(181,139,76,.26),transparent 65%);
}
.values .container{position:relative}
.values .sec-title{color:#fff}
.values .eyebrow{color:var(--gold-300)}
.values .eyebrow::before,.values .eyebrow::after{background:var(--gold-300)}
.values .sec-sub{color:rgba(255,255,255,.78)}
.values-grid{display:grid;gap:18px;grid-template-columns:1fr}
.value{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);
  padding:28px 24px;transition:background .3s,transform .3s;
}
.value:hover{background:rgba(255,255,255,.13);transform:translateY(-5px)}
.value .ic{width:54px;height:54px;border-radius:16px;margin-bottom:16px;background:rgba(255,255,255,.12);display:grid;place-items:center}
.value .ic svg{width:26px;height:26px;stroke:var(--gold-300)}
.value h3{color:#fff;font-size:19px;margin-bottom:6px}
.value p{color:rgba(255,255,255,.78);font-size:14.8px;line-height:1.8}

/* ============ مجلس الإدارة ============ */
.board{background:#fff}
.board-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.member{
  flex:0 0 100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 20px 24px;
  text-align:center;transition:transform .3s,box-shadow .3s,border-color .3s;
}
.member:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.member-photo{
  width:92px;height:92px;margin:0 auto 16px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--green-50),var(--green-100));border:3px solid #fff;
  box-shadow:0 0 0 2px var(--gold-300),var(--shadow-sm);
}
.member-photo img{width:100%;height:100%;object-fit:cover}
.member-photo span{font-size:34px;font-weight:800;color:var(--green-700);line-height:1}
.member h3{font-size:16.5px;margin-bottom:4px}
.member p{font-size:14px;color:var(--gold-600);font-weight:700}
/* Chairman */
.member:first-child{background:linear-gradient(160deg,var(--green-800),var(--green-600));border-color:transparent}
.member:first-child h3{color:#fff}
.member:first-child p{color:var(--gold-300)}
.member:first-child .member-photo{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2)}
.member:first-child .member-photo span{color:#fff}
.board-more{margin-top:36px;text-align:center}

/* ============ شركاء الأثر ============ */
.partners{background:#fff}
.partners-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.partner{
  display:grid;place-items:center;min-height:120px;padding:20px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--line);transition:transform .3s,box-shadow .3s;
  color:var(--green-800);font-weight:700;text-align:center;
}
.partner img{max-height:72px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.partner:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.partner:hover img{filter:none;opacity:1}

/* ============ الاستجابة ============ */
@media (min-width:600px){
  .goals-grid{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .member{flex-basis:calc((100% - 18px) / 2)}
  .partners-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .vm-grid{grid-template-columns:repeat(2,1fr)}
  .goals-grid--3{grid-template-columns:repeat(3,1fr)}
  .goals-grid--4{grid-template-columns:repeat(4,1fr)}
  .values-grid{grid-template-columns:repeat(4,1fr)}
  .member{flex-basis:calc((100% - 54px) / 4)}
  /* Chairman alone on the first row */
  .member:first-child{flex-basis:300px;margin-inline:calc((100% - 300px) / 2)}
  .partners-grid{grid-template-columns:repeat(5,1fr)}
}