/* ==================================================================
   MFC Certifications — shortcode block [mfc_certifications]
   v3 — rebuilt structure:
     • Background overlay strength is now a CSS variable set inline
       per-shortcode from the "تیرگی روکش" admin setting, so the photo
       can be made much clearer without touching code.
     • Title/description under each logo are locked visible with
       !important on display/visibility/opacity — this is the fix for
       themes that ship a global reset (e.g. "span{display:none}" or
       similar utility resets) which was silently hiding them before.
     • No live backdrop-filter blur anywhere and no infinite/looping
       animations — nothing repaints on its own. All motion is a
       discrete, GPU-only transform on :hover.
================================================================== */
.mfc-cert{
  --mfc-yellow:#ffc81a;
  --mfc-yellow-2:#ffb000;
  --mfc-ink:#101012;
  --mfc-steel:#b7b9bd;
  --mfc-steel-dim:#8a8d93;
  --mfc-line:rgba(255,255,255,.10);
  --mfc-overlay-1:.32;
  --mfc-overlay-2:.40;
  --mfc-overlay-3:.45;

  position:relative !important;
  border-radius:22px;
  overflow:hidden;
  color:var(--mfc-steel);
  font-family:'Vazirmatn','Oswald',sans-serif;
  direction:rtl;

  background-color:var(--mfc-ink);
  background-image:
    linear-gradient(180deg,
      rgba(9,9,10,var(--mfc-overlay-1)) 0%,
      rgba(9,9,10,var(--mfc-overlay-2)) 55%,
      rgba(7,7,8,var(--mfc-overlay-3)) 100%),
    var(--mfc-bg-image, none);
  background-size:cover;
  background-position:center 35%;
  background-repeat:no-repeat;
}

.mfc-cert-inner{
  max-width:1200px;
  margin:0 auto;
  padding:64px 28px 68px;
}

/* ---- heading ---- */
.mfc-cert-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 46px;
}
.mfc-cert-eyebrow{
  display:block !important;
  font-family:'Oswald',sans-serif;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--mfc-yellow);margin-bottom:10px;
}
.mfc-cert-head h2{
  margin:0;
  font-size:25px;font-weight:800;color:#f4f4f5;line-height:1.6;
}
.mfc-cert-rule{
  display:block !important;
  width:52px;height:3px;
  margin:18px auto 16px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--mfc-yellow), var(--mfc-yellow-2));
}
.mfc-cert-intro{
  margin:0;
  font-size:14px;line-height:1.9;color:var(--mfc-steel);
}

/* ---- badge grid ---- */
.mfc-cert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(215px, 1fr));
  gap:16px;
}

.mfc-cert-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  padding:28px 18px 24px;
  border-radius:16px;
  background:rgba(18,18,20,.58);
  border:1px solid var(--mfc-line);
  transition:transform .22s ease, border-color .22s ease, background-color .22s ease;
}
.mfc-cert-card:hover,
.mfc-cert-card:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(255,200,26,.55);
  background:rgba(28,24,14,.66);
  outline:none;
}

.mfc-cert-ico{
  width:100%;
  height:52px;
  display:flex;align-items:center;justify-content:center;
}
.mfc-cert-ico img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:grayscale(1) brightness(1.4) opacity(.6);
  transition:filter .25s ease;
}
.mfc-cert-card:hover .mfc-cert-ico img,
.mfc-cert-card:focus-visible .mfc-cert-ico img{
  filter:grayscale(0) brightness(1) opacity(1);
}

.mfc-cert-divider{
  display:block !important;
  width:28px;height:1px;
  background:var(--mfc-line);
  visibility:visible !important;
  opacity:1 !important;
}

/* Title & description under each logo — forced visible so a theme's
   own global CSS (resets, "hide empty spans", utility classes, etc.)
   can never suppress content coming from the plugin's settings page. */
.mfc-cert-title{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  clip:auto !important;
  white-space:normal !important;
  font-size:13.5px;
  font-weight:700;
  color:#eceef0 !important;
  line-height:1.5;
}
.mfc-cert-desc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  clip:auto !important;
  white-space:normal !important;
  font-size:11.5px;
  color:var(--mfc-steel-dim) !important;
  line-height:1.75;
}

/* ---- responsive ---- */
@media (max-width:860px){
  .mfc-cert-inner{padding:50px 22px 52px;}
  .mfc-cert-grid{grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));gap:12px;}
  .mfc-cert-card{padding:22px 14px 18px;border-radius:14px;}
  .mfc-cert-ico{height:44px;}
}
@media (max-width:480px){
  .mfc-cert-inner{padding:40px 14px 44px;}
  .mfc-cert-head h2{font-size:19px;}
  .mfc-cert-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .mfc-cert-title{font-size:12.5px;}
  .mfc-cert-desc{font-size:11px;}
}

/* Respect users who've asked for less motion */
@media (prefers-reduced-motion:reduce){
  .mfc-cert-card{transition:none;}
}