/* ============================================================
   CLIENTS — Desktop + Mobile (separate sections)
   Goals:
   1) Desktop: remove “plate/circle” artifact; keep clean lift
   2) Mobile: isolated grid w/ BIG badges + clean lift
   3) Both: animated sky gradient background via --clients-gradient (JS)
   Notes:
   - Desktop section:  #clients.clients.section.desktop-only
   - Mobile section:   #clients-mobile.clients-mobile.section.mobile-only
   - When rules overlap, the LOWER rule in this file wins.
============================================================ */


/* ============================================================
   0) VISIBILITY SWITCH (desktop hidden on mobile, mobile hidden on desktop)
   Keep this near top so layout is predictable.
============================================================ */
@media (max-width: 991.98px){
  #clients.desktop-only{display:none !important;}
  #clients-mobile{display:block !important;}
}
@media (min-width: 992px){
  #clients-mobile{display:none !important;}
}


/* ============================================================
   1) SHARED: ANIMATED SKY GRADIENT BACKGROUND (Services-style)
   Requires JS to set: --clients-gradient on #clients and #clients-mobile
============================================================ */
section#clients.clients.section,
section#clients-mobile.clients-mobile.section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:transparent !important;
}

/* Gradient layer (animated by JS, with fallback ladder) */
section#clients.clients.section::before,
section#clients-mobile.clients-mobile.section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:var(--clients-gradient,linear-gradient(120deg,#E6F4FF,#CFE7FF,#B9DBFF,#8BBEF7,#4F8FD6));
  opacity:0.52; /* tweak: 0.42–0.65 */
  filter:saturate(1.03) contrast(1.06);
}

/* Depth overlay (blue-only, no teal) */
section#clients.clients.section::after,
section#clients-mobile.clients-mobile.section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0.28),rgba(255,255,255,0.00) 55%,rgba(2,62,138,0.14));
}

/* Keep actual content above the gradient layers */
section#clients.clients.section > *,
section#clients-mobile.clients-mobile.section > *{
  position:relative;
  z-index:1;
}

/* Reduced motion: lock to fallback gradient (JS may early-return too) */
@media (prefers-reduced-motion: reduce){
  section#clients.clients.section::before,
  section#clients-mobile.clients-mobile.section::before{
    background:linear-gradient(120deg,#E6F4FF,#CFE7FF,#B9DBFF,#8BBEF7,#4F8FD6) !important;
  }
}


/* ============================================================
   2) DESKTOP: REMOVE “PLATE/CIRCLE” ARTIFACT + CLEAN LIFT
   Scope: #clients only
============================================================ */

/* Wrapper: kill any theme tile styling */
#clients .client-logo{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  position:relative;
}

/* Kill theme pseudo “plate” */
#clients .client-logo::before,
#clients .client-logo::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Image: make the IMG itself the only animated element */
#clients .client-logo img{
  display:block;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:transform,filter;
  transition:transform 220ms ease, filter 220ms ease;
}

/* Wrapper hover/focus: neutralize any theme transforms/filters on wrapper */
@media (min-width: 992px){
  #clients .client-logo:hover,
  #clients .client-logo:focus,
  #clients .client-logo:focus-within{
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    filter:none !important;
    transform:none !important;
    opacity:1 !important;
  }

  /* Desktop lift: subtle raise + soft drop-shadow on the IMAGE only */
  #clients .client-logo:hover img{
    transform:translateY(-6px) scale(1.02);
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.18));
  }
}


/* ============================================================
   3) MOBILE: HARD ISOLATION GRID + BIG BADGES
   Scope: #clients-mobile only
============================================================ */

/* Tile: kill any theme plates/pseudos in mobile section */
#clients-mobile .cm-tile{
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
#clients-mobile .cm-tile::before,
#clients-mobile .cm-tile::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Grid: default 3 columns */
#clients-mobile .clients-mobile-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px, 4.6vw, 26px);
  align-items:center;
  justify-items:center;
  margin-top:clamp(16px, 4vw, 26px);
  padding-bottom:clamp(10px, 3vw, 18px);
}

/* Tile container */
#clients-mobile .cm-tile{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:clamp(6px, 2.2vw, 12px);
}

/* BIG badges: let images fill the cell (max caps per breakpoint below) */
#clients-mobile .cm-tile img{
  display:block;
  width:min(94%, 230px); /* baseline cap */
  height:auto;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:transform,filter;
  transition:transform 220ms ease, filter 220ms ease;
}

/* Mobile “lift”: prefer :active, allow :hover for devices that support it */
#clients-mobile .cm-tile:active img,
#clients-mobile .cm-tile:hover img{
  transform:translateY(-6px) scale(1.03);
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.18));
}

/* --- Phone sizing ladder (bigger on smaller screens; 2 cols on tiny phones) --- */

/* Tiny phones: 2 columns so each badge can be MUCH larger */
@media (max-width: 420px){
  #clients-mobile .clients-mobile-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(18px, 6vw, 28px);
  }
  #clients-mobile .cm-tile img{
    width:min(96%, 260px);
  }
}

/* Small/medium phones: keep 3 cols, but increase max */
@media (min-width: 421px) and (max-width: 575.98px){
  #clients-mobile .cm-tile img{
    width:min(94%, 250px);
  }
}

/* Large phones / small tablets */
@media (min-width: 576px) and (max-width: 767.98px){
  #clients-mobile .clients-mobile-grid{gap:clamp(18px, 4.5vw, 28px);}
  #clients-mobile .cm-tile img{width:min(92%, 260px);}
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991.98px){
  #clients-mobile .clients-mobile-grid{gap:clamp(18px, 3.6vw, 30px);}
  #clients-mobile .cm-tile{padding:12px;}
  #clients-mobile .cm-tile img{width:min(90%, 280px);}
}

/* Reduced motion: no lift/shadow */
@media (prefers-reduced-motion: reduce){
  #clients-mobile .cm-tile img{transition:none;}
  #clients-mobile .cm-tile:active img,
  #clients-mobile .cm-tile:hover img{
    transform:none;
    filter:none;
  }
}