/* ============================================================
   CCO Dashboard Page Layout (VBI-3-U)
   ------------------------------------------------------------
   Densest C-suite grid — matches CHRO. Tokens reused from ceo.css.
   Mobile-first: 1-col @360, 2-col @768, 3-col @1024, 5-col @1440.
   ============================================================ */

.vbi-csuite-page--cco .vbi-csuite-page__title {
    border-bottom: 2px solid var(--color-teal);
    padding-bottom: var(--space-1);
}

@media (min-width: 481px) and (max-width: 768px) {
    .vbi-band__grid--csuite.vbi-band__grid--cco {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .vbi-band__grid--csuite.vbi-band__grid--cco {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .vbi-band__grid--csuite.vbi-band__grid--cco {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-3);
    }
}

@media (min-width: 1440px) {
    .vbi-band__grid--csuite.vbi-band__grid--cco {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-3);
    }
    .vbi-band__cell--wide { grid-column: span 2; }
}