/* NFPK Home About 6.26.6 — about copy vertically centered */
.nfpk-home-about-v4,
.nfpk-home-about-v4 *{box-sizing:border-box}

.nfpk-home-about-v4{
  --nfpk-about-v4-height:520px;
  --nfpk-about-v4-gap:26px;
  --nfpk-about-v4-left:50%;
  display:grid;
  grid-template-columns:minmax(0,var(--nfpk-about-v4-left)) minmax(0,calc(100% - var(--nfpk-about-v4-left)));
  gap:var(--nfpk-about-v4-gap);
  width:100%;
  align-items:stretch;
  direction:ltr!important;
}

.nfpk-home-about-v4__panel{
  position:relative;
  min-width:0;
  height:var(--nfpk-about-v4-height);
  overflow:hidden;
  isolation:isolate;
  background:transparent;
}

/* Both image layers are actual panel-sized CSS backgrounds. This bypasses
   img lazy-load/source rewriting entirely and guarantees the icon's image
   remains visible underneath the overlay. */
.nfpk-home-about-v4__icon-image,
.nfpk-home-about-v4__fade-image{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  transform:none!important;
  filter:none!important;
}

.nfpk-home-about-v4__panel--icon{
  --nfpk-about-v4-image-inset:20px;
  --nfpk-about-v4-image-radius:25px;
  overflow:visible;
}

.nfpk-home-about-v4__icon-image{
  inset:var(--nfpk-about-v4-image-inset);
  width:auto;
  height:auto;
  border-radius:var(--nfpk-about-v4-image-radius);
  overflow:hidden;
  opacity:1!important;
  visibility:visible!important;
}

/* No overlay: only this right image layer has 30% opacity and is masked
   from the selected start point to complete transparency at the bottom. */
.nfpk-home-about-v4__fade-image{
  --nfpk-about-v4-fade-start:50%;
  opacity:.3;
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 var(--nfpk-about-v4-fade-start),
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 var(--nfpk-about-v4-fade-start),
    transparent 100%
  );
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

.nfpk-home-about-v4__icon-box{
  --nfpk-about-v4-icon:58px;
  --nfpk-about-v4-glass-pad:22px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  width:calc(var(--nfpk-about-v4-icon) + (var(--nfpk-about-v4-glass-pad) * 2));
  height:calc(var(--nfpk-about-v4-icon) + (var(--nfpk-about-v4-glass-pad) * 2));
  display:grid;
  place-items:center;
  padding:var(--nfpk-about-v4-glass-pad);
  border:1.5px solid rgba(255,255,255,.28);
  border-radius:clamp(22px,2.4vw,34px);
  background:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 18px 42px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.14);
  color:#ED2025;
  line-height:1;
  pointer-events:none;
}

.nfpk-home-about-v4__icon-box i{
  display:block;
  font-size:var(--nfpk-about-v4-icon);
  line-height:1;
}
.nfpk-home-about-v4__icon-box svg{
  display:block;
  width:var(--nfpk-about-v4-icon);
  height:var(--nfpk-about-v4-icon);
  fill:currentColor;
}
.nfpk-home-about-v4__icon-box svg *{
  fill:currentColor;
  stroke:currentColor;
}

.nfpk-home-about-v4__about-copy{
  position:absolute;
  z-index:3;
  inset-inline:clamp(20px,3vw,36px);
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  max-width:78%;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:#111113;
  pointer-events:none;
}

.nfpk-home-about-v4__about-label{
  font-size:clamp(18px,2vw,26px);
  line-height:1.25;
  font-weight:800;
}

.nfpk-home-about-v4__about-summary{
  font-size:clamp(13px,1.25vw,16px);
  line-height:1.9;
  font-weight:500;
}
.nfpk-home-about-v4__about-summary p{margin:0 0 8px}
.nfpk-home-about-v4__about-summary p:last-child{margin-bottom:0}

.nfpk-dir-rtl .nfpk-home-about-v4__about-copy{
  direction:rtl;
  text-align:right;
  margin-left:auto;
}
.nfpk-dir-ltr .nfpk-home-about-v4__about-copy{
  direction:ltr;
  text-align:left;
  margin-right:auto;
}

.nfpk-home-about-v4__placeholder{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  padding:24px;
  border:1px dashed rgba(140,140,140,.45);
  color:var(--nfpk-page-muted,#777);
  text-align:center;
}

/* Fixed visual order in every language:
   LEFT = image + glass icon, RIGHT = 30% faded image. */
.nfpk-dir-rtl .nfpk-home-about-v4,
.nfpk-dir-ltr .nfpk-home-about-v4{direction:ltr!important}

@media (max-width:1024px){
  .nfpk-home-about-v4{
    --nfpk-about-v4-height:420px;
    --nfpk-about-v4-gap:20px;
  }
}

@media (max-width:767px){
  .nfpk-home-about-v4{
    --nfpk-about-v4-height:320px;
    --nfpk-about-v4-gap:16px;
    grid-template-columns:1fr;
  }
  .nfpk-home-about-v4__panel{height:var(--nfpk-about-v4-height)}
  .nfpk-home-about-v4__panel--icon{--nfpk-about-v4-image-inset:16px;--nfpk-about-v4-image-radius:22px}
  .nfpk-home-about-v4__about-copy{inset-inline:20px;top:50%;bottom:auto;transform:translateY(-50%);max-width:88%;gap:8px}
}