/* ============ Testimonials ============ */
.s-testimonials{
  position: relative;
  background-color: var(--c-bg);
  background-image: radial-gradient(85% 65% at 50% 0%,
    color-mix(in srgb, var(--c-secondary) 13%, transparent) 0%,
    transparent 62%);
  overflow: hidden;
}
.s-testimonials .container{ position: relative; z-index: 1; }

/* Grid: two columns of cards */
.s-testimonials .tst-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  align-items: stretch;
  margin-block-start: clamp(20px, 2.5vw, 32px);
}

/* Card */
.s-testimonials .tst-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: clamp(24px, 2.8vw, 40px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: start;
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.s-testimonials .tst-card::before{
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background-image: linear-gradient(90deg, var(--c-primary), var(--c-secondary));
}
.s-testimonials .tst-card:hover,
.s-testimonials .tst-card:focus-within{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--c-secondary) 42%, var(--c-border));
}

/* Quote mark */
.s-testimonials .tst-mark{
  inline-size: 44px;
  block-size: 44px;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--c-secondary) 14%, var(--c-surface));
  color: var(--c-primary);
  border: 1px solid color-mix(in srgb, var(--c-secondary) 26%, var(--c-border));
}

/* Quote text */
.s-testimonials .tst-quote{
  margin: 0;
  flex: 1 1 auto;
}
.s-testimonials .tst-quote p{
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .01em;
  color: var(--c-text);
  text-wrap: pretty;
}

/* Author */
.s-testimonials .tst-author{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-start: auto;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--c-border);
}
.s-testimonials .tst-avatar{
  inline-size: 48px;
  block-size: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-primary) 9%, var(--c-surface));
  border: 1px solid color-mix(in srgb, var(--c-primary) 18%, var(--c-border));
  color: var(--c-primary);
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.s-testimonials .tst-meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
.s-testimonials .tst-name{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--c-text);
}
.s-testimonials .tst-role{
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--c-muted);
}

/* ============ Responsive ============ */
@media (max-width: 900px){
  .s-testimonials .tst-grid{ grid-template-columns: 1fr; }
  .s-testimonials .tst-card:hover,
  .s-testimonials .tst-card:focus-within{ transform: none; }
}
@media (max-width: 600px){
  .s-testimonials .tst-grid{ gap: 16px; margin-block-start: 20px; }
  .s-testimonials .tst-card{ padding: 20px; gap: 16px; }
  .s-testimonials .tst-mark{ inline-size: 44px; block-size: 44px; }
  .s-testimonials .tst-quote p{ font-size: 1rem; line-height: 1.75; }
  .s-testimonials .tst-author{ gap: 12px; padding-block-start: 16px; }
}
@media (prefers-reduced-motion: reduce){
  .s-testimonials .tst-card{ transition: none; }
  .s-testimonials .tst-card:hover,
  .s-testimonials .tst-card:focus-within{ transform: none; }
}