/*
    CMS idiom classes — for the CustomHtml block.

    The brand component classes (e.g. `.mtw-stat-circle`, `.mtw-tb5__circle`)
    live in scoped .razor.css files, so they only work inside their component.
    Raw HTML inside a CustomHtml block can't use them.

    This stylesheet provides a small, intentionally-limited set of idiom
    classes that DO work in raw HTML. They mirror the brand visuals but flat:
    no Blazor wiring, no scoped attributes, no per-component layout magic.

    Keep this stylesheet conservative — the goal of the CustomHtml block is
    one-off bits the brand blocks don't cover. Anything that becomes common
    should graduate to a proper brand block.
*/

/* Two-column responsive layout. */
.mtw-cms-twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 24px 0;
}
@media (max-width: 767px) {
    .mtw-cms-twocol { grid-template-columns: 1fr; gap: 16px; }
}

/* Three-column responsive layout. */
.mtw-cms-threecol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 24px 0;
}
@media (max-width: 1023px) { .mtw-cms-threecol { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .mtw-cms-threecol { grid-template-columns: 1fr; } }

/* Callout box — soft grey panel with ink border. */
.mtw-cms-callout {
    background: var(--mtw-grey-light, #F2F2F2);
    border: 2px solid var(--mtw-ink, #171717);
    border-radius: 24px;
    padding: 24px 32px;
    margin: 24px 0;
}

/* Brand-colour panel — full-bleed brand-colour wash, like a smaller TB11. */
.mtw-cms-panel {
    background: var(--mtw-lime, #B2D236);
    border-radius: 24px;
    padding: 32px;
    margin: 24px 0;
}
.mtw-cms-panel--lime    { background: var(--mtw-lime, #B2D236);    color: var(--mtw-ink, #171717); }
.mtw-cms-panel--magenta { background: var(--mtw-magenta, #E3108B); color: var(--mtw-ink, #171717); }
.mtw-cms-panel--purple  { background: var(--mtw-purple, #814197);  color: var(--mtw-white, #FFFFFF); }
.mtw-cms-panel--plum    { background: var(--mtw-plum, #69164C);    color: var(--mtw-white, #FFFFFF); }

/* Brand-colour stat circle — simplified stand-in for the brand Stat circles block.
   Use this only if the surrounding layout means a full Stat circles row won't fit;
   otherwise prefer the actual block. */
.mtw-cms-circle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    padding: 16px;
    text-align: center;
    color: var(--mtw-white, #FFFFFF);
}
.mtw-cms-circle--lime    { background: var(--mtw-lime, #B2D236);    color: var(--mtw-ink, #171717); }
.mtw-cms-circle--magenta { background: var(--mtw-magenta, #E3108B); }
.mtw-cms-circle--purple  { background: var(--mtw-purple, #814197); }
.mtw-cms-circle--plum    { background: var(--mtw-plum, #69164C); }

.mtw-cms-circle__number {
    font-family: var(--mtw-font-display, "Poppins", sans-serif);
    font-weight: 600;
    font-size: 64px;
    line-height: 1;
}
.mtw-cms-circle__caption {
    font-family: var(--mtw-font-display, "Poppins", sans-serif);
    font-size: 16px;
    line-height: 1.3;
    margin-top: 8px;
}

/* Tag / pill — small inline label. */
.mtw-cms-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: var(--mtw-font-display, "Poppins", sans-serif);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--mtw-ink, #171717);
    color: var(--mtw-white, #FFFFFF);
}
.mtw-cms-pill--lime    { background: var(--mtw-lime, #B2D236);    color: var(--mtw-ink, #171717); }
.mtw-cms-pill--magenta { background: var(--mtw-magenta, #E3108B); color: var(--mtw-white, #FFFFFF); }
.mtw-cms-pill--purple  { background: var(--mtw-purple, #814197);  color: var(--mtw-white, #FFFFFF); }
.mtw-cms-pill--plum    { background: var(--mtw-plum, #69164C);    color: var(--mtw-white, #FFFFFF); }

/* When the AI emits a block-suggestion comment, the editor reveals it as a
   little banner — admins should see the tip even though it's an HTML comment.
   The inspector renders it via a separate slot, not via this CSS. */

/* Editor-only chrome — surfaces inside the CMS canvas to make Custom HTML
   blocks visually distinct from brand blocks. */
.mtw-cms-custom {
    /* Public render uses this section wrapper; nothing extra needed at runtime. */
}