/* Posillico Affiliates — flip-card section, scoped under .paff
   Injected just above the projects section on Service / Region pages. */

.paff{
  --pa-blue:#24499a; --pa-blue-2:#1e3f8a; --pa-line:#e6eaf1; --pa-ink:#1e2733;
  --pa-inner:1180px;
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:28px 0 46px;
}
.paff *{box-sizing:border-box}
.paff-inner{max-width:var(--pa-inner);margin:0 auto;padding:0 24px}

/* Shared section-heading style — used by the Affiliates title, the injected
   "PROJECTS" heading, and the awards section title so they all match. The
   #et-boc / !important overrides beat Divi's h2 small-caps/blue rule. */
.paff-title,
#et-boc .paff-title,
#et-boc #projects .facets::before,
#et-boc #projects .awards-services h2,
#projects .awards-services h2{
  text-align:center;font-weight:800 !important;font-style:normal !important;
  font-variant:normal !important;text-transform:uppercase !important;
  letter-spacing:.5px;font-size:clamp(26px,3.4vw,38px);line-height:1.1;
  color:var(--pa-ink) !important;margin:0 0 36px;
}
/* "PROJECTS" heading, injected above the FacetWP filters via CSS */
#et-boc #projects .facets::before{
  content:"Projects";display:block;
}
/* keep the awards title's own section spacing tidy */
#et-boc #projects .awards-services h2{margin-bottom:36px}

/* grid */
.paff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

/* card + flip mechanics */
.paff-card{
  perspective:1400px;min-height:300px;outline:0;
}
.paff-flip{
  position:relative;width:100%;height:100%;min-height:inherit;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  transform-style:preserve-3d;
}
.paff-card:hover .paff-flip,
.paff-card:focus-within .paff-flip,
.paff-card.is-flipped .paff-flip{transform:rotateY(180deg)}

.paff-face{
  position:absolute;inset:0;min-height:300px;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:6px;padding:30px;text-align:center;
}

/* front — white card, centered logo */
.paff-front{
  background:#fff;border:1px solid var(--pa-line);
  box-shadow:0 14px 34px -22px rgba(20,40,90,.35);
}
.paff-logo{max-width:80%;max-height:120px;width:auto;height:auto;object-fit:contain;display:block}
.paff-name-front{font-weight:800;font-size:22px;color:var(--pa-ink)}

/* back — blue card, name + description + link */
.paff-back{
  background:var(--pa-blue);color:#fff;transform:rotateY(180deg);
  border:1px solid var(--pa-blue);
}
.paff-name{color:#fff !important;font-weight:800 !important;font-style:normal !important;
  font-variant:normal !important;text-transform:none !important;
  font-size:20px;line-height:1.2;margin:0 0 14px}
.paff-desc{color:#eaf0ff;font-size:14.5px;line-height:1.55;margin:0 0 20px}
.paff-link{
  display:inline-block;color:#fff !important;text-decoration:none;
  font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  padding-bottom:4px;border-bottom:2px solid rgba(255,255,255,.7);
  transition:border-color .15s;
}
.paff-link:hover{border-bottom-color:#fff}

/* responsive */
@media(max-width:900px){.paff-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .paff-grid{grid-template-columns:1fr}
  .paff{padding-top:40px}
}