/* ==========================================================================
   AE Creative — Card components
   why-card, service-card, work-card, industry-card, testimonial-card, and
   the small stat block. Each family follows the same BEM-ish contract:
   `.x-card` (container) + `.x-card__part` (children) + `.x-card--modifier`
   for the accented variant. Hover motion is NOT here — see
   assets/css/animations.css for the shared .hover-lift-* utilities these
   cards use.
   ========================================================================== */

/* ---- Why-us cards ---- */
.why-card{
  padding:30px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.why-card--accent{
  border:1px solid var(--brand-line);position:relative;overflow:hidden;
}
.why-card--accent::before{
  content:"";position:absolute;top:-30px;right:-30px;width:120px;height:120px;
  border-radius:50%;background:radial-gradient(circle,rgba(107,95,255,.4),transparent 70%);
}
.why-card--accent > .why-card__body{position:relative}

.why-card__icon{
  width:48px;height:48px;border-radius:13px;background:var(--brand-soft);
  border:1px solid var(--brand-line);display:flex;align-items:center;
  justify-content:center;margin-bottom:20px;color:var(--brand);font-size:22px;
}
.why-card__icon--grad{
  background:var(--grad);border:none;color:#fff;box-shadow:var(--e-glow);
}
.why-card__title{
  font-family:var(--ff-display);font-weight:600;font-size:20px;margin:0 0 10px;
}
.why-card__badge{
  font-size:11px;font-family:var(--ff-mono);color:var(--brand);vertical-align:middle;
  padding:3px 8px;border:1px solid var(--brand-line);border-radius:99px;
}
.why-card__text{margin:0;font-size:14.5px;line-height:1.7;color:var(--text-2)}

/* ---- Service cards ---- */
.service-card{
  padding:24px;background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.service-card--accent{
  background:linear-gradient(160deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--brand-line);
}
.service-card__icon{
  width:42px;height:42px;border-radius:11px;background:var(--brand-soft);
  border:1px solid var(--brand-line);display:flex;align-items:center;
  justify-content:center;margin-bottom:16px;color:var(--brand);
}
.service-card__icon--grad{
  background:var(--grad);border:none;color:#fff;box-shadow:var(--e-glow);
}
.service-card__title{
  font-family:var(--ff-display);font-weight:600;font-size:16px;margin:0 0 6px;
}
.service-card__text{margin:0;font-size:13px;line-height:1.6;color:var(--text-3)}
.service-group-label{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;color:var(--text-3);
  margin-bottom:16px;
}

/* ---- Portfolio / work cards ---- */
.work-card{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:4/3;display:block;
}
.work-card__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
/* Missing-asset fallback (same technique as .service-section__image in
   service-section.css): fades the image out via an inline onerror
   handler instead of showing a broken-image icon; the scrim/meta stay
   visible on their own. */
.work-card__img.is-broken{opacity:0}
.work-card__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(9,9,12,.92));
  transition:opacity .4s var(--ease);
}
/* Subtle zoom + lightened overlay on hover/focus — image scale stays
   well under 1.05 ("no dramatic scaling"), and .work-card is clipped
   with overflow:hidden above so the zoom never spills past the card's
   rounded corners. */
.work-card:hover .work-card__img,.work-card:focus-visible .work-card__img{transform:scale(1.04)}
.work-card:hover .work-card__scrim,.work-card:focus-visible .work-card__scrim{opacity:.85}
.work-card__play{
  position:absolute;top:14px;inset-inline-end:14px;width:44px;height:44px;
  border-radius:99px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.work-card__meta{
  position:absolute;inset-inline:18px;bottom:18px;
}
.work-card__tag{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;color:var(--brand)}
.work-card__title{
  font-family:var(--ff-display);font-weight:600;font-size:18px;margin:6px 0 0;color:#fff;
}

/* ---- Industry chips ---- */
.industry-card{
  display:flex;align-items:center;gap:14px;padding:22px;background:var(--bg-1);
  border:1px solid var(--line);border-radius:var(--r-lg);transition:all .3s var(--ease);
}
.industry-card:hover{border-color:var(--brand-line);background:var(--bg-2)}
.industry-card__icon{color:var(--brand);font-size:20px}
.industry-card__label{font-family:var(--ff-display);font-weight:600;font-size:16px}

/* ---- Stats / numbers ---- */
.stat{text-align:center}
.stat__value{
  font-family:var(--ff-display);font-weight:800;font-size:clamp(34px,4.5vw,54px);
  letter-spacing:-.03em;background:var(--stat-grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;line-height:1;
}
.stat__label{font-size:13.5px;color:var(--text-2);margin-top:8px}

/* ---- Testimonials ---- */
.testimonial-card{
  padding:30px;background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r-xl);display:flex;flex-direction:column;
}
.testimonial-card--accent{
  background:linear-gradient(160deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--brand-line);
}
.testimonial-card__stars{display:flex;gap:3px;margin-bottom:18px;color:var(--warn)}
.testimonial-card__quote{
  font-family:var(--ff-display);font-weight:500;font-size:17px;line-height:1.7;
  margin:0 0 24px;color:var(--text);
}
.testimonial-card__author{display:flex;align-items:center;gap:12px;margin-top:auto}
.testimonial-card__avatar{
  width:44px;height:44px;border-radius:99px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-weight:600;font-size:15px;flex:none;
}
.testimonial-card__name{font-size:14px;font-weight:600;color:var(--text)}
.testimonial-card__role{font-size:12.5px;color:var(--text-3)}

/* ---- Client logo cards ----
   Moved to assets/css/partners.css — see .partner-card there
   (index.html's "شركاء النجاح" logo showcase). */

/* ---- FAQ accordion item ----
   A native <details>/<summary> pair styled to match the card family
   above (same bg/border/radius tokens). No JS — open/close is native
   browser behavior. See layout.css's .faq-section/.faq for the
   section wrapper this sits inside. */
.faq-item{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:4px 24px;transition:border-color .3s var(--ease);
}
.faq-item[open]{border-color:var(--brand-line)}
.faq-item__q{
  list-style:none;cursor:pointer;padding:20px 0;
  font-family:var(--ff-display);font-weight:600;font-size:16px;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.faq-item__q::-webkit-details-marker{display:none}
.faq-item__q::after{
  content:"+";font-family:var(--ff-mono);font-size:20px;line-height:1;
  color:var(--brand);flex:none;
}
.faq-item[open] .faq-item__q::after{content:"\2212"}
.faq-item__a{margin:0 0 20px;font-size:14.5px;line-height:1.7;color:var(--text-2)}