/* =========================================================
   LIVE INTERACTIVE CLASSES

   Third in the run that starts at #mock-interviews, and built to
   the same rules: the 1280px measure, sizes off the Global.css
   ladder only, its own lc- prefix.

   Two things are deliberately different from its two siblings.
   The artwork sits on the LEFT here and the copy on the right, so
   three stacked sections do not all lean the same way. And the
   hero carries the peach wash rather than plain white, which stops
   the run reading as one long white page.

   The button and badge rules mirror .mi-btn / .rb-btn; if one of
   the set changes, change all three.
========================================================= */

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

    /* The one colour in this file that is not a brand token. A live
       indicator has to read as "live", which is green everywhere on the
       web; the palette is entirely orange and ink, so there is nothing
       to reach for. Scoped to this section rather than added to the
       global ramp, since nothing else needs it yet. */
    --lc-live:#16A34A;
}

.lc-inner{
    width:100%;
    max-width:1280px;
    margin-inline:auto;
    padding-inline:20px;
}

/* ==========================
   HERO
========================== */

/* Artwork first, copy second — the reverse of the two sections above.
   The copy column is the capped one here because it holds the headline
   and lead; the artwork takes the remainder. */

.lc-hero{
    display:grid;
    grid-template-columns:minmax(0,480px) minmax(0,560px);
    gap:48px;
    align-items:center;
    justify-content:center;
    padding:40px;
    border-radius:var(--r-32);
    background:var(--wash-top);
}

/* The artwork is not in yet. The column still holds its share of the
   grid, so the copy sits where it will once the image lands — nothing
   here needs changing then beyond putting a <picture> inside. */

.lc-art{
    position:relative;
    border:1px solid rgba(255, 255, 255, 0.2);
    border-radius:22px;
    padding:10px;
    background:rgba(255, 255, 255, 0.08);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    overflow:hidden;
    max-width:500px;
    width:100%;
    margin-inline:auto;
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    animation:experience-float 6s ease-in-out infinite;
    transition:
        transform var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.lc-art:hover{
    transform:translateY(-8px) scale(1.01);
    border-color:rgba(255, 255, 255, 0.35);
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.lc-art img{
    display:block;
    width:100%;
    height:auto;
    border-radius:14px;
    box-shadow:0 10px 24px rgba(0, 0, 0, 0.25);
    transition:transform var(--dur-base) var(--ease-out);
}

.lc-art:hover img{
    transform:scale(1.015);
}

@keyframes experience-float{
    0%, 100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px) scale(1.012);
    }
}

.lc-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:32px;
    padding:6px 14px;
    border:1px dashed 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(--ink-600);
}

.lc-badge-dot{
    width:8px;
    height:8px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--lc-live);
}

.lc-title{
    margin-top:20px;
    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;
}

/* The four-verb line is a strapline, not a lead — it sits between the
   headline and the paragraph and carries the accent on its own. */

.lc-tagline{
    margin-top:12px;
    font-family:var(--font-display);
    font-size:var(--fs-sub);
    font-weight:700;
    line-height:1.3;
    color:var(--primary);
}

.lc-lead{
    margin-top:16px;
    font-size:var(--fs-lead);
    font-weight:400;
    line-height:1.7;
    color:var(--ink-500);
    text-wrap:pretty;
}

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

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

.lc-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);
}

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

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

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

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

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

/* The closing bar is solid orange, so its button inverts rather than
   sitting orange-on-orange. */

.lc-btn--invert{
    background:var(--white);
    color:var(--primary);
}

.lc-btn--invert:hover{
    background:var(--cream-100);
    transform:translateY(-2px);
}

/* The runtime goes under the label rather than after it. The copy column
   here is 560px, and side by side the two buttons came to 634 and wrapped
   onto separate lines — the design has them on one. Stacking the note
   inside the second button brings the pair back under the measure. */

.lc-btn-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
}

.lc-btn-note{
    font-size:var(--fs-caption);
    font-weight:500;
    color:var(--ink-500);
}

/* Two lines of label, so less vertical padding holds the pair the same
   height as the single-line button beside it. */

.lc-btn--ghost{
    padding-block:11px;
}

/* ==========================
   FEATURE STRIP
========================== */

/* One outlined band holding five items, not five separate cards — in the
   design these read as a single row of facts about the format. */

