/* Testimonials page styles */

/* Section head */
.section-head { margin-block: var(--space-12) var(--space-8); }
.section-head p { color: var(--color-muted); }

/* Hero */
.hero { padding-block: var(--space-12); }
.hero-grid { display: grid; gap: var(--space-9); grid-template-columns: 1.1fr .9fr; align-items: center; }
.hero-copy .rating-summary { margin-top: var(--space-7); display: grid; gap: var(--space-4); align-content: start; }
.hero-copy .stars { color: var(--warning-500); letter-spacing: 2px; font-size: 1.25rem; }
.rating-summary .muted { color: var(--color-muted); }
.sources { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.source-badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--color-primary-50); color: var(--color-primary-800); font-weight: 600; font-size: var(--text-sm); }
.hero-media { margin: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* Testimonials grid */
.testimonials { padding-block: var(--space-12); }
.testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.testimonial p { font-size: 1.05rem; }
.testimonial footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.t-stars { color: var(--warning-500); }

@media (max-width: 1000px) {
  .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* Success stories */
.success-stories { padding-block: var(--space-12); }
.success-stories .card img { border-radius: var(--radius-md); margin-top: var(--space-4); }

/* Case studies */
.case-studies { padding-block: var(--space-12); }
.case-studies .card img { border-radius: var(--radius-md); margin-bottom: var(--space-6); }
.case-studies ul { margin: 0; padding-left: 1.2rem; }
.case-studies li { margin-bottom: var(--space-3); list-style: disc; }

/* Video testimonials */
.video-testimonials { padding-block: var(--space-12); }
.video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .video-grid { grid-template-columns: 1fr; } }

/* Featured clients */
.featured-clients { padding-block: var(--space-12); }
.client-badges { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.client-badge { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: var(--radius-pill); background: var(--success-50); color: var(--success-800); border: 1px solid var(--success-200); font-weight: 600; }

/* Before & After chart */
.before-after { padding-block: var(--space-12); }
.chart { overflow: hidden; }
.chart-row { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: var(--space-5); }
.chart-label { font-weight: 700; color: var(--color-heading); }
.chart-bars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.bar { --h: 12px; height: var(--h); border-radius: var(--radius-pill); position: relative; overflow: hidden; background: var(--gray-200); }
.bar::after { content: ""; position: absolute; inset: 0; width: var(--value); transition: width var(--dur-slow) var(--ease-out); }
.bar--before::after { background: var(--color-primary-200); }
.bar--after::after { background: var(--success-400); }
.chart-note { margin-top: var(--space-5); color: var(--color-muted); }
@media (max-width: 720px) {
  .chart-row { grid-template-columns: 1fr; }
}

/* Form */
.testimonial-form { padding-block: var(--space-12); }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-field { display: grid; gap: 6px; }
.form-field--full { grid-column: 1 / -1; }
.form-consent { margin-top: var(--space-6); }
.checkbox { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-4); align-items: start; }
.form-actions { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-6); }
.form-status { color: var(--success-700); font-weight: 600; }
.help { color: var(--color-muted); }
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } }

/* Reveal animation (progressive enhancement) */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }