/* content.css — generic page.php content / topic pages (QA passes 8 & 9).
   The prose itself (headings, lists, images, links, the .pg-video box) is
   styled globally in main.css; this sheet only adds page-type polish. Scoped
   under body.pg-content-page so it can't touch single posts or other pages.
   Source of truth: the v3 warm-reading design language (tokens + od-blog-single
   / od-utility prose). Depends on pg-blog-main. */

/* Multi-lesson content pages (e.g. /guitar-chords/guitar-triads/,
   /alternate-guitar-tunings/): 2+ consecutive thumbnail+title pairs are grouped
   at render time (pg_content_lesson_grid) into a responsive card grid — a
   browseable 2-up grid of lesson cards instead of a tall single column. */
.pg-content-page .lesson-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); margin: var(--space-8) 0; }
@media (max-width: 600px) { .pg-content-page .lesson-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.pg-content-page .lesson-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.pg-content-page .lesson-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pg-content-page .lesson-card-thumb { display: block; line-height: 0; }
.pg-content-page .lesson-card-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; margin: 0; border-radius: 0; box-shadow: none; }
.pg-content-page .lesson-card-title { font-size: var(--text-lg); line-height: var(--leading-snug); margin: 0; padding: var(--space-4) var(--space-5) var(--space-5); }
.pg-content-page .lesson-card:hover .lesson-card-title a { color: var(--brand); }

/* Fallback for a lone (non-gridded) thumbnail+title — e.g. a single linked image
   followed by a heading, which is left as flowing prose. Pull the title up to its
   image and give the thumbnail the same card radius/lift. */
.pg-content-page .article p:has(> a img, > img) { margin-bottom: var(--space-3); }
.pg-content-page .article p:has(> a img, > img) + :is(h2, h3) { margin-top: var(--space-4); }
.pg-content-page .article p > a img,
.pg-content-page .article p > img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

/* Topic-list headings that are links (e.g. /lick-of-the-week/) keep the warm
   serif heading look but pick up the brand link colour on hover. */
.pg-content-page .article :is(h2, h3) a { color: inherit; text-decoration: none; }
.pg-content-page .article :is(h2, h3) a:hover { color: var(--brand); }