/* =========================================================
   GOONS · PAGES /guitar-songs/ (includes/guitar-songs-render.php)
   Grille des mesures de l'accompagnement, paroles avec les accords au-dessus
   des mots (.gso-seg), rythmes de grattage, cartes des chansons du hub.
   ========================================================= */

.gso-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }

.gso-prog { margin-top: 14px; display: grid; gap: 8px; }
.gso-prog-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: start; }
.gso-prog-label { padding-top: 7px; color: var(--play-muted, rgba(232, 236, 255, 0.65)); font: 700 11px/1.2 var(--play-mono, 'JetBrains Mono', monospace); letter-spacing: 0.08em; text-transform: uppercase; }
.gso-prog-bars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.gso-prog-bars li {
    padding: 6px 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    text-align: center;
    font: 700 13px var(--play-mono, 'JetBrains Mono', monospace);
    transition: background 0.08s, border-color 0.08s;
}
.gso-prog-bars li.is-now { border-color: var(--play-cyan, #00e5ff); background: rgba(0, 229, 255, 0.18); box-shadow: 0 0 12px rgba(0, 229, 255, 0.35); }

.gso-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.gso-section {
    padding: 16px 18px;
    border: 1px solid var(--play-border, rgba(255, 255, 255, 0.09));
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.2s;
}
.gso-section.is-now { border-color: var(--play-cyan, #00e5ff); }
.gso-section-label { margin: 0 0 8px; color: var(--play-cyan, #00e5ff); font: 700 12px var(--play-mono, 'JetBrains Mono', monospace); letter-spacing: 0.08em; text-transform: uppercase; }
.gso-line { display: flex; flex-wrap: wrap; align-items: flex-end; margin: 0 0 10px; }
.gso-word { display: inline-flex; align-items: flex-end; }
.gso-seg { display: inline-flex; flex-direction: column; white-space: pre; }
.gso-chord { min-height: 1.3em; padding-right: 6px; color: #ff2bd6; font: 800 14px/1.3 var(--play-mono, 'JetBrains Mono', monospace); }
.gso-chord--none { padding-right: 0; }
.lp-page .gso-chord a { color: #ff2bd6; text-decoration: none; }
.lp-page .gso-chord a:hover { text-decoration: underline; }
.gso-lyr { color: #e8ecff; font-size: 16px; line-height: 1.35; }
.gso-source { color: var(--play-muted, rgba(232, 236, 255, 0.6)); font-size: 13px; }

.gso-strum { display: inline-flex; gap: 4px; margin: 4px 0 12px; }
.gso-strum-cell { display: flex; flex-direction: column; align-items: center; width: 38px; padding: 6px 0; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.gso-strum-cell b { color: #fff; font-size: 20px; line-height: 1; }
.gso-strum-cell small { margin-top: 4px; color: var(--play-muted, rgba(232, 236, 255, 0.6)); font: 600 11px var(--play-mono, 'JetBrains Mono', monospace); }
.gso-strum-cell.is-rest b { color: rgba(255, 255, 255, 0.3); }

.gso-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 18px; }
.lp-page a.gso-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--play-border, rgba(255, 255, 255, 0.09));
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.lp-page a.gso-card:hover, .lp-page a.gso-card:focus-visible { border-color: var(--play-cyan, #00e5ff); transform: translateY(-2px); }
.gso-card-title { font-size: 16px; }
.gso-card-meta { color: var(--play-muted, rgba(232, 236, 255, 0.65)); font-size: 13px; }
.gso-card-chords { display: flex; flex-wrap: wrap; gap: 4px; }
.gso-card-chords i { padding: 2px 7px; border-radius: 6px; background: rgba(255, 43, 214, 0.14); color: #ff8ae9; font: 700 12px var(--play-mono, 'JetBrains Mono', monospace); font-style: normal; }

@media (max-width: 560px) {
    .gso-prog-row { grid-template-columns: 1fr; gap: 4px; }
    .gso-prog-label { padding-top: 0; }
    .gso-prog-bars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .gso-sheet { grid-template-columns: 1fr; }
    .gso-lyr { font-size: 15px; }
}