/* =====================================================
   BAOIAM - BLOG ARTICLE (Career Guide)
   Source: Figma prototype "Blog Page" (node 4881:8586)
   Tech Stack : HTML + Vanilla CSS (site design tokens)
===================================================== */

.bcg-page{
    background:var(--white);
    overflow-x:clip;
}

.bcg-container{
    width:100%;
    max-width:1314px;
    margin-inline:auto;
    padding-inline:20px;
}

/* Running text: one size and one ink for every paragraph and list in
   the article, set to read as large and as dark as the table cells
   rather than a step smaller and lighter. */

.bcg-page article{
    --fs-body:clamp(16px,1.35vw,18px);
    --body-ink:var(--ink);
}

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

.bcg-hero{
    position:relative;
    padding-top:clamp(32px,5vw,64px);
    padding-bottom:clamp(48px,6vw,88px);
    background:var(--wash-top);
    overflow:clip;
}

.bcg-hero-grid{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:clamp(24px,4vw,56px);
    align-items:center;
}

.bcg-title{
    font-family:var(--font-sans);
    font-weight:700;
    font-size:clamp(28px,3.4vw,40px);
    line-height:1.2;
    color:var(--text);
}

.bcg-title .bcg-brand{
    color:var(--primary);
}

/* ---------------------------------------------------------------
   ILLUSTRATION + BLOB

   In Figma each illustration is a transparent PNG floating on an
   organic blob (rgba(255,102,0,.13)) — not a photo inside a card.
   So the blob is its own layer behind the artwork and the PNG keeps
   its alpha; no frame, no radius, no crop.

   The blob is placed in percentages of the illustration box so the
   pair scales together. Numbers come straight off the Figma canvas:

     hero      blob 606x553 at (750,153), art 648x432 at (744,202)
     secondary blob 448.339x585.16 rotated 45.24deg, centred on
               (719.593,1479.195); art 624x416 at (416.72,1289.39)
--------------------------------------------------------------- */

.bcg-figure{
    position:relative;
    aspect-ratio:648/432;
}

.bcg-figure-art{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.bcg-blob{
    position:absolute;
    z-index:0;
    display:block;
    pointer-events:none;
}

.bcg-figure-hero .bcg-blob{
    left:0.93%;
    top:-11.34%;
    width:93.52%;
    height:128.01%;
}

.bcg-figure-secondary{
    aspect-ratio:624/416;

    /* Figma draws this one at 624x416 centred in the column, not edge to
       edge. Letting it fill the 1274px container made the art box ~849px
       tall and the rotated blob behind it ~1190px — twice the design. */
    width:min(100%,624px);
    margin-inline:auto;

    /* The blob overhangs the art by ~25% above and ~16% below, so keep
       that much clear of the paragraphs on either side. */
    margin-block:clamp(56px,8vw,104px) clamp(40px,5vw,72px);
}

/* Rotated, so it is centred on a point and spun about its own middle
   rather than positioned by its (rotated) bounding box. */

.bcg-figure-secondary .bcg-blob{
    left:48.54%;
    top:45.63%;
    width:71.85%;
    height:140.66%;
    transform:translate(-50%,-50%) rotate(45.24deg);
}

/* ---------------------------------------------------------------
   DOT GRID ACCENTS

   Figma stacks a 100x9 strip of 10 dots eight times inside a clipped
   box. One radial-gradient tile reproduces it exactly — 9px pitch,
   1.5px radius, #FF6600 at 29% — so no asset is needed.

   Boxes keep their Figma pixel size (dots must not stretch) but are
   placed in percentages of the illustration box so they travel with
   the artwork as it scales.
--------------------------------------------------------------- */

.bcg-dots{
    position:absolute;
    z-index:2;
    pointer-events:none;
    background-image:radial-gradient(rgba(255,102,0,.29) 1.5px,transparent 1.5px);
    background-size:9px 9px;
    background-position:1.5px 1.5px;
}

.bcg-figure-hero .bcg-dots{
    width:66px;
    height:59px;
}

.bcg-figure-hero .bcg-dots-a{
    left:58.02%;
    top:-6.94%;
}

.bcg-figure-hero .bcg-dots-b{
    left:52.47%;
    top:100%;
}

.bcg-figure-secondary .bcg-dots{
    width:50px;
    height:45px;
}

.bcg-figure-secondary .bcg-dots-a{
    left:60.94%;
    top:2.55%;
}

.bcg-figure-secondary .bcg-dots-b{
    left:38.78%;
    top:102.64%;
}

/* Decorative only — they crowd the artwork once the figure is narrow. */

@media (max-width:760px){
    .bcg-dots{
        display:none;
    }
}

/* ==========================
   META BAR (author / updated / share / summarize)
========================== */

.bcg-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:20px 32px;
    margin-top:var(--space-gap);
}

