/* =========================================================
   MOCK INTERVIEWS

   Sits directly under #bc-section on the homepage, so it shares
   that block's 1280px measure rather than inventing its own.

   Every size here comes off the Global.css ladder — no px font
   sizes. The block reads as a hero (badge, two-line headline, a
   button pair) so the headline takes --fs-hero; everything below
   steps down from there: panel title --fs-sub, card titles
   --fs-card-sm, supporting copy --fs-caption.
========================================================= */

.mi-section{
    background:var(--white);
    padding:var(--space-section) 0;
    font-family:var(--font-sans);
}

.mi-inner{
    width:100%;
    /* Matches .bc-container above it. Using .container (1400px) instead
       would have stepped this section wider than its neighbour. */
    max-width:1280px;
    margin-inline:auto;
    padding-inline:20px;
}

/* ==========================
   HEAD
========================== */

/* The headline, lead and buttons run down the left; the picture, the rounds
   panel and the quote are composed together on the right.

   The copy column is capped rather than shared as a fraction, and 600 is the
   narrowest it goes: the button pair measures 594px side by side and wraps
   below that. It used to be 720, which left the artwork column 472px -- no
   room at all for the panel to lie across the picture. What paid for the
   difference was the highlight row, which moved out of this column and under
   the hero. */

.mi-hero{
    display:grid;
    grid-template-columns:minmax(0,600px) minmax(0,1fr);
    gap:48px;
    /* Was center. The right column now carries the artwork, the rounds panel
       and the learner quote, so it runs taller than the copy; centring split
       that difference into a gap above and below the headline. */
    align-items:start;
}

.mi-head{
    max-width:600px;
}

/* The artwork is near-white with its own soft edge, so on a white section a
   hard rectangle would show. The radius makes that edge deliberate. */

.mi-art{
    border-radius:var(--r-20);
    overflow:hidden;
}

.mi-art img{
    display:block;
    width:100%;
    height:auto;
}

.mi-aside .mi-art img{
    -webkit-mask-image:linear-gradient(90deg,#000 58%,transparent 92%);
    mask-image:linear-gradient(90deg,#000 58%,transparent 92%);
}

/* ==========================
   ROUNDS PANEL AND QUOTE

   Both come from the design as part of the artwork. They are built as markup
   rather than flattened into the image: ten lines of copy have to stay crisp
   at any zoom, reflow on a phone, and be readable by a screen reader.
========================== */

/* The figure sits left, the rounds panel stands beside it and the quote
   crosses the bottom of both, which is the arrangement the design has.

   The design's figure is cut out, so its panel can lap over her shoulder
   with nothing behind it. Ours is a photograph on a flat grey rectangle: the
   panel covers the two icon tiles on that side, which the design's artwork
   does not have either, but the rectangle's edge still runs under it. A
   transparent PNG of the figure is what closes that last gap. */

.mi-aside{
    position:relative;
    /* the room the quote hangs into below the picture */
    padding-bottom:86px;
}

.mi-art{
    width:78%;
}

.mi-rounds{
    position:absolute;
    top:4%;
    right:0;
    width:48%;
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:16px 18px;
    border-radius:24px;
    background:var(--cream-50);
    box-shadow:var(--shadow-soft);
    list-style:none;
    margin:0;
}

.mi-round{
    display:flex;
    align-items:center;
    gap:12px;
    padding:6px 2px;
}

.mi-round-icon{
    width:42px;
    height:42px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--cream-200);
    color:var(--primary);
    font-size:15px;
}

.mi-round-text{
    min-width:0;
}

.mi-round-title{
    display:block;
    font-size:var(--fs-card-sm);
    font-weight:700;
    line-height:1.3;
    color:var(--ink-900);
}

.mi-round-sub{
    display:block;
    margin-top:2px;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.45;
    color:var(--ink-500);
    text-wrap:pretty;
}

/* Sits across the bottom of the picture, reaching under the panel, as the
   design draws it. The pale orange rule and the warm glow are what separate
   it from the picture behind it. */

.mi-quote{
    position:absolute;
    left:4%;
    bottom:0;
    width:45%;
    margin:0;
    padding:14px 16px;
    border:1px solid var(--primary-25);
    border-radius:var(--r-15);
    background:var(--white);
    box-shadow:0 10px 30px rgba(255,102,0,.10);
}

/* Drawn rather than set in an icon font: it sits tight against the first
   line of the quote, and a glyph would bring its own side bearings into
   that measurement. The same mark the mentor block's cards use. */

.mi-quote-mark{
    font-family:var(--font-display);
    font-size:30px;
    font-weight:800;
    line-height:.6;
    color:var(--primary);
}

.mi-quote-text{
    margin-top:6px;
    font-size:var(--fs-meta);
    font-weight:400;
    line-height:1.6;
    color:var(--ink-800);
    text-wrap:pretty;
}

.mi-quote-who{
    margin-top:8px;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.4;
    color:var(--ink-500);
}

.mi-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    /* min-, not fixed: the label is the one thing here most likely to be
       rewritten, and a fixed pill width is what split .hero-badge open. */
    min-height:34px;
    padding:7px 16px;
    border:1px solid var(--primary-50);
    border-radius:999px;
    background:var(--white);
    font-size:var(--fs-meta);
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    line-height:1;
    color:var(--primary);
}

