/* ============================================================
   SocialProof — Homepage social proof strip
   Design tokens from src/tokens.css.
   ============================================================ */

/* ---- Outer section ---- */
.social-proof {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              var(--spacing-6);  /* 24px between reel and content */
  padding:          2rem 0 4rem;       /* 32px top, 64px bottom */
  background-color: var(--background);
  font-family:      var(--font-family-default);
  width:            100%;
  box-sizing:       border-box;
}


/* ============================================================
   Logo reel — full viewport width, infinite scroll
   ============================================================ */

.social-proof__logo-reel {
  position: relative;
  width:    100%;
  padding:  var(--spacing-6) 0;   /* 24px top + bottom */
  overflow: hidden;
}

/* Left and right edge fades matching section background */
.social-proof__logo-reel::before,
.social-proof__logo-reel::after {
  content:        '';
  position:       absolute;
  top:            0;
  bottom:         0;
  width:          200px;
  pointer-events: none;
  z-index:        1;
}

.social-proof__logo-reel::before {
  left:       0;
  background: linear-gradient(to right, var(--background) 30%, transparent);
}

.social-proof__logo-reel::after {
  right:      0;
  background: linear-gradient(to left, var(--background) 30%, transparent);
}

/* Scroller — flex row of 4 identical tracks; animates to exactly -25% (= 1 track width). */
.social-proof__logo-scroller {
  display:   flex;
  width:     max-content;
  animation: social-proof-scroll 35s linear infinite;
}

/* Each track holds all logos once. padding-right = gap so the trailing space is baked in,
   making each track's width identical to (logos + 8 gaps). -25% lands flush on track 2. */
.social-proof__logo-track {
  display:       flex;
  align-items:   center;
  gap:           3.5rem;    /* 56px between logos */
  padding-right: 3.5rem;   /* trailing gap — must equal the gap value above */
  flex-shrink:   0;
}

@keyframes social-proof-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .social-proof__logo-track {
    animation: none;
  }
}

/* Individual logo wrapper */
.social-proof__logo-wrap {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

/* Images are @2x — display at half their natural size.
   64px = half of 128px native height. width: auto preserves aspect ratio. */
.social-proof__logo-img {
  display:    block;
  height:     4rem;                /* 64px — half of 128px native 2× height */
  width:      auto;
  object-fit: contain;
}

/* Dark scheme — invert monochrome logos */
.social-proof[data-scheme="dark"] .social-proof__logo-img {
  filter: invert(1) brightness(0.85);
}


/* ============================================================
   Constrained content area
   ============================================================ */

.social-proof__content {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);   /* 24px between tagline and ratings */
  width:          100%;
}


/* ============================================================
   Tagline
   ============================================================ */

.social-proof__tagline {
  margin:      0;
  font-size:   var(--font-size-base);   /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base); /* 24px */
  color:       var(--foreground);
}

.social-proof__tagline strong {
  font-weight: var(--font-weight-bold);
}


/* ============================================================
   Rating badges — 4-column grid
   ============================================================ */

.social-proof__ratings {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows:        1fr;
  gap:                   12px;
}

.social-proof__rating {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--spacing-3);
  padding:         1.5rem;
  background:      var(--secondary);
  border:          0.5px solid var(--border);
  border-radius:   1.5rem;             /* 24px */
  box-sizing:      border-box;
  min-width:       0;
}

/* Platform logo slot — fixed to width of the widest logo (64px = Capterra/Trustpilot)
   so stars + score start at the same horizontal position across all 4 cards */
.social-proof__rating-logo {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  width:       64px;
}

/* Stars + score row */
.social-proof__rating-meta {
  display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;

}

.social-proof__rating-stars {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  align-items:           center;
  gap:                   4.16%;   /* = 4/96 — always 25% of each star's width */
  color:                 var(--primary);
  flex:                  1 1 0;
  max-width:             96px;    /* 5×16px + 4×4px — stars start at 16px, shrink only if needed */
}

.social-proof__star {
  display:      block;
  min-width:    0;
  width:        100%;
  height:       auto;   /* lets height scale with width; overrides the SVG height="16" attribute */
  aspect-ratio: 1;
}

.social-proof__rating-score {
  font-size:   var(--font-size-xs);    /* 12px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);  /* 16px */
  color:       var(--muted-foreground);
  width: 1.25rem;                  /* holds any X.X value; aligns score across cards */
  text-align:  center;
}

/* ---- Platform logo sub-styles ---- */

.social-proof__brand-wordmark {
  font-size:   1rem;                   /* 16px */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color:       var(--foreground);
  white-space: nowrap;
}

.social-proof__brand-img {
  display:    block;
  width:      auto;
  max-width:  100%;        /* never exceed the 64px slot */
  height:     auto;
  max-height: 100%;        /* cap at Figma's ~14–16px logo height */
  object-fit: contain;
}

.social-proof__brand-combo {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   var(--font-size-sm);    /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color:       var(--foreground);
  white-space: nowrap;
}


/* ============================================================
   Tablet (≤991px) — drop to 2 columns
   ============================================================ */

@media (max-width: 991px) {
  .social-proof__ratings {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   Landscape mobile (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .social-proof {
    padding: 2rem 0 ;
  }

  .social-proof__logo-reel::before,
  .social-proof__logo-reel::after {
    width: 80px;
  }

  .social-proof__logo-img {
    height: 2rem;
  }

  .social-proof__logo-track{
    gap: 2rem;
    padding-right: 2rem;
  }
  .social-proof__logo-reel{
    padding: var(--spacing-7) 0;
  }
}


/* ============================================================
   Portrait mobile (≤479px)
   ============================================================ */

@media (max-width: 479px) {
  .social-proof__rating {
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: space-between;
    height:          auto;
    gap:             var(--spacing-4);
    padding-bottom:  2rem;
  }

  .social-proof__rating-meta {
    justify-content: flex-start;
    flex:            unset;
  }
.social-proof__rating-logo{
  flex-grow: 1;
}
  
}


/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:  relative;
  width:     1024px;
  max-width: calc(100% - 160px); /* 80px × 2 — desktop */
  margin:    0 auto;
}

/* Tablet (≤991px): 60px × 2 = 120px */
@media (max-width: 991px) {
  .container {
    max-width: calc(100% - 120px);
  }
}

/* Landscape mobile (≤767px): 2rem × 2 = 4rem */
@media (max-width: 767px) {
  .container {
    max-width: calc(100% - 4rem);
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1360px + 96px);   /* 1360px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet + landscape mobile (≤991px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 2rem;
  }

  .container-wide > * {
    margin-left:  -1rem;
    width:        calc(100% + 2rem) !important;
  }
}