/* ==========================================================================
   AE Creative — "شركاء النجاح" partner logo showcase (homepage).
   Replaces the old .clients-section sector-chip cards with a premium
   logo wall. Kept in its own file (imported from index.html) rather than
   folded into cards.css/layout.css since it's a self-contained section —
   own section chrome, own grid breakpoints, own card + empty-state rules.
   Reuses existing design tokens (--bg-1, --line, --brand-line, --grad,
   --e-glow, --ease, --r-*) so the section sits on the same visual system
   as every other card family; only the concrete px values called out in
   the design brief (20px radius / 40px padding / 160px height) are literal.
   ========================================================================== */

.partners-section{
  padding:var(--space-section-y) var(--space-section-x);
  background:var(--bg-1);border-top:1px solid var(--line);
}
.partners-section__head{text-align:center;margin-bottom:46px}
.partners-section__desc{max-width:640px;margin:14px auto 0;font-size:15px;line-height:1.75;color:var(--text-2)}

.partners-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1000px){
  .partners-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .partners-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---- Partner card ----
   Gradient border-on-hover uses the classic double-background trick
   (padding-box fill + border-box gradient) so the brand gradient follows
   the rounded corners correctly — a plain `border-image` would square
   them off. */
.partner-card{
  position:relative;height:160px;padding:40px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-radius:20px;border:1px solid transparent;
  background:
    linear-gradient(var(--bg-1),var(--bg-1)) padding-box,
    linear-gradient(var(--line),var(--line)) border-box;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.partner-card:hover{
  transform:translateY(-6px);
  background:
    linear-gradient(var(--bg-1),var(--bg-1)) padding-box,
    var(--grad) border-box;
  box-shadow:var(--e-glow);
}

/* opacity (not display:none) keeps the <img> a real, normally-sized box —
   native loading="lazy" decides whether to fetch based on the element's
   own intersection, and a display:none image never gets a size to
   intersect with, so it would simply never load. */
.partner-card__logo{
  max-width:170px;max-height:80px;width:auto;height:auto;
  object-fit:contain;opacity:0;position:relative;z-index:1;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.partner-card.is-loaded .partner-card__logo{opacity:1}
.partner-card:hover .partner-card__logo{transform:scale(1.05)}

/* Automatic light/dark logo handling: pick the matching utility class per
   logo (see assets/js/partners.js's `theme` field) — default is no filter
   at all, correct for full-color artwork. */
.partner-card__logo.logo-dark{filter:invert(1) brightness(1.8)}
.partner-card__logo.logo-light{filter:none}
.partner-card__logo.logo-colored{filter:none}

/* ---- Empty state ----
   Shown until a real logo file exists at the configured path; the
   inline onerror on the <img> (see partners.js) never lets a broken-image
   icon flash — the placeholder sits on top (absolutely positioned, card
   bg behind it so it fully covers the still-loading/broken <img>) and
   fades out once .is-loaded lands on the card. */
.partner-card__placeholder{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--bg-1);transition:opacity .3s var(--ease);
}
.partner-card.is-loaded .partner-card__placeholder{opacity:0;pointer-events:none}
.partner-card:not(.is-loaded){
  border-style:dashed;border-color:var(--line-2);
}
.partner-card:not(.is-loaded):hover{
  border-color:var(--brand-line);box-shadow:none;
}
.partner-card__placeholder-mark{height:22px;width:auto;opacity:.35}
.partner-card__placeholder-text{font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;color:var(--text-3)}