/* =========================================================
   CAREER COMMUNITY

   Closes the run that starts at #mock-interviews — classes, mock
   interviews, resume, mentor, and then the people around all of
   it. Same rules as its siblings: 1280px measure, sizes off the
   Global.css ladder only, its own cc- prefix.

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

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

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

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

.cc-hero{
    display:grid;
    grid-template-columns:minmax(0,540px) minmax(0,1fr);
    gap:48px;
    align-items:center;
    padding:36px 34px;
    border:0;
    border-radius:0;
    background:var(--white);
}

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

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

/* Three lines, the last one accented. Same two-tone idea as .mi-title
   and .rb-title, so not the .bao-last single-word pattern and the
   bao-last audit should skip it. */

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

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

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

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

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

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

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

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

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

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

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

/* The runtime goes under the label, not after it — side by side the two
   buttons overran the 540px copy column and dropped onto separate lines.
   Same treatment as .lc-btn-stack. */

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

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

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

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

/* The artwork sits behind, the stats card rides up over its bottom-left
   corner — the overlap the design calls for.

   Pulled up with a negative margin rather than positioned absolutely: the
   card stays in flow, so the column still sizes itself to its contents and
   the quote below lands wherever the card actually ends. Absolute would
   have needed the card's height hard-coded, and it is four lines of copy
   that the marketing team will rewrite.

   Bottom-left rather than centre-left, which is where the design puts it:
   the subject of this photograph is centred in frame, and a card over her
   middle would cover her face. */

/* The photograph is the base layer; the stats card and the quote sit on top
   of it, where the design puts them — card down the left, quote across the
   bottom and overlapping the card's corner.

   All three share one grid cell rather than being positioned absolutely.
   That way the cell is as tall as the tallest of them, so a card that grows
   (four rows of copy the marketing team will rewrite) pushes the block down
   instead of hanging out of it, and nothing needs a hard-coded height. */

/* One cell, four layers. The photograph is the ground; the handwritten
   note, the stats card and the quote bar all sit on top of it, placed with
   align-self / justify-self rather than absolute offsets so none of them
   needs a hard-coded height.

   The proportions come off the design, measured against the artwork's own
   width: the card is a little over a quarter of it, the note sits in the
   top-left eighth, the quote runs three-quarters of the width along the
   bottom. The card was half the artwork wide in the first pass, which made
   it as tall as the photograph and left the quote nowhere to go. */

.cc-aside{
    display:grid;
    grid-template-columns:minmax(0,1fr);
}

.cc-aside > *{
    grid-area:1/1;
}

.cc-art{
    align-self:start;
    border-radius:var(--r-25);
    overflow:hidden;
}

/* The line in the design's own hand. Kalam is the site's handwriting face;
   it is already used this way on the internship page. */

.cc-note{
    align-self:start;
    justify-self:start;
    z-index:2;
    max-width:34%;
    margin:3% 0 0 6%;
    font-family:var(--font-hand);
    font-size:var(--fs-meta);
    font-weight:700;
    line-height:1.5;
    color:var(--primary);
}

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

/* These four numbers are set as real text rather than baked into the
   artwork: they are the section's actual claim, and in an image they
   would be unreadable to search, unselectable, and impossible to
   correct without re-exporting a PNG. */

/* The three overlays have to share 328px of photograph at this width, and
   the arithmetic is what sets these numbers: the quote bar is 66px and
   wants ~10px of clearance, the card starts a tenth of the way down, so
   the card itself has to come in under about 190px. Every size inside it
   is set to that budget rather than picked by eye. */

.cc-panel{
    display:none!important;
    align-self:start;
    justify-self:start;
    z-index:3;
    width:min(236px,38%);
    margin:10% 0 0 6%;
    padding:11px 13px;
    border:1px solid var(--primary-35);
    border-radius:var(--r-25);
    /* Opaque, and lifted — it is sitting on a photograph now, not on the
       section's white. */
    background:var(--grad-card);
    box-shadow:var(--shadow-md);
}

