/* The reset below must not include #bc-section itself — it was zeroing this
   section's own padding, so the bootcamp block sat flush against its
   neighbours while every other section had breathing room. */

#bc-section *{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:"Inter",sans-serif;
}

/* The wildcard above forces Inter onto everything in the section, which
   overrode the icon font on any Font Awesome glyph here — they rendered as
   tofu. Icons carry their own family, so they opt back out. */

#bc-section .fa,
#bc-section .fas,
#bc-section .far,
#bc-section .fab,
#bc-section [class^="fa-"],
#bc-section [class*=" fa-"]{
    font-family:"Font Awesome 6 Free","Font Awesome 6 Brands";
}

#bc-section{
    box-sizing:border-box;
    background:#fff;
    padding:var(--space-section) 20px;
    overflow:hidden;
    font-family:"Inter",sans-serif;
}

/* Widened from 1200px. The panel on .bc-grid adds up to 40px of padding a
   side, which came straight out of the columns and pushed the longest topic
   badge ("Market Research & Customer Validation") onto a second line — the
   one thing the badge rules below are specifically tuned to avoid. The extra
   80px hands that width back, so the panel costs the content nothing. Still
   inside the site's 1400px container. */

#bc-section .bc-container{
    max-width:1280px;
    width:100%;
    margin:auto;
    color:#1a1a1a;
}

#bc-section .bc-header{
    margin-bottom:var(--space-block);
    text-align:center;
}

#bc-section .bc-header h1{
    font-size:var(--fs-section);
    font-weight:800;
    color:var(--ink);
    margin-bottom:20px;
    line-height:1.15;
    max-width:900px;
    margin-inline:auto;
    position:relative;
}

#bc-section .bc-header h1 span{
    color:#ff6b00;
}


#bc-section .bc-header p{
    color:var(--ink-500);
    font-size:var(--fs-lead);
    max-width:820px;
    margin:auto;
    line-height:1.6;
    font-weight:400;
}

/* The two columns sit inside one panel rather than floating loose on the page,
   so the whole bootcamp block reads as a single unit.

   The panel is a warm wash, not white: the pieces inside it (the image frame,
   the topic badges, the curriculum box) are already white cards, and on a
   white panel they would have flattened into it. The tint gives them
   something to sit on.

   Four background layers, painted front to back:
     1. a fine dot grid, the same texture the curriculum box already uses,
        so the panel has some surface rather than being flat colour
     2. a warm glow off the top-right corner
     3. a second, cooler glow off the bottom-left, so the two corners differ
     4. the base diagonal wash

   The glow in the shadow is orange rather than black — a grey drop shadow
   under a peach panel reads as dirt. */

#bc-section .bc-grid{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:36px;
    align-items:start;

    /* Below ~1320px the container is bounded by the viewport, not by its own
       max-width, so every pixel of this padding comes straight out of the
       columns. Kept modest through the middle of the range for that reason,
       and only generous once there is spare width to take it from. */
    padding:clamp(14px,1.5vw,28px);
    border:1px solid rgba(255,102,0,.18);
    border-radius:var(--radius-xl);
    background:
        radial-gradient(rgba(255,102,0,.13) 1.2px, transparent 1.2px) 0 0 / 24px 24px,
        radial-gradient(115% 85% at 100% 0%, rgba(255,102,0,.12) 0%, rgba(255,102,0,0) 58%),
        radial-gradient(95% 75% at 0% 100%, rgba(255,138,61,.10) 0%, rgba(255,138,61,0) 60%),
        linear-gradient(158deg,#FFF8F3 0%,#FFFFFF 52%,#FFF5ED 100%);
    box-shadow:
        0 18px 48px rgba(255,102,0,.10),
        0 2px 10px rgba(0,0,0,.04);
}

#bc-section .bc-preview-card{
    display:flex;
    flex-direction:column;
    opacity:1;
    transform:translateY(0);
    transition:opacity .25s ease-out,transform .25s ease-out;
}

#bc-section .bc-preview-card.fade-out{
    opacity:0;
    transform:translateY(8px);
}

/* --------------------------------------------------------------
   The slot is a 3D object now. The tilt lives here rather than on
   .bc-preview-card because that element already animates transform for the
   carousel's fade-out, and two transforms on one element fight.
-------------------------------------------------------------- */

#bc-section .bc-preview-card{
    perspective:900px;
}

#bc-section .bc-image-container{
    transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
    transform-style:preserve-3d;
    transition:transform 300ms cubic-bezier(.22,1,.36,1);
    will-change:transform;
    width:100%;
    aspect-ratio:16/9;
    border-radius:12px;
    margin-bottom:18px;
    display:block;
    overflow:hidden;
    position:relative;
    background:#fff;
}

