/* =========================================================
   PLACEMENT ASSISTANCE

   Follows #career-mentor, and is built the same way it was:
   as a sibling of .mi-section rather than a new look. Same
   1280px measure, same badge, same two-tone headline, same
   button pair, same numbered step cards, same closing bar.
   The values shared with those blocks are deliberately
   identical, not approximations -- the four sections are read
   one after another and any drift shows.

   What is particular to this block:
     * a hiring-partner band, whose logo row scrolls left to
       right. It rides the shared .bao-marquee-track, so the
       clone pass in animations.js fills it to the viewport
       like every other row; only the direction is flipped.
     * five stat cells rather than four, and five step cards
       rather than the four the mentor block carries.
========================================================= */

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

.pl-inner{
    width:100%;
    /* Matches .cm-inner, .mi-inner and .rb-inner above it. */
    max-width:1280px;
    margin-inline:auto;
    padding-inline:20px;
}

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

.pl-hero{
    display:grid;
    /* 600 rather than the mentor block's 560: Explore Placement Support and
       Watch Success Stories come to 562px side by side, so at 560 the row
       wrapped and the buttons stacked. */
    grid-template-columns:minmax(0,600px) minmax(0,1fr);
    gap:48px;
    align-items:center;
}

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

.pl-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    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);
}

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

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

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

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

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

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

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

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

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

/* Same trimmed block padding as .cm-btn--ghost, and for the same reason:
   this label is set on two lines and .pl-actions stretches, so its height
   also sets the height of the solid button beside it. */

.pl-btn--ghost{
    padding-block:12px;
    background:var(--white);
    border-color:var(--primary-35);
    color:var(--ink-900);
}

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

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

.pl-btn-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    line-height:1.25;
    text-align:left;
}

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

/* ==========================
   ARTWORK
========================== */

.pl-art{
    position:relative;
}

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

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

/* ==========================
   ARTWORK OVERLAYS
========================== */

/* The design lays two things over the photograph: the tag that says how
   she got here, and the quote from her. Both are positioned rather than
   in flow, so the picture keeps its own aspect ratio and the column does
   not grow when the quote is rewritten. */

/* Far enough left that the quote card cannot reach it. At 20% the two
   met around the 53% mark and the card clipped the tag's last word. */

.pl-tag{
    display: none !important;
}

/* Narrow, because the card's LEFT edge is the part that matters: at 48% of
   the artwork it reached back to 53% and landed across the subject's face.
   40% puts that edge clear of her. The card takes a couple more lines for
   it, which costs height it has to spare — it is under half the picture
   tall either way. */

.pl-quote{
    position:absolute;
    top:5%;
    right:-8px;
    z-index:2;
    width:min(232px,40%);
    padding:13px 15px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-15);
    /* Opaque: it is sitting on a photograph. */
    background:var(--cream-50);
    box-shadow:var(--shadow-md);
}

.pl-quote-text{
    display:block;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.5;
    color:var(--ink-700);
    text-wrap:pretty;
}

.pl-quote-name{
    display:block;
    margin-top:8px;
    font-size:var(--fs-meta);
    font-weight:700;
    line-height:1.3;
    color:var(--ink-900);
    text-align:right;
}

.pl-quote-role{
    display:block;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.3;
    color:var(--ink-500);
    text-align:right;
}

/* Once the hero stacks, the artwork column is narrow enough that a card
   over half of it would cover the subject. The quote drops below the
   picture and reads as a normal testimonial; the tag stays on the image,
   where there is still room for it. */

@media (max-width:1100px){

    .pl-quote{
        position:static;
        width:auto;
        margin-top:14px;
        box-shadow:var(--shadow-sm);
    }
}

/* ==========================
   SUB-HEADINGS

   Both inner headings are led by a short orange rule in the design. It is
   drawn rather than typed so it keeps its length whatever the heading says.
========================== */

.pl-subhead{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:6px 22px;
}

.pl-subhead h3{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-display);
    font-size:var(--fs-card);
    font-weight:700;
    line-height:1.3;
    color:var(--ink);
}

.pl-subhead h3::before{
    content:"";
    width:16px;
    height:2px;
    flex-shrink:0;
    border-radius:2px;
    background:var(--primary);
}

