/*
 * EventFlow Labs — Engineering
 *
 * Page-scoped Engineering presentation layer.
 * Extracted from components.css without changing frontend behavior.
 */

/* ==========================================================
   ENGINEERING — IPM DOCTRINE
   ========================================================== */

.ef-engineering-intro__copy,
.ef-engineering-ipm__intro,
.ef-engineering-doctrine__intro {
    max-width: 54rem;
}


/* IPM PARAMETERS */

.ef-engineering-ipm__grid {
    display: grid !important;

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

    gap: clamp(1.5rem, 3vw, 3rem) !important;

    margin-top: clamp(3rem, 5vw, 5rem) !important;
}

.ef-engineering-principle {
    min-width: 0;

    padding-top: 1.4rem;

    border-top: 1px solid rgba(255,255,255,0.14);
}

.ef-engineering-principle__symbol {
    margin: 0 0 2rem 0 !important;

    color: rgba(255,255,255,0.92);

    font-size: clamp(2.25rem, 4vw, 4rem);
    font-weight: 300;
    line-height: 1;
}

.ef-engineering-principle h3 {
    margin: 0 0 1rem 0 !important;
}

.ef-engineering-principle > p:not(.ef-engineering-principle__symbol) {
    color: var(--ef-color-text-muted);

    line-height: 1.65;
}

.ef-engineering-ipm__closing {
    max-width: 48rem;

    margin-top: clamp(3rem, 5vw, 5rem) !important;

    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}


/* FEATURE / OFFLINE FIRST */

.ef-engineering-feature__grid {
    gap: clamp(3rem, 6vw, 7rem) !important;
}

.ef-engineering-feature__heading h2 {
    margin-bottom: 0 !important;
}

.ef-engineering-feature__copy p {
    max-width: 44rem;

    color: rgba(255,255,255,0.72);

    line-height: 1.7;
}

.ef-engineering-feature__copy p + p {
    margin-top: 1.4rem;
}


/* ENGINEERING RULES */

.ef-engineering-rules__grid {
    display: grid !important;

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

    gap: clamp(2rem, 4vw, 4.5rem) !important;

    margin-top: clamp(2.5rem, 4vw, 4rem) !important;
}

.ef-engineering-rule {
    min-width: 0;
}

.ef-engineering-rule h3 {
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
}

.ef-engineering-rule > p:not(.ef-type-system) {
    color: var(--ef-color-text-muted);

    line-height: 1.65;
}

.ef-engineering-rule > p:not(.ef-type-system) + p {
    margin-top: 1rem;
}


/* ONE DOCTRINE */

.ef-engineering-doctrine__grid {
    display: grid !important;

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

    gap: clamp(2rem, 5vw, 6rem) !important;

    margin-top: clamp(3rem, 5vw, 5rem) !important;
}

.ef-engineering-domain {
    padding-top: 1.5rem;

    border-top: 1px solid rgba(255,255,255,0.14);
}

.ef-engineering-domain h3 {
    margin: 1rem 0 !important;

    font-size: clamp(2rem, 3vw, 3.25rem);
}

.ef-engineering-domain > p:not(.ef-type-system) {
    max-width: 32rem;

    color: var(--ef-color-text-muted);

    line-height: 1.65;
}


/* Doctrine statement */

.ef-engineering-doctrine__quote {
    max-width: 56rem;

    margin-top: clamp(3.5rem, 6vw, 6rem) !important;
    margin-left: 0 !important;

    padding-left: clamp(1.5rem, 3vw, 2.5rem) !important;

    border-left: 1px solid rgba(255,255,255,0.30) !important;
}

.ef-engineering-doctrine__quote p {
    margin: 0 !important;

    color: rgba(255,255,255,0.88);

    font-size: clamp(1.35rem, 2.4vw, 2.25rem);
    line-height: 1.35;
}


/* Closing */

.ef-engineering-closing p {
    max-width: 46rem;
}


/* Responsive */

@media (max-width: 64rem) {

    .ef-engineering-ipm__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .ef-engineering-rules__grid {
        grid-template-columns: 1fr !important;
    }

    .ef-engineering-feature__grid {
        flex-direction: column !important;
    }

    .ef-engineering-feature__heading,
    .ef-engineering-feature__copy {
        flex: 0 0 100% !important;

        width: 100% !important;
        max-width: 100% !important;
    }

}

@media (max-width: 42rem) {

    .ef-engineering-ipm__grid,
    .ef-engineering-doctrine__grid {
        grid-template-columns: 1fr !important;
    }

}


/* ==========================================================
   ENGINEERING — TYPOGRAPHY SIMPLIFICATION
   3 LEVELS ONLY:
   1. SYSTEM LABEL
   2. SECTION HEADING
   3. BODY
   ========================================================== */


/* ----------------------------------------------------------
   WIDER READING WIDTH
   ---------------------------------------------------------- */