#bc-section .bc-image-container img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    border-radius:12px;
    display:block;
}

#bc-section .bc-preview-card h2{
    font-size:1.65rem;
    font-weight:800;
    color:#000;
    margin-bottom:12px;
    line-height:1.2;
}

#bc-section .bc-preview-card p{
    color:#666;
    font-size:.9rem;
    line-height:1.55;
    margin-bottom:20px;
    min-height:62px;
}

#bc-section .bc-tags{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:24px;
}

#bc-section .bc-tag{
    background:#fff3e6;
    color:#ff6b00;
    padding:8px 16px;
    border-radius:8px;
    font-size:.82rem;
    font-weight:700;
}

#bc-section .bc-enroll-btn{
    width:100%;
    /* The arrow leads the label, so the two need centring as a pair with a
       gap between them rather than the label sitting alone. */
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:#ff6b00;
    color:#fff;
    border:none;
    padding:14px;
    border-radius:10px;
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
    box-shadow:0 4px 14px rgba(255,107,0,.3);
}

#bc-section .bc-enroll-btn:hover{
    background:#e56000;
}
#bc-section .bc-details{
    display:flex;
    flex-direction:column;
}

#bc-section .bc-learn-title{
    color:#ff6b00;
    font-size:1.3rem;
    font-weight:800;
    margin-bottom:18px;
}

#bc-section .bc-topics-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-bottom:30px;
    transition:opacity .25s ease;
}

#bc-section .bc-topics-grid.fade-out{
    opacity:0;
}

/* One badge per row through the middle of the range.

   Measured, per width, against the longest topic ("Market Research & Customer
   Validation"): from 951px — where .bc-grid splits into two columns and this
   list suddenly has half the width — through about 1100px, two columns cannot
   hold it on one line, and up to ~1280px they only clear it by 1-5px, which
   is inside the margin a different font render would move it by. Below 951px
   the grid is stacked and two columns fit comfortably again, so the rule is
   bounded on both sides.

   Dropping the type to 11px was the other way out and was measured too: it
   still wrapped at 960px and 1000px, and only cleared 1024px by 2px — so it
   gave up legibility without actually fixing it. */

@media (min-width:951px) and (max-width:1279px){

    #bc-section .bc-topics-grid{
        grid-template-columns:1fr;
    }

}

#bc-section .bc-topic-badge{
    background:#f7f9fa;
    border:1px solid #ededed;
    /* Horizontal padding trimmed from 16px. The longest topic ("Market
       Research & Customer Validation") measures 269px against the 268px the
       badge left for text — it wrapped by a single pixel while every other
       badge stayed on one line. 12px gave 276px, so the longest string
       cleared with the same ~7px of headroom the next-longest already had.
       Trimmed again to 10px when the panel went on .bc-grid: the panel's own
       padding took a few pixels back out of the columns, and this returns
       them. Vertical padding is unchanged, so the badges keep their height. */
    padding:12px 10px;
    border-radius:10px;
    /* Fluid so the longest topic keeps to one line as the two-column grid
       narrows on smaller laptops. At a flat .88rem (14.08px) it fits only
       from ~1280px up; below that the badge loses width but the type did
       not, and the string wrapped. Caps at the original 14.08px so nothing
       changes on a full-size desktop. Floor raised from 11px, the smallest
       size the badges ever actually reach in practice — re-checked against
       "Market Research & Customer Validation" at 320px, still one line. */
    font-size:clamp(11.5px, 1vw, 13px);
    font-weight:600;
    color:#1a1a1a;
    transition:.25s;
}

#bc-section .bc-topic-badge:hover{
    border-color:#ff6b00;
    transform:translateY(-2px);
}

#bc-section .bc-curriculum-box{
    border:1px solid #eaeaea;
    border-radius:16px;
    padding:22px;
    background:#fff;
    box-shadow:0 6px 20px rgba(0,0,0,.02);
    position:relative;
}

#bc-section .bc-curriculum-box::before{
    content:"";
    position:absolute;
    top:20px;
    right:24px;
    width:35px;
    height:25px;
    background-image:radial-gradient(#e0e0e0 1.5px,transparent 1.5px);
    background-size:6px 6px;
}

#bc-section .bc-curriculum-box h3{
    font-size:1.05rem;
    font-weight:800;
    color:#000;
    margin-bottom:24px;
}

#bc-section .bc-phase-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

