/* ============================================================
   OpiDev Containers — shared styling for Title / Card / NoChrome
   Loaded by each container's matching CSS via @import.
   ============================================================ */

.opi-ct { margin-bottom: var(--opi-space-5); color: var(--opi-text); }

.opi-ct__head {
    display: flex; align-items: center; gap: var(--opi-space-3);
}
.opi-ct__title { margin: 0; flex: 1 1 auto; }
.opi-ct__titletext, .opi-ct__title a { color: var(--opi-heading); text-decoration: none; }

.opi-ct__body { min-width: 0; }
.opi-ct__body > *:last-child { margin-bottom: 0; }

/* ---- Title variant ---- */
.opi-ct--title .opi-ct__divider {
    height: 3px; width: 56px;
    background: var(--opi-brand);
    border-radius: 2px;
    margin: var(--opi-space-2) 0 var(--opi-space-4);
}
.opi-ct--title .opi-ct__body { padding: 0; }

/* ---- Card variant ---- */
.opi-ct--card {
    background: var(--opi-surface);
    border: 1px solid var(--opi-border);
    border-radius: var(--opi-radius-lg);
    box-shadow: var(--opi-shadow-sm);
    padding: var(--opi-space-5);
    transition: box-shadow var(--opi-dur) var(--opi-ease),
                transform var(--opi-dur) var(--opi-ease),
                border-color var(--opi-dur) var(--opi-ease);
    height: 100%;
}
.opi-ct--card:hover {
    box-shadow: var(--opi-shadow-md);
    border-color: var(--opi-border-strong);
}
.opi-ct--card .opi-ct__head { margin-bottom: var(--opi-space-3); }

/* ---- Bare / NoChrome variant ---- */
.opi-ct--bare { margin-bottom: 0; position: relative; }
.opi-ct--bare .opi-ct__body { padding: 0; }
.opi-ct__actions-float { position: absolute; top: var(--opi-space-2); right: var(--opi-space-2); z-index: 5; }

/* DNN edit-mode action menus inherit theme colours */
.opi-ct .dnnActionMenu, .opi-ct .actionMenuList { font-size: var(--opi-fs-sm); }