/* ============================================================
   HRO Consultant Dashboard Persona Layout (VBI-HRO-U)
   ------------------------------------------------------------
   Distinct from the other five HRO pages — per-client drill mode.
   Mounts the ClientSwitcher next to the PersonaSwitcher (dual
   switcher slot). Reuses the shared HRO base shipped in
   hro-owner.css.
   ============================================================ */

.vbi-csuite-page--hro-consultant .vbi-csuite-page__title {
    border-bottom: 2px solid var(--vbi-agency-accent);
    padding-bottom: var(--space-1);
}

.vbi-band__grid--hro-consultant {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

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

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

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

@media (min-width: 1440px) {
    .vbi-band__grid--hro-consultant {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-3);
    }
}

/* Consultant page caps at 3-col (smaller working set per client) and
   keeps the drill banner sticky on tall viewports. */
@media (min-width: 1024px) {
    .vbi-csuite-page--hro-consultant .vbi-hro-drill-banner {
        position: sticky;
        top: var(--space-4);
        z-index: 11;
    }
}