/* contentplanner.css: uitlegpagina /contentplanner/. Basis staat in site.css en page.css. */

.cp-hero__cta { margin-top: 28px; }

.cp-facts { list-style: none; margin: 0 0 clamp(40px, 6vw, 80px); padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cp-facts li { background: var(--ds-teal); color: #0a0a0a; border-radius: 12px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.cp-facts strong { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; overflow-wrap: anywhere; }
.cp-facts span { font-size: 16px; line-height: 1.45; color: rgba(10,10,10,0.78); }
@media (max-width: 760px) { .cp-facts { grid-template-columns: 1fr; } }

.cp-doe { padding: clamp(28px, 4vw, 56px) 0; border-top: 1px solid color-mix(in srgb, var(--sc-ink) 12%, transparent); }
.cp-doe h2, .cp-open h2, .cp-maker h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 24px; overflow-wrap: break-word; }
.cp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cp-cards li { background: var(--sc-surface); border-radius: 12px; padding: 24px 24px 22px; }
.cp-cards__tag { font-family: var(--ds-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-teal-ink); }
.cp-cards h3 { font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 10px 0 8px; }
.cp-cards p { font-size: 17px; line-height: 1.6; color: #2a2f2f; margin: 0; max-width: 44ch; }
@media (max-width: 760px) { .cp-cards { grid-template-columns: 1fr; } }

.cp-maker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding: clamp(28px, 4vw, 56px) 0; border-top: 1px solid color-mix(in srgb, var(--sc-ink) 12%, transparent); }
.cp-maker figure { margin: 0; }
.cp-maker img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
@media (max-width: 860px) { .cp-maker { grid-template-columns: 1fr; gap: 20px; } }

.cp-open { background: #0a0a0a; color: var(--ds-dune); border-radius: 14px; padding: clamp(28px, 5vw, 56px); margin: clamp(16px, 3vw, 40px) 0; }
.cp-open h2 { margin-bottom: 14px; }
.cp-open p { font-size: 18px; line-height: 1.6; max-width: 46ch; margin: 0 0 24px; }
.cp-open .ds-cta--line { color: var(--ds-dune); border-color: color-mix(in srgb, var(--ds-dune) 50%, transparent); }

.cp-qa details { border-bottom: 1px solid color-mix(in srgb, var(--sc-ink) 12%, transparent); }
.cp-qa summary { cursor: pointer; padding: 16px 0; min-height: 44px; font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; }
.cp-qa summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cp-qa p { font-size: 17px; line-height: 1.65; color: #2a2f2f; max-width: 58ch; margin: 0 0 18px; }