/**
 * Genix Logo Marquee Widget Styles
 * 100% Exact Figma Properties (Node 11612:17687, 14956:9934, 14956:9938)
 */

:root {
  --bg-section: #F2F2F3;
  --card-bg: #FEFEFE;
  --card-border: #D6D6D7;
  --title-dark: #0A0A0A;
  --title-muted: rgba(10, 10, 10, 0.40);
  --row-gap: 24px;
  --item-gap: 24px;
  --card-height: 80px;
  --card-radius: 0px;
}

.genix-marquee-section-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.genix-clients-section {
  width: 100%;
  background-color: var(--bg-section, #F2F2F3);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.genix-clients-header {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 40px auto;
  padding: 0 24px;
  text-align: center;
  box-sizing: border-box;
}

/* Two-Tone Title directly grounded in Figma node 11612:17687 */
.genix-clients-title {
  font-family: 'Clarity City', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  padding: 0;
}

.genix-clients-title .title-primary {
  color: var(--title-dark, #0A0A0A);
  display: inline;
}

.genix-clients-title .title-muted {
  color: var(--title-muted, rgba(10, 10, 10, 0.40));
  display: inline;
  font-weight: 600;
}

/* Marquee Rows Container */
.genix-marquee-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--row-gap, 24px);
  position: relative;
  /* Generous vertical padding buffer so bottom and top shadows are never clipped by mask */
  padding: 12px 0 70px 0;
  margin-bottom: -70px;
  /* Soft fade out masks at viewport edges */
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.genix-marquee-stage.no-mask {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Individual Marquee Row (overflow: visible allows realistic ambient shadows) */
.genix-marquee-row {
  position: relative;
  width: 100%;
  height: var(--card-height, 80px);
  overflow: visible;
  user-select: none;
  display: flex;
  align-items: center;
}

.genix-marquee-row:hover,
.genix-marquee-row:has(.genix-marquee-card:hover) {
  z-index: 30;
}

/* Track containing original + duplicated groups */
.genix-marquee-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Group of logo items */
.genix-marquee-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--item-gap, 24px);
  padding-right: var(--item-gap, 24px); /* Ensures seamless gap before next clone group */
  flex-shrink: 0;
}

/* Logo Card Styling (Exact Match: Figma Node 14956:9934) */
.genix-marquee-card {
  position: relative;
  height: var(--card-height, 80px);
  min-width: 80px;
  padding: 8px 16px;
  background-color: var(--card-bg, #FEFEFE);
  border: 1px solid var(--card-border, #D6D6D7);
  border-radius: var(--card-radius, 0px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Logo Card Hover (Exact Match: Figma Node 14956:9938) */
.genix-marquee-card:hover {
  z-index: 50;
  /* Exact 4-layer ambient diffusion shadow from Figma Node 14956:9938 */
  box-shadow: 
    0px 6.67px 14.17px 0px rgba(73, 73, 73, 0.10),
    0px 25.83px 25.83px 0px rgba(73, 73, 73, 0.09),
    0px 57.50px 35.00px 0px rgba(73, 73, 73, 0.05),
    0px 102.50px 40.83px 0px rgba(73, 73, 73, 0.01);
}

.genix-marquee-card img {
  height: 64px;
  max-height: 64px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  filter: none;
  opacity: 1;
}

/* Mobile view adaptations (Figma Node 11612:16870) */
@media (max-width: 768px) {
  .genix-clients-section {
    padding: 60px 0;
  }
  .genix-clients-title {
    font-size: 32px;
    line-height: 36px;
  }
  .genix-marquee-row {
    height: 80px;
  }
  .genix-marquee-card {
    padding: 8px 12px;
    min-width: 80px;
  }
  .genix-marquee-card img {
    height: 52px;
    max-height: 52px;
  }
}