/* =====================================================================
   Bootcamp detail page, below the hero (Views/Training/Bootcamp.cshtml). Loaded after boot-camp.css, so it only overrides.
   1. One set of rails: every section shares one 1160px content width, centred, with the same gutters.
   2. Curriculum: same palette, type and rhythm as the home page.
   3. Hero: a little alive (entrance, cursor light, tilt on the preview, count-up on the stats).
   ===================================================================== */
:is(#why, #projects, #tools, #curriculum, #eligibility, #outcomes, #certification, #pricing, #comparison, #experience, .leadacee, .hero-bg) {
    --bd-rail: 1160px;
    --bd-ink: #0f1b2d;
    --bd-body: #46566b;
    --bd-line: rgba(20, 90, 140, .18);
    --bd-glass: rgba(255, 255, 255, .7);
    --bd-a: #0891b2;
    --bd-b: #2563eb;
    --bd-glow: 8, 145, 178;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
[data-bs-theme="dark"] :is(#why, #projects, #tools, #curriculum, #eligibility, #outcomes, #certification, #pricing, #comparison, #experience, .leadacee, .hero-bg) {
    --bd-ink: #eef7ff;
    --bd-body: #b4c6d9;
    --bd-line: rgba(110, 190, 230, .22);
    --bd-glass: rgba(9, 28, 50, .6);
    --bd-a: #22d3ee;
    --bd-b: #3b82f6;
    --bd-glow: 34, 211, 238;
}

/* ---------- 1. rails ---------- */
:is(#why, #projects, #tools, #eligibility, #outcomes, #certification, #pricing, #comparison, #experience, .hero-bg) .container { max-width: calc(var(--bd-rail, 1160px) + 24px); }
:is(#why, #projects, #tools, #eligibility, #outcomes, #certification, #pricing, #comparison) .container .container { padding-inline: 0; max-width: none; }
/* the stored section html narrows its grids to 10/12 of the container; they take the full rail instead */
:is(#why, #projects, #tools, #eligibility, #outcomes, #certification, #pricing, #comparison) .col-lg-10.mx-auto { flex: 0 0 100%; width: 100%; max-width: 100%; }
/* a bootstrap row keeps its negative gutter margins, so its cards end exactly on the rail (the stored mx-auto would cancel them) */
:is(#eligibility, #certification) .row.col-lg-10.mx-auto { flex: none; width: auto; max-width: none; margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5) !important; }
:is(#why, #projects, #tools, #eligibility, #outcomes, #certification, #pricing, #comparison) .career-growth-section { max-width: var(--bd-rail); margin-inline: auto; }
#experience .rx-shell { width: min(100% - 24px, 1160px); }   /* same gutters as the page container */
#alumni-company-section .container, .alumni-company-section .container { max-width: calc(1160px + 24px); }

/* one type scale for section headings, capped so very wide screens do not blow them up */
:is(#why, #projects, #tools, #eligibility, #outcomes, #certification, #pricing, #comparison, #curriculum) :is(.why-title, .curriculum-title, .learning-title) {
    font-family: inherit; font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.12; font-weight: 800; letter-spacing: -.025em; text-wrap: balance;
}
:is(#why, #projects, #tools, #eligibility, #outcomes, #certification) .why-eyebrow { font-family: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .12em; }

/* ---------- 2. curriculum ---------- */
#curriculum .course-content-container { max-width: calc(var(--bd-rail) + 24px); padding: 2rem 12px 0; }
#curriculum .curriculum-heading-wrap { max-width: 760px; }
#curriculum .curriculum-badge { font-family: inherit; color: var(--bd-a); background: rgba(var(--bd-glow), .10); border: 1px solid rgba(var(--bd-glow), .28); }
#curriculum .curriculum-title span { background: linear-gradient(100deg, var(--bd-a), var(--bd-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#curriculum .course-footer { font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--bd-body); opacity: .9; }

#curriculum .week-list { gap: .875rem; }
#curriculum .week-card {
    border: 1px solid var(--bd-line); border-radius: 18px; background: var(--bd-glass); backdrop-filter: blur(10px); box-shadow: none;
    transition: border-color .25s, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
#curriculum .week-card:hover { border-color: rgba(var(--bd-glow), .55); transform: translateY(-2px); box-shadow: 0 18px 32px -22px rgba(var(--bd-glow), .7); }
#curriculum .week-header-btn { padding: 1.1rem 1.4rem; }
#curriculum .week-header-btn:hover:not(:disabled), [data-bs-theme="dark"] #curriculum .week-header-btn:hover:not(:disabled) { background: rgba(var(--bd-glow), .05); }
#curriculum .week-number {
    width: auto; min-width: 4.6rem; height: 2.5rem; padding: 0 .9rem; border-radius: 12px;
    font-family: inherit; font-size: .875rem; font-weight: 800; letter-spacing: .01em;
    color: var(--bd-a); background: linear-gradient(135deg, rgba(var(--bd-glow), .16), rgba(59, 130, 246, .16)); border: 1px solid rgba(var(--bd-glow), .28);
}
#curriculum .week-title { font-family: inherit; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; color: var(--bd-ink); }
#curriculum .week-header-btn:hover:not(:disabled) .week-title { color: var(--bd-a); }
#curriculum .week-subtitle, [data-bs-theme="dark"] #curriculum .week-subtitle { font-size: .84rem; color: var(--bd-body); }
#curriculum .week-subtitle .svgss { opacity: .75; }
#curriculum .free-preview-count { font-family: inherit; color: var(--bd-a); background: rgba(var(--bd-glow), .10); border: 1px solid rgba(var(--bd-glow), .3); }
#curriculum .week-tab-btn { font-family: inherit; font-weight: 600; }
#curriculum .week-tab-btn.active, [data-bs-theme="dark"] #curriculum .week-tab-btn.active { color: var(--bd-a); border-bottom-color: var(--bd-a); }
#curriculum .module-header-btn:hover { background: rgba(var(--bd-glow), .06); }
#curriculum .module-number.completed { background: rgba(var(--bd-glow), .16); color: var(--bd-a); }

/* the two buttons under the list use the same brand pair as the hero */
#curriculum .premium-view-btn { --btn-primary: #06b6d4; --btn-secondary: #3b82f6; font-family: inherit; min-height: 50px; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 16px 28px -14px rgba(8, 145, 178, .8); }
#curriculum .premium-download-btn { font-family: inherit; min-height: 50px; color: var(--bd-ink) !important; background: var(--bd-glass); border: 1px solid var(--bd-line); box-shadow: none; backdrop-filter: blur(8px); transition: transform .25s, border-color .25s, color .25s; }
#curriculum .premium-download-btn:hover { transform: translateY(-2px); border-color: var(--bd-a); color: var(--bd-a) !important; }

/* ---------- 3. hero ---------- */
.bootcamp-course-page .hero-bg { position: relative; isolation: isolate; padding-block: clamp(28px, 4.5vw, 64px) !important; }   /* the markup uses py-2, which left the badge touching the menu */
.bootcamp-course-page .hero-bg::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
    background: radial-gradient(520px circle at var(--mx, 30%) var(--my, 30%), rgba(var(--bd-glow), .16), transparent 60%);
}
.bootcamp-course-page .hero-bg.is-lit::before { opacity: 1; }

@keyframes bd-rise { from { opacity: 0; transform: translateY(16px); } }
.bootcamp-course-page .hero-bg .col-lg-7 > *, .bootcamp-course-page .hero-bg .col-lg-5 > * { animation: bd-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.bootcamp-course-page .hero-bg .col-lg-7 > :nth-child(2) { animation-delay: .08s; }
.bootcamp-course-page .hero-bg .col-lg-7 > :nth-child(3) { animation-delay: .16s; }
.bootcamp-course-page .hero-bg .col-lg-7 > :nth-child(4) { animation-delay: .24s; }
.bootcamp-course-page .hero-bg .col-lg-7 > :nth-child(5) { animation-delay: .32s; }
.bootcamp-course-page .hero-bg .col-lg-5 > :nth-child(1) { animation-delay: .12s; }
.bootcamp-course-page .hero-bg .col-lg-5 > :nth-child(2) { animation-delay: .26s; }

.bootcamp-course-page .hero-bg .glassy-card { transform: perspective(1000px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; will-change: transform; }
.bootcamp-course-page .hero-bg .glassy-card:hover { box-shadow: 0 30px 60px -28px rgba(var(--bd-glow), .55); }
.bootcamp-course-page .hero-bg .videoBtn img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.bootcamp-course-page .hero-bg .videoBtn:hover img { transform: scale(1.04); }
.bootcamp-course-page .hero-bg .prevideopanelplay { position: relative; display: inline-block; }
.bootcamp-course-page .hero-bg .prevideopanelplay::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); animation: bd-ring 2.4s ease-out infinite; pointer-events: none; }
@keyframes bd-ring { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

.bootcamp-course-page .hero-stat-card { position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s, box-shadow .3s; }
.bootcamp-course-page .hero-stat-card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(180px circle at var(--sx, 50%) var(--sy, 50%), rgba(var(--bd-glow), .18), transparent 70%);
}
.bootcamp-course-page .hero-stat-card:hover { transform: translateY(-3px); border-color: rgba(var(--bd-glow), .5); box-shadow: 0 18px 30px -20px rgba(var(--bd-glow), .7); }
.bootcamp-course-page .hero-stat-card:hover::after { opacity: 1; }
.bootcamp-course-page .hero-stat-card h3 { font-family: inherit; font-variant-numeric: tabular-nums; }
.bootcamp-course-page .hero-stat-card p { font-family: inherit; }

@media (max-width: 991.98px) { .bootcamp-course-page .hero-bg .glassy-card { transform: none; } }
@media (max-width: 575.98px) {
    #curriculum .week-header-btn { padding: 1rem; }
    #curriculum .week-title { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .bootcamp-course-page .hero-bg .col-lg-7 > *, .bootcamp-course-page .hero-bg .col-lg-5 > *, .bootcamp-course-page .hero-bg .prevideopanelplay::after { animation: none; }
    .bootcamp-course-page .hero-bg .glassy-card, #curriculum .week-card, .bootcamp-course-page .hero-stat-card { transition: none; }
}

/* "Preview" on a lab, note, test or Q&A row: same pill as the free video lessons */
#curriculum .lab-btn.preview { color: var(--bd-a); background: rgba(var(--bd-glow), .10); border: 1px solid rgba(var(--bd-glow), .32); border-radius: 999px; font-weight: 700; transition: background-color .2s, color .2s, border-color .2s; }
#curriculum .lab-btn.preview:hover, #curriculum .lab-btn.preview:focus-visible { color: #04222a; background: var(--bd-a); border-color: var(--bd-a); }