.mi-badge i{
    font-size:12px;
}

/* Two-tone heading: the whole second line carries the accent, the way
   .outcomes-title does. This is deliberately NOT the site's
   .bao-last + .bao-spark pattern — that one is a single closing word —
   so the bao-last audit should skip it. */

.mi-title{
    margin-top:22px;
    font-family:var(--font-display);
    font-size:var(--fs-hero);
    font-weight:800;
    line-height:1.1;
    letter-spacing:-.01em;
    color:var(--ink);
    text-wrap:balance;
}

.mi-title-accent{
    color:var(--primary);
}

.mi-lead{
    margin-top:18px;
    /* Shorter than the 70ch house cap: the design breaks this into three
       lines against the left edge, and at 70ch it ran to two very long
       ones that no longer sat under the headline. */
    max-width:56ch;
    font-size:var(--fs-lead);
    font-weight:400;
    line-height:1.7;
    color:var(--ink-500);
    text-wrap:pretty;
}

/* ==========================
   BUTTONS
========================== */

.mi-actions{
    margin-top:26px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.mi-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 26px;
    border:1px solid transparent;
    border-radius:var(--radius-md);
    font-family:var(--font-sans);
    font-size:var(--fs-body);
    font-weight:700;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    transition:
        background var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.mi-btn--solid{
    background:var(--primary);
    color:var(--white);
}

.mi-btn--solid:hover{
    background:var(--primary-hover);
    box-shadow:var(--glow);
    transform:translateY(-2px);
}

.mi-btn--ghost{
    background:var(--white);
    border-color:var(--primary-35);
    color:var(--ink-900);
}

.mi-btn--ghost:hover{
    border-color:var(--primary);
    box-shadow:var(--shadow-sm);
    transform:translateY(-2px);
}

.mi-btn--ghost i{
    font-size:18px;
    color:var(--primary);
}

/* The runtime is a footnote to the label, not part of it. */

.mi-btn-note{
    font-weight:500;
    color:var(--ink-500);
}

/* ==========================
   HIGHLIGHTS
========================== */

/* A full-width row under the hero rather than a block inside the copy
   column. The column came in to 600 to make room for the composition beside
   it, and four labels at 150px do not fit that; across the section they sit
   in one row again. */

.mi-highlights{
    margin-top:var(--space-block);
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:26px 46px;
    list-style:none;
    margin-inline:0;
    padding:0;
}

/* No fixed width: three of these four labels wrap to two lines and the
   fourth is nearly twice the length of the first. They share a range
   instead, so a longer label grows rather than spilling. */

.mi-highlight{
    flex:0 1 200px;
    max-width:200px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--space-tight);
    text-align:center;
}

.mi-highlight-icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--cream-200);
    color:var(--primary);
    font-size:20px;
}

.mi-highlight-label{
    /* A measure, not a box: the design runs all four of these to two lines
       so the row has one flat bottom edge. Left to the full cell width the
       two short labels sat on one line and the row went ragged. Anything
       longer than these simply takes a third line rather than spilling. */
    max-width:150px;
    font-size:var(--fs-meta);
    font-weight:700;
    line-height:1.45;
    color:var(--ink-900);
}

/* ==========================
   PROCESS PANEL
========================== */

.mi-panel{
    margin-top:var(--space-block);
    padding:36px 34px;
    border-radius:var(--r-20);
    background:var(--cream-50);
}

.mi-panel-head{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    /* The design sets the sub-line well clear of the title rather than
       running it on — at 28px the two read as one broken sentence. */
    gap:10px 44px;
    margin-bottom:26px;
}

.mi-panel-title{
    font-family:var(--font-display);
    font-size:var(--fs-sub);
    font-weight:700;
    line-height:1.25;
    color:var(--ink);
}

.mi-panel-sub{
    font-size:var(--fs-body);
    font-weight:400;
    line-height:1.6;
    color:var(--ink-500);
}

.mi-steps{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:36px;
    list-style:none;
    margin:0;
    padding:0;
}

.mi-step{
    position:relative;
    padding:18px 16px 22px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-15);
    background:var(--white);
    text-align:center;
}

/* The chevron between two cards is drawn, not set in an icon font: it has
   to sit dead centre of the 36px gap at every width, and a glyph would
   carry its own side bearings into that measurement. */

.mi-step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:50%;
    left:calc(100% + 18px);
    width:9px;
    height:9px;
    border-top:2px solid var(--ink-400);
    border-right:2px solid var(--ink-400);
    transform:translate(-50%,-50%) rotate(45deg);
    pointer-events:none;
}

.mi-step-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:14px;
}

.mi-step-no{
    width:22px;
    height:22px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--primary, #ff6900);
    color:#ffffff !important;
    font-family:var(--font-sans, Inter, sans-serif);
    font-size:11px;
    font-weight:700;
    line-height:1;
}