.pl-subhead p{
    font-size:var(--fs-body);
    font-weight:400;
    line-height:1.6;
    color:var(--ink-500);
}

/* ==========================
   HIRING PARTNERS
========================== */

.pl-partners{
    margin-top:var(--space-block);
    padding:24px 0 26px;
    border-radius:var(--r-20);
    background:var(--cream-50);
}

/* The band is full-bleed inside itself so the logo row can run edge to
   edge under the mask, but the header still has to line up with the text
   above it. */

.pl-partners .pl-subhead{
    padding-inline:28px;
    margin-bottom:18px;
}

.pl-logos{
    /* Comfortably slower than the 42s default: this row is short and a
       fast logo row reads as a ticker rather than as a shelf. */
    --marquee-duration:36s;
    align-items:center;
    gap:14px;
}

/* Each logo sits on its own white tile. Four of the six files are JPEGs
   with a baked-in white background, which would draw a hard rectangle
   straight onto the cream band; the tile turns that into the frame. */

.pl-logo{
    flex:0 0 auto;
    width:168px;
    height:76px;
    display:flex;
    align-items:stretch;
    justify-content:center;
    padding:12px 18px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-15);
    background:var(--white);
}

/* The tile is a flex row and the image is left at height:auto, so the
   default stretch gives it the row's cross size -- a definite 52px that
   object-fit can then letterbox the logo inside.

   It is written this way because the obvious version does not work: as a
   centred grid item, height:100% resolves against a grid area the browser
   treats as indefinite and falls back to the intrinsic size. The six files
   run from 300x168 to 512x512, so the square ones came out 130px tall in a
   76px tile and spilled over the band. */

.pl-logo img{
    width:100%;
    height:auto;
    object-fit:contain;
}

/* ==========================
   HOW WE HELP
========================== */

.pl-steps-block{
    margin-top:var(--space-block);
}

.pl-steps-block .pl-subhead{
    margin-bottom:22px;
}

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

.pl-step{
    padding:18px 16px 20px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-15);
    background:var(--white);
}

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

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

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

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

.pl-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
========================== */

.pl-stats{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    padding:20px 8px;
    border:1px solid var(--border);
    border-radius:var(--r-15);
    background:var(--white);
    list-style:none;
    margin-inline:0;
}

.pl-stat{
    display:flex;
    align-items:center;
    gap:12px;
    padding:4px 18px;
}

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

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

.pl-stat-text{
    min-width:0;
}

.pl-stat-num{
    display:block;
    font-family:var(--font-display);
    font-size:var(--fs-card);
    font-weight:800;
    line-height:1.15;
    color:var(--ink);
}

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

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

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

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

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

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

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

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

/* Five step cards stop holding their copy well below this, the same floor
   .mi-steps hits. */

@media (max-width:1100px){

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

}

@media (max-width:1000px){

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

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

    /* Capped for the same reason .cm-lead is: once the copy column goes
       full width nothing else holds the measure. */

    .pl-lead{
        max-width:70ch;
    }

    .pl-art{
        max-width:620px;
        margin-inline:auto;
    }

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

    /* The rules were drawn for one unbroken row; once it wraps, the cell
       starting each new row would carry a rule off its left edge. */

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

    .pl-stat:not(:nth-child(3n+1)){
        border-left:1px solid var(--border);
    }

}

@media (max-width:768px){

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

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

    .pl-stat:not(:nth-child(3n+1)){
        border-left:0;
    }

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

    .pl-partners .pl-subhead{
        padding-inline:20px;
    }

}

@media (max-width:560px){

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

    .pl-stat:nth-child(2n){
        border-left:0;
    }

    .pl-title{
        word-break: break-word;
    }

    .pl-art{
        width: 100%;
        max-width: 100%;
    }

    .pl-quote{
        width: 100%;
        box-sizing: border-box;
        padding: 14px 16px;
    }

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

    .pl-btn-stack{
        align-items:center;
        text-align:center;
    }

    .pl-logo{
        width:140px;
        height:66px;
    }

    .pl-cta{
        padding:22px 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .pl-cta-text{
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .pl-cta-title{
        font-size: clamp(16px, 4.5vw, 20px);
        word-break: break-word;
    }

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

}