/* ==========================================================================
   aboutus.css
   Scope:  Public "About the Ministry" page (module aboutus, body_ar.dwt).
   Purpose: Professional redesign of the About page — royal speeches,
            ministry timeline, mission/vision, strategic goals and mandates.
   Notes:  Buttons never use box-shadow (template rule). Cards/panels may.
           Uses CSS logical properties for RTL/LTR safety.
   ========================================================================== */

.fx-about{
  --fx-red:#a51313;
  --fx-red-2:#b91612;
  --fx-red-3:#d22923;
  --fx-ink:#1f2937;
  --fx-body:#3a3a3a;
  --fx-muted:#6b7280;
  --fx-line:#e7e9ee;
  --fx-bg:#f7f8fa;
  --fx-card:#ffffff;
  font-family:inherit;
  color:var(--fx-body);
  line-height:1.9;
}

.fx-about *{box-sizing:border-box;}

.fx-about__wrap{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:20px;
}

.fx-about__section{padding-block:64px;}
.fx-about__section--tight{padding-block:44px;}
.fx-about__section--gray{background:var(--fx-bg);}

/* ---------- Section headings ---------- */
.fx-about__head{
  text-align:center;
  margin-bottom:40px;
}
.fx-about__head h2{
  font-size:clamp(22px,3.2vw,32px);
  font-weight:800;
  color:var(--fx-ink);
  margin:0 0 14px;
  letter-spacing:.2px;
}
.fx-about__head h2 span{color:var(--fx-red);}
.fx-about__rule{
  width:74px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--fx-red),var(--fx-red-3));
  margin-inline:auto;
}
.fx-about__lead{
  max-width:820px;margin:22px auto 0;
  text-align:center;color:var(--fx-muted);
  font-size:17px;line-height:2;
}

/* ==========================================================================
   1) Royal speeches
   ========================================================================== */
.fx-about__speeches{
  position:relative;
  background:linear-gradient(rgba(20,22,26,.86),rgba(20,22,26,.92)),
             url('../images/people.png') center/cover no-repeat fixed;
}
.fx-about__speeches .fx-about__head h2{color:#fff;}
.fx-about__speeches .fx-about__head h2 span{color:#ff6a60;}

.fx-quotes{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
}
.fx-quote{
  position:relative;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;
  padding:34px 30px 0;
  backdrop-filter:blur(2px);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),border-color .3s ease;
}
.fx-quote:hover{transform:translateY(-4px);border-color:rgba(255,106,96,.5);}
.fx-quote__mark{
  font-family:Georgia,'Times New Roman',serif;
  font-size:72px;line-height:.7;
  color:var(--fx-red-3);
  opacity:.55;
  margin-bottom:6px;
}
.fx-quote__text{
  color:#eef0f3;
  font-size:16px;line-height:2.05;
  text-align:justify;
  margin:0 0 26px;
  flex:1 1 auto;
}
.fx-quote__by{
  margin-inline:-30px;
  margin-top:auto;
  padding:16px 30px;
  background:linear-gradient(90deg,var(--fx-red),var(--fx-red-2));
  color:#fff;font-size:13.5px;font-weight:600;line-height:1.7;
  border-start-start-radius:4px;
  border-start-end-radius:4px;
}

/* ==========================================================================
   2) Ministry timeline
   ========================================================================== */
.fx-timeline{
  position:relative;
  margin-top:12px;
  padding-block:10px;
}
/* center spine */
.fx-timeline::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:50%;
  transform:translateX(50%);
  width:3px;
  background:linear-gradient(var(--fx-red),var(--fx-red-3));
  opacity:.28;
  border-radius:4px;
}
.fx-tl{
  position:relative;
  width:50%;
  padding-inline-end:48px;
  margin-bottom:34px;
}
.fx-tl:nth-child(even){
  inset-inline-start:50%;
  padding-inline-end:0;
  padding-inline-start:48px;
}
.fx-tl__dot{
  position:absolute;
  top:26px;
  inset-inline-end:-9px;
  width:18px;height:18px;border-radius:50%;
  background:var(--fx-red);
  border:4px solid #fff;
  z-index:2;
}
.fx-tl:nth-child(even) .fx-tl__dot{
  inset-inline-end:auto;
  inset-inline-start:-9px;
}
.fx-tl__card{
  background:var(--fx-card);
  border:1px solid var(--fx-line);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(17,24,39,.06);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease;
}
.fx-tl__card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(17,24,39,.12);}
/* Full image visible: uniform width (100% of card), natural height, no cropping */
.fx-tl__img{
  position:relative;
  background:#eee;
}
.fx-tl__img img{width:100%;height:auto;display:block;}
.fx-tl__date{
  position:absolute;
  inset-block-start:14px;
  inset-inline-start:14px;
  background:rgba(165,19,19,.95);
  color:#fff;
  border-radius:4px;
  padding:8px 12px;
  text-align:center;
  line-height:1.1;
  min-width:60px;
}
.fx-tl__date .d{display:block;font-size:20px;font-weight:800;}
.fx-tl__date .m{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;opacity:.9;}
.fx-tl__date .y{display:block;font-size:12px;font-weight:600;margin-top:2px;}
.fx-tl__body{padding:20px 22px;}
.fx-tl__body p{margin:0;font-size:15.5px;line-height:2;text-align:justify;color:var(--fx-body);}

