/* ============================================
   gs-customer-logos — animated trust strip
   Infinite-scroll marquee with edge fades.
   Variants: --light, --dark.
   ============================================ */

.gs-customer-logos {
  padding: 2rem 0;
}

.gs-customer-logos--white {
  --gs-customer-logos-bg: #fff;
  background: #fff;
}

.gs-customer-logos--light {
  --gs-customer-logos-bg: var(--color-bg-muted);
  background: var(--color-bg-muted);
}

.gs-customer-logos--dark {
  --gs-customer-logos-bg: var(--color-bg-dark);
  background: var(--color-bg-dark);
}

/* Glass-morphism container variants on dark bg. Two distinct shapes:
   --card  : squared (16px radius), with optional kicker. Credibility marker
             accompanying a quote/testimonial.
   --pill  : slim pill (999px radius), no kicker. Hero-extension ribbon
             that visually blends with the dark hero above. */
.gs-customer-logos--card {
  --gs-customer-logos-bg: var(--color-bg-dark);
  background-color: var(--color-bg-dark);
  background-image: url('https://www.giantswarm.io/hubfs/Illustrations/gs23-dark-blue-waves-bg.svg');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 4rem 1.5rem;
}

/* --pill is now embedded INSIDE the hero section markup (see
   01-hero.html). The hero provides the dark waves bg, so the pill
   variant only contributes the glass-element styling. The
   padding-top creates the breathing gap between the hero stats
   and the pill; bottom is 0 because hero's own padding closes
   the section. */
.gs-customer-logos--pill {
  --gs-customer-logos-bg: var(--color-bg-dark);
  padding: 3rem 1.5rem 0;
}

/* Inner wrapper centers the strip at content max-width.
   Bg color goes edge-to-edge on the section itself. */
.gs-customer-logos__inner {
  position: relative;
  /* Tighter than --content-max so the strip doesn't fit a full set
     plus the start of the next — eliminates duplicate-logo visibility */
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
  overflow: hidden;
}

/* Edge fades: solid bg color → transparent overlays sit on top of
   the leftmost and rightmost ~20% of the centered strip.
   First stop holds full bg opacity to ensure logos are completely
   hidden at the very edge, then fades smoothly. */
.gs-customer-logos__inner::before,
.gs-customer-logos__inner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  z-index: 2;
  pointer-events: none;
}

.gs-customer-logos__inner::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--gs-customer-logos-bg) 0%,
    var(--gs-customer-logos-bg) 20%,
    transparent 100%
  );
}

.gs-customer-logos__inner::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--gs-customer-logos-bg) 0%,
    var(--gs-customer-logos-bg) 20%,
    transparent 100%
  );
}

