/* =====================================================================
   Bootcamp detail page (Views/Training/Bootcamp.cshtml): hero type, badge and buttons, matched to the home hero
   (Plus Jakarta Sans, cyan to blue accent, gradient pill buttons). Loaded after boot-camp.css, so it only overrides.
   ===================================================================== */
.bootcamp-course-page {
    --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"] .bootcamp-course-page {
    --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;
}

/* badge: a soft pill with a live dot */
.bootcamp-course-page .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: .5rem 1rem !important;
    font-size: .8125rem; font-weight: 700; letter-spacing: .01em;
    color: var(--bd-a); background: rgba(var(--bd-glow), .10); border: 1px solid rgba(var(--bd-glow), .28);
    box-shadow: 0 0 0 4px rgba(var(--bd-glow), .05);
}

/* title: tighter, smaller, one gradient from ink to the brand blue */
.bootcamp-course-page .hero-title {
    font-family: inherit; font-size: clamp(2.1rem, 3.7vw, 3.35rem); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; max-width: 680px;
    text-wrap: balance;
}
.bootcamp-course-page .hero-title-gradient { background: linear-gradient(100deg, #0f1b2d 0%, #0b6f8c 52%, #2563eb 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-bs-theme="dark"] .bootcamp-course-page .hero-title-gradient { background: linear-gradient(100deg, #ffffff 0%, #8ae8f5 50%, #60a5fa 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.bootcamp-course-page .hero-description { font-family: inherit; font-size: 1.0625rem; line-height: 1.65; font-weight: 500; letter-spacing: 0; color: var(--bd-body); max-width: 640px; }
.bootcamp-course-page .hero-features { font-family: inherit; }
.bootcamp-course-page .hero-features > div span:last-child { font-size: .9rem; font-weight: 600; letter-spacing: 0; color: var(--bd-body); }

/* buttons */
.bc-btn {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px;
    font-family: inherit; font-size: .9375rem; font-weight: 700; line-height: 1; letter-spacing: .005em; white-space: nowrap; cursor: pointer;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s, color .25s, background-color .25s;
}
.bc-btn:focus-visible { outline: 2px solid var(--bd-a); outline-offset: 3px; }
.bc-btn:active { transform: translateY(0) scale(.98); }

.bc-btn--main { padding: 0 26px 0 7px; color: #fff; background: linear-gradient(135deg, #06b6d4, #3b82f6); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 16px 28px -14px rgba(8, 145, 178, .8); }
.bc-btn--main::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.bc-btn--main:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 22px 34px -14px rgba(37, 99, 235, .8); }
.bc-btn--main:hover::after { transform: translateX(120%); }
.bc-btn__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .22); font-size: 1.05rem; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.bc-btn--main:hover .bc-btn__ic { transform: rotate(45deg); }

.bc-btn--ghost { padding: 0 22px; color: var(--bd-ink); background: var(--bd-glass); border: 1px solid var(--bd-line); backdrop-filter: blur(8px); }
.bc-btn--ghost i { font-size: 1rem; color: var(--bd-a); transition: transform .25s; }
.bc-btn--ghost:hover { transform: translateY(-2px); color: var(--bd-a); border-color: var(--bd-a); box-shadow: 0 14px 26px -16px rgba(var(--bd-glow), .7); }
.bc-btn--ghost:hover i { transform: translateX(4px); }

@media (max-width: 575.98px) {
    .bootcamp-course-page .hero-title { font-size: clamp(1.85rem, 8vw, 2.4rem); }
    .bc-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .bc-btn, .bc-btn *, .bc-btn::after { transition: none !important; }
    .bc-btn--main:hover, .bc-btn--ghost:hover { transform: none; }
}

/* the hero row uses g-5 gutters, which pushed the page 11px wider than a phone */
.bootcamp-course-page .hero-bg { overflow-x: clip; }