/* Final cross-device overrides for the Frontend and Full Stack course pages. */
.FullStack--fullstack-premium .frontend-preview__video{opacity:1!important}
.FullStack--fullstack-premium .frontend-curriculum__chapter summary{grid-template-columns:3.1rem 3.35rem minmax(0,1fr) auto 2.2rem}
.FullStack--fullstack-premium .frontend-curriculum__arrow{grid-column:-1}
.FullStack--fullstack-premium .frontend-curriculum__chapter--preview{border-color:#dfe4f1}
.FullStack--fullstack-premium .frontend-curriculum__chapter--preview .frontend-curriculum__chapter-icon{color:#496dc2;background:linear-gradient(145deg,#edf5ff,#eeeaff)}
.FullStack--fullstack-premium .frontend-instructor{grid-template-columns:minmax(13rem,.26fr) minmax(0,1fr);gap:clamp(1.8rem,3vw,3.2rem);min-height:19rem;padding:clamp(2rem,3.5vw,3.2rem)}
.FullStack--fullstack-premium .frontend-instructor__body{grid-template-columns:minmax(0,1fr);width:100%}
.FullStack--fullstack-premium .frontend-instructor__body>p{max-width:none}
.FullStack--fullstack-premium .frontend-comments__pagination{gap:.75rem;padding:.55rem;border:1px solid #e1e6f1;border-radius:1.35rem;background:#f8faff;box-shadow:0 .75rem 1.8rem rgba(47,58,103,.07)}
.FullStack--fullstack-premium .frontend-comments__pagination a{width:4.3rem;height:4.3rem;border-radius:1rem;font-size:1.05rem}
.FullStack--fullstack-premium .frontend-comments__pagination .frontend-comments__pagination-label{height:4.3rem;min-width:7.5rem;padding-inline:1.15rem}

/* Remaining course-page refinements. */
.FullStack--fullstack-premium .frontend-comment__meta b,
.FullStack--frontend .frontend-comment__meta b,
.FullStack .comments__Content-Name-Family {
  display: inline-block;
  overflow: visible;
  padding-block: .12em;
  line-height: 1.65;
}

.FullStack--fullstack-premium .frontend-curriculum__chapter{overflow:visible;padding:1rem}
.FullStack--fullstack-premium .frontend-curriculum__chapter summary{grid-template-columns:3.1rem 3.35rem minmax(0,1fr) auto 2.75rem!important;overflow:visible;padding:1rem 0}
.FullStack--fullstack-premium .frontend-curriculum__arrow{position:relative;display:grid!important;width:2.35rem;height:2.35rem;min-width:2.35rem;place-items:center;justify-self:center;margin:0 .15rem;overflow:visible;border-radius:.75rem;font-size:.9rem;line-height:1;transform-origin:center}
.FullStack--fullstack-premium .frontend-curriculum__arrow::before{display:block;line-height:1}
.FullStack--fullstack-premium .frontend-curriculum__lessons{overflow:hidden;border-radius:0 0 1.4rem 1.4rem}

.FullStack--fullstack-premium .frontend-curriculum__lesson--locked .frontend-curriculum__lesson-title b{font-size:1.12rem!important;line-height:1.7}
html[data-theme="dark"] .FullStack--fullstack-premium .frontend-curriculum__lesson--locked .frontend-curriculum__lesson-title b{color:#ffd1d9!important}

html[data-theme="dark"] .FullStack--fullstack-premium .ail-project-showcase__all-link{border:1px solid #8ef3ff!important;color:#031923!important;background:#10364c !important;box-shadow:0 0 .7rem rgba(103,232,249,.36),0 .8rem 1.8rem rgba(14,165,233,.28)!important;text-shadow:none}
html[data-theme="dark"] .FullStack--fullstack-premium .ail-project-showcase__all-link:hover{color:#10364c !important;background:linear-gradient(135deg,#cffafe,#67e8f9)!important;box-shadow:0 0 1.15rem rgba(103,232,249,.58),0 1rem 2.1rem rgba(14,165,233,.34)!important;filter:none}
html[data-theme="dark"] .FullStack--fullstack-premium .js-course-add-basket:not(.dm-final-course-cta__button){border-color:#8ef3ff!important;color:#06d6ee !important;background:#10364c !important;box-shadow:0 0 .65rem rgba(103,232,249,.32),0 .75rem 1.65rem rgba(14,165,233,.25)!important;text-shadow:none}
html[data-theme="dark"] .FullStack--fullstack-premium .js-course-add-basket:not(.dm-final-course-cta__button):hover{color:#10364c!important;background:linear-gradient(135deg,#cffafe,#67e8f9)!important;box-shadow:0 0 1rem rgba(103,232,249,.52),0 1rem 2rem rgba(14,165,233,.3)!important;filter:none}

html[data-theme="dark"] .FullStack--fullstack-premium .frontend-comments__pagination a.is-active{border-color:#bae6fd!important;color:#fff!important;background:linear-gradient(135deg,#0369a1,#0284c7)!important;box-shadow:0 0 0 .2rem rgba(56,189,248,.2),0 .55rem 1.25rem rgba(2,132,199,.38)!important;text-shadow:0 1px 1px rgba(0,0,0,.35)}

html[data-theme="dark"] .FullStack--fullstack-premium .dm-final-course-cta__button.js-course-add-basket{position:relative;overflow:hidden;border:1px solid #67e8f9!important;color:#eaffff!important;background:linear-gradient(110deg,#0369a1,#0891b2 52%,#0e7490)!important;box-shadow:0 0 .55rem rgba(34,211,238,.55),0 0 1.45rem rgba(14,165,233,.25),0 .85rem 1.8rem rgba(0,0,0,.3)!important;text-shadow:0 1px 1px rgba(0,34,48,.45)}
html[data-theme="dark"] .FullStack--fullstack-premium .dm-final-course-cta__button.js-course-add-basket:hover{border-color:#cffafe!important;color:#fff!important;background:linear-gradient(110deg,#0284c7,#06b6d4 52%,#0891b2)!important;box-shadow:0 0 .9rem rgba(103,232,249,.75),0 0 2rem rgba(14,165,233,.4),0 1rem 2.1rem rgba(0,0,0,.34)!important;transform:translateY(-2px)}
html[data-theme="dark"] .FullStack--fullstack-premium .dm-final-course-cta__button.js-course-add-basket:focus-visible{outline:3px solid rgba(103,232,249,.38);outline-offset:3px}

html{scrollbar-width:thin;scrollbar-color:#6d5bd0 #edf1f8}
html::-webkit-scrollbar{width:12px}
html::-webkit-scrollbar-track{background:linear-gradient(180deg,#eef2f8,#f8f9fc);border-inline-start:1px solid #e0e5ef}
html::-webkit-scrollbar-thumb{min-height:4.5rem;border:3px solid transparent;border-radius:999px;background:linear-gradient(180deg,#8b5cf6,#4f7de8) padding-box;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
html::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#7c3aed,#2563eb) padding-box}
html[data-theme="dark"]{scrollbar-color:#38bdf8 #091522}
html[data-theme="dark"]::-webkit-scrollbar-track{background:linear-gradient(180deg,#081421,#0d1d2d);border-inline-start-color:#1f3347}
html[data-theme="dark"]::-webkit-scrollbar-thumb{border-color:transparent;background:linear-gradient(180deg,#67e8f9,#0ea5e9 52%,#6366f1) padding-box;box-shadow:0 0 .75rem rgba(56,189,248,.32)}
html[data-theme="dark"]::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#a5f3fc,#38bdf8 52%,#818cf8) padding-box}

@media(max-width:1199.98px) and (min-width:768px){.FullStack--fullstack-premium .frontend-instructor{grid-template-columns:15.5rem minmax(0,1fr)!important;gap:2rem!important;width:100%;min-height:21rem;padding:2rem!important}.FullStack--fullstack-premium .frontend-instructor__avatar{width:100%;min-width:0;align-self:stretch;padding:1rem!important}.FullStack--fullstack-premium .frontend-instructor__avatar img{width:13.5rem!important;height:13.5rem!important;max-width:100%;margin:auto}.FullStack--fullstack-premium .frontend-instructor__body{align-content:center;width:100%;min-width:0}.FullStack--fullstack-premium .frontend-instructor__body>p{max-width:none!important}.FullStack--fullstack-premium .frontend-instructor__body>div{width:100%}}
@media(max-width:991.98px){.FullStack--frontend .ail-project-showcase__list{align-items:flex-start!important}.FullStack--frontend .ail-project-showcase__item,.FullStack--frontend .ail-project-showcase__item.is-active{height:auto!important;min-height:0!important;max-height:none!important;align-self:flex-start!important;align-content:center;grid-auto-rows:auto;padding:.85rem!important;flex-grow:0!important}.FullStack--frontend .ail-project-showcase__item-copy{align-self:center}.FullStack--frontend .ail-project-showcase__item-copy strong,.FullStack--frontend .ail-project-showcase__item-copy small{overflow:visible;text-overflow:clip;white-space:normal;line-height:1.65}.FullStack--frontend .ail-project-showcase__item-copy small{margin-top:.15rem}.FullStack--fullstack-premium .frontend-curriculum__arrow{margin-left:.25rem}}
@media(max-width:767.98px){.FullStack--fullstack-premium .frontend-curriculum__chapter summary{grid-template-columns:2.75rem 3rem minmax(0,1fr) 2.55rem!important;}.FullStack--fullstack-premium .frontend-curriculum__arrow{width:2.25rem;height:2.25rem;min-width:2.25rem;margin-left:.2rem}.FullStack--fullstack-premium .frontend-curriculum__lesson--locked .frontend-curriculum__lesson-title b{font-size:1.06rem!important}.FullStack--frontend .ail-project-showcase__item,.FullStack--frontend .ail-project-showcase__item.is-active{grid-template-columns:2.2rem 2.55rem minmax(0,1fr) 1.8rem!important;gap:.6rem!important}.FullStack--fullstack-premium .frontend-instructor{grid-template-columns:13rem minmax(0,1fr)!important;gap:1.5rem!important;width:100%;padding:1.6rem!important}.FullStack--fullstack-premium .frontend-instructor__avatar{width:100%;padding:.8rem!important}.FullStack--fullstack-premium .frontend-instructor__avatar img{width:11.5rem!important;height:11.5rem!important;max-width:100%;margin:auto}.FullStack--fullstack-premium .frontend-instructor__body{width:100%;min-width:0}}
@media(max-width:575.98px){.FullStack--fullstack-premium .frontend-instructor{grid-template-columns:1fr!important;gap:1.25rem!important;padding:1.35rem!important}.FullStack--fullstack-premium .frontend-instructor__avatar{width:100%;padding:1.1rem!important}.FullStack--fullstack-premium .frontend-instructor__avatar img{width:12rem!important;height:12rem!important;margin:auto}.FullStack--fullstack-premium .frontend-instructor__body{width:100%}.FullStack--frontend .ail-project-showcase__item,.FullStack--frontend .ail-project-showcase__item.is-active{padding:.72rem!important}.FullStack--fullstack-premium .frontend-curriculum__arrow{margin-left:.1rem}}
@media(max-width:991.98px){.FullStack--fullstack-premium .frontend-hero__info{width:100%;max-width:none;margin-inline:0}.FullStack--fullstack-premium .frontend-curriculum__timeline{position:relative;max-height:34rem;overflow:hidden}.FullStack--fullstack-premium .frontend-curriculum__timeline.is-expanded{max-height:none;overflow:visible}.FullStack--fullstack-premium .frontend-curriculum__path .frontend-curriculum__expand{display:flex;width:100%;margin:.75rem 0 1rem}.FullStack--fullstack-premium .frontend-instructor{grid-template-columns:11rem minmax(0,1fr)}}
@media(max-width:767.98px){.FullStack--fullstack-premium .frontend-curriculum__chapter summary{grid-template-columns:2.75rem 3rem minmax(0,1fr) 2.1rem;gap:.75rem}}
@media(max-width:575.98px){.FullStack--fullstack-premium .frontend-instructor{grid-template-columns:1fr}.FullStack--fullstack-premium .frontend-comment__content>p{font-size:.88rem;line-height:1.9}.FullStack--fullstack-premium .frontend-comment__reply p{font-size:.84rem;line-height:1.85}.FullStack--fullstack-premium .frontend-comments__pagination a{width:3.75rem;height:3.75rem;font-size:.9rem}.FullStack--fullstack-premium .frontend-comments__pagination .frontend-comments__pagination-label{min-width:6.4rem;height:3.75rem;padding-inline:.75rem}html[data-theme] .header .main-Header__Content-Left{align-items:center!important;gap:.45rem}html[data-theme] .header :is(.main-Header__Content-Items,.main-Header__Login){align-self:center;height:3.65rem;min-height:3.65rem;margin:0}html[data-theme] .header .main-Header__Content-Items{flex:0 0 3.65rem;padding:0}html[data-theme] .header .main-Header__Login{display:inline-flex;align-items:center;justify-content:center;padding-block:0;line-height:1}}

/* Keep long course roadmaps within one viewport until the learner requests more. */
.FullStack--fullstack-premium .frontend-curriculum__timeline{position:relative;max-height:70vh;overflow:hidden;transition:max-height .3s ease}
.FullStack--fullstack-premium .frontend-curriculum__timeline::after{position:absolute;right:0;bottom:0;left:0;height:7rem;background:linear-gradient(transparent,#fff);content:"";pointer-events:none}
.FullStack--fullstack-premium .frontend-curriculum__timeline.is-expanded{max-height:none;overflow:visible}
.FullStack--fullstack-premium .frontend-curriculum__timeline.is-expanded::after{display:none}
.FullStack--fullstack-premium .frontend-curriculum__path .frontend-curriculum__expand{display:flex;width:100%;margin:.75rem 0 1rem}
html[data-theme="dark"] .FullStack--fullstack-premium .frontend-curriculum__timeline::after{background:linear-gradient(transparent,#111b2e)}

/* The same progressive disclosure is available to roadmaps on standard course pages. */
.FullStack__Body-Left-Content[data-course-roadmap-list]{max-height:70vh;overflow:hidden;transition:max-height .3s ease}
.FullStack__Body-Left-Content[data-course-roadmap-list].is-expanded{max-height:none;overflow:visible}
.course-roadmap-expand{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;margin:1rem 0 0;padding:.85rem 1rem;border:1px solid #b9dced;border-radius:1rem;color:#126b8b;background:#f3fbff;font:800 1rem inherit;cursor:pointer}
.course-roadmap-expand[hidden]{display:none}
.course-roadmap-expand i{transition:transform .2s ease}
.course-roadmap-expand.is-expanded i{transform:rotate(180deg)}
html[data-theme="dark"] .course-roadmap-expand{border-color:#2f6b86;color:#a5f3fc;background:#103249}

/* Keep the roadmap inside the full course-description reader concise, too. */
.dm-details-section--learn [data-description-roadmap]{position:relative;max-height:70vh;overflow:hidden;transition:max-height .3s ease}
.course-desc-read .dm-details-section--learn [data-description-roadmap]{max-height:34rem}
.dm-details-section--learn [data-description-roadmap]::after{position:absolute;right:0;bottom:0;left:0;height:7rem;background:linear-gradient(transparent,#fff);content:"";pointer-events:none}
.dm-details-section--learn [data-description-roadmap].is-expanded{max-height:none;overflow:visible}
.dm-details-section--learn [data-description-roadmap].is-expanded::after{display:none}
.dm-roadmap-expand{display:flex;font-size:1.1rem;align-items:center;justify-content:center;gap:.6rem;width:100%;margin:1rem 0 0;padding:.85rem 1rem;border:1px solid #b9dced;border-radius:1rem;color:#126b8b;background:#f3fbff;font:800 1rem inherit;cursor:pointer}
.dm-roadmap-expand[hidden]{display:none}
.dm-roadmap-expand i{transition:transform .2s ease}
.dm-roadmap-expand.is-expanded i{transform:rotate(180deg)}
html[data-theme="dark"] .dm-details-section--learn [data-description-roadmap]::after{background:linear-gradient(transparent,#111b2e)}
html[data-theme="dark"] .dm-roadmap-expand{border-color:#2f6b86;color:#a5f3fc;background:#103249}
@media(max-width:767.98px){
  .course-desc-read .dm-details-section--learn [data-description-roadmap]{max-height:30rem}
  .course-desc-read .dm-details-section--learn [data-description-roadmap].is-expanded{
    max-height:none;
    overflow:visible;
  }
}
/* Comprehensive course pages: keep below-the-fold layout work off the
 * critical rendering path. The browser renders each section when it reaches
 * the viewport while retaining a stable estimated scroll footprint. */
@supports (content-visibility: auto) {
  body.standard-course-page :is(.coursePage__Description, .DevFooter) {
    content-visibility: auto;
    contain-intrinsic-size: auto 4200px;
  }

  body.ail-page :is(
      .ail-why-now,
      .ail-ai-tools,
      .ail-income-paths,
      .ail-intro-video,
      .ail-project-showcase,
      .ail-about,
      .ail-engineering-bridge,
      .ail-full-course-offer,
      .ail-stats,
      .ail-bottom-cta
    ),
  body.course-offer-page :is(
      .frontend-followup,
      .fullstack-description-cta,
      .frontend-preview,
      .ail-project-showcase,
      .frontend-preview-cta,
      .ail-full-course-offer,
      .frontend-curriculum
    ),
  body:is(.ail-page, .course-offer-page) .DevFooter {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }

  body.course-offer-page .frontend-curriculum {
    contain-intrinsic-size: auto 1400px;
  }
}

/* WCAG AA contrast corrections scoped to comprehensive course landings.
 * Geometry and component styling stay unchanged. */
html[data-theme="light"] body.course-offer-page .frontend-fit__art > b {
  color: #59486f;
}
body.course-offer-page .frontend-fit__art > b::before {
  content: "{ }";
}

/* Standard course page: WCAG AA contrast without changing spacing/layout. */
html[data-theme="light"] .coursePage :is(
  .coursePage__Description-Box-Text-Key,
  .coursePage__Teacher-Header-Text-English,
  .coursePage__Teacher-Description-Text,
  .comments__Content-Name-Date,
  .Comments-articles-Description,
  .Comments-articles-User
) {
  color: #52687c !important;
}

html[data-theme="light"] .coursePage .dm-guide-stat-box__label {
  color: #526176 !important;
}

html[data-theme="light"] .coursePage .text-danger { color: #bd2635 !important; }
html[data-theme="light"] .coursePage .text-primary { color: #075ecf !important; }
html[data-theme="light"] .coursePage .text-success { color: #087443 !important; }
html[data-theme="light"] body.course-offer-page .frontend-learning__grid > div > p,
html[data-theme="light"] body.course-offer-page .frontend-key__grid > article > p {
  color: #59657a;
}
html[data-theme="light"] body.course-offer-page :is(
    .frontend-outcome > a,
    .frontend-preview-cta__actions > a,
    .frontend-preview__duration b
  ) {
  color: #06749a !important;
}
html[data-theme="light"] body.course-offer-page .frontend-preview-cta__discount small {
  color: #76515b;
}
html[data-theme="light"] body.course-offer-page .frontend-curriculum__chapter-number {
  color: #6745ad;
}
html[data-theme="light"] body.course-offer-page .frontend-curriculum__chapter-title small,
html[data-theme="light"] body.course-offer-page .frontend-comments__pager > small {
  color: #5d687c;
}
html[data-theme="light"] body.course-offer-page .frontend-curriculum__path > p {
  color: #566176;
}
html[data-theme="light"] body.course-offer-page .fs-comment-answered {
  color: #10724f !important;
}

body.ail-page .ail-cli {
  --ail-cli-faint: #858b94;
}
body.ail-page .ail-cli__code-key {
  color: #b59cff;
}
body.ail-page .ail-cli__code-fn {
  color: #6fb6ff;
}

/* Preserve the existing hit-area dimensions while making interactive
 * curriculum headers and mentor actions unambiguously targetable. */
body.ail-page .ail-path__chapter-top {
  min-block-size: 48px;
  touch-action: manipulation;
}
body:is(.ail-page, .course-offer-page) .mentor-spotlight__action {
  position: relative;
  z-index: 2;
}

/* The standard-course description reader is portalled to body by
 * course-landing.js so Bootstrap grid/transform stacking contexts cannot
 * constrain it beside the intro video. */
body > .course-desc-read {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  transform: none !important;
  isolation: isolate;
}
body > .course-desc-read > .course-desc-read__panel {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border-radius: 0;
}
body.course-desc-read-open .coursePage :is(.course-preview-video, .coursePage__Information-video) {
  visibility: hidden;
}

/* Mobile course-reader geometry shared by standard, AI, front-end and full-stack courses. */
.course-desc-read__progress {
  position: relative;
  z-index: 4;
  width: 100%;
  min-height: 4px;
  overflow: hidden;
  direction: rtl;
}
.course-desc-read__progress-bar {
  margin-inline-start: auto;
  border-radius: 999px 0 0 999px;
  box-shadow: 0 0 .9rem color-mix(in srgb, var(--course-desc-read-progress-bar) 60%, transparent);
}

.coursePage__Description-ProgressBar,
.coursePage__Description-ProgressBar-Chart {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.coursePage__Description-ProgressBar-Chart {
  direction: rtl;
}
.coursePage__Description-ProgressBar-Chart .progress-bar {
  margin-inline-start: auto;
}

@media (max-width: 767.98px) {
  .course-desc-read__body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    scrollbar-gutter: auto;
  }
  .course-desc-read__body .dm-redesign-details {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding: 1.25rem 1rem 2.5rem;
  }
  .course-desc-read__body .dm-guide-hero-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    padding: 1.35rem;
    border-radius: 1.25rem;
    transform: none;
  }
  .course-desc-read__body .dm-guide-hero-card > *,
  .course-desc-read__body .dm-guide-stat-box,
  .course-desc-read__body .dm-guide-stat-box__content {
    min-width: 0;
    max-width: 100%;
  }
  .course-desc-read__body .dm-guide-hero-card__title,
  .course-desc-read__body .dm-guide-hero-card__intro,
  .course-desc-read__body .dm-guide-stat-box__value,
  .course-desc-read__body .dm-guide-stat-box__label {
    overflow-wrap: anywhere;
  }

  /* Project selectors used to be horizontal 72/82vw cards. Each course now
   * gets a full-width, readable project row on phones. */
  body:is(.ail-page, .course-offer-page) .ail-project-showcase__list-wrap {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding-inline: 0 !important;
  }
  body:is(.ail-page, .course-offer-page) .ail-project-showcase__list {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr);
  }
  body:is(.ail-page, .course-offer-page) .ail-project-showcase__item,
  body:is(.ail-page, .course-offer-page) .ail-project-showcase__item.is-active {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    box-sizing: border-box;
  }
}
.coursePage #course-comments {
  scroll-margin-top: clamp(1rem, 5vh, 5rem);
}