.ef-engineering-intro,
.ef-engineering-ipm,
.ef-engineering-feature,
.ef-engineering-rules,
.ef-engineering-doctrine,
.ef-engineering-closing {
    width: 100% !important;
    max-width: 72rem !important;
}


/*
 * Paragraph groups should use more of the available width.
 */
.ef-engineering-intro__copy,
.ef-engineering-ipm__intro,
.ef-engineering-ipm__closing,
.ef-engineering-doctrine__intro,
.ef-engineering-closing > p:not(.ef-type-system) {
    max-width: 68rem !important;
}


/* ----------------------------------------------------------
   LEVEL 1 — SYSTEM LABEL
   ---------------------------------------------------------- */

.ef-engineering-intro .ef-type-system,
.ef-engineering-ipm .ef-type-system,
.ef-engineering-feature .ef-type-system,
.ef-engineering-rules .ef-type-system,
.ef-engineering-doctrine .ef-type-system,
.ef-engineering-closing .ef-type-system {
    font-size: inherit;
}


/* ----------------------------------------------------------
   LEVEL 2 — SECTION TITLES
   ---------------------------------------------------------- */

.ef-engineering-intro > h2,
.ef-engineering-ipm > h2,
.ef-engineering-feature__heading h2,
.ef-engineering-doctrine > h2,
.ef-engineering-closing > h2 {
    font-size: clamp(2.65rem, 5vw, 4.75rem) !important;
    line-height: 1.08 !important;
}


/*
 * Principle / card headings stay inside body hierarchy,
 * but retain weight instead of introducing another scale.
 */
.ef-engineering-principle h3,
.ef-engineering-rule h3,
.ef-engineering-domain h3 {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
}


/* ----------------------------------------------------------
   LEVEL 3 — BODY
   ---------------------------------------------------------- */

.ef-engineering-intro p:not(.ef-type-system),
.ef-engineering-ipm p:not(.ef-type-system):not(.ef-engineering-principle__symbol),
.ef-engineering-feature__copy p,
.ef-engineering-rule p:not(.ef-type-system),
.ef-engineering-domain p:not(.ef-type-system),
.ef-engineering-closing p:not(.ef-type-system),
.ef-engineering-doctrine__quote p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
}


/*
 * Remove the fourth type level from IPM closing copy.
 */
.ef-engineering-ipm__closing {
    font-size: 1rem !important;
    line-height: 1.7 !important;

    max-width: 68rem !important;

    margin-top: clamp(2.5rem, 4vw, 4rem) !important;
}


/*
 * Keep doctrine quote visually distinct through geometry,
 * not typography size.
 */
.ef-engineering-doctrine__quote {
    max-width: 68rem !important;

    margin-top: clamp(2.5rem, 4vw, 4rem) !important;

    padding-left: 1.5rem !important;

    border-left: 1px solid rgba(255,255,255,0.30) !important;
}

.ef-engineering-doctrine__quote p {
    margin: 0 !important;

    font-size: 1rem !important;
    line-height: 1.7 !important;

    color: rgba(255,255,255,0.82) !important;
}


/* ----------------------------------------------------------
   FROM DOCTRINE TO ARCHITECTURE — USE FULL WIDTH
   ---------------------------------------------------------- */

.ef-engineering-doctrine .ef-engineering-domain {
    width: 100% !important;
    max-width: 68rem !important;
}

.ef-engineering-doctrine .ef-engineering-domain > p {
    max-width: 68rem !important;
}


/* ----------------------------------------------------------
   IPM INTRO — USE FULL WIDTH BEFORE 4-COLUMN GRID
   ---------------------------------------------------------- */

.ef-engineering-ipm__intro {
    width: 100% !important;
    max-width: 68rem !important;
}


/* ----------------------------------------------------------
   OPENING COPY — LESS NARROW
   ---------------------------------------------------------- */

.ef-engineering-intro__copy {
    width: 100% !important;
    max-width: 68rem !important;
}


/* ----------------------------------------------------------
   CLOSING — USE FULL WIDTH
   ---------------------------------------------------------- */

.ef-engineering-closing {
    max-width: 72rem !important;
}

.ef-engineering-closing > p:not(.ef-type-system) {
    max-width: 68rem !important;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 64rem) {

    .ef-engineering-intro,
    .ef-engineering-ipm,
    .ef-engineering-feature,
    .ef-engineering-rules,
    .ef-engineering-doctrine,
    .ef-engineering-closing {
        max-width: 100% !important;
    }

    .ef-engineering-intro__copy,
    .ef-engineering-ipm__intro,
    .ef-engineering-ipm__closing,
    .ef-engineering-doctrine__intro,
    .ef-engineering-doctrine .ef-engineering-domain,
    .ef-engineering-doctrine__quote,
    .ef-engineering-closing > p:not(.ef-type-system) {
        max-width: 100% !important;
    }

}


/* ==========================================================
   ENGINEERING — DOCTRINE READING WIDTH
   ----------------------------------------------------------
   The old .ef-engineering-domain component originally lived
   inside a two-column comparison. In the current narrative
   it is a full-width reading block.
   ========================================================== */

