/* ==========================================================================
   07-TESTIMONIAL — "Apa kata Mereka?"
   ========================================================================== */

.testimonial {
  padding-block: var(--space-xl);
}

.testimonial__header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.testimonial__highlight {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--clay-raised);
  margin-bottom: var(--space-sm);
}

.testimonial__mark {
  font-size: 2.5rem;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 6px;
  font-family: Georgia, serif;
}

.testimonial__quote {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-color);
  line-height: 1.55;
  margin-bottom: var(--space-sm);
}

.testimonial__person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial__avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: linear-gradient(180deg, var(--primary-light), var(--primary-dark));
  box-shadow: var(--clay-pill);
  flex-shrink: 0;
}

.testimonial__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-color);
}

.testimonial__role {
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

.testimonial__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.testimonial__grid--extra {
  margin-top: var(--space-sm);
}

.is-hidden {
  display: none;
}

.testimonial__card {
  padding: var(--space-sm);
}

.testimonial__card-quote {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-color);
  line-height: 1.55;
  margin-bottom: var(--space-xs);
}

.testimonial__card-person {
  display: flex;
  align-items: center;
  gap: 8px;
}

.testimonial__card-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--primary-light), var(--primary-dark));
  box-shadow: var(--clay-pill);
  flex-shrink: 0;
}

.testimonial__card-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-color);
}

.testimonial__card-role {
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.testimonial__footer {
  text-align: center;
}