/* content block — pull-out furniture (.pull-out-content / .pullout).
   Phase 3 Stage 4. WYSIWYG body copy inherits typography.css. */

.pull-out-content .columns { margin-bottom: var(--gap-grid); }
/* h2 inherited the global heading size (up to 3rem), reading almost as large as
   the page h1. Pull it down here — h2 is still the right document level for these
   section headings, just not display-scale. Content block only; other blocks keep
   the global size. */
.pull-out-content h2 { font-size: clamp(2rem, 4vw, 2.2rem); }
.pull-out-content h3 { margin-bottom: .8rem; }
.pull-out-content h4 { margin-bottom: .6rem; }
.pull-out-content p { margin-bottom: 1rem; }
.pull-out-content p:last-child { margin-bottom: 0; }
/* bg-mid-grey (#cacaca) is a mid-tone ground, not a light one: --muted on it
   measures 4.34:1 against a 4.5 requirement. Excluded from the muted-copy chain
   so body copy there keeps full-strength --text. */
.pull-out-content:not(.bg-blue):not(.bg-dark-blue):not(.bg-black):not(.bg-red):not(.bg-magenta):not(.bg-dark):not(.bg-dc-dark-blue):not(.bg-dc-blue):not(.bg-mid-blue):not(.bg-dark-grey):not(.bg-mid-grey) p { color: var(--muted); }
.pull-out-content ul { margin: 1rem 0; }
.pull-out-content ul li { display: flex; gap: .7rem; color: var(--muted); line-height: 1.6; }
.pull-out-content.bg-mid-grey ul li { color: var(--text); }
.pull-out-content ul li + li { margin-top: .7rem; }
.pull-out-content ul li::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; margin-top: .5rem; background: var(--accent); }
.pull-out-content:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) ul li { color: rgba(var(--on-dark-rgb), .86); }
.pull-out-content:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) ul li::before { background: var(--accent-on-dark); }

.pullout { padding: 1.6rem 1.8rem; border-left: 6px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--light); }
.pullout h4 { color: var(--text-heading); }
.pullout p { color: var(--muted); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .pullout { background: rgba(var(--on-dark-rgb), .08); border-left-color: var(--accent-on-dark); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .pullout h4 { color: var(--white); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .pullout p { color: rgba(var(--on-dark-rgb), .82); }