/* ============================================================
   EVENTFLOW LABS — TECHNICAL DOCUMENTATION VISUAL SYSTEM 1.0
   Loaded only on technical documentation surfaces.
   ============================================================ */

.eventflow-documentation {
    --ef-doc-wide: 1240px;
    --ef-doc-reading: 1080px;
    --ef-doc-narrow: 860px;
    --ef-doc-gap: clamp(28px, 4vw, 56px);
}

/* ------------------------------------------------------------
   Canonical reading geometry
   ------------------------------------------------------------ */

.eventflow-documentation .ef-doc-shell,
.eventflow-documentation .ef-fe-docs-hero,
.eventflow-documentation .ef-fe-docs-introduction,
.eventflow-documentation .ef-fe-docs-index,
.eventflow-documentation .ef-fe-docs-boundary,
.eventflow-documentation .ef-fe-docs-technology,
.eventflow-documentation .ef-fe-docs-status {
    width: min(
        var(--ef-doc-wide),
        calc(100% - clamp(40px, 8vw, 120px))
    ) !important;

    max-width: var(--ef-doc-wide) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

/*
 * Gutenberg constrained layouts normally pull paragraph content
 * back to the site's global contentSize. Documentation owns its
 * own reading geometry.
 */

.eventflow-documentation
:is(
    .ef-doc-shell,
    .ef-fe-docs-hero,
    .ef-fe-docs-introduction,
    .ef-fe-docs-index,
    .ef-fe-docs-boundary,
    .ef-fe-docs-technology,
    .ef-fe-docs-status
).is-layout-constrained
> :where(
    :not(.alignleft):
    not(.alignright):
    not(.alignfull)
) {
    max-width: var(--ef-doc-wide) !important;
}

/* Narrative copy */

.eventflow-documentation
:is(
    .ef-fe-docs-introduction,
    .ef-fe-docs-boundary,
    .ef-fe-docs-technology,
    .ef-fe-docs-status,
    .ef-doc-narrative
)
> p {
    width: 100%;
    max-width: var(--ef-doc-reading) !important;
}

/* Major headings use the complete documentation canvas */

.eventflow-documentation
:is(
    .ef-fe-docs-introduction,
    .ef-fe-docs-boundary,
    .ef-fe-docs-technology,
    .ef-fe-docs-status,
    .ef-fe-docs-index,
    .ef-doc-section
)
> h2 {
    width: 100%;
    max-width: var(--ef-doc-wide) !important;
}

/* ------------------------------------------------------------
   Documentation typography
   ------------------------------------------------------------ */

.eventflow-documentation .ef-doc-eyebrow,
.eventflow-documentation .ef-fe-docs-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.eventflow-documentation .ef-doc-lead,
.eventflow-documentation .ef-fe-docs-lead {
    max-width: var(--ef-doc-reading) !important;
    font-size: clamp(1.12rem, 1.5vw, 1.35rem);
    line-height: 1.65;
}

.eventflow-documentation
:is(.ef-doc-section, .ef-doc-narrative)
p {
    line-height: 1.72;
}

.eventflow-documentation
:is(.ef-doc-section, .ef-doc-narrative)
p + p {
    margin-top: 1.25em;
}

/* ------------------------------------------------------------
   Metadata / technical status
   ------------------------------------------------------------ */

.eventflow-documentation .ef-doc-meta {
    width: 100%;
    max-width: var(--ef-doc-wide) !important;
    gap: 1px;
    margin-top: 40px;
}

.eventflow-documentation .ef-doc-meta > .wp-block-column {
    padding: 22px 24px;
    border: 1px solid rgba(255,255,255,.11);
}

.eventflow-documentation .ef-doc-meta p {
    margin: 0;
    line-height: 1.55;
}

/* ------------------------------------------------------------
   Technical principles / callouts
   ------------------------------------------------------------ */

.eventflow-documentation .ef-doc-principle,
.eventflow-documentation .ef-fe-docs-boundary blockquote {
    width: 100%;
    max-width: var(--ef-doc-reading) !important;

    margin: 32px 0;

    padding: 6px 0 6px 24px;

    border-left: 2px solid #28d7f2;
}

.eventflow-documentation .ef-doc-principle p,
.eventflow-documentation .ef-fe-docs-boundary blockquote p {
    margin: 0;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.55;
}

/* ------------------------------------------------------------
   Architecture planes
   ------------------------------------------------------------ */

.eventflow-documentation .ef-doc-plane-grid {
    width: 100%;
    max-width: var(--ef-doc-wide) !important;
    gap: var(--ef-doc-gap);
    margin-top: 36px;
    margin-bottom: 36px;
}

.eventflow-documentation .ef-doc-plane {
    padding: clamp(26px, 3vw, 38px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px;
}

.eventflow-documentation .ef-doc-plane h3 {
    margin-top: 0;
}

.eventflow-documentation .ef-doc-plane p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   Conceptual architecture flow
   ------------------------------------------------------------ */

.eventflow-documentation .ef-doc-flow {
    width: 100%;
    max-width: var(--ef-doc-wide) !important;

    margin: 42px auto;

    padding: clamp(28px, 4vw, 46px);

    border: 1px solid rgba(255,255,255,.12);
}

.eventflow-documentation .ef-doc-flow-row {
    display: grid;
    grid-template-columns:
        minmax(180px, 1fr)
        auto
        minmax(180px, 1fr)
        auto
        minmax(180px, 1fr);

    gap: 18px;
    align-items: center;
}

.eventflow-documentation .ef-doc-node {
    min-height: 118px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 22px;

    border: 1px solid rgba(255,255,255,.14);
}

.eventflow-documentation .ef-doc-node strong {
    display: block;
    margin-bottom: 8px;
}

.eventflow-documentation .ef-doc-arrow {
    color: #28d7f2;
    font-size: 1.65rem;
    line-height: 1;
}

/* ------------------------------------------------------------
   Responsibility matrix
   ------------------------------------------------------------ */

.eventflow-documentation .ef-doc-table-wrap {
    width: 100%;
    max-width: var(--ef-doc-wide) !important;

    overflow-x: auto;

    margin: 36px auto;
}

.eventflow-documentation .ef-doc-table-wrap table {
    width: 100%;
    border-collapse: collapse;
}

.eventflow-documentation .ef-doc-table-wrap th,
.eventflow-documentation .ef-doc-table-wrap td {
    padding: 17px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.eventflow-documentation .ef-doc-table-wrap th {
    font-weight: 700;
}

/* ------------------------------------------------------------
   Documentation index
   ------------------------------------------------------------ */

.eventflow-documentation .ef-fe-docs-index .wp-block-columns {
    width: 100%;
    max-width: var(--ef-doc-wide) !important;
    gap: var(--ef-doc-gap);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .eventflow-documentation .ef-doc-flow-row {
        grid-template-columns: 1fr;
    }

    .eventflow-documentation .ef-doc-arrow {
        transform: rotate(90deg);
        text-align: center;
    }
}

@media (max-width: 782px) {

    .eventflow-documentation {
        --ef-doc-wide: 100%;
        --ef-doc-reading: 100%;
    }

    .eventflow-documentation .ef-doc-shell,
    .eventflow-documentation .ef-fe-docs-hero,
    .eventflow-documentation .ef-fe-docs-introduction,
    .eventflow-documentation .ef-fe-docs-index,
    .eventflow-documentation .ef-fe-docs-boundary,
    .eventflow-documentation .ef-fe-docs-technology,
    .eventflow-documentation .ef-fe-docs-status {
        width: calc(100% - 36px) !important;
    }

    .eventflow-documentation .ef-doc-meta {
        gap: 14px;
    }
}


/* ============================================================
   DOCUMENTATION WIDTH FIX 1.1
   Override Gutenberg/theme constrained content geometry
   only inside EventFlow technical documentation.
   ============================================================ */

/*
 * Canonical documentation sections own their own width.
 */
body.eventflow-documentation .entry-content,
body.eventflow-documentation .wp-site-blocks main,
body.eventflow-documentation main .entry-content {
    width: 100%;
    max-width: none !important;
}

/*
 * Gutenberg constrained layouts normally center every direct
 * child using the global content-size. Documentation deliberately
 * uses a wider technical reading canvas.
 */
body.eventflow-documentation
.entry-content
.is-layout-constrained
> :where(
    :not(.alignleft):
    not(.alignright):
    not(.alignfull)
) {
    max-width: 1120px !important;
    width: min(1120px, calc(100% - 64px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
 * Narrative paragraphs should use almost the full documentation
 * reading width instead of the global article width.
 */
body.eventflow-documentation
.entry-content
:is(
    .ef-fe-docs-introduction,
    .ef-fe-docs-boundary,
    .ef-fe-docs-technology,
    .ef-fe-docs-status,
    .ef-doc-narrative,
    .ef-doc-section
)
> p {
    max-width: 1040px !important;
    width: min(1040px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
 * Headings, grids, tables and architecture blocks may use
 * the full documentation canvas.
 */
body.eventflow-documentation
.entry-content
:is(
    .ef-fe-docs-introduction,
    .ef-fe-docs-boundary,
    .ef-fe-docs-technology,
    .ef-fe-docs-status,
    .ef-fe-docs-index,
    .ef-doc-section
)
> :is(
    h1,
    h2,
    h3,
    .wp-block-columns,
    .ef-doc-flow,
    .ef-doc-table-wrap,
    .ef-doc-meta
) {
    max-width: 1120px !important;
    width: min(1120px, 100%) !important;
}

/*
 * Principle/quote blocks should align with the narrative width.
 */
body.eventflow-documentation
.entry-content
:is(
    .ef-fe-docs-boundary,
    .ef-doc-section
)
blockquote {
    max-width: 1040px !important;
    width: min(1040px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
 * Preserve mobile reading behavior.
 */
@media (max-width: 782px) {

    body.eventflow-documentation
    .entry-content
    .is-layout-constrained
    > :where(
        :not(.alignleft):
        not(.alignright):
        not(.alignfull)
    ) {
        width: calc(100% - 36px) !important;
        max-width: none !important;
    }

    body.eventflow-documentation
    .entry-content
    :is(
        .ef-fe-docs-introduction,
        .ef-fe-docs-boundary,
        .ef-fe-docs-technology,
        .ef-fe-docs-status,
        .ef-doc-narrative,
        .ef-doc-section
    )
    > p {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ============================================================
   EVENTFLOW DOCUMENTATION — GUTENBERG INNER-CONTAINER BRIDGE
   Version: 1.2

   Gutenberg inserts .wp-block-group__inner-container between
   documentation sections and their actual content.

   Documentation therefore owns the geometry of that inner
   container directly, following the same architectural pattern
   already used elsewhere in EventFlow Labs.
   ============================================================ */

body.eventflow-documentation
.entry-content
:is(
    .ef-fe-docs-introduction,
    .ef-fe-docs-index,
    .ef-fe-docs-boundary,
    .ef-fe-docs-technology,
    .ef-fe-docs-status,
    .ef-doc-section,
    .ef-doc-narrative
)
> .wp-block-group__inner-container {
    width: min(
        var(--ef-doc-wide, 1240px),
        calc(100% - 64px)
    ) !important;

    max-width: var(--ef-doc-wide, 1240px) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/*
 * Narrative children live inside Gutenberg's generated
 * inner-container, not directly inside the documentation section.
 */

body.eventflow-documentation
.entry-content
:is(
    .ef-fe-docs-introduction,
    .ef-fe-docs-boundary,
    .ef-fe-docs-technology,
    .ef-fe-docs-status,
    .ef-doc-section,
    .ef-doc-narrative
)
> .wp-block-group__inner-container
> p {
    width: min(
        var(--ef-doc-reading, 1080px),
        100%
    ) !important;

    max-width: var(--ef-doc-reading, 1080px) !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/*
 * Section headings share the wide documentation canvas.
 */

body.eventflow-documentation
.entry-content
:is(
    .ef-fe-docs-introduction,
    .ef-fe-docs-index,
    .ef-fe-docs-boundary,
    .ef-fe-docs-technology,
    .ef-fe-docs-status,
    .ef-doc-section,
    .ef-doc-narrative
)
> .wp-block-group__inner-container
> :is(h1, h2, h3, h4) {
    width: 100% !important;
    max-width: var(--ef-doc-wide, 1240px) !important;
}


/*
 * Architectural statements follow narrative geometry while
 * preserving their own visual treatment.
 */

body.eventflow-documentation
.entry-content
:is(
    .ef-fe-docs-boundary,
    .ef-doc-section
)
> .wp-block-group__inner-container
> blockquote {
    width: min(
        var(--ef-doc-reading, 1080px),
        100%
    ) !important;

    max-width: var(--ef-doc-reading, 1080px) !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/*
 * Mobile documentation returns naturally to the viewport.
 */

@media (max-width: 782px) {

    body.eventflow-documentation
    .entry-content
    :is(
        .ef-fe-docs-introduction,
        .ef-fe-docs-index,
        .ef-fe-docs-boundary,
        .ef-fe-docs-technology,
        .ef-fe-docs-status,
        .ef-doc-section,
        .ef-doc-narrative
    )
    > .wp-block-group__inner-container {
        width: calc(100% - 36px) !important;
        max-width: none !important;
    }

    body.eventflow-documentation
    .entry-content
    :is(
        .ef-fe-docs-introduction,
        .ef-fe-docs-boundary,
        .ef-fe-docs-technology,
        .ef-fe-docs-status,
        .ef-doc-section,
        .ef-doc-narrative
    )
    > .wp-block-group__inner-container
    > p {
        width: 100% !important;
        max-width: none !important;
    }
}

/* EVENTFLOW_DOCUMENTATION_GUTENBERG_BRIDGE_1_2 */


/* ==========================================================
   EVENTFLOW DOCUMENTATION — READING CANVAS 1.3
   ----------------------------------------------------------
   Documentation-only geometry.

   Gutenberg inserts .wp-block-group__inner-container between
   each documentation section and its narrative blocks.
   This layer explicitly owns that bridge.

   No global EFDS measure is modified.
   ========================================================== */


/* ----------------------------------------------------------
   DOCUMENTATION SECTION CANVAS
   ---------------------------------------------------------- */

body.eventflow-documentation
.ef-gutenberg-content
> :is(
    .ef-fe-docs-introduction,
    .ef-fe-docs-index,
    .ef-fe-docs-boundary,
    .ef-fe-docs-technology,
    .ef-fe-docs-status,
    .ef-doc-section,
    .ef-doc-narrative
) {
    width: min(
        calc(100% - (var(--ef-page-gutter) * 2)),
        var(--ef-container-xl)
    ) !important;

    max-width: var(--ef-container-xl) !important;
    max-inline-size: var(--ef-container-xl) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ----------------------------------------------------------
   GUTENBERG INNER-CONTAINER BRIDGE
   ---------------------------------------------------------- */

body.eventflow-documentation
:is(
    .ef-fe-docs-introduction,
    .ef-fe-docs-index,
    .ef-fe-docs-boundary,
    .ef-fe-docs-technology,
    .ef-fe-docs-status,
    .ef-doc-section,
    .ef-doc-narrative
)
> .wp-block-group__inner-container {

    display: block !important;

    width: 100% !important;
    inline-size: 100% !important;

    max-width: none !important;
    max-inline-size: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ----------------------------------------------------------
   DOCUMENTATION NARRATIVE MEASURE
   ----------------------------------------------------------
   Override the global:
       p, li { max-width: var(--ef-measure-body); }

   Documentation uses a wider technical reading measure.
   ---------------------------------------------------------- */

body.eventflow-documentation
:is(
    .ef-fe-docs-introduction,
    .ef-fe-docs-boundary,
    .ef-fe-docs-technology,
    .ef-fe-docs-status,
    .ef-doc-section,
    .ef-doc-narrative
)
> .wp-block-group__inner-container
> p {

    width: 100% !important;
    inline-size: 100% !important;

    max-width: 68rem !important;
    max-inline-size: 68rem !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ----------------------------------------------------------
   DOCUMENTATION HEADINGS
   ---------------------------------------------------------- */

body.eventflow-documentation
:is(
    .ef-fe-docs-introduction,
    .ef-fe-docs-index,
    .ef-fe-docs-boundary,
    .ef-fe-docs-technology,
    .ef-fe-docs-status,
    .ef-doc-section
)
> .wp-block-group__inner-container
> :is(h1, h2, h3) {

    width: 100% !important;
    max-width: 72rem !important;
    max-inline-size: 72rem !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ----------------------------------------------------------
   PRINCIPLE / QUOTE BLOCKS
   ---------------------------------------------------------- */

body.eventflow-documentation
:is(
    .ef-fe-docs-boundary,
    .ef-doc-section
)
> .wp-block-group__inner-container
> blockquote {

    width: 100% !important;
    max-width: 68rem !important;
    max-inline-size: 68rem !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ----------------------------------------------------------
   DOCUMENTATION INDEX / STRUCTURED CONTENT
   ---------------------------------------------------------- */

body.eventflow-documentation
.ef-fe-docs-index
> .wp-block-group__inner-container
> :is(
    .wp-block-columns,
    .wp-block-table,
    .ef-doc-flow,
    .ef-doc-table-wrap,
    .ef-doc-meta
) {

    width: 100% !important;
    max-width: 100% !important;
    max-inline-size: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 48rem) {

    body.eventflow-documentation
    .ef-gutenberg-content
    > :is(
        .ef-fe-docs-introduction,
        .ef-fe-docs-index,
        .ef-fe-docs-boundary,
        .ef-fe-docs-technology,
        .ef-fe-docs-status,
        .ef-doc-section,
        .ef-doc-narrative
    ) {
        width: calc(
            100% - (var(--ef-page-gutter) * 2)
        ) !important;

        max-width: none !important;
    }

    body.eventflow-documentation
    :is(
        .ef-fe-docs-introduction,
        .ef-fe-docs-boundary,
        .ef-fe-docs-technology,
        .ef-fe-docs-status,
        .ef-doc-section,
        .ef-doc-narrative
    )
    > .wp-block-group__inner-container
    > p {
        width: 100% !important;
        max-width: none !important;
        max-inline-size: none !important;
    }
}



/* ============================================================
   EVENTFLOW FE ISSUER CONFIGURATION GRID
   Getting Started / Issuer Configuration
   Lives inside the documentation visual system.
   ============================================================ */

body.eventflow-documentation
.ef-gutenberg-content
> .ef-fe-issuer-grid {

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: clamp(40px, 5vw, 64px);

    align-items: start;

    width: min(1120px, calc(100% - 64px)) !important;
    max-width: 1120px !important;
    max-inline-size: 1120px !important;

    margin:
        clamp(52px, 6vw, 80px)
        auto !important;
}


/* Individual setup step */

body.eventflow-documentation
.ef-fe-issuer-grid
> .ef-fe-issuer-step {

    min-width: 0;
    width: 100%;
}


/* Keep paired headings aligned with their own column */

body.eventflow-documentation
.ef-fe-issuer-grid
> .ef-fe-issuer-step
> h2 {

    margin-top: 0;
}


/* Phone screenshots */

body.eventflow-documentation
.ef-fe-issuer-step
> figure.wp-block-image {

    width: min(100%, 360px) !important;
    max-width: 360px !important;
    max-inline-size: 360px !important;

    margin:
        clamp(28px, 3vw, 40px)
        auto
        0 !important;
}


body.eventflow-documentation
.ef-fe-issuer-step
> figure.wp-block-image
> img {

    display: block;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 auto;
    object-fit: contain;
}


/* Screenshot captions */

body.eventflow-documentation
.ef-fe-issuer-step
> figure.wp-block-image
> figcaption {

    width: 100%;
    max-width: 360px;

    margin:
        14px
        auto
        0;

    text-align: center;
}


/* Fifth step: centered closure below both paired rows */

body.eventflow-documentation
.ef-gutenberg-content
> .ef-fe-issuer-step--single {

    width: min(680px, calc(100% - 64px)) !important;
    max-width: 680px !important;
    max-inline-size: 680px !important;

    margin:
        clamp(64px, 7vw, 96px)
        auto !important;
}


body.eventflow-documentation
.ef-gutenberg-content
> .ef-fe-issuer-step--single
> h2 {

    margin-top: 0;
}


/* Mobile: restore sequential operational reading */

@media (max-width: 48rem) {

    body.eventflow-documentation
    .ef-gutenberg-content
    > .ef-fe-issuer-grid {

        grid-template-columns: 1fr !important;

        width: calc(
            100% - (var(--ef-page-gutter) * 2)
        ) !important;

        max-width: none !important;
        max-inline-size: none !important;

        gap: 56px;
    }


    body.eventflow-documentation
    .ef-gutenberg-content
    > .ef-fe-issuer-step--single {

        width: calc(
            100% - (var(--ef-page-gutter) * 2)
        ) !important;

        max-width: none !important;
        max-inline-size: none !important;
    }


    body.eventflow-documentation
    .ef-fe-issuer-step
    > figure.wp-block-image {

        width: min(100%, 340px) !important;
        max-width: 340px !important;
    }
}

/* END EVENTFLOW FE ISSUER CONFIGURATION GRID */