/* ==========================================================================
   PlayGuitar v3 — Free-sample lesson BODY (public "teacher's audition")
   Ported from design/od-freesample/screens/desktop.html (2026-05-29).
   Shared chrome (header/footer/base) = marketing.css (.pg-market); this page
   carries .pg-market + .pg-free-sample. Tokens-only.
   ========================================================================== */

.pg-free-sample .reading { max-width: var(--width-content); margin-left: auto; margin-right: auto; padding: 0 var(--space-5); }

/* ---- Hero ---- */
.pg-free-sample .hero { padding: var(--space-16) 0 var(--space-10); text-align: center; }
.pg-free-sample .eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-4); display: inline-flex; align-items: center; gap: var(--space-3); }
.pg-free-sample .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--ink-light); display: inline-block; }
.pg-free-sample .hero h1 { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--h1); line-height: var(--leading-tight); letter-spacing: var(--track-tight); color: var(--ink-heading); margin: 0 auto var(--space-6); max-width: 18ch; }
.pg-free-sample .hero-sub { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--ink-body); margin: 0 auto; max-width: 58ch; }

/* ---- Video ---- */
.pg-free-sample .video-block { max-width: var(--width-video); margin: var(--space-10) auto var(--space-6); padding: 0 var(--space-5); }
.pg-free-sample .video-facade { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--dark) linear-gradient(135deg, #1B1916 0%, #2A2723 100%); box-shadow: var(--shadow-md); cursor: pointer; border: 0; padding: 0; display: block; }
.pg-free-sample .video-facade::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.35) 100%); }
.pg-free-sample .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,0.96); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.35); transition: transform var(--transition-fast), background var(--transition-fast); z-index: 2; }
.pg-free-sample .video-facade:hover .video-play { transform: translate(-50%, -50%) scale(1.04); background: #fff; }
.pg-free-sample .video-play svg { width: 32px; height: 32px; margin-left: 4px; fill: var(--ink-heading); }
.pg-free-sample .video-meta { position: absolute; left: var(--space-6); bottom: var(--space-5); z-index: 2; color: var(--on-dark); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.pg-free-sample .video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.pg-free-sample .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pg-free-sample .video-orient { text-align: center; font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-3) auto 0; max-width: 52ch; }

/* ---- Lesson content (teaching + diagram from post_content) ---- */
.pg-free-sample .fs-content { padding: var(--space-16) 0 var(--space-12); background: var(--paper); }
.pg-free-sample .fs-content .reading > * { margin-bottom: var(--space-5); }
.pg-free-sample .fs-content h2 { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--h2); line-height: var(--leading-tight); letter-spacing: var(--track-tight); color: var(--ink-heading); margin: var(--space-10) 0 var(--space-6); }
.pg-free-sample .fs-content h2:first-child { margin-top: 0; }
.pg-free-sample .fs-content p { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--ink-body); }
.pg-free-sample .fs-content img { border-radius: var(--radius-md); margin: var(--space-6) auto; }

/* ---- Proof ---- */
.pg-free-sample .proof { padding: var(--space-12) 0; background: var(--paper-tint); }
.pg-free-sample .proof h2 { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--h2); line-height: var(--leading-tight); letter-spacing: var(--track-tight); color: var(--ink-heading); margin: 0 auto var(--space-10); text-align: center; max-width: 22ch; }
.pg-free-sample .quotes { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-10); }
.pg-free-sample .quote { margin: 0; }
.pg-free-sample .quote p { font-family: var(--font-heading); font-size: var(--text-md); line-height: var(--leading-snug); font-style: italic; color: var(--ink-heading); margin: 0 0 var(--space-3); }
.pg-free-sample .quote .attrib { font-family: var(--font-body); font-style: normal; font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }

/* ---- Transition ---- */
.pg-free-sample .transition { padding: var(--space-12) 0 var(--space-10); background: var(--paper); }
.pg-free-sample .transition p { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--ink-body); margin: 0; }

