/* =========================================================
   REAL WORLD PROJECTS

   Sits between #live-classes and #career-mentor — you learn in
   the live class, then you build something with it.

   Same rules as the rest of the run: the 1280px measure, sizes
   off the Global.css ladder only, its own rp- prefix. Button and
   badge rules mirror .mi-btn / .rb-btn / .lc-btn / .cc-btn; if one
   of the set changes, change all of them.
========================================================= */

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

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

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

.rp-hero{
    display:grid;
    grid-template-columns:minmax(0,600px) minmax(0,1fr);
    gap:48px;
    align-items:center;
}

.rp-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:32px;
    padding:6px 14px;
    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);
}

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

/* Two-tone, second line accented — same as its siblings, so not the
   .bao-last single-word pattern and the bao-last audit should skip it. */

.rp-title{
    margin-top:20px;
    font-family:var(--font-display);
    font-size:var(--fs-hero);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.01em;
    color:var(--ink);
}

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

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

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

.rp-actions{
    margin-top:24px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

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

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

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

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

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

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

/* ==========================
   CODE WINDOW
========================== */

/* The design puts a laptop photograph here. This is drawn instead: an
   editor window in markup, at a few hundred bytes rather than a
   several-hundred-KB screenshot, sharp on any display, and readable —
   the lines say what the projects actually are. */

.rp-art{
    position:relative;
    padding:18px 0;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}

.rp-window{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    height:auto;
    min-height:332px;
    border-radius:var(--r-15);
    overflow:hidden;
    background:#14161C;
    box-shadow:var(--shadow-lg);
}

.rp-window-bar{
    display:flex;
    align-items:center;
    gap:7px;
    padding:11px 14px;
    background:#1E212A;
    width:100%;
    box-sizing:border-box;
}

.rp-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#3A3F4B;
}

.rp-dot:first-child{ background:#FF5F57; }
.rp-dot:nth-child(2){ background:#FEBC2E; }
.rp-dot:nth-child(3){ background:#28C840; }

.rp-window-name{
    margin-left:8px;
    font-size:var(--fs-caption);
    font-weight:500;
    color:#8A90A0;
}

.rp-code{
    height:auto;
    min-height:280px;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    margin:0;
    padding:18px 20px 22px;
    font-family:"Courier New",monospace;
    font-size:13px;
    line-height:1.85;
    color:#C6CBD8;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.rp-code .t-key{ color:#FF9A4D; }
.rp-code .t-fn{ color:#6FC3FF; }
.rp-code .t-str{ color:#8BD97E; }
.rp-code .t-com{ color:#6B7280; }

/* ==========================
   FLOATING PILLS
========================== */

/* Three callouts riding the window's edges, as in the design. They are
   decoration over artwork, so they are positioned rather than in flow —
   and they turn off below the width where they would start landing on
   top of each other. */

.rp-pill{
    position:absolute;
    z-index:2;
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 14px;
    border-radius:var(--r-15);
    background:var(--white);
    box-shadow:var(--shadow-md);
}

.rp-pill-icon{
    width:30px;
    height:30px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:var(--cream-200);
    color:var(--primary);
    font-size:13px;
}

.rp-pill-title{
    display:block;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.3;
    color:var(--ink-500);
}

.rp-pill-value{
    display:block;
    font-size:var(--fs-meta);
    font-weight:700;
    line-height:1.3;
    color:var(--ink-900);
}

/* Placed around the frame's blank ground, not over it. The design hangs
   the middle one off the left edge, but the grid gap there is only 48px
   and the pill is ~150 wide, so it landed squarely on the code — it was
   covering the "const total" line. These three sit where the window has
   nothing to read: above the title bar, past the ends of the lines, and
   under the last one, inside the block's own bottom padding. */

.rp-pill--a{ top:-6px; right:-14px; }
.rp-pill--b{ bottom:-18px; left:-14px; }
.rp-pill--c{ top:52%; right:-20px; }

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

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

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

.rp-block-sub{
    margin-top:var(--space-tight);
    font-size:var(--fs-lead);
    font-weight:400;
    line-height:1.65;
    color:var(--ink-500);
}

/* ==========================
   PROJECT RAIL
========================== */

/* A rail, not a grid: the design shows the row running off the right
   edge, and five project cards do not fit at any width worth designing
   for. Cards keep a fixed width and the row scrolls. */

.rp-rail{
    margin-top:var(--space-block);
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:var(--space-gap);
    list-style:none;
    margin-inline:auto;
    max-width:1180px;
    padding:4px 4px 14px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scroll-padding-inline:4px;
}

.rp-card{
    flex:0 1 340px;
    max-width:360px;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(0, 0, 0, 0.08);
    border-radius:var(--r-15);
    background:var(--white);
    box-shadow:0 6px 18px rgba(0, 0, 0, 0.06);
    transition:
        transform var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.rp-card:hover{
    transform:translateY(-4px);
    border-color:rgba(0, 0, 0, 0.16);
    box-shadow:0 14px 32px rgba(0, 0, 0, 0.12);
}

.rp-card-header{
    padding:11px 14px;
    background:#FAFAFC;
    border-bottom:1px solid rgba(0, 0, 0, 0.06);
    display:flex;
    align-items:center;
}

.rp-card-tag{
    display:inline-flex;
    align-items:center;
    padding:4px 9px;
    border:1px solid rgba(255, 102, 0, 0.22);
    border-radius:6px;
    background:rgba(255, 102, 0, 0.08);
    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--primary);
}

.rp-card-media{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    aspect-ratio:16 / 10;
    background:#0f1215;
    color:var(--white);
    overflow:hidden;
}

.rp-card-divider{
    height:1px;
    width:100%;
    background:rgba(0, 0, 0, 0.08);
}

.rp-card-media img,
.rp-card-img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    margin:0 auto;
    transition:transform var(--dur-base) var(--ease-out);
}

.rp-card:hover .rp-card-img{
    transform:scale(1.04);
}

.rp-card-body{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:13px 14px 14px;
}

.rp-card-title{
    font-size:15.5px;
    font-weight:700;
    line-height:1.25;
    color:var(--ink-900);
}

.rp-card-text{
    margin-top:5px;
    font-size:12.5px;
    font-weight:400;
    line-height:1.45;
    color:var(--ink-500);
    text-wrap:pretty;
}

/* margin-top:auto so the chip row sits on the card's floor whatever the
   description above it runs to — the five descriptions are not the same
   length and a ragged row of chips is the first thing the eye catches. */

.rp-card-tech{
    margin-top:auto;
    padding-top:10px;
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    list-style:none;
    margin-inline:0;
}

.rp-card-tech li{
    padding:3px 8px;
    border-radius:999px;
    background:var(--cream-100);
    font-size:11.5px;
    font-weight:500;
    line-height:1.3;
    color:var(--ink-600);
}

/* ==========================
   CLOSING STRIP
========================== */

.rp-strip{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
    padding:22px 26px;
    border-radius:var(--r-20);
    background:var(--cream-50);
    list-style:none;
    margin-inline:0;
}

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

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

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

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

.rp-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;
}

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

@media (max-width:1000px){

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

    /* The window is the illustration; the headline should still open the
       section once they stack. */

    .rp-art{
        order:2;
        max-width:640px;
        margin-inline:auto;
    }

    /* Hung off the artwork's corners, they have nothing to hang from at
       one column — and the middle one would sit over the code. */

    .rp-pill{
        display:none;
    }

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

}

@media (max-width:560px){

    .rp-strip{
        grid-template-columns:1fr;
        padding:20px;
    }

    .rp-card{
        flex-basis:270px;
    }

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

}