.ef-engineering-doctrine > .ef-engineering-domain {
    display: block !important;

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

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

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


/*
 * Use the same reading measure as the section introduction.
 */
.ef-engineering-doctrine > .ef-engineering-domain > p {
    width: 100% !important;
    max-width: 68rem !important;

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

    font-size: 1rem !important;
    line-height: 1.7 !important;
}


/*
 * Keep paragraphs separated vertically rather than
 * visually behaving like a narrow card.
 */
.ef-engineering-doctrine > .ef-engineering-domain > p + p {
    margin-top: 1.25rem !important;
}


/*
 * Remove visual residue from the former domain/card treatment.
 */
.ef-engineering-doctrine > .ef-engineering-domain {
    border-top: 0 !important;
    padding-top: 0 !important;
}


/*
 * Quote uses the same horizontal measure.
 * Its distinction comes only from the vertical rule.
 */
.ef-engineering-doctrine > .ef-engineering-doctrine__quote {
    width: 100% !important;
    max-width: 68rem !important;

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


/*
 * Editorial links should also follow the same axis.
 */
.ef-engineering-doctrine > p {
    width: 100% !important;
    max-width: 68rem !important;
}


/* Mobile / tablet */
@media (max-width: 64rem) {

    .ef-engineering-doctrine > .ef-engineering-domain > p,
    .ef-engineering-doctrine > .ef-engineering-doctrine__quote,
    .ef-engineering-doctrine > p {
        max-width: 100% !important;
    }

}


/* ==========================================================
   ENGINEERING — FINAL 3 SECTIONS WIDTH FIX
   ----------------------------------------------------------
   Doctrine / Engineering Knowledge / Persistent Systems
   Remove legacy card widths and Gutenberg constrained widths.
   ========================================================== */


/* ----------------------------------------------------------
   BASE WIDTH FOR LAST SECTIONS
   ---------------------------------------------------------- */

.ef-engineering-doctrine,
.ef-engineering-closing {
    width: 100% !important;
    max-width: 72rem !important;

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


/* ----------------------------------------------------------
   DOCTRINE + ENGINEERING KNOWLEDGE
   Both currently use .ef-engineering-doctrine
   ---------------------------------------------------------- */

/*
 * Intro paragraph.
 */
.ef-engineering-doctrine > .ef-engineering-doctrine__intro {
    width: 100% !important;
    max-width: none !important;

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


/*
 * The old .ef-engineering-domain component was originally
 * designed as a narrow comparison card.
 * It is now narrative content, so remove that geometry.
 */
.ef-engineering-doctrine > .ef-engineering-domain {
    display: block !important;

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

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

    padding: 0 !important;

    border-top: 0 !important;
}


/*
 * Critical override:
 * remove the old ~32rem paragraph constraint.
 */
.ef-engineering-doctrine > .ef-engineering-domain > p,
.ef-engineering-doctrine > .ef-engineering-domain > p:not(.ef-type-system) {
    display: block !important;

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

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

    font-size: 1rem !important;
    line-height: 1.7 !important;
}


/*
 * Maintain paragraph rhythm.
 */
.ef-engineering-doctrine > .ef-engineering-domain > p + p {
    margin-top: 1.25rem !important;
}


/*
 * Quote: same width as the rest of the narrative.
 * Distinction comes from the rule, not a narrower measure.
 */
.ef-engineering-doctrine > .ef-engineering-doctrine__quote {
    width: 100% !important;
    max-width: none !important;

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

.ef-engineering-doctrine > .ef-engineering-doctrine__quote p {
    width: 100% !important;
    max-width: none !important;

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


/*
 * Links such as Explore Technology / Academy
 * remain on the same horizontal axis.
 */
.ef-engineering-doctrine > p {
    width: 100% !important;
    max-width: none !important;

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


/* ----------------------------------------------------------
   PERSISTENT SYSTEMS
   Gutenberg layout="constrained" was still constraining
   every direct child independently.
   ---------------------------------------------------------- */

.ef-engineering-closing.is-layout-constrained > *,
.ef-engineering-closing > * {
    width: 100% !important;
    max-width: none !important;

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


/*
 * Keep system eyebrow natural rather than stretching visually.
 */
.ef-engineering-closing > .ef-type-system {
    width: auto !important;
}


/*
 * Closing paragraphs use the complete section measure.
 */
.ef-engineering-closing > p:not(.ef-type-system) {
    width: 100% !important;
    max-width: none !important;

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

    font-size: 1rem !important;
    line-height: 1.7 !important;
}


/* ----------------------------------------------------------
   ALSO REMOVE GLOBAL PARAGRAPH LIMITS INSIDE THESE SECTIONS
   ---------------------------------------------------------- */

.ef-engineering-doctrine p,
.ef-engineering-closing p {
    max-width: none !important;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 64rem) {

    .ef-engineering-doctrine,
    .ef-engineering-closing {
        width: 100% !important;
        max-width: 100% !important;
    }

}