/* ---- Buy panel (deep green) ---- */
.pg-free-sample .buy { background: var(--accent-deep); color: var(--on-dark); padding: var(--space-16) 0; }
.pg-free-sample .buy-inner { max-width: var(--width-content); margin: 0 auto; padding: 0 var(--space-5); text-align: center; }
.pg-free-sample .buy h2 { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--h2); line-height: var(--leading-tight); letter-spacing: var(--track-tight); color: var(--on-dark); margin: 0 0 var(--space-4); }
.pg-free-sample .buy-lede { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--on-dark-muted); margin: 0 0 var(--space-8); }
.pg-free-sample .btn-buy { display: inline-block; background: var(--brand); color: #fff; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-lg); padding: var(--space-4) var(--space-10); border-radius: var(--radius-md); border: 0; text-decoration: none; transition: background var(--transition-fast); }
.pg-free-sample .btn-buy:hover { background: var(--brand-hover); color: #fff; }
.pg-free-sample .buy-trust { font-size: var(--text-sm); color: var(--on-dark-muted); margin: var(--space-6) 0 0; }
.pg-free-sample .buy-trust a { color: var(--on-dark); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.4); }
.pg-free-sample .buy-trust a:hover { text-decoration-color: var(--on-dark); }

/* ---- Opt-in (sage) ---- */
.pg-free-sample .optin { background: var(--accent-soft); padding: var(--space-12) 0; }
.pg-free-sample .optin-inner { max-width: var(--width-narrow); margin: 0 auto; padding: 0 var(--space-5); text-align: center; }
.pg-free-sample .optin h3 { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-xl); line-height: var(--leading-tight); color: var(--ink-heading); margin: 0 0 var(--space-3); }
.pg-free-sample .optin-body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink-body); margin: 0 0 var(--space-6); }
.pg-free-sample .optin-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 420px; margin: 0 auto; text-align: left; }
.pg-free-sample .optin-input { width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--ink-light); border-radius: var(--radius-md); background: #fff; font-family: var(--font-body); font-size: var(--text-base); color: var(--ink-body); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.pg-free-sample .optin-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-focus); }
.pg-free-sample .optin-submit { background: var(--brand); color: #fff; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-base); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); border: 0; transition: background var(--transition-fast); margin-top: var(--space-2); cursor: pointer; }
.pg-free-sample .optin-submit:hover { background: var(--brand-hover); }
.pg-free-sample .optin-form__message { font-size: var(--text-sm); margin-top: var(--space-2); }

/* ---- More free lessons from this series ---- */
.pg-free-sample .series { background: var(--paper-tint); border-top: 1px solid var(--hairline); padding: var(--space-16) 0; }
.pg-free-sample .series-inner { max-width: 880px; margin: 0 auto; padding: 0 var(--space-5); }
.pg-free-sample .series h2 { font-family: var(--font-heading); font-size: var(--h2); color: var(--ink-heading); margin: 0 0 var(--space-8); }
.pg-free-sample .series-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.pg-free-sample .series-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
.pg-free-sample .series-card:hover { box-shadow: var(--shadow-md); border-color: var(--ink-light); }
.pg-free-sample .series-card h3 { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--ink-heading); margin: 0; line-height: 1.25; }
.pg-free-sample .series-card p { font-size: var(--text-base); color: var(--ink-muted); line-height: var(--leading-normal); margin: 0; }
.pg-free-sample .series-link { margin-top: auto; color: var(--ink-heading); font-weight: 600; font-size: var(--text-sm); }
.pg-free-sample .series-card:hover .series-link { color: var(--brand); }

@media (max-width: 880px) {
  .pg-free-sample .video-block { padding: 0; margin-top: var(--space-8); }
}
@media (max-width: 768px) {
  .pg-free-sample .hero { padding: var(--space-12) 0 var(--space-8); }
  .pg-free-sample .hero h1 { font-size: var(--text-3xl); }
  .pg-free-sample .hero-sub { font-size: var(--text-base); padding: 0 var(--space-4); }
  .pg-free-sample .video-play { width: 72px; height: 72px; }
  .pg-free-sample .fs-content { padding: var(--space-12) 0 var(--space-8); }
  .pg-free-sample .buy { padding: var(--space-12) 0; }
  .pg-free-sample .btn-buy { font-size: var(--text-base); padding: var(--space-4) var(--space-8); }
}
@media (max-width: 700px) {
  .pg-free-sample .series-grid { grid-template-columns: 1fr; }
}