#bc-section .bc-phase-card{
    border:1px solid #eaeaea;
    border-radius:12px;
    padding:12px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#fff;
    cursor:pointer;
    position:relative;
    transition:.25s;
}

#bc-section .bc-phase-card:hover{
    border-color:#ff6b00;
    box-shadow:0 4px 12px rgba(255,107,0,.08);
}

#bc-section .bc-phase-card.active{
    border-color:#ff6b00;
    box-shadow:0 4px 16px rgba(255,107,0,.1);
}

#bc-section .bc-phase-card::before{
    content:"";
    position:absolute;
    left:12px;
    width:36px;
    height:36px;
    background:radial-gradient(circle,rgba(255,107,0,.12) 0%,transparent 70%);
    pointer-events:none;
}

#bc-section .bc-phase-info{
    padding-left:12px;
}

#bc-section .bc-phase-number{
    display:block;
    color:#ff6b00;
    font-size:.8rem;
    font-weight:700;
    margin-bottom:3px;
}

#bc-section .bc-phase-title{
    display:flex;
    align-items:center;
    gap:6px;
    color:#444;
    font-size:.88rem;
    font-weight:700;
}

#bc-section .bc-phase-card.active .bc-phase-title{
    color:#000;
}

#bc-section .bc-checkmark{
    color:#22c55e;
    font-weight:800;
    font-size:1rem;
}

#bc-section .bc-phase-icon{
    width:36px;
    height:26px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid #ff6b00;
    border-radius:6px;
    color:#ff6b00;
    background:#fff;
    font-weight:800;
    font-size:.85rem;
    flex-shrink:0;
    box-shadow:0 2px 6px rgba(255,107,0,.15);
}
@media (max-width:950px){

    #bc-section .bc-grid{
        grid-template-columns:1fr;
        gap:48px;
    }

    #bc-section .bc-preview-card,
    #bc-section .bc-details{
        width:100%;
    }

}

@media (max-width:600px){

    #bc-section{
        padding:var(--space-section) 16px;
    }

    #bc-section .bc-header{
    }

    #bc-section .bc-header h1{
        font-size:2.2rem;
        line-height:1.3;
    }

    #bc-section .bc-header p{
        font-size:.95rem;
    }

    #bc-section .bc-preview-card h2{
        font-size:1.7rem;
    }

    #bc-section .bc-topics-grid{
        grid-template-columns:1fr;
    }

    #bc-section .bc-curriculum-box{
        padding:20px;
    }

    #bc-section .bc-phase-card{
        padding:14px 18px;
    }

    #bc-section .bc-enroll-btn{
        padding:16px;
        font-size:1rem;
    }

}

@media (max-width:420px){

    #bc-section .bc-header h1{
        font-size:1.9rem;
    }

    #bc-section .bc-preview-card h2{
        font-size:1.45rem;
    }

    #bc-section .bc-tag{
        width:100%;
        text-align:center;
    }

    #bc-section .bc-phase-title{
        font-size:.88rem;
    }

}

#bc-section .bc-preview-card,
#bc-section .bc-topics-grid,
#bc-section .bc-phase-card,
#bc-section .bc-topic-badge,
#bc-section .bc-enroll-btn{
    will-change:transform,opacity;
}

#bc-section *,
#bc-section *::before,
#bc-section *::after{
    box-sizing:border-box;
}
/* While the pointer is over it the tilt must track, not ease -- the long
   curve above is for the spring back once the pointer leaves. */

#bc-section .bc-image-container.is-tracking{
    transition-duration:70ms;
    transition-timing-function:linear;
}

/* A 1px gradient rim instead of the flat #eaeaea border: painted into the
   padding box and masked out of the content box, so it reads as light
   catching an edge rather than as a drawn line. */

#bc-section .bc-image-container::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:4;
    padding:1px;
    border-radius:inherit;
    background:linear-gradient(145deg,
        rgba(255,102,0,.42),
        rgba(255,102,0,.12) 42%,
        rgba(0,0,0,.05) 72%,
        rgba(255,102,0,.30));
    pointer-events:none;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;
}

@media (prefers-reduced-motion:reduce){

    #bc-section .bc-orbit{
        animation:none;
    }

    #bc-section .bc-image-container{
        transition:none;
        transform:none;
    }

}

/* ==========================================
   LEGIBILITY
   Topic badges measured 11.5px.
========================================== */

@media (max-width:768px), (hover:none){

    /* #bc-section .bc-topic-badge is an ID selector; a class rule cannot
       outrank it however late it comes in the file. Matched, not guessed. */
    #bc-section .bc-topic-badge{
        font-size:12px;
    }

}