.lc-strip{
    margin-top:var(--space-gap);
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:24px;
    padding:20px 24px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-20);
    background:var(--white);
    list-style:none;
    margin-inline:0;
}

.lc-strip-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.lc-strip-item > span:last-child{
    min-width:0;
}

.lc-strip-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:16px;
}

/* Spans inside a span, so both need to be told they are blocks or the
   title and its line of copy run together. */

.lc-strip-title{
    display:block;
    font-size:var(--fs-meta);
    font-weight:700;
    line-height:1.35;
    color:var(--ink-900);
}

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

/* ==========================
   BLOCK HEADING
========================== */

.lc-block{
    margin-top:var(--space-block);
    text-align:center;
}

.lc-block-title{
    font-family:var(--font-display);
    font-size:var(--fs-section);
    font-weight:800;
    line-height:1.2;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--ink);
}

/* Decoration, so it lives in CSS rather than in the heading's text where
   it would end up in the document outline and in search results. */

.lc-block-title::before{
    content:"\2014\00a0";
}

.lc-block-title::after{
    content:"\00a0\2014";
}

.lc-block-sub{
    margin-top:var(--space-tight);
    max-width:min(70ch,100%);
    margin-inline:auto;
    font-size:var(--fs-lead);
    font-weight:400;
    line-height:1.65;
    color:var(--ink-500);
    text-wrap:pretty;
}

/* ==========================
   STEPS
========================== */

.lc-steps{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:34px;
    list-style:none;
    margin-inline:0;
    padding:0;
}

.lc-step{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:14px;
    flex-wrap:wrap;
    padding:16px 16px 18px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-15);
    background:var(--white);
}

/* Drawn, not an icon-font glyph, so it lands dead centre of the 34px gap
   at any width. */

.lc-step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:50%;
    left:calc(100% + 17px);
    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;
}

.lc-step-mark{
    position:relative;
    flex-shrink:0;
}



.lc-step-icon{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--cream-200);
    color:var(--primary);
    font-size:19px;
}

/* The original step markup keeps its icon, heading and copy as sibling
   elements. These rules lay those siblings out like the Resume steps. */
.lc-step > .lc-step-icon{
    flex-shrink:0;
}

.lc-step-head{
    min-width:0;
    flex:1 1 0;
}

/* The number sits on the title's line in this design rather than in a
   corner of the card, so it is part of the heading row. */

.lc-step-no{
    position:absolute;
    top:8px;
    left:8px;
    min-width:22px;
    height:22px;
    padding-inline:4px;
    display:grid;
    place-items:center;
    border:2px solid rgba(255,255,255,0.85);
    border-radius:999px;
    background:var(--primary, #ff6900);
    color:#ffffff !important;
    font-family:var(--font-sans, Inter, sans-serif);
    font-size:11px;
    font-weight:700;
    line-height:1;
    z-index:2;
}

.lc-step-copy{
    min-width:0;
}

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

.lc-step-text{
    display:block;
    flex:0 0 calc(100% - 68px);
    margin:-30px 0 0 68px;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.5;
    color:var(--ink-500);
    text-wrap:pretty;
}

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

/* Solid orange, where the two sections above close on peach. This is the
   last of the three, and the run needs somewhere to land. */

.lc-cta{
    margin-top:var(--space-block);
    max-width:820px;
    margin-inline:auto;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    padding:18px 22px;
    border-radius:var(--r-15);
    background:var(--primary);
}

.lc-cta-icon{
    width:46px;
    height:46px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.22);
    color:var(--white);
    font-size:19px;
}

.lc-cta-text{
    flex:1 1 260px;
}

.lc-cta-line{
    font-size:var(--fs-body);
    font-weight:600;
    line-height:1.45;
    color:var(--white);
}

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

/* Same cut-off as the other two heroes: below this the artwork column is
   too narrow for a screenshot of an app to be read at all. */

@media (max-width:1100px){

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

    /* Copy first once they stack — the headline should still open the
       section, whichever side the artwork was on. */

    .lc-art{
        order:2;
        max-width:620px;
        margin-inline:auto;
    }

    .lc-strip{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:22px;
    }

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

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

}

@media (max-width:768px){

    .lc-hero{
        padding:26px 20px;
    }

    .lc-strip{
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding:20px;
    }

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

}

@media (max-width:560px){

    .lc-strip,
    .lc-steps{
        grid-template-columns:1fr;
    }

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

    .lc-cta{
        padding:20px;
    }

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

}