/* ---------- OUR VALUED PARTNERS ---------- */
.partners{
  background:var(--bg-dark);
  padding:clamp(3.5rem, 8vw, 6rem) clamp(2rem, 9vw, 11rem) clamp(4rem, 8vw, 6.5rem);
  border-bottom:1px solid var(--line);
}

.partners-head{
  max-width:1500px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-bottom:3rem;
}
.partners-head .eyebrow{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:2.5px;
  color:var(--text-muted);
  margin-bottom:0.6rem;
}
.partners-head h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.9rem, 4vw, 2.7rem);
  color:var(--white);
}
.partners-head p.sub{
  max-width:420px;
  color:var(--text-muted);
  font-size:0.95rem;
  line-height:1.6;
  text-align:right;
}
@media(max-width:700px){
  .partners-head p.sub{text-align:left;}
}

/* ---------- GRID WRAP (holds grid + prev/next arrows) ---------- */
.partners-grid-wrap{
  position:relative;
  max-width:1500px;
  margin:0 auto;
  touch-action:pan-y; /* allow vertical scroll, we handle horizontal swipe ourselves */
}

/* Inner clip container — only this clips the sliding grids. Nav buttons live
   in .partners-grid-wrap (above), outside this clip, so they aren't cut off. */
.partners-grid-clip{
  position:relative;
  overflow:hidden;
}

/* White-card grid — logos shown in full color on white tiles, like a press/brand-kit wall.
   Fixed at 3 columns x 2 rows = 6 per page on tablet/desktop, 2 columns x 3 rows on mobile. */
.partners-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
}
@media(max-width:640px){
  .partners-grid{grid-template-columns:repeat(2, 1fr);}
}
/* Small phones (iPhone 12 Pro and similar, ~390px logical width) — 2 columns
   gets cramped once padding + gap are accounted for, so drop to a single
   column. partners.js pairs this with a smaller page size (4 instead of 6)
   so each page is still a clean, evenly-filled block. */
@media(max-width:480px){
  .partners-grid{grid-template-columns:1fr;gap:0.6rem;}
  /* Single column, short wide tiles — logo bar style, not a giant card. */
  .partner-cell{aspect-ratio:3/1;padding:0.5rem 1.25rem;border-radius:8px;}
  .partner-logo-img{max-height:65%;max-width:80%;}
}

/* ---------- SLIDE TRANSITION (page change) ----------
   Two grids briefly coexist absolutely-stacked: the outgoing one slides out
   while the incoming one slides in from the opposite side. */
.partners-grid-exit,
.partners-grid-enter{
  position:absolute;
  top:0;left:0;right:0;
  transition:transform 0.42s cubic-bezier(0.16,1,0.3,1), opacity 0.42s cubic-bezier(0.16,1,0.3,1);
  will-change:transform, opacity;
}
/* Wrap's height is locked to a fixed px value in JS for the duration of the
   transition, since absolutely-positioned children don't contribute to layout height. */

.enter-right{transform:translateX(38px);opacity:0;}
.enter-left{transform:translateX(-38px);opacity:0;}
.partners-grid-enter-active{transform:translateX(0);opacity:1;}

.exit-left.partners-grid-exit-active{transform:translateX(-38px);opacity:0;}
.exit-right.partners-grid-exit-active{transform:translateX(38px);opacity:0;}

@media(prefers-reduced-motion: reduce){
  .partners-grid-exit,
  .partners-grid-enter{transition:none;}
}

.partner-cell{
  background:var(--white);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  aspect-ratio:16/10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.75rem 1rem;
  position:relative;
  overflow:hidden;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
  animation:partnerCellIn 0.45s cubic-bezier(0.16,1,0.3,1) both;
}
.partner-cell:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
}
@keyframes partnerCellIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
@media(prefers-reduced-motion: reduce){
  .partner-cell{animation:none;}
}

/* Wordmark placeholder — used only when no logo file is available yet */
.partner-cell .name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.05rem;
  letter-spacing:0.3px;
  color:#1a1a1a;
  text-align:center;
}

/* Real logo image — full color at all times, sized to fit comfortably inside the white tile.
   Absolutely positioned + centered via inset:0/margin:auto so the image is completely
   decoupled from the tile's box sizing — an oversized source file (e.g. a huge PNG) can
   never push against or enlarge the .partner-cell container. */
.partner-logo-img{
  position:absolute;
  inset:0;
  margin:auto;
  max-height:82%;
  max-width:92%;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* ---------- PAGINATION CONTROLS (prev/next + dots) ---------- */
.partners-nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;height:48px;
  border-radius:50%;
  background:rgba(0,0,0,0.55);
  border:1px solid var(--line);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  line-height:1;
  z-index:2;
  transition:border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.partners-nav-prev{left:-1.5rem;}
.partners-nav-next{right:-1.5rem;}

@media(max-width:1300px){
  .partners-nav-prev{left:0.25rem;}
  .partners-nav-next{right:0.25rem;}
}

.partners-nav-btn:hover:not(:disabled){
  border-color:var(--accent-light);
  background:rgba(165,131,117,0.25);
  transform:translateY(-50%) translateY(-1px);
}
.partners-nav-btn:disabled{
  opacity:0.25;
  cursor:not-allowed;
}

@media(max-width:760px){
  .partners-nav-btn{
    display:none !important;
  }
}

.partners-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  margin-top:1.75rem;
}
.partners-dots span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,0.3);
  transition:background 0.2s ease, transform 0.2s ease;
}
.partners-dots span.active{
  background:var(--accent-light);
  transform:scale(1.25);
}

@media(prefers-reduced-motion: reduce){
  .partner-cell{transition:none;}
}