/* DRUK V8.4 — mobile course hero spacing + breadcrumb position correction.
   Scope: 16 course detail pages only. Desktop/tablet structure remains unchanged.
   Mobile visual order: compact breadcrumb -> image -> title/description/meta.
*/
body.course-standard-v561 .mobile-course-top-breadcrumb{display:none!important;}

@media (max-width:640px){
  body.v83-course.course-standard-v561 .course-detail-hero .page-hero-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /* Breadcrumb sits above the image on mobile. The redundant Courses crumb is
     intentionally omitted from this mobile-only copy. */
  body.course-standard-v561 .course-detail-hero .mobile-course-top-breadcrumb{
    display:flex!important;
    order:0!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    width:100%!important;
    margin:0!important;
    padding:9px 12px 8px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    font-size:12px!important;
    line-height:1.2!important;
    background:#fff!important;
    color:#5b7187!important;
    border-bottom:1px solid #e3ebf0!important;
  }
  body.course-standard-v561 .course-detail-hero .mobile-course-top-breadcrumb a{
    color:#087b75!important;
    text-decoration:none!important;
  }
  body.course-standard-v561 .course-detail-hero .mobile-course-top-breadcrumb .breadcrumb-current{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:#5b7187!important;
  }

  /* Image is fixed to the approved compact mobile hero height. */
  body.course-standard-v561 .course-detail-hero .course-hero-media{
    order:1!important;
    width:100%!important;
    margin:0!important;
  }
  body.course-standard-v561 .course-detail-hero .course-hero-media,
  body.course-standard-v561 .course-detail-hero .course-hero-media img{
    height:230px!important;
    min-height:230px!important;
    max-height:230px!important;
    border-radius:0!important;
  }
  body.course-standard-v561 .course-detail-hero .course-hero-media img{
    display:block!important;
    object-fit:cover!important;
    object-position:center!important;
  }

  /* No blank band after the image: title/description starts immediately. */
  body.course-standard-v561 .course-detail-hero .course-hero-copy{
    order:2!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    align-self:auto!important;
    justify-content:flex-start!important;
    padding:11px 14px 16px!important;
    margin:0!important;
    border-top:0!important;
  }
  body.course-standard-v561 .course-detail-hero .course-hero-copy > .breadcrumb{
    display:none!important;
  }
  body.course-standard-v561 .course-detail-hero h1{
    margin-top:0!important;
    margin-bottom:9px!important;
  }
  body.course-standard-v561 .course-detail-hero .keyword-intro{
    margin-top:0!important;
    margin-bottom:12px!important;
  }
  body.course-standard-v561 .course-detail-hero .hero-course-meta{
    margin-top:0!important;
  }

  /* Specificity lock: neutralise older variant-specific equal-height hero rules. */
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-right .course-hero-media,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-left .course-hero-media,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-wide .course-hero-media,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-overlay .course-hero-media,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-compact .course-hero-media,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero .course-hero-media,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-right .course-hero-media img,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-left .course-hero-media img,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-wide .course-hero-media img,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-overlay .course-hero-media img,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-compact .course-hero-media img,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero .course-hero-media img{
    height:230px!important;
    min-height:230px!important;
    max-height:230px!important;
    align-self:auto!important;
  }
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-right .course-hero-copy,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-left .course-hero-copy,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-wide .course-hero-copy,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-overlay .course-hero-copy,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero.hero-variant-compact .course-hero-copy,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero .course-hero-copy{
    min-height:0!important;
    height:auto!important;
    align-self:auto!important;
    justify-content:flex-start!important;
    border-top:0!important;
    padding:11px 14px 16px!important;
  }
}

@media (max-width:360px){
  body.course-standard-v561 .course-detail-hero .mobile-course-top-breadcrumb{
    padding:8px 10px 7px!important;
    gap:5px!important;
    font-size:11.5px!important;
  }
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero .course-hero-media,
  body.v83-page.v83-inner.v83-course.course-standard-v561 .course-detail-hero .course-hero-media img{
    height:210px!important;
    min-height:210px!important;
    max-height:210px!important;
  }
  body.course-standard-v561 .course-detail-hero .course-hero-copy{
    padding:10px 12px 14px!important;
  }
}