/* ==========================================================================
   3) Mission / Vision
   ========================================================================== */
.fx-mv{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
}
.fx-mv__card{
  position:relative;
  border-radius:4px;
  padding:38px 34px;
  color:#fff;
  overflow:hidden;
  min-height:230px;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 14px 36px rgba(17,24,39,.14);
}
.fx-mv__card--mission{background:linear-gradient(135deg,#a51313,#d22923);}
.fx-mv__card--vision{background:linear-gradient(135deg,#1f2937,#3a3a3a);}
.fx-mv__icon{
  font-size:46px;
  opacity:.9;
  margin-bottom:16px;
}
.fx-mv__card h3{
  font-size:22px;font-weight:800;margin:0 0 12px;
}
.fx-mv__card p{
  margin:0;font-size:16px;line-height:2;color:rgba(255,255,255,.92);
}
.fx-mv__watermark{
  position:absolute;
  inset-block-end:-24px;
  inset-inline-start:-10px;
  font-size:150px;
  opacity:.08;
  pointer-events:none;
}

/* ==========================================================================
   4/5) Goals & mandates lists
   ========================================================================== */
.fx-goals{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px 30px;
  list-style:none;margin:0;padding:0;
}
.fx-goals li{
  position:relative;
  background:var(--fx-card);
  border:1px solid var(--fx-line);
  border-radius:4px;
  padding:18px 20px 18px 18px;
  padding-inline-start:56px;
  font-size:15.5px;line-height:1.95;text-align:justify;
  transition:transform .25s ease,border-color .25s ease;
}
.fx-about__section--gray .fx-goals li{background:#fff;}
.fx-goals li:hover{transform:translateY(-2px);border-color:rgba(165,19,19,.35);}
.fx-goals li::before{
  content:"\f00c"; /* fa-check */
  font-family:FontAwesome;
  position:absolute;
  inset-block-start:18px;
  inset-inline-start:16px;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(165,19,19,.1);
  color:var(--fx-red);
  border-radius:4px;
  font-size:13px;
}

/* More button — NO box-shadow (template rule) */
.fx-about__more{margin-top:30px;text-align:start;}
.fx-more-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--fx-red);
  color:#fff !important;
  font-weight:700;font-size:15px;
  padding:13px 28px;
  border-radius:4px;
  text-decoration:none;
  box-shadow:none;
  transition:transform .25s ease,background .25s ease;
}
.fx-more-btn:hover{transform:translateY(-2px);background:var(--fx-red-2);color:#fff;}
.fx-more-btn:focus-visible{outline:3px solid rgba(165,19,19,.4);outline-offset:2px;}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:860px){
  .fx-quotes{grid-template-columns:1fr;}
  .fx-mv{grid-template-columns:1fr;}
  .fx-goals{grid-template-columns:1fr;}
  .fx-about__speeches{background-attachment:scroll;}

  .fx-timeline::before{inset-inline-start:20px;transform:none;}
  .fx-tl,
  .fx-tl:nth-child(even){
    width:100%;
    inset-inline-start:0;
    padding-inline-start:52px;
    padding-inline-end:0;
  }
  .fx-tl__dot,
  .fx-tl:nth-child(even) .fx-tl__dot{
    inset-inline-start:12px;
    inset-inline-end:auto;
  }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  .fx-about__speeches{background-attachment:scroll;}
  .fx-quote,.fx-tl__card,.fx-goals li,.fx-more-btn{transition:none;}
  .fx-quote:hover,.fx-tl__card:hover,.fx-goals li:hover,.fx-more-btn:hover{transform:none;}
}