/* =========================================================================
   FAISAL PREMIUM 2026 — "ابق على اطلاع" Programs Section + SVG Icon System
   Premium fintech glassmorphism: soft gradients, depth, hover elevation,
   micro-interactions, equal-height cards, RTL-safe, fully responsive.
   Scoped under #stay-informed so Elementor globals cannot bleed in.
   ========================================================================= */

/* ---------- Section shell (full-bleed alt band w/ soft fintech gradient) ---------- */
#stay-informed.section--alt{
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(0,104,55,.06), transparent 60%),
    radial-gradient(50% 70% at 92% 8%, rgba(201,168,76,.08), transparent 60%),
    linear-gradient(180deg, var(--cream,#F7F4EF) 0%, #fbfaf6 100%);
}
#stay-informed .section__header,
#stay-informed .section-head{ text-align:center; margin-bottom:2.75rem; }
#stay-informed .section__tag,
#stay-informed .section-label{
  display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-dark,#a8883d);
  background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.22);
  padding:.4rem .9rem;border-radius:999px;margin-bottom:.9rem;
}
#stay-informed .section__title{
  font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:800;color:var(--text,#17231D);
  margin:0 0 .65rem;line-height:1.25;
}
#stay-informed .section__desc{
  color:var(--text-muted,#5a6b62);font-size:1.02rem;line-height:1.8;
  max-width:46rem;margin:0 auto;
}

/* ---------- Premium card grid (programs + reports) ---------- */
#stay-informed .programs-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch;
}
@media(max-width:980px){ #stay-informed .programs-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ #stay-informed .programs-grid{grid-template-columns:1fr} }

/* ---------- Program card: glassmorphism + depth ---------- */
#stay-informed .program-card{
  position:relative;display:flex;flex-direction:column;height:100%;
  cursor:pointer;text-decoration:none;color:inherit;
  background:linear-gradient(160deg, rgba(255,255,255,.92) 0%, rgba(252,250,246,.86) 100%);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(226,216,202,.8);
  border-radius:18px;padding:1.6rem 1.5rem;
  box-shadow:0 1px 2px rgba(6,20,16,.04), 0 12px 28px rgba(6,20,16,.06);
  overflow:hidden;isolation:isolate;
  transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), border-color .35s ease;
  will-change:transform;
}
#stay-informed a.program-card:focus-visible{outline:none;border-color:var(--gold,#C9A84C);box-shadow:0 0 0 3px rgba(201,168,76,.4)}
/* Stretched overlay link: makes the WHOLE card clickable (icon/title/desc/watch)
   as one unit — robust against Elementor splitting block content out of an <a>. */
#stay-informed .program-card__link{position:absolute;inset:0;z-index:3;text-indent:-9999px;overflow:hidden;border-radius:inherit}
#stay-informed .program-card:focus-within{border-color:var(--gold,#C9A84C);box-shadow:0 0 0 3px rgba(201,168,76,.4)}
/* gold top accent line */
#stay-informed .program-card::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg, transparent, var(--gold,#C9A84C), transparent);
  opacity:0;transition:opacity .35s ease;z-index:1;
}
/* soft brand glow */
#stay-informed .program-card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:0 26px 60px rgba(0,104,55,.16);opacity:0;transition:opacity .4s ease;
}
@media (hover:hover) and (pointer:fine){
  #stay-informed .program-card:hover{
    transform:translateY(-8px);
    border-color:rgba(201,168,76,.55);
    box-shadow:0 8px 18px rgba(6,20,16,.07), 0 30px 60px rgba(6,20,16,.13), 0 0 34px rgba(201,168,76,.22);
  }
  #stay-informed .program-card:hover::before{opacity:1}
  #stay-informed .program-card:hover::after{opacity:1}
  #stay-informed .program-card:hover .program-card__watch{color:var(--primary,#006837);gap:.6rem}
}

/* "watch" footer link inside each program card */
#stay-informed .program-card__watch{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-size:.85rem;font-weight:800;color:var(--gold-dark,#a8883d);
  transition:color .25s ease,gap .25s ease;
}
#stay-informed .program-card__watch .faisal-ico{width:15px;height:15px}

/* GPU-accelerated ripple on click (transform/opacity only) */
#stay-informed .program-card .faisal-ripple{
  position:absolute;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,rgba(201,168,76,.45),rgba(201,168,76,0) 70%);
  transform:scale(0);opacity:.7;will-change:transform,opacity;
  animation:faisal-ripple .6s ease-out forwards;
}
@keyframes faisal-ripple{to{transform:scale(1);opacity:0}}

