/* ==========================================================================
   Customer spotlight — draggable proof-point carousel
   ========================================================================== */

.customer-spotlight{
  --cs-appearance-duration:700ms;
  --cs-appearance-delay:100ms;
  --cs-grid-width:calc(min(100%,var(--ps-grid-max-width)) - 2 * var(--ps-grid-margin));
  padding-block:32px;margin:auto;position:relative;z-index:1;
}
.customer-spotlight:hover{z-index:2}
.customer-spotlight__viewport{overflow:hidden;width:100%;cursor:grab}
.customer-spotlight__viewport.is-dragging{cursor:grabbing}
.customer-spotlight__track{display:flex;will-change:transform}

.customer-spotlight__card-group{
  flex:none;padding-left:var(--ps-grid-gutter);
  width:calc(var(--cs-grid-width) + var(--ps-grid-gutter));
  display:grid;gap:var(--ps-grid-gutter);
  transition-property:opacity,transform;
  transition-duration:var(--cs-appearance-duration);
  transition-timing-function:ease-in-out;
  transition-delay:calc(var(--cs-card-index,0) * var(--cs-appearance-delay));
}
.customer-spotlight.is-hidden .customer-spotlight__card-group{opacity:0;transform:translate3d(0,15px,0)}
.customer-spotlight__card-group--items-1{grid-template-columns:1fr;grid-template-rows:1fr}
.customer-spotlight__card-group--items-2{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.customer-spotlight__card-group--items-3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.customer-spotlight__card-group--items-3 > :nth-child(1){grid-row:1 / 3}
.customer-spotlight__card-group--items-2,
.customer-spotlight__card-group--items-1.customer-spotlight__card-group--logo{
  width:calc((var(--cs-grid-width) + var(--ps-grid-gutter)) / 2);
}

.customer-spotlight__card{
  --cs-border-color:var(--ps-color-neutral-2-300);
  --cs-background-color:var(--sv-white);
  --cs-outline-color:var(--ps-color-secondary-3-500);
  --cs-text-color:var(--ps-color-neutral-3-500);
  --cs-logo-filter:var(--ps-filter-neutral-3-500);
  --cs-badge-color:var(--sv-white);
  --cs-badge-background:var(--ps-color-brand-500);
  --cs-avatar-border-color:var(--ps-color-neutral-1-700);
  --cs-hover-animation:.3s;
  position:relative;overflow:hidden;width:100%;
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  padding:32px;border-radius:16px;min-height:253px;
  border:2px solid var(--cs-border-color);background:var(--cs-background-color);
  outline:0 solid var(--cs-outline-color);outline-offset:-1px;
  color:var(--cs-text-color);
  transition:scale var(--cs-hover-animation) ease-in-out,
             border var(--cs-hover-animation) ease-in-out,
             outline-width var(--cs-hover-animation) ease-in-out,
             z-index calc(var(--cs-hover-animation) / 2) step-end;
}
.customer-spotlight__card--loud{
  --cs-background-color:var(--ps-color-secondary-3-400);
  --cs-border-color:var(--ps-color-secondary-3-500);
}
.customer-spotlight__card--loudest{
  --cs-background-color:var(--ps-color-neutral-3-500);
  --cs-outline-color:var(--ps-color-secondary-2-500);
  --cs-text-color:var(--sv-white);
  --cs-logo-filter:var(--ps-filter-neutral-1-500);
  border:none;
}
.customer-spotlight__card--loudest .customer-spotlight__card-metric{color:var(--ps-color-brand-400)}
.customer-spotlight__card--logo{align-items:center;justify-content:center;min-height:unset}

@media (hover:hover) and (pointer:fine){
  .customer-spotlight__card:hover{
    scale:1.04;outline-width:8px;z-index:1;border-color:transparent;
    transition:scale var(--cs-hover-animation) ease-in-out,
               border var(--cs-hover-animation) ease-in-out,
               outline-width var(--cs-hover-animation) ease-in-out,
               z-index calc(var(--cs-hover-animation) / 2) step-start;
  }
}

.customer-spotlight__card-link{position:absolute;inset:0}
.customer-spotlight__card-title{display:flex;align-items:flex-start;justify-content:space-between}
.customer-spotlight__card-logo{filter:var(--cs-logo-filter);max-width:100%;max-height:100%}
.customer-spotlight__card-badge-wrapper{flex:1 0 30px;display:flex;justify-content:flex-end;position:relative;top:-24px;left:24px;white-space:nowrap;overflow:hidden}
.customer-spotlight__card-badge{
  position:static;max-width:unset;padding:10px 12px;border-radius:22px;
  font:600 11px/16px var(--ps-font);letter-spacing:.5px;
  color:var(--cs-badge-color);background-color:var(--cs-badge-background);
}
.customer-spotlight__card-avatar{width:40px;height:40px;border-radius:50%;border:1px solid var(--cs-avatar-border-color);margin-bottom:16px}
.customer-spotlight__card-metric{color:var(--ps-color-brand-500);margin-bottom:24px}
.customer-spotlight__card-eyebrow{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-secondary-5-500);
}
.customer-spotlight__card--loudest .customer-spotlight__card-eyebrow{color:rgba(255,255,255,.6)}
.customer-spotlight__card-attribution{
  font:600 13px/20px var(--ps-font);color:var(--ps-color-neutral-3-500);
}
.customer-spotlight__card-attribution::before{content:"— "}
.customer-spotlight__card--placeholder{
  align-items:center;justify-content:center;
  border-style:dashed;border-color:var(--ps-color-neutral-2-500);
  background:var(--ps-color-neutral-2-000);
}
.customer-spotlight__card--placeholder span{
  font:500 11px/16px var(--ps-font);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ps-color-neutral-3-200);
}
.customer-spotlight__card-quote-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

@media (min-width:640px){
  .customer-spotlight{padding-block:64px}
  .customer-spotlight__card-group{width:calc((var(--cs-grid-width) + var(--ps-grid-gutter)) * 3 / 4)}
  .customer-spotlight__card-group--items-2,
  .customer-spotlight__card-group--items-1.customer-spotlight__card-group--logo{
    width:calc((var(--cs-grid-width) + var(--ps-grid-gutter)) / 3);
  }
}
@media (min-width:1024px){
  .customer-spotlight{padding-block:80px}
  .customer-spotlight__card-group{width:calc((var(--cs-grid-width) + var(--ps-grid-gutter)) / 3)}
  .customer-spotlight__card-group--items-2,
  .customer-spotlight__card-group--items-1.customer-spotlight__card-group--logo{
    width:calc((var(--cs-grid-width) + var(--ps-grid-gutter)) / 6);
  }
}