/* ==========================================================================
   Section: Home / Civic Kernel (text + diagram). Ported from home-styles.css.
   Hex hover styling is shared with the hero honeycomb (built by main.js).
   ========================================================================== */

.ck-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: center; }
.ck-copy { display: flex; flex-direction: column; gap: 20px; }
.ck-copy h2 { font-size: clamp(30px, 3.2vw, 44px); }
.ck-copy p { font-size: 16.5px; color: var(--body); }
.ck-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.ck-item { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--navy); }
.ck-check {
	width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
	background: var(--grad-soft); display: flex; align-items: center; justify-content: center;
}
.ck-check svg { width: 13px; height: 13px; color: var(--green); }
.ck-diagram { display: flex; align-items: center; justify-content: center; }
.ck-diagram svg { width: 100%; max-width: 560px; height: auto; overflow: visible; }

/* Hex hover (shared by hero honeycomb + this diagram) */
.hex-group { transform-box: fill-box; transform-origin: center; transition: transform .28s cubic-bezier(0.34,1.56,0.64,1), filter .28s ease; cursor: default; }
.hex-group.hex-hovered { transform: scale(1.12); filter: drop-shadow(0 8px 24px rgba(15,27,45,0.25)); }

@media (max-width: 1080px) {
	.ck-grid { grid-template-columns: 1fr; gap: 44px; }
	.ck-diagram { order: 1; }
}