/* ---------- Card header (icon + tag + title) ---------- */
#stay-informed .program-card__header{
  display:flex;align-items:flex-start;gap:.9rem;margin-bottom:.9rem;
}
#stay-informed .program-card__icon{
  flex:0 0 auto;width:54px;height:54px;border-radius:15px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg, rgba(0,104,55,.14), rgba(0,104,55,.05));
  border:1px solid rgba(0,104,55,.16);color:var(--primary,#006837);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .35s ease, color .35s ease, box-shadow .35s ease;
}
#stay-informed .program-card__icon svg{width:26px;height:26px;display:block;stroke:currentColor}
/* per-card icon tints */
#stay-informed .program-card__icon--news{background:linear-gradient(140deg,rgba(0,104,55,.16),rgba(0,104,55,.05));color:var(--primary,#006837)}
#stay-informed .program-card__icon--daily{background:linear-gradient(140deg,rgba(201,168,76,.2),rgba(201,168,76,.06));border-color:rgba(201,168,76,.24);color:var(--gold-dark,#a8883d)}
#stay-informed .program-card__icon--analysis{background:linear-gradient(140deg,rgba(0,143,74,.16),rgba(0,143,74,.05));color:var(--primary-light,#008f4a)}
#stay-informed .program-card__icon--research{background:linear-gradient(140deg,rgba(0,104,55,.16),rgba(0,104,55,.05));color:var(--primary,#006837)}
#stay-informed .program-card__icon--podcast{background:linear-gradient(140deg,rgba(201,168,76,.2),rgba(201,168,76,.06));border-color:rgba(201,168,76,.24);color:var(--gold-dark,#a8883d)}

@media (hover:hover) and (pointer:fine){
  #stay-informed .program-card:hover .program-card__icon{
    transform:scale(1.1) rotate(-5deg);
    background:linear-gradient(140deg,var(--primary,#006837),var(--primary-light,#008f4a));
    color:#fff;border-color:transparent;box-shadow:0 12px 24px rgba(0,104,55,.3);
  }
  #stay-informed .program-card:hover .program-card__icon--daily,
  #stay-informed .program-card:hover .program-card__icon--podcast{
    background:linear-gradient(140deg,var(--gold,#C9A84C),var(--gold-light,#f5d169));
    color:var(--dark,#061410);box-shadow:0 12px 24px rgba(201,168,76,.32);
  }
}

#stay-informed .program-card__tag{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  color:var(--gold-dark,#a8883d);background:rgba(201,168,76,.12);
  border-radius:999px;padding:.18rem .6rem;margin-bottom:.35rem;
}
#stay-informed .program-card__header h4{
  font-size:1.12rem;font-weight:800;color:var(--text,#17231D);margin:0;line-height:1.35;
}
#stay-informed .program-card__body{
  color:var(--text-muted,#5a6b62);font-size:.95rem;line-height:1.8;margin:0;margin-top:auto;
}

/* ---------- Reports list card (spans nicely, premium dark-accent surface) ---------- */
#stay-informed .reports-list{
  position:relative;display:flex;flex-direction:column;grid-column:span 1;
  background:linear-gradient(160deg, var(--dark-green,#0D2518) 0%, var(--dark,#061410) 100%);
  border:1px solid rgba(201,168,124,.22);border-radius:18px;padding:1.6rem 1.5rem;
  box-shadow:0 12px 30px rgba(6,20,16,.18);overflow:hidden;isolation:isolate;
  transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, border-color .35s ease;
}
#stay-informed .reports-list::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(80% 60% at 100% 0%, rgba(201,168,76,.16), transparent 60%);
}
@media (hover:hover) and (pointer:fine){
  #stay-informed .reports-list:hover{transform:translateY(-6px);border-color:rgba(201,168,76,.45);box-shadow:0 24px 50px rgba(6,20,16,.28)}
}
#stay-informed .reports-list h4{
  display:flex;align-items:center;gap:.55rem;font-size:1.1rem;font-weight:800;
  color:var(--gold,#C9A84C);margin:0 0 1rem;
}
#stay-informed .reports-list h4 svg{width:22px;height:22px;flex:0 0 auto;stroke:currentColor}
#stay-informed .reports-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;flex:1 1 auto}
#stay-informed .reports-list li{margin:0}
#stay-informed .reports-list li a{
  position:relative;display:flex;align-items:center;gap:.65rem;color:var(--gold-muted,#BFA06A);
  font-size:.95rem;font-weight:700;padding:.75rem .55rem;border-radius:12px;
  background:rgba(201,168,124,.05);border:1px solid rgba(201,168,124,.16);
  transition:color .25s ease, background .25s ease, transform .25s ease, border-color .25s ease;
}
/* gold arrow icon (RTL: points left) */
#stay-informed .reports-list__arrow{
  flex:0 0 auto;width:16px;height:16px;background-color:var(--gold,#C9A84C);
  transition:transform .25s ease;
  -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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* animated gold underline under the text */
#stay-informed .reports-list__text{position:relative}
#stay-informed .reports-list__text::after{
  content:"";position:absolute;inset-inline:0;bottom:-3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold,#C9A84C),transparent);
  transform:scaleX(0);transform-origin:right;transition:transform .3s ease;
}
@media (hover:hover) and (pointer:fine){
  #stay-informed .reports-list li a:hover{
    color:#fff;background:rgba(201,168,76,.14);border-color:rgba(201,168,76,.4);transform:translateX(-4px);
  }
  #stay-informed .reports-list li a:hover .reports-list__arrow{transform:translateX(-4px)}
  #stay-informed .reports-list li a:hover .reports-list__text::after{transform:scaleX(1)}
}
#stay-informed .reports-list li a:focus-visible{outline:none;border-color:var(--gold,#C9A84C);box-shadow:0 0 0 2px rgba(201,168,76,.4)}
/* highlight the final "all reports" row */
#stay-informed .reports-list li:last-child a{
  color:var(--gold,#C9A84C);font-weight:800;
  background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.3);
}

