/* ==========================================================================
   PlayGuitar v3 — Testimonials wall (per-course)
   Ported from design/od-testimonials/screens/desktop.html. Marketing chrome
   (header, footer, container, buttons) from marketing.css (.pg-market); this
   is the wall-specific body only, scoped under body.pg-testimonials,
   tokens-only. Public/indexable. The one orange = the bottom "See the course."
   ========================================================================== */

.pg-testimonials .reading { max-width: var(--width-content); margin: 0 auto; }

/* ---- Hero (sage-cream band; eyebrow quiet, orange reserved for bottom CTA) ---- */
.pg-testimonials .hero { background: var(--paper-hero); border-bottom: 1px solid var(--hairline); padding: var(--space-16) 0 var(--space-20); }
.pg-testimonials .hero .eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-muted); margin: 0 0 var(--space-5) 0; display: inline-flex; align-items: center; gap: var(--space-2); }
.pg-testimonials .hero .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pg-testimonials .hero h1 { font-size: var(--h1); font-weight: var(--weight-semibold); margin: 0 0 var(--space-8) 0; max-width: 18ch; }
.pg-testimonials .hero-intro { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--ink-body); margin: 0 0 var(--space-10) 0; max-width: 60ch; }
.pg-testimonials .hero-volume { font-family: var(--font-heading); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--ink-heading); max-width: 32ch; padding-top: var(--space-6); border-top: 1px solid var(--hairline); margin: 0 0 var(--space-3) 0; }
.pg-testimonials .hero-volume-count { font-weight: var(--weight-semibold); }
.pg-testimonials .hero-howto { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }

/* ---- The wall ---- */
.pg-testimonials .wall { padding: var(--space-20) 0 var(--space-16); background: var(--paper); }
.pg-testimonials .wall-list { margin: 0; padding: 0; list-style: none; }
.pg-testimonials .quote-block { margin: 0 0 var(--space-16) 0; }
.pg-testimonials .quote-block:last-child { margin-bottom: 0; }
.pg-testimonials .quote-block p.q { font-family: var(--font-heading); font-size: var(--text-md); line-height: var(--leading-loose); color: var(--ink-body); font-weight: var(--weight-normal); margin: 0 0 var(--space-4) 0; letter-spacing: 0; hyphens: none; text-wrap: pretty; }
.pg-testimonials .attribution { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-muted); line-height: var(--leading-normal); margin: 0; }
.pg-testimonials .attribution .name { font-weight: var(--weight-semibold); color: var(--ink-heading); }
.pg-testimonials .attribution .fragment { font-style: italic; color: var(--ink-muted); }
.pg-testimonials .attribution .sep { margin: 0 0.4em; color: var(--ink-light); }

/* ---- Submit-your-own (quiet) ---- */
.pg-testimonials .submit { background: var(--paper-tint); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--space-16) 0; }
.pg-testimonials .submit-inner { text-align: left; }
.pg-testimonials .submit h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); margin: 0 0 var(--space-5) 0; max-width: 24ch; }
.pg-testimonials .submit-body { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--ink-body); margin: 0 0 var(--space-8) 0; max-width: 56ch; }
.pg-testimonials .btn-ghost { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-6); border: 1px solid var(--ink-heading); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--ink-heading); text-decoration: none; background: transparent; transition: background var(--transition-fast), color var(--transition-fast); }
.pg-testimonials .btn-ghost:hover { background: var(--ink-heading); color: var(--paper); }
.pg-testimonials .btn-ghost .arrow { transition: transform var(--transition-fast); }
.pg-testimonials .btn-ghost:hover .arrow { transform: translateX(3px); }

/* ---- Bottom buy band (green + the ONE orange CTA) ---- */
.pg-testimonials .buy { background: var(--accent); color: var(--on-dark); padding: var(--space-20) 0; text-align: center; }
.pg-testimonials .buy h2 { font-family: var(--font-heading); color: var(--on-dark); font-size: clamp(var(--text-2xl), 3.2vw, var(--text-3xl)); font-weight: var(--weight-semibold); margin: 0 auto var(--space-5); letter-spacing: var(--track-tight); line-height: var(--leading-tight); max-width: 22ch; }
.pg-testimonials .buy-line { font-size: var(--text-lg); color: rgba(255,255,255,0.88); margin: 0 0 var(--space-10) 0; line-height: var(--leading-snug); }
.pg-testimonials .buy-line strong { color: var(--on-dark); font-weight: var(--weight-semibold); }
.pg-testimonials .btn-buy { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-10); background: var(--brand); color: #fff; font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-semibold); text-decoration: none; border-radius: var(--radius-md); border: 0; transition: background var(--transition-fast), transform var(--transition-fast); }
.pg-testimonials .btn-buy:hover { background: var(--brand-hover); color: #fff; transform: translateY(-1px); }
.pg-testimonials .btn-buy .arrow { transition: transform var(--transition-fast); }
.pg-testimonials .btn-buy:hover .arrow { transform: translateX(3px); }

@media (max-width: 768px) {
  .pg-testimonials .hero { padding: var(--space-12) 0 var(--space-16); }
  .pg-testimonials .hero h1 { font-size: var(--text-3xl); }
  .pg-testimonials .hero-intro { font-size: var(--text-base); }
  .pg-testimonials .hero-volume { font-size: var(--text-lg); }
  .pg-testimonials .wall { padding: var(--space-16) 0 var(--space-12); }
  .pg-testimonials .quote-block { margin-bottom: var(--space-12); }
  .pg-testimonials .quote-block p.q { font-size: var(--text-base); }
  .pg-testimonials .submit { padding: var(--space-12) 0; }
  .pg-testimonials .submit h2 { font-size: var(--text-xl); }
  .pg-testimonials .submit-body { font-size: var(--text-base); }
  .pg-testimonials .buy { padding: var(--space-16) 0; }
  .pg-testimonials .buy h2 { font-size: var(--text-2xl); }
  .pg-testimonials .buy-line { font-size: var(--text-base); }
  .pg-testimonials .btn-buy { font-size: var(--text-base); padding: var(--space-4) var(--space-8); }
}
@media (max-width: 480px) {
  .pg-testimonials .hero h1 { font-size: var(--text-2xl); }
}