/* ============================================================
   TESTIMONIALS.CSS  — "Real Results. Real Relationships."

   FIGMA MEASUREMENTS:
   ┌─────────────────────────────────────────────────────────┐
   │  Section inner width: 1192.5px (4 cols)                │
   │  Stars top:     109.5 × 18.75px                        │
   │  Title:         Sora Regular 45px, tracking -2.25px    │
   │  Subtitle:      Manrope SemiBold 15px                  │
   │  Cards grid:    4 columns, gap=15.958px                 │
   │  Card border-radius: 18.701px                          │
   │  Card padding:  ~29.92px                               │
   │  Card stars:    53.111 × 9.096px                       │
   │  Name:          Sora Regular 14.961px, tracking -0.748 │
   │  Role:          11.969px, opacity 80%                  │
   │  Quote:         Manrope Medium 11.969px, lh 22.441px   │
   └─────────────────────────────────────────────────────────┘
   ============================================================ */


/* ------------------------------------------------------------
   1. SECTION WRAPPER
   ------------------------------------------------------------ */
.testimonials {
  padding: 75px 0;
  width: 100%;
  margin-top: var(--sp-4);
}

.testimonials__inner {
  max-width: 1192.5px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}


/* ------------------------------------------------------------
   2. TOP STARS IMAGE
   ------------------------------------------------------------ */
.testimonials__stars {
  display: block;
  width: 109.5px;
  height: 18.75px;
  object-fit: contain;
  flex-shrink: 0;
}


/* ------------------------------------------------------------
   3. HEADING BLOCK
   ------------------------------------------------------------ */
.testimonials__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.5px;
  text-align: center;
}

.testimonials__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 45px;
  line-height: 52.5px;
  letter-spacing: -2.25px;
  color: #111111;
}

.testimonials__subtitle {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  line-height: 22.5px;
  color: #111111;
}


/* ------------------------------------------------------------
   4. CARDS GRID
   Four equal-width columns, each stacking cards vertically.
   ------------------------------------------------------------ */
.testimonials__grid {
  display: flex;
  gap: 15.958px;
  align-items: flex-start;
  width: 100%;
}

.testimonials__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15.958px;
}


/* ------------------------------------------------------------
   5. TESTIMONIAL CARD
   Figma heights per card:
     218.428px — Rajesh Sharma (col1 top)
     194.490px — elkab 3      (col1 bottom)
     240.869px — Anil lending (col2 top)  / metintahayilma (col3 btm) / emil_b (col4 btm)
     173.545px — kerim80      (col2 btm)  / Anil agri (col3 top) / manojchouh (col4 top)
   ------------------------------------------------------------ */
.tcard {
  background: #ffffff;
  border-radius: 18.701px;
  border: 0.75px solid #e0e0e0;
  padding: 29.92px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

/* Height modifier classes — exact Figma values */
.tcard--h-218 { height: 218.428px; }
.tcard--h-194 { height: 194.490px; }
.tcard--h-241 { height: 240.869px; }
.tcard--h-174 { height: 173.545px; }

/* Quote fills remaining space so text sits flush to card bottom */
.tcard--h-218 .tcard__quote,
.tcard--h-194 .tcard__quote,
.tcard--h-241 .tcard__quote,
.tcard--h-174 .tcard__quote {
  flex: 1;
  overflow: hidden;
}


/* ------------------------------------------------------------
   6. CARD HEADER  (person info + stars)
   ------------------------------------------------------------ */
.tcard__header {
  display: flex;
  flex-direction: column;
  gap: 7.979px;
}

/* Name + role stacked */
.tcard__person {
  display: flex;
  flex-direction: column;
  gap: 4.488px;
}

.tcard__name {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 14.961px;
  line-height: 14.961px;
  letter-spacing: -0.748px;
  color: #111111;
}

.tcard__role {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 11.969px;
  line-height: 14.961px;
  color: #000000;
  opacity: 0.8;
}

/* Stars image inside card */
.tcard__stars {
  display: block;
  width: 53.111px;
  height: 9.096px;
  object-fit: contain;
}


/* ------------------------------------------------------------
   7. CARD QUOTE
   ------------------------------------------------------------ */
.tcard__quote {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 11.969px;
  line-height: 22.441px;
  color: #333333;
}


/* ------------------------------------------------------------
   8. RESPONSIVE
   ------------------------------------------------------------ */

/* Constrain inner to viewport */
@media (max-width: 1240px) {
  .testimonials__inner {
    padding: 0 24px;
  }
}

/* Tablet — shrink title */
@media (max-width: 1024px) {
  .testimonials__title {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -1.5px;
  }
}

/* Tablet — 2×2 grid, release fixed heights */
@media (max-width: 860px) {
  .testimonials__grid {
    flex-wrap: wrap;
  }

  .testimonials__col {
    flex: 0 0 calc(50% - 8px);
  }

  .testimonials__title {
    font-size: 30px;
    line-height: 38px;
  }

  .tcard--h-218,
  .tcard--h-194,
  .tcard--h-241,
  .tcard--h-174 {
    height: auto;
  }

  .tcard--h-218 .tcard__quote,
  .tcard--h-194 .tcard__quote,
  .tcard--h-241 .tcard__quote,
  .tcard--h-174 .tcard__quote {
    flex: unset;
    overflow: visible;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .testimonials {
    padding: 48px 0;
  }

  .testimonials__inner {
    padding: 0 16px;
    gap: 20px;
  }

  .testimonials__col {
    flex: 0 0 100%;
  }

  .testimonials__title {
    font-size: 26px;
    line-height: 33px;
    letter-spacing: -1px;
  }

  .testimonials__subtitle {
    font-size: 13px;
  }
}