/* ---------- Touch / reduced motion ---------- */
@media (hover:none),(pointer:coarse){
  #stay-informed .program-card:active{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){
  #stay-informed .program-card,#stay-informed .program-card__icon,#stay-informed .reports-list{transition:none!important}
}

/* ---------- Reveal-on-load stagger (uses theme's .reveal/.in pattern) ---------- */
.js #stay-informed .program-card.reveal,
.js #stay-informed .reports-list.reveal{opacity:0;transform:translate3d(0,26px,0)}
.js #stay-informed .program-card.reveal.in,
.js #stay-informed .reports-list.reveal.in{opacity:1;transform:none;transition:opacity .55s ease, transform .55s cubic-bezier(.4,0,.2,1);transition-delay:var(--d,0ms)}

/* =========================================================================
   GLOBAL SVG ICON SYSTEM (modern line-style, consistent stroke)
   Applies to inline SVGs used across rebuilt homepage cards.
   ========================================================================= */
.icon-box svg,
.faisal-svg{
  width:26px;height:26px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
/* icon micro-animation on card hover (subtle) */
@media (hover:hover) and (pointer:fine){
  .card:hover .icon-box svg,
  .stat-card:hover .icon-box svg,
  .contact-card:hover .icon-box svg{ transform:translateY(-1px) }
  .icon-box svg{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
}

/* =========================================================================
   FBC RESEARCH card relocated into the خدماتنا grid (.grid-4 on the homepage)
   Reuse the premium dark card style; span the full grid width beneath the
   4 service cards, keeping equal spacing and dimensions.
   ========================================================================= */
.grid-4 > .reports-list{
  position:relative;display:flex;flex-direction:column;grid-column:1 / -1;
  background:linear-gradient(160deg, var(--dark-green,#0D2518) 0%, var(--dark,#061410) 100%);
  border:1px solid rgba(201,168,124,.22);border-radius:18px;padding:1.6rem 1.8rem;
  box-shadow:0 12px 30px rgba(6,20,16,.18);overflow:hidden;isolation:isolate;
  transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.grid-4 > .reports-list::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 80% at 100% 0%, rgba(201,168,76,.16), transparent 60%);
}
@media (hover:hover) and (pointer:fine){
  .grid-4 > .reports-list:hover{transform:translateY(-4px);border-color:rgba(201,168,76,.45);box-shadow:0 22px 46px rgba(6,20,16,.26)}
}
.grid-4 > .reports-list h4{
  display:flex;align-items:center;gap:.55rem;font-size:1.15rem;font-weight:800;
  color:var(--gold,#C9A84C);margin:0 0 1.1rem;
}
.grid-4 > .reports-list h4 .faisal-ico{width:22px;height:22px;flex:0 0 auto;background-color:currentColor}
/* report rows in a responsive multi-column layout so the full-width card reads cleanly */
.grid-4 > .reports-list ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(max-width:640px){.grid-4 > .reports-list ul{grid-template-columns:1fr}}
.grid-4 > .reports-list li{margin:0}
.grid-4 > .reports-list li a{
  position:relative;display:flex;align-items:center;gap:.65rem;color:var(--gold-muted,#BFA06A);
  font-size:.95rem;font-weight:700;padding:.75rem .85rem;border-radius:12px;
  background:rgba(201,168,124,.05);border:1px solid rgba(201,168,124,.16);
  transition:color .25s ease, background .25s ease, transform .25s ease, border-color .25s ease;
}
.grid-4 > .reports-list .reports-list__arrow{
  flex:0 0 auto;width:16px;height:16px;background-color:var(--gold,#C9A84C);transition:transform .25s ease;
  -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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.grid-4 > .reports-list__text{position:relative}
@media (hover:hover) and (pointer:fine){
  .grid-4 > .reports-list li a:hover{color:#fff;background:rgba(201,168,76,.14);border-color:rgba(201,168,76,.4);transform:translateX(-4px)}
  .grid-4 > .reports-list li a:hover .reports-list__arrow{transform:translateX(-4px)}
}
.grid-4 > .reports-list li a:focus-visible{outline:none;border-color:var(--gold,#C9A84C);box-shadow:0 0 0 2px rgba(201,168,76,.4)}
.grid-4 > .reports-list li:last-child a{color:var(--gold,#C9A84C);font-weight:800;background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.3)}