/* =============================================================
   testimonials.css — Testimonials page styles
   Base: 19px → scaled via global.css media queries
   Mirrors case-studies.css conventions.
   Card layout: square avatar + star rating + review text + user
   Two-column grid, same pagination component as case studies.
   ============================================================= */

.testimonials-section {
  padding-top: 9.474rem; /* 180px / 19 — accounts for navbar */
  padding-bottom: 6.316rem; /* 120px / 19 */
  background-color: var(--bg-white);
}

.testimonials-sec {
  max-width: 85.47rem;
}

/* 1. Page Header */
.testimonials-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.842rem; /* ~16px */
  margin-bottom: 4.211rem; /* ~80px / 19 */
  text-align: center;
}

/* "Testimonials" pill / label above the title */
.testimonials-label-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(8, 75, 129, 0.07);
  border-radius: 1.579rem;
  padding: 0.316rem 1.053rem; /* 6px 20px */
}

.testimonials-label {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.842rem; /* 16px / 19 */
  color: var(--primary-blue);
  letter-spacing: 0.01em;
}

.testimonials-title {
  font-family: var(--font-secondary); /* Poppins */
  color: var(--base-dark);
  max-width: 28rem;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.60125rem; /* 128.1% */
}

/* 2. Testimonials Grid — 2-column layout per Figma */
.tm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.737rem 5.263rem; /* row ~52px / 19, col ~100px / 19 — mirrors Figma spacing */
  padding-bottom: 3.316rem;
}

/* 3. Individual Card */
.tm-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.895rem; /* 36px / 19 */
  transition: opacity 0.3s ease;
}

/* Avatar — square with rounded corners, per Figma BG node */
.tm-card-avatar {
  flex-shrink: 0;
  width: 11.510rem;  /* 218.685px / 19 */
  height: 11.510rem;
  border-radius: 0.723rem; /* 13.725px / 19 */
  overflow: hidden;
  background-color: #f3f4f6;
}

.tm-card-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.tm-card:hover .tm-card-avatar-img {
  transform: scale(1.04);
}

/* Content area — stars, review text, user */
.tm-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem; /* ~22px / 19 */
  /* padding-top: 0.437rem; */
  flex: 1;
  min-width: 0;
}

/* Star rating row */
.tm-card-stars {
  display: flex;
  align-items: center;
  gap: 0.316rem; /* ~6px */
}

.tm-card-stars svg {
  flex-shrink: 0;
  display: block;
}

/* Review body text */
.tm-card-review {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.868rem; /* 16.47px / 19 */
  line-height: 1.348rem; /* 25.62px / 19 */
  color: var(--base-dark);
  /* Limit to ~4 lines matching Figma 104px height */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: none;
}

/* When card is expanded, remove the clamp */
.tm-card.expanded .tm-card-review {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Reset margin for rich text paragraphs */
.tm-card-review p {
  margin: 0;
  padding: 0;
}

.tm-card-toggle {
  all: unset;
  display: none; /* hidden until JS detects overflow */
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-primary);
  font-size: 0.768rem;
  font-weight: 500;
  color: var(--primary-blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}

.tm-card-toggle:hover {
  opacity: 0.75;
}

.tm-card-toggle.visible {
  display: inline-block;
}

/* User row — name + company inline */
.tm-card-user {
  display: flex;
  align-items: baseline;
  gap: 0.579rem; /* ~11px */
  flex-wrap: wrap;
}

.tm-card-name {
  font-family: var(--font-secondary); /* Poppins */
  font-weight: 600;
  font-size: 0.768rem; /* 14.6px / 19 */
  line-height: 1.348rem;
  color: var(--base-dark);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.tm-card-company {
  font-family: var(--font-secondary); /* Poppins */
  font-weight: 500;
  font-size: 0.684rem; /* ~13px / 19 */
  line-height: 1.158rem;
  color: var(--blue-gray-500);
  white-space: nowrap;
}

/* 4. Pagination — identical tokens to case_studies, prefixed tm- */
.tm-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.053rem;
  border-top: 0.053rem solid #eaecf0;
  margin-top: 0;
}

.tm-pagination-btn {
  all:unset;
  display: inline-flex;
  align-items: center;
  gap: 0.421rem;
  height: 2.316rem;
  padding: 0 0.737rem;
  border-radius: 0.421rem;
  border: 1px solid var(--Gray-300, #2a2c2f);
  background-color: var(--bg-white);
  color: var(--base-dark);
  font-family: var(--font-primary);
  font-size: 0.737rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition: all 0.25s ease;
}

.tm-pagination-btn svg {
  transition: transform 0.25s ease;
}

.tm-pagination-btn:hover:not(:disabled) {
  all:unset;
  display: inline-flex;
  align-items: center;
  gap: 0.421rem;
  height: 2.316rem;
  padding: 0 0.737rem;
  border-radius: 0.421rem;
  border: 1px solid var(--Gray-300, #D0D5DD);
  font-family: var(--font-primary);
  font-size: 0.737rem;
  font-weight: 500;
  cursor: pointer;
  background-color: var(--primary-blue);
  color: var(--bg-white);
  border-color: var(--primary-blue);
}

.tm-prev-btn:hover:not(:disabled) svg {
  transform: translateX(-3px);
}

.tm-next-btn:hover:not(:disabled) svg {
  transform: translateX(3px);
}

.tm-pagination-btn:disabled {
  all:unset;
  display: inline-flex;
  align-items: center;
  gap: 0.421rem;
  height: 2.316rem;
  padding: 0 0.737rem;
  border-radius: 0.421rem;
  border: 1px solid var(--Gray-300, #D0D5DD);
  background-color: var(--bg-white);
  color: var(--base-dark);
  font-family: var(--font-primary);
  font-size: 0.737rem;
  font-weight: 500;
  opacity: 0.4;
  cursor: not-allowed;
}

.tm-pagination-pages {
  display: flex;
  align-items: center;
  gap: 0.105rem;
}

.tm-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.105rem;
  height: 2.105rem;
  border-radius: 0.421rem;
  border: none;
  background-color: transparent;
  font-family: var(--font-primary);
  font-size: 0.842rem;
  font-weight: 400;
  color: #667085;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tm-page-btn:hover {
  background-color: rgba(8, 75, 129, 0.06);
  color: var(--primary-blue);
}

.tm-page-btn.active {
  background-color: #f9f5ff;
  color: var(--primary-blue);
  font-weight: 600;
}

.tm-page-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.105rem;
  height: 2.105rem;
  font-family: var(--font-primary);
  font-size: 0.842rem;
  color: #667085;
  font-weight: 500;
}

@media (max-width: 1400px) {
  .testimonials-sec{
    max-width: 75rem;
  }
}

/* 5. Responsive */
@media (max-width: 1100px) {
  .tm-grid {
    gap: 2.105rem 3.158rem;
  }
  .tm-card-avatar {
    width: 9.474rem;
    height: 9.474rem;
  }
}

@media (max-width: 900px) {
  .tm-grid {
    grid-template-columns: 1fr;
    gap: 2.105rem;
  }
}

@media (max-width: 768px) {
  .testimonials-section {
    padding-top: 7.5rem;
    padding-bottom: 4rem;
  }
  .tm-pagination {
    flex-direction: column;
    gap: 1.053rem;
    align-items: center;
  }
  .tm-pagination-pages {
    order: -1;
  }
}

@media (max-width: 480px) {
  .tm-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .tm-card-avatar {
    width: 7.368rem;
    height: 7.368rem;
  }
  .tm-pagination-pages {
    flex-wrap: wrap;
    justify-content: center;
  }
}