/*
 * ncp-content.css — shared, template-independent responsive rules for rich-text content
 * authored in the CKEditor 5 editor (layout grids, shape boxes, etc.).
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * Layout/shape blocks carry their look as INLINE styles so they render on every template
 * with no per-template CSS. Inline styles cannot hold @media rules, so the ONE thing they
 * can't express — responsive breakpoints — lives here instead. This is a single, plain-CSS
 * (purge-proof) file loaded on every public site via site_engine_asset_path('/css/ncp-content.css')
 * and in the editor via NCPForm, so the authored content stacks on small screens everywhere.
 *
 * Keep this file MINIMAL and generic (keyed on the ncp-* marker classes only).
 */

/* Mobile: collapse horizontal layout grids to a single stacked column. Vertical layouts are
 * already a single `1fr` track, so this is a no-op for them. */
@media (max-width: 767px) {
    .ncp-layout {
        grid-template-columns: 1fr !important;
    }

    /* Shape boxes with an explicit width shouldn't overflow small screens. */
    .ncp-shape {
        width: auto !important;
        max-width: 100%;
    }
}

/* Table caption on top. CKEditor 5 saves a captioned table as
 * <figure class="table"><table>…</table><figcaption>…</figcaption></figure> — the caption comes
 * AFTER the table — and its own content CSS lifts it above with table-caption rules. Public sites
 * don't load that CSS, so apply the same two rules here. Not applied inside the editor
 * (`.ck-widget`), where CK5 already does this. `width: 100%` keeps the table's current
 * full-width look (an inline width set in the editor still wins). */
figure.table:not(.ck-widget) {
    display: table;
    width: 100%;
}

figure.table:not(.ck-widget) > figcaption {
    display: table-caption;
    caption-side: top;
    /* Same look as CK5's caption in the editor: small, centred, on a light grey band. */
    padding: 0.6em;
    font-size: 0.75em;
    text-align: center;
    color: #333333;
    background-color: #f7f7f7;
    word-break: normal;
    overflow-wrap: anywhere;
}