.cc-panel-title{
    font-family:var(--font-display);
    font-size:var(--fs-caption);
    font-weight:700;
    line-height:1.3;
    color:var(--ink);
}

.cc-stats{
    margin-top:8px;
    display:grid;
    gap:6px;
    list-style:none;
    margin-inline:0;
    padding:0;
}

.cc-stat{
    display:flex;
    align-items:center;
    gap:8px;
}

.cc-stat-icon{
    width:22px;
    height:22px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:7px;
    background:var(--cream-200);
    color:var(--primary);
    font-size:11px;
}

/* The design stacks the number over its label rather than running them on
   one line — side by side, the longest label wrapped and the rows stopped
   lining up. */

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

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

.cc-stat-label{
    display:block;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.2;
    color:var(--ink-500);
}

/* ==========================
   QUOTE
========================== */

/* Across the bottom, hard right, overlapping the card's bottom corner. */

.cc-quote{
    display:none!important;
    align-self:end;
    justify-self:center;
    z-index:4;
    /* 50px tall, which is what is left under the card. At the body size it
       ran to two lines and 91px, and overlapped the card by 25px. */
    width:min(470px,82%);
    margin-bottom:10px;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-15);
    /* Opaque and lifted: it is lying on a photograph and on the card. */
    background:var(--white);
    box-shadow:var(--shadow-md);
}

.cc-quote img{
    display:block;
    width:34px;
    height:34px;
    flex-shrink:0;
    border-radius:50%;
    object-fit:cover;
    background:var(--cream-100);
}

.cc-quote-text{
    display:block;
    font-size:var(--fs-meta);
    font-weight:600;
    font-style:italic;
    line-height:1.35;
    color:var(--ink-800);
    text-wrap:pretty;
}

.cc-quote-by{
    display:block;
    margin-top:2px;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.4;
    color:var(--ink-500);
}

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

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

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

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

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

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

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

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

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

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

/* ==========================
   CARDS
========================== */

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

.cc-card{
    overflow:hidden;
    border:1px solid var(--border-soft);
    border-radius:var(--r-15);
    background:var(--white);
}

/* The photo for each card is not in yet. The band holds its aspect ratio
   so the row does not reflow when the images land, and carries the house
   media gradient with the card's own icon on it rather than a grey box —
   it reads as artwork rather than as a broken image. Replacing it is one
   <img> per card. */

/* Bulletproof 16 : 10 image band.
   padding-bottom = 10/16 × 100% = 62.5%.
   The img is pulled out of flow (absolute) and fills the box; any
   intrinsic size — portrait phone screenshot, landscape classroom photo —
   is cropped cleanly with object-fit: cover. */

.cc-card-media{
    position:relative;
    display:block;
    width:100%;
    height:0;
    padding-bottom:62.5%;          /* 10 ÷ 16 = 0.625 */
    overflow:hidden;
    background:var(--grad-media);
}

.cc-card-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
}

.cc-card-body{
    padding:14px 16px 18px;
}

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

.cc-card-text{
    margin-top:5px;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.5;
    color:var(--ink-500);
}

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

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

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

.cc-cta-text{
    flex:1 1 280px;
}

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

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

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

@media (max-width:1100px){

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

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

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

}

@media (max-width:768px){

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

}

@media (max-width:560px){

    /* At this width the picture is only ~190px tall and the card is 250,
       so laying one over the other leaves neither readable. They come out
       of the overlay and stack instead. */

    .cc-aside{
        display:block;
    }

    .cc-panel{
        width:100%;
        margin-top:-34px;
        margin-bottom:0;
    }

    .cc-quote{
        width:100%;
        margin-top:14px;
    }

    .cc-strip,
    .cc-cards{
        grid-template-columns:1fr;
    }

    .cc-stat-num{
        min-width:64px;
    }

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

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

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

}