/* ═══════════════════════════════════════════════════════════════════════════════
   PEDAGOGY — Stage icon colour overrides for 50:50 split sections
   Sets FA duotone colour variables on the section wrapper so the icon
   matches the stage brand colour.
═══════════════════════════════════════════════════════════════════════════════ */

.page-split--engage  { --fa-primary-color: #f99d31; --fa-secondary-color: rgba(249, 157,  49, 0.4); }
.page-split--develop { --fa-primary-color: #af4d76; --fa-secondary-color: rgba(175,  77, 118, 0.4); }
.page-split--innovate{ --fa-primary-color: #538da9; --fa-secondary-color: rgba( 83, 141, 169, 0.4); }
.page-split--express { --fa-primary-color: #cfd666; --fa-secondary-color: rgba(207, 214, 102, 0.4); }

/* The brand emblem SVG (used on all four stages in place of a Font Awesome
   icon) recolours via currentColor, not the --fa-primary-color vars above.
   Without these, all four badges would keep the base badge's fixed pink
   background/border regardless of stage — recolouring just the icon left a
   mismatched pink outline around, e.g., an orange emblem. Background is a
   12% tint of the stage colour (same technique as the base badge's pale
   pink chip), border and icon use the full colour. */
.page-split--engage   .page-split__icon-badge { color: #f99d31; border-color: #f99d31; background: rgba(249, 157,  49, 0.12); }
.page-split--develop  .page-split__icon-badge { color: #af4d76; border-color: #af4d76; background: rgba(175,  77, 118, 0.12); }
.page-split--innovate .page-split__icon-badge { color: #538da9; border-color: #538da9; background: rgba( 83, 141, 169, 0.12); }
.page-split--express  .page-split__icon-badge { color: #cfd666; border-color: #cfd666; background: rgba(207, 214, 102, 0.12); }

.page-split--engage  .page-split__heading,
.page-split--engage  h2,
.page-split--develop .page-split__heading,
.page-split--develop h2,
.page-split--innovate .page-split__heading,
.page-split--innovate h2,
.page-split--express .page-split__heading,
.page-split--express h2 { color: #646464; }


.ce-pedagogy-stages__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #646464;
	text-align: center;
	margin: 0 0 1rem;
	line-height: 1.25;
}

.ce-pedagogy-stages__intro {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: var(--ci-color-navy);
	text-align: center;
	max-width: 1100px;
	margin: 0 auto 4rem;
	line-height: 1.7;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   PEDAGOGY — 4-Stage Pipeline
   Each stage is shown as the Cornerstones bracket mark with one corner picked
   out in that stage's colour, the coloured corner rotating clockwise through
   the cycle. The marks are upright artwork with a transparent centre, so the
   stage name is overlaid in the middle rather than set on a coloured fill.
   (Superseded the rotated-square diamonds — nothing here is rotated now
   except the section's own decorative background shapes.)
═══════════════════════════════════════════════════════════════════════════════ */

.ce-pedagogy-stages {
    padding: 5rem 0;
    padding-block: 7rem;
    background: #fff;
    position: relative;
    overflow: clip;
}

.ce-pedagogy-stages::before {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    background: #f9f9f9;
    border-radius: 2.75rem;
    transform: rotate(45deg);
    top: -80px;
    left: -90px;
    pointer-events: none;
    z-index: 0;
}

.ce-pedagogy-stages::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    background: #f9f9f9;
    border-radius: 2rem;
    transform: rotate(45deg);
    top: 420px;
    left: 178px;
    pointer-events: none;
    z-index: 0;
}

.ce-pedagogy-stages .site-container {
    position: relative;
    z-index: 1;
}

.ce-pedagogy-stages__btn-wrap {
    text-align: center;
    margin-top: 3rem;
}

/* ── Outer flex row ─────────────────────────────────────────────────────── */

/* flex-start, not center.

   Centring lined the items up on their own midpoints, so an item was only in
   step with its neighbours while their captions were the same height. "Build
   skills and deepen knowledge." takes three lines where the other three take
   two, which made that item taller and pushed the Develop mark 18px above the
   rest of the row at iPad portrait. Aligning to the top puts every mark on the
   same line whatever the captions do. */
.ce-pedagogy-stages__inner {
    --ped-mark-size: 200px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

/* ── Item: diamond card + caption below ─────────────────────────────────── */

.ce-pedagogy-stages__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;  /* space between the mark and its caption */
}

/* ── Card: the stage brand mark ─────────────────────────────────────────────
   Replaces the rotated gradient diamond. The mark is a four-cornered bracket
   with one corner picked out in the stage colour; the corner rotates clockwise
   through the cycle, which is why the four files aren't interchangeable.
   The artwork is upright, so nothing here is rotated — and because the mark's
   centre is fully transparent, the stage name is positioned over it rather
   than sitting on a coloured fill.
──────────────────────────────────────────────────────────────────────────── */

.ce-pedagogy-stages__card {
    position: relative;
    width: var(--ped-mark-size);
    height: var(--ped-mark-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ce-pedagogy-stages__mark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* ── Inner content: sits in the mark's open centre ─────────────────────── */

.ce-pedagogy-stages__card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* The brackets leave a gap at the midpoint of each edge, so the widest
       clear run is the horizontal band through the centre. Capped short of
       the full width so a long label can't collide with the bracket arms. */
    width: 72%;
}

/* ── Stage name ─────────────────────────────────────────────────────────── */

.ce-pedagogy-stages__name {
    font-family: var(--ci-font-primary);
    font-size: 1.25rem;
    font-weight: 700;
    /* Navy, not the stage colour: the mark sits on a near-white background and
       the Express green (#cfd666) fails contrast badly on it. Colour identity
       comes from the mark; the label just has to be readable. */
    color: var(--ci-color-navy);
    margin: 0;
    line-height: 1.15;
}

/* ── Caption below diamond ──────────────────────────────────────────────── */

.ce-pedagogy-stages__tag {
    font-family: var(--ci-font-primary);
    font-size: var(--ci-text-utility);
    font-weight: 400;
    color: #5a6575;
    margin: 0;
    text-align: center;
    line-height: 1.45;
    max-width: 150px;
}

/* ── Arrow connector ────────────────────────────────────────────────────── */

.ce-pedagogy-stages__arrow {
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    color: rgba(30, 45, 61, 0.28);
    font-size: 0.9rem;
    /* Pushed down to the mark's midpoint from the top of the row, since the row
       is top-aligned now.

       It used to be lifted from the bottom by calc(1.5rem + 1.45em * 2) — the
       item gap plus two lines of caption — which hard-coded the assumption that
       every caption is exactly two lines. The Develop caption is three, so the
       arrows were already off before the marks were. Measuring down from the
       top instead depends only on the mark, which has a definite size. */
    margin-top: calc(var(--ped-mark-size) / 2 - 0.8em);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    /* One value; the card and the arrow offset both follow it. */
    .ce-pedagogy-stages__inner {
        --ped-mark-size: 160px;
    }

    .ce-pedagogy-stages__name {
        font-size: var(--ci-text-card-heading);
    }

    .ce-pedagogy-stages__arrow {
        width: 20px;
        font-size: 0.75rem;
    }

    .ce-pedagogy-stages__item {
        gap: 1.25rem;
    }

    .ce-pedagogy-stages__tag {
        font-size: var(--ci-text-utility);
        max-width: 120px;
    }
}

/* Mark above caption, stacked vertically stage-by-stage — the same
   arrangement as desktop's item layout, just turned 90°. */
@media (max-width: 640px) {
    .ce-pedagogy-stages {
        padding-block: 3rem;
    }

    .ce-pedagogy-stages__inner {
        flex-direction: column;
        gap: 1.75rem;
    }

    .ce-pedagogy-stages__item {
        flex-direction: column;
        gap: 1.25rem;
        width: 100%;
    }

    .ce-pedagogy-stages__card {
        width: 150px;
        height: 150px;
    }


    .ce-pedagogy-stages__name {
        font-size: var(--ci-text-card-heading);
    }

    .ce-pedagogy-stages__tag {
        font-size: var(--ci-text-utility);
        max-width: 220px;
    }

    /* Bigger and darker than the desktop arrow (which sits between wide
       horizontal gaps and is easy to spot) — at this size and rotation it
       needs more visual weight to read clearly as a "next stage" chevron. */
    .ce-pedagogy-stages__arrow {
        transform: rotate(90deg);
        margin-bottom: 0;
        width: auto;
        font-size: 1.15rem;
        color: rgba(30, 45, 61, 0.45);
    }
}