/* =========================================================
   GOONS · PAGES /guitar-chords/ (includes/guitar-chords-render.php)
   Diagrammes d'accord SVG (.gc-diagram), cartes des positions, tableau.
   Le manche jouable est stylé par goons-guitar-lite.css.
   ========================================================= */

.gc-stage { margin-top: 4px; }

.gc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.gc-cards--basics { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }

.gc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 14px;
    border: 1px solid var(--play-border, rgba(255, 255, 255, 0.09));
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
}

.gc-card h3 { margin: 0; font-size: 15px; color: #fff; }
.gc-card h3 span { display: block; margin-top: 4px; color: var(--play-cyan, #00e5ff); font: 700 14px/1.2 var(--play-mono, 'JetBrains Mono', monospace); }
.lp-page a.gc-card--link { color: #fff; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.lp-page a.gc-card--link:hover, .lp-page a.gc-card--link:focus-visible { border-color: var(--play-cyan, #00e5ff); transform: translateY(-2px); }

.gc-fig { width: 100%; max-width: 172px; }
.gc-diagram { display: block; width: 100%; height: auto; }
.gc-diagram .gc-fret { stroke: rgba(255, 255, 255, 0.38); stroke-width: 1.4; }
.gc-diagram .gc-string { stroke: rgba(255, 255, 255, 0.72); }
.gc-diagram .gc-nut { fill: #f1ead6; }
.gc-diagram .gc-basefret { fill: rgba(255, 255, 255, 0.75); font: 700 12px var(--play-mono, 'JetBrains Mono', monospace); }
.gc-diagram .gc-x { stroke: rgba(255, 255, 255, 0.75); stroke-width: 2; stroke-linecap: round; fill: none; }
.gc-diagram .gc-o { fill: none; stroke: #ff2bd6; stroke-width: 2; }
.gc-diagram .gc-dot { fill: #ff2bd6; stroke: #fff; stroke-width: 1.2; }
.gc-diagram .gc-barre { fill: #ff2bd6; fill-opacity: 0.55; stroke: #fff; stroke-opacity: 0.55; }
.gc-diagram .gc-finger { fill: #fff; font: 800 12px Inter, system-ui, sans-serif; }
.gc-diagram .gc-note { fill: rgba(255, 255, 255, 0.78); font: 600 11px var(--play-mono, 'JetBrains Mono', monospace); }

.gc-meta { display: flex; flex-direction: column; gap: 2px; margin: 0; color: var(--play-muted, rgba(232, 236, 255, 0.72)); font-size: 13px; }
.gc-meta b { color: #fff; font-family: var(--play-mono, 'JetBrains Mono', monospace); font-weight: 600; }
.gc-legend { margin: 14px 0 0; color: var(--play-muted, rgba(232, 236, 255, 0.65)); font-size: 13.5px; line-height: 1.55; }
.gc-legend b { color: #fff; }

.gc-grid td small {
    display: block;
    margin-top: 2px;
    color: var(--play-muted, rgba(232, 236, 255, 0.55));
    font: 500 11px var(--play-mono, 'JetBrains Mono', monospace);
}

/* Téléphone : deux diagrammes par ligne plutôt qu'une colonne de cartes vides. */
@media (max-width: 560px) {
    .gc-cards, .gc-cards--basics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .gc-card { padding: 12px 8px; }
    .gc-card h3 { font-size: 14px; }
    .gc-meta { font-size: 12px; }
    .gc-meta b { word-break: break-all; }
}