/* Childrens-books landing page; inherits /assets/css/style.css */
.cb-intro { padding-bottom: clamp(2rem, 5vw, 4rem); }
.cb-heading { margin-bottom: 2.2rem; }
.cb-heading h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin: .4rem 0 1rem; }
.cb-image-placeholder { display: flex; align-items: center; justify-content: center; min-height: 190px; padding: 2rem; text-align: center; background: var(--surface-alt); color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; font-weight: 650; }
.cb-banner .cb-image-placeholder { min-height: clamp(230px, 34vw, 430px); font-size: clamp(1.3rem, 3vw, 2.3rem); }
.cb-stories { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
.cb-collection-art { margin: 0; }
.cb-collection-art img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow); }
.cb-collection-art figcaption { margin-top: .7rem; color: var(--muted); font-size: .9rem; text-align: center; }
.cb-story { display: grid; grid-template-columns: minmax(150px, 250px) minmax(0, 1fr); align-items: center; gap: clamp(1.3rem, 4vw, 3rem); }
.cb-story h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin: .5rem 0 1rem; }
.cb-story-art img { display: block; width: 100%; height: auto; border-radius: 9px; }
.cb-story-art .cb-image-placeholder { aspect-ratio: 3 / 4; }
.cb-coming { font-size: .9rem; font-weight: 650; }
.cb-characters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
.cb-character { text-align: center; padding: 1rem 1rem 1.4rem; }
.cb-character-art { margin-bottom: 1rem; }
.cb-character-art img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 10px; background: var(--surface-alt); }
.cb-character-art .cb-image-placeholder { aspect-ratio: 1 / 1; }
.cb-character h3 { font-size: 1.3rem; }
.cb-character p { margin-bottom: 0; }
.cb-about { border-top: 1px solid var(--line); }

/* allow section introductions to use the full container width */
#characters .section-heading { width: 100%; max-width: none; }

/* Tablet: two columns */
@media (max-width: 760px) { .cb-characters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mobile: one column */
@media (max-width: 580px) { .cb-story { grid-template-columns: 1fr; } .cb-story-art { max-width: 250px; } .cb-characters { grid-template-columns: 1fr; gap: 1.3rem; } .cb-character { padding: 1rem; } }