.mi-step-icon{
    width:44px;
    height:44px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--cream-200);
    color:var(--primary);
    font-size:18px;
}

.mi-step-title{
    font-size:var(--fs-card-sm);
    font-weight:700;
    line-height:1.3;
    color:var(--ink-900);
}

.mi-step-text{
    margin-top:8px;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.5;
    color:var(--ink-500);
    text-wrap:pretty;
}

/* ==========================
   STATS
========================== */

.mi-stats{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    list-style:none;
    margin-inline:0;
    padding:0;
}

.mi-stat{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:6px 24px;
}

.mi-stat + .mi-stat{
    border-left:1px solid var(--border);
}

.mi-stat:first-child{
    padding-left:0;
}

.mi-stat:last-child{
    padding-right:0;
}

.mi-stat-icon{
    width:52px;
    height:52px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--cream-200);
    color:var(--primary);
    font-size:20px;
}

.mi-stat-text{
    text-align:center;
}

.mi-stat-num{
    display:block;
    font-family:var(--font-display);
    font-size:var(--fs-sub);
    font-weight:800;
    line-height:1.1;
    color:var(--ink);
}

.mi-stat-label{
    display:block;
    margin-top:4px;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.45;
    color:var(--ink-500);
}

/* ==========================
   CLOSING CTA
========================== */

/* Inset from the stats row above, as in the design — the bar reads as a
   closing note rather than another full-width band. */

.mi-cta{
    margin-top:var(--space-block);
    max-width:1130px;
    margin-inline:auto;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:22px;
    padding:24px 28px;
    border-radius:var(--r-15);
    background:var(--cream-50);
}

.mi-cta-icon{
    width:54px;
    height:54px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--cream-300);
    color:var(--primary);
    font-size:22px;
}

.mi-cta-text{
    flex:1 1 320px;
}

.mi-cta-title{
    font-family:var(--font-display);
    font-size:var(--fs-card);
    font-weight:700;
    line-height:1.3;
    color:var(--ink);
}

.mi-cta-sub{
    margin-top:6px;
    font-size:var(--fs-body);
    font-weight:400;
    line-height:1.6;
    color:var(--ink-500);
}

/* ==========================
   RESPONSIVE
========================== */

/* Two things give out at the same width, so they share a block.

   The artwork: the copy column is a fixed 720 and the gap 48, so the art
   gets (viewport - 40 - 768) — which falls under 300px at 1108. Below that
   the figure and her six icon tiles stop being legible, so the hero goes to
   one column with the artwork under the copy it illustrates.

   The steps: five cards stop holding their copy at about the same point,
   and the chevrons only mean anything while the row is unbroken. */

@media (max-width:1200px){

    .mi-hero{
        grid-template-columns:minmax(0,1fr);
        gap:32px;
    }

    .mi-head{
        max-width:none;
    }

    /* One column, so the overlay comes apart: picture, panel and quote each
       take the full width of the capped stack. The cap is on the stack, not
       the picture, or the panel would run the width of the section while the
       image it belongs to stayed at 620. */

    .mi-aside{
        max-width:620px;
        margin-inline:auto;
        width:100%;
        display:flex;
        flex-direction:column;
        gap:18px;
        padding-bottom:0;
    }

    .mi-art,
    .mi-rounds,
    .mi-quote{
        position:static;
        width:100%;
    }

    /* Nothing lies over the picture here, so its right edge does not need
       fading and the two icon tiles on that side come back. */

    .mi-aside .mi-art img{
        -webkit-mask-image:none;
        mask-image:none;
    }

    .mi-steps{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:20px;
    }

    .mi-step:not(:last-child)::after{
        content:none;
    }

}

@media (max-width:900px){

    .mi-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:26px 0;
    }

    /* The left rules were drawn for one unbroken row; at two columns the
       third cell starts a row and the rule would hang off its left edge. */

    .mi-stat + .mi-stat{
        border-left:0;
    }

    .mi-stat:nth-child(2n){
        border-left:1px solid var(--border);
    }

    .mi-stat{
        padding-inline:16px;
    }

    .mi-stat:first-child,
    .mi-stat:last-child{
        padding-inline:16px;
    }

}

@media (max-width:768px){

    .mi-panel{
        padding:26px 20px;
    }

    .mi-steps{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .mi-highlights{
        gap:24px;
    }

    .mi-highlight{
        flex:1 1 120px;
    }

}

@media (max-width:560px){

    .mi-steps,
    .mi-stats{
        grid-template-columns:1fr;
    }

    .mi-stat,
    .mi-stat:first-child,
    .mi-stat:last-child,
    .mi-stat:nth-child(2n){
        border-left:0;
        padding-inline:0;
        justify-content:flex-start;
    }

    .mi-stat-text{
        text-align:left;
    }

    .mi-btn{
        width:100%;
        justify-content:center;
    }

    .mi-cta{
        padding:22px 20px;
    }

    .mi-cta .mi-btn{
        width:100%;
    }

}