/* Explicit stacking: viewport is below the fade overlays */
.gs-customer-logos__viewport {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Track holds 3 identical sets of logos side-by-side.
   Animation translates exactly one set's width (33.33%), then
   resets to 0 instantly. With 3 sets, viewport always shows
   ≥2 sets worth of content — seam is never visible. */
.gs-customer-logos__track {
  display: flex;
  width: max-content;
  animation: gs-customer-logos-scroll 25s linear infinite;
}

.gs-customer-logos__track:hover {
  animation-play-state: paused;
}

.gs-customer-logos__set {
  list-style: none;
  margin: 0;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 5rem;
  flex-shrink: 0;
}

.gs-customer-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Default (wordmarks): smaller height because wordmarks have wide visual mass */
.gs-customer-logos__logo {
  height: 24px;
  width: auto;
  display: block;
}

/* Square/stocky logos (Börse Stuttgart, Deutsche Telekom)
   need more height because their visual mass is contained in a small box */
.gs-customer-logos__logo--square {
  height: 36px;
}

/* Mono logos: force flat white on dark backgrounds. */
.gs-customer-logos--dark .gs-customer-logos__logo--mono,
.gs-customer-logos--card .gs-customer-logos__logo--mono,
.gs-customer-logos--pill .gs-customer-logos__logo--mono {
  filter: brightness(0) invert(1);
}

/* ============================================
   Glass container styling — shared by --card and --pill
   ============================================ */

/* Shared glass effect: bg, border, blur, shadow. */
.gs-customer-logos--card .gs-customer-logos__inner,
.gs-customer-logos--pill .gs-customer-logos__inner {
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  overflow: visible;
}

/* Card-specific: more padding, slightly rounded corners. */
.gs-customer-logos--card .gs-customer-logos__inner {
  padding: 32px 40px;
  border-radius: 16px;
}

/* Pill-specific: slim padding, fully rounded. Inner content is a
   single-row animated marquee, so vertical padding is minimal and
   overflow is hidden so logos can't poke past the rounded ends.
   Narrower max-width than the strip variants — the pill reads as a
   compact credibility ribbon, not a full-width section. */
.gs-customer-logos--pill .gs-customer-logos__inner {
  max-width: 900px;
  padding: 24px 0;
  border-radius: 999px;
  overflow: hidden;
}

/* Marquee logos inside the pill — match the muted look the static
   grid had (opacity 0.7 over the brightness/invert-to-white filter).
   Pure white at full opacity reads as too aggressive against the
   glass-pill surface; the muted version sits in better with the
   hero waves bg behind it. Sizes are smaller than the strip
   defaults — the pill is a compact credibility ribbon, not a
   showcase, so logos read as supporting signal rather than focal. */
.gs-customer-logos--pill .gs-customer-logos__logo {
  height: 20px;
  opacity: 0.7;
}

.gs-customer-logos--pill .gs-customer-logos__logo--square {
  height: 30px;
}

/* Card variant stays static (no animation), so its overlay fades
   would be visible — keep them disabled. The pill variant uses a
   mask-image on its viewport instead (see below). */
.gs-customer-logos--card .gs-customer-logos__inner::before,
.gs-customer-logos--card .gs-customer-logos__inner::after,
.gs-customer-logos--pill .gs-customer-logos__inner::before,
.gs-customer-logos--pill .gs-customer-logos__inner::after {
  display: none;
}

/* Pill's animated viewport — mask-image fade at left + right edges
   so logos visibly fade out before reaching the pill's rounded ends
   (cleaner than an overlay gradient, which would either contrast
   with the glass interior or sit on top of the logos as a haze). */
.gs-customer-logos--pill .gs-customer-logos__viewport {
  /* Fade zone widened from 8% → 16% per side. Earlier-starting fade
     means logos transition out further from the pill's rounded
     edges — gentler, less abrupt at the seam. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 16%,
    black 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 16%,
    black 84%,
    transparent 100%
  );
}

/* Wider gap than the strip variants — the pill is a narrower
   container and the logos should breathe inside it, not crowd. */
.gs-customer-logos--pill .gs-customer-logos__set {
  padding: 0 2.5rem;
  gap: 5rem;
}

/* Metadata kicker — muted white, not the coral brand-editorial accent.
   This kicker labels the credibility marker (what the strip IS), rather
   than introducing brand storytelling, so it stays quiet. */
.gs-customer-logos__kicker {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 24px;
  text-align: center;
}

/* 6-col grid on desktop, 3-col grid on mobile — each logo cell auto-sizes
   to the longest in its column. Each logo defines its own max-height
   via inline custom properties (--card-h / --card-h-mobile) for optical
   balance across logos with very different aspect ratios. */
.gs-customer-logos__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  align-items: center;
  justify-items: center;
}

.gs-customer-logos__card-logo {
  max-width: 100%;
  max-height: var(--card-h);
  width: auto;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

@keyframes gs-customer-logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

/* Respect users' reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .gs-customer-logos__track {
    animation: none;
  }
}

/* ============================================
   Mobile — consolidated, scoped per variant family
   ============================================ */

@media (max-width: 767px) {

  /* --- Animated strip variants (--white, --light, --dark) --- */
  .gs-customer-logos--white,
  .gs-customer-logos--light,
  .gs-customer-logos--dark {
    padding: 1.5rem 0;
  }
  .gs-customer-logos--white .gs-customer-logos__inner,
  .gs-customer-logos--light .gs-customer-logos__inner,
  .gs-customer-logos--dark .gs-customer-logos__inner {
    padding: 0 1rem;
  }
  .gs-customer-logos--white .gs-customer-logos__inner::before,
  .gs-customer-logos--white .gs-customer-logos__inner::after,
  .gs-customer-logos--light .gs-customer-logos__inner::before,
  .gs-customer-logos--light .gs-customer-logos__inner::after,
  .gs-customer-logos--dark .gs-customer-logos__inner::before,
  .gs-customer-logos--dark .gs-customer-logos__inner::after {
    width: 14%;
  }
  .gs-customer-logos__set {
    gap: 3rem;
    padding: 0 1rem;
  }
  .gs-customer-logos__logo { height: 20px; }
  .gs-customer-logos__logo--square { height: 30px; }

  /* --- Glass container variants (--card, --pill) --- */
  .gs-customer-logos--card {
    padding: 1.5rem;
  }

  .gs-customer-logos--card .gs-customer-logos__inner {
    padding: 24px 20px;
  }

  /* Pill goes EDGE-TO-EDGE on mobile — no horizontal padding on the
     outer section, max-width: none on the inner. The 999px border-
     radius still produces rounded ends because the pill is wider
     than tall (caps at half-height). Top breathing room bumped from
     1.5rem to 4rem so the pill sits comfortably below the stats row. */
  .gs-customer-logos--pill {
    padding: 4rem 0 0;
  }

  .gs-customer-logos--pill .gs-customer-logos__inner {
    max-width: none;
    padding: 16px 0;
  }

  /* Pill marquee tightens spacing on narrow viewports — large gaps
     mean fewer logos visible at once and a slower-feeling scroll. */
  .gs-customer-logos--pill .gs-customer-logos__set {
    padding: 0 1rem;
    gap: 2.5rem;
  }

  /* Smaller logos at mobile scale — the pill is full-bleed but the
     ribbon should still read as supporting signal, not a focal
     element. Drops desktop's 20px / 30px down to 14px / 22px. */
  .gs-customer-logos--pill .gs-customer-logos__logo {
    height: 14px;
  }
  .gs-customer-logos--pill .gs-customer-logos__logo--square {
    height: 22px;
  }

  /* Static logo grid (used only by the --card variant on mobile now). */
  .gs-customer-logos__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 16px;
  }
  .gs-customer-logos__card-logo {
    max-height: var(--card-h-mobile);
  }
}