/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org)
 *
 * sheet.css — styles for /sheets/<slug>.html.
 * Extracted from build-library.js: this was inlined into all 3,663 sheet
 * pages (14.5 KB each, ~51 MB of duplication) and could not be cached.
 */
    /* /sheets/ song page — extends main.css. Only adds the bits the homepage
       design language doesn't already cover: a song-specific hero, a PDF
       embed card, info chips, FAQ accordion, related-songs grid. */
    /* Header (hero) override: song pages need a shorter, left-aligned hero,
       not the full-page-height homepage hero. */
    body.vsheet-page > header {
      min-height: auto;
      padding: 100px 1rem 60px;
      text-align: center;
    }
    .vsheet-page > header .hero-content { animation: fadeUp 0.6s ease forwards; max-width: 880px; }
    .vsheet-page > header .hero-content h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 1rem; }
    .vsheet-page > header .hero-content .vsheet-breadcrumbs { color: var(--text-secondary); font-size: .9rem; margin-bottom: 18px; opacity: .8; }
    .vsheet-page > header .hero-content .vsheet-breadcrumbs a { color: inherit; text-decoration: none; }
    .vsheet-page > header .hero-content .vsheet-breadcrumbs a:hover { color: #ff6ec7; }
    .vsheet-page .hero-byline { font-size: 1.05rem; color: var(--text-secondary); margin: -0.5rem 0 1.25rem; }
    .vsheet-page .hero-byline .composer { color: #ff6ec7; font-weight: 700; }
    /* Genre chips */
    .vsheet-genre-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 18px; }
    .vsheet-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; border: 1px solid; }
    /* Hero stats row */
    .vsheet-hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 28px; margin: 4px 0 28px; }
    .vsheet-hero-stat { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: .95rem; }
    .vsheet-hero-stat i { color: #ff6ec7; }
    .vsheet-hero-stat strong { color: var(--text-primary); font-weight: 600; }
    .vsheet-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
    .vsheet-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-color); }
    .vsheet-dot--on { background: linear-gradient(135deg, #ff6ec7, #ffb347); }
    /* Hero CTAs (uses .hero-cta from main.css) — group + secondary variant */
    .vsheet-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
    .vsheet-cta-row .hero-cta { background: linear-gradient(135deg, #ff6ec7, #ffb347); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(255, 110, 199, .35); }
    .vsheet-cta-row .hero-cta:hover { background: linear-gradient(135deg, #ff6ec7, #ffb347); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 110, 199, .5); }
    .vsheet-cta-row .hero-cta--alt { background: transparent; color: var(--text-primary); box-shadow: none; border-color: var(--border-color); }
    .vsheet-cta-row .hero-cta--alt:hover { background: rgba(139, 92, 246, .08); border-color: #8b5cf6; color: #8b5cf6; }

    /* PDF preview section (uses section already-animated styling) */
    .sheet-pdf-section { padding: 1rem 1rem 2rem !important; }
    .sheet-pdf-section h2 { font-size: 1.6rem !important; margin-bottom: 1.25rem !important; }
    .sheet-pdf-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; padding: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.12); }
    [data-theme="dark"] .sheet-pdf-card { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 36px -12px rgba(0,0,0,.6); }
    .sheet-pdf-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 6px 14px; }
    .sheet-pdf-header-title { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text-primary); }
    .sheet-pdf-header-title i { color: #ff6ec7; }
    .sheet-pdf-viewer { width: 100%; height: 80vh; min-height: 600px; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; background: var(--bg-secondary); }
    .sheet-pdf-viewer object { width: 100%; height: 100%; }
    .sheet-pdf-fallback { padding: 2rem 1rem; text-align: center; color: var(--text-secondary); }
    /* Source attribution. CC BY and CC BY-NC-SA both require it; before
       2026-09-10 no page credited anything. */
    .vsheet-source-credit { max-width: 1100px; margin: 0 auto 2rem; padding: 0 1.5rem; font-size: .82rem; color: var(--text-secondary); opacity: .8; line-height: 1.6; }
    .vsheet-source-credit a { color: inherit; text-decoration: underline; }
    .sheet-pdf-missing { padding: 56px 24px; text-align: center; color: var(--text-secondary); background: var(--bg-secondary); border: 1px dashed var(--border-color); border-radius: 12px; }
    .sheet-pdf-missing i { font-size: 2.75rem; color: #ff6ec7; margin: 0 0 14px; display: block; }
    @media (max-width: 720px) {
      .sheet-pdf-viewer { display: none; }
      .sheet-pdf-thumb-mobile { display: flex !important; }
    }
    .sheet-pdf-thumb-mobile { display: none; flex-direction: column; align-items: center; padding: 48px 20px; text-align: center; gap: 14px; }
    .sheet-pdf-thumb-mobile i { font-size: 3rem; color: #ff6ec7; }
    .sheet-pdf-thumb-mobile p { color: var(--text-secondary); margin: 0; }

    /* Content sections use the existing features-grid + feature-card pattern.
       We extend with our own card variants for color accents per type. */
    .sheet-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; }
    .feature-card--about::before    { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
    .feature-card--practice::before { background: linear-gradient(135deg, #f59e0b, #ef4444); }
    .feature-card--how::before      { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
    .feature-card--about .feature-icon    { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
    .feature-card--practice .feature-icon { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
    .feature-card--how .feature-icon      { background: rgba(6, 182, 212, 0.12); color: #06b6d4; }
    [data-theme="dark"] .feature-card--about .feature-icon    { background: rgba(139, 92, 246, 0.22); }
    [data-theme="dark"] .feature-card--practice .feature-icon { background: rgba(245, 158, 11, 0.22); }
    [data-theme="dark"] .feature-card--how .feature-icon      { background: rgba(6, 182, 212, 0.22); }
    .feature-card.feature-card--no-link { cursor: default; }
    .feature-card.feature-card--no-link:hover { transform: none; box-shadow: 0 8px 24px -12px rgba(0,0,0,.08); }

    /* FAQ accordion section */
    .sheet-faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
    .sheet-faq-list details { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px 22px; transition: border-color .15s ease; }
    .sheet-faq-list details:hover { border-color: rgba(139, 92, 246, .35); }
    .sheet-faq-list details[open] { border-color: rgba(255, 110, 199, .5); box-shadow: 0 6px 20px -8px rgba(255, 110, 199, .3); }
    .sheet-faq-list summary { cursor: pointer; font-weight: 600; color: var(--text-primary); list-style: none; display: flex; align-items: flex-start; gap: 14px; font-size: 1rem; line-height: 1.45; }
    .sheet-faq-list summary::-webkit-details-marker { display: none; }
    .sheet-faq-list summary::before { content: '+'; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 110, 199, .15), rgba(255, 179, 71, .15)); color: #ff6ec7; font-weight: 700; font-size: 1.15rem; flex-shrink: 0; transition: background .2s ease, color .2s ease, transform .2s ease; }
    .sheet-faq-list details[open] summary::before { content: '−'; background: linear-gradient(135deg, #ff6ec7, #ffb347); color: #fff; transform: rotate(180deg); }
    .sheet-faq-list details > p { margin: 14px 0 0; color: var(--text-secondary); line-height: 1.7; padding-left: 42px; font-size: .96rem; }

    /* Related songs — uses feature-card visually but tighter grid */
    .sheet-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; max-width: 1100px; margin: 0 auto; padding: 0; list-style: none; }
    .sheet-related-grid li { list-style: none; padding: 0; }
    .sheet-related-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 12px; text-decoration: none; color: inherit; transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1), border-color .25s ease; height: 100%; }
    .sheet-related-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -16px rgba(255, 110, 199, .35); border-color: rgba(255, 110, 199, .4); }
    .sheet-related-thumb { aspect-ratio: 4 / 3; background: var(--bg-secondary); border-radius: 10px; margin-bottom: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); }
    .sheet-related-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
    .sheet-related-thumb--empty i { font-size: 1.75rem; color: var(--text-tertiary); opacity: .5; }
    .sheet-related-title { font-size: .95rem; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .sheet-related-meta { font-size: .82rem; color: var(--text-secondary); margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
    .sheet-related-meta i { color: #ff6ec7; opacity: .8; font-size: .75rem; width: 14px; text-align: center; }
    .sheet-related-dots { display: flex; gap: 2px; margin-top: auto; padding-top: 8px; }
    .sheet-related-dots .vsheet-dot { width: 6px; height: 6px; }

    /* Hero score-thumbnail (small, on right of hero text on desktop) */
    .vsheet-hero-with-thumb .hero-content { display: grid; grid-template-columns: 1fr; gap: 0; }
    @media (min-width: 960px) {
      .vsheet-hero-with-thumb .hero-content { grid-template-columns: minmax(0,1fr) 320px; gap: 40px; text-align: left; align-items: center; max-width: 1100px; }
      .vsheet-hero-with-thumb .vsheet-genre-chips,
      .vsheet-hero-with-thumb .vsheet-hero-stats,
      .vsheet-hero-with-thumb .vsheet-cta-row { justify-content: flex-start; }
      .vsheet-hero-with-thumb .hero-content h1,
      .vsheet-hero-with-thumb .hero-content .vsheet-breadcrumbs,
      .vsheet-hero-with-thumb .hero-byline { text-align: left; }
      .vsheet-hero-with-thumb .hero-content p { margin-left: 0; margin-right: 0; max-width: none; }
    }
    /* Hero score preview — styled as a real document with paper depth */
    .vsheet-hero-thumb {
      position: relative;
      background: #fff;
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 8px;
      overflow: hidden;
      aspect-ratio: 1 / 1.35;
      box-shadow:
        0 1px 1px rgba(0,0,0,.04),
        0 2px 4px rgba(0,0,0,.06),
        0 12px 28px -8px rgba(255, 110, 199, .18),
        0 24px 48px -16px rgba(0,0,0,.18);
      transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
    }
    .vsheet-hero-thumb::before {
      /* Faux "stacked pages" layer behind for depth */
      content: '';
      position: absolute;
      inset: 8px -8px -8px 8px;
      background: linear-gradient(135deg, #fafafa, #f0f0f4);
      border: 1px solid rgba(0,0,0,.05);
      border-radius: 8px;
      z-index: -1;
      box-shadow: 0 4px 12px -4px rgba(0,0,0,.1);
    }
    .vsheet-hero-thumb::after {
      /* Soft bottom fade — keeps the paper feel without obscuring music */
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 8%;
      background: linear-gradient(to bottom, transparent, rgba(255,255,255,.85));
      pointer-events: none;
    }
    [data-theme="dark"] .vsheet-hero-thumb { background: #fbfbfd; border-color: rgba(0,0,0,.2); }
    [data-theme="dark"] .vsheet-hero-thumb::before { background: linear-gradient(135deg, #2a2b35, #1f2029); border-color: rgba(255,255,255,.06); }
    .vsheet-hero-thumb:hover { transform: translateY(-4px) rotate(-.5deg); }
    .vsheet-hero-thumb img {
      width: 100%;
      height: 100%;
      /* contain (not cover) so the score page renders intact like a real
         PDF thumbnail — no right-edge cropping. The container's aspect
         ratio (1:1.35) is close to A4 portrait so letterbox bars are tiny. */
      object-fit: contain;
      object-position: top center;
      display: block;
      background: #fff;
    }
    .vsheet-hero-thumb-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(8px);
      color: #1a1a1a;
      font-size: .7rem;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 999px;
      letter-spacing: .04em;
      text-transform: uppercase;
      border: 1px solid rgba(0,0,0,.06);
      display: inline-flex;
      align-items: center;
      gap: 5px;
      z-index: 2;
    }
    .vsheet-hero-thumb-badge i { color: #ff6ec7; font-size: .65rem; }
    .vsheet-hero-thumb--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #707078; }
    .vsheet-hero-thumb--empty i { font-size: 3rem; color: #ff6ec7; opacity: .5; }
    .vsheet-hero-thumb--empty span { font-size: .85rem; }
    @media (max-width: 959px) {
      .vsheet-hero-thumb { max-width: 260px; margin: 8px auto 24px; }
      .vsheet-hero-thumb::before { display: none; }
    }

    /* SEO content list styling inside feature-cards */
    .feature-card.feature-card--no-link p { flex-grow: 0; font-size: .95rem; line-height: 1.7; margin-bottom: 12px; }
    .feature-card.feature-card--no-link p:last-child { margin-bottom: 0; }
    .feature-card.feature-card--no-link ul.feature-highlights { flex-direction: column; gap: 8px; flex-grow: 0; margin-bottom: 0; }
    .feature-card.feature-card--no-link ul.feature-highlights li { font-size: .92rem; line-height: 1.6; align-items: flex-start; }
    .feature-card.feature-card--no-link ul.feature-highlights li i { margin-top: 5px; flex-shrink: 0; }