.bcg-author{
    display:flex;
    align-items:center;
    gap:14px;
}

.bcg-author img{
    width:56px;
    height:56px;
    border-radius:50%;
    object-fit:cover;
    box-shadow:var(--shadow-avatar);
}

.bcg-author-label{
    font-size:14px;
    color:var(--text-light);
    line-height:1.3;
}

.bcg-author-name{
    font-weight:600;
    font-size:16px;
    color:var(--text);
    line-height:1.3;
}

.bcg-meta-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
}

.bcg-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:999px;
    border:1px solid var(--border-grey);
    background:var(--white);
    font-size:15px;
    font-weight:500;
    color:var(--text);
    cursor:pointer;
    transition:var(--transition);
}

.bcg-chip:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.bcg-chip-icon{
    width:20px;
    height:20px;
    flex:none;
    display:block;
}

/* Share popover */

.bcg-share{
    position:relative;
}

.bcg-share-menu{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    display:flex;
    gap:10px;
    padding:12px;
    background:var(--white);
    border:1px solid var(--border-soft);
    border-radius:var(--r-15);
    box-shadow:var(--shadow-md);
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    transition:var(--transition);
    z-index:20;
}

.bcg-share.is-open .bcg-share-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.bcg-share-menu a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--section-bg);
    color:var(--text);
    font-size:16px;
    transition:var(--transition);
}

.bcg-share-menu a:hover{
    background:var(--primary);
    color:#fff;
}

/* ==========================
   ARTICLE SECTIONS
========================== */

.bcg-section{
    padding-top:var(--space-section);
    padding-bottom:var(--space-section);
}

/* ---------------------------------------------------------------
   SECTION WASH

   Rectangle 863 in Figma — the two stacked radial washes the design
   uses behind the full-width sections. Global.css has --wash-corner
   and --wash-top for the same pair, but those are circle() variants
   pinned at different stops; these are the ellipse percentages off
   this frame, so they are written out rather than aliased.
--------------------------------------------------------------- */

.bcg-wash{
    background:
        radial-gradient(26.36% 53.91% at 95.42% 93.23%,rgba(255,102,0,.2) 0%,rgba(255,255,255,.2) 100%),
        radial-gradient(27.92% 77.45% at 5.45% -28.56%,#FFE2CF 0%,#FFFFFF 100%);
}

.bcg-section-title{
    font-family:var(--font-sans);
    font-weight:700;
    font-size:var(--fs-section);
    line-height:1.25;
    color:var(--text);
    margin-bottom:var(--space-gap);
}

.bcg-section-title .bcg-orange{
    color:var(--primary);
}

.bcg-lead{
    font-size:var(--fs-body);
    line-height:1.7;
    color:var(--body-ink);
    max-width:1276px;
}

.bcg-lead + .bcg-lead{
    margin-top:16px;
}

.bcg-list{
    margin-top:16px;
    padding-left:24px;
    color:var(--primary);
    font-size:var(--fs-body);
    line-height:1.9;
}

.bcg-list li{
    margin-bottom:4px;
}

.bcg-list li span{
    color:inherit;
}

/* Two-column: heading label + content list (skills / courses) */

.bcg-split{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:24px 32px;
    margin-top:var(--space-section);
    align-items:start;
}

.bcg-split-label{
    font-weight:600;
    font-size:var(--fs-sub);
    color:var(--primary);
    line-height:1.3;
}

.bcg-split ul{
    padding-left:24px;
    color:var(--body-ink);
    font-size:var(--fs-body);
    line-height:1.85;
}

@media (max-width:760px){
    .bcg-split{
        grid-template-columns:1fr;
    }
}

/* ==========================
   "HOW TO CHOOSE" — text + image
========================== */

.bcg-media-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(24px,4vw,56px);
    align-items:center;
    margin-top:var(--space-section);
}

.bcg-media-row .bcg-figure{
    width:100%;
}

.bcg-steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:var(--space-section);
    text-align:center;
}

.bcg-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
}

.bcg-step-icon{
    width:82px;
    height:82px;
    border-radius:50%;
    background:var(--cream-200);
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Each glyph has its own aspect ratio in the Figma export (64x60.3,
   61.2x64, 30.3x64), so they are sized individually rather than
   squashed to one shared box. */

.bcg-step-icon img{
    display:block;
}

.bcg-icon-skills{
    width:40px;
    height:37.7px;
}

.bcg-icon-projects{
    width:38.2px;
    height:40px;
}

.bcg-icon-ready{
    width:19px;
    height:40px;
}

.bcg-step h3{
    font-size:var(--fs-sub);
    font-weight:600;
    color:var(--text);
}

@media (max-width:760px){
    .bcg-media-row,
    .bcg-steps{
        grid-template-columns:1fr;
    }
}

/* ==========================
   SALARY TABLE
========================== */

/* Cell spec straight off the Figma frame: header #FFC39B on a 1px black
   rule, body cells white on #B9B9B9, everything centred, 24px/130%
   Inter Medium. No zebra striping — the design has none. */

.bcg-table-wrap{
    margin-top:var(--space-section);
    overflow-x:auto;
}

.bcg-table{
    width:100%;
    min-width:860px;
    border-collapse:collapse;
    background:var(--white);
}

.bcg-table th,
.bcg-table td{
    text-align:center;
    vertical-align:middle;
    font-weight:500;
    line-height:1.3;
    color:var(--ink);
    padding:20px 24px;
}

.bcg-table th{
    background:#FFC39B;
    border:1px solid var(--ink);
    font-size:var(--fs-sub);
}

.bcg-table td{
    background:var(--white);
    border:1px solid #B9B9B9;
    font-size:var(--fs-body);
}

.bcg-table-note{
    margin-top:14px;
    font-size:calc(var(--fs-body) * .85);
    line-height:1.6;
    color:var(--ink-500);
}


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

.bcg-eval-step{
    margin-top:var(--space-gap);
}

.bcg-eval-step h3{
    font-size:var(--fs-sub);
    font-weight:600;
    color:var(--text);
    margin-bottom:8px;
}

.bcg-eval-step h3 .bcg-orange{
    color:var(--primary);
}

.bcg-eval-step p{
    font-size:var(--fs-body);
    line-height:1.7;
    color:var(--body-ink);
}

/* ==========================
   BAOIAM PROGRAMS
========================== */

.bcg-programs{
    margin-top:var(--space-section);
}

.bcg-programs h3{
    font-size:var(--fs-sub);
    font-weight:600;
    color:var(--text);
    margin-bottom:16px;
}

.bcg-programs ul{
    padding-left:24px;
    font-size:var(--fs-body);
    line-height:1.8;
    color:var(--body-ink);
}

.bcg-programs li{
    margin-bottom:14px;
}

/* ==========================
   START JOURNEY (closing)
========================== */

.bcg-close{
    background:var(--grad-strip);
    border-radius:var(--r-32);
    padding:clamp(28px,4vw,48px);
    margin-top:var(--space-section);
}

.bcg-close ol{
    padding-left:24px;
    font-size:var(--fs-body);
    line-height:1.85;
    color:var(--body-ink);
    margin:18px 0;
}

.bcg-close li{
    margin-bottom:6px;
}

.bcg-close p{
    font-size:var(--fs-body);
    line-height:1.7;
    color:var(--body-ink);
}

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

@media (max-width:900px){
    .bcg-hero-grid{
        grid-template-columns:1fr;
    }
    .bcg-hero-media{
        order:-1;
    }
}