/* DRUK R5.76 — mobile-first course hero order
   Scope: 16 course detail pages only.
   Mobile order: image -> title/description/meta. Desktop/tablet remain unchanged. */

@media (max-width:640px){
  /* Use more of the mobile viewport: keep only a very small dark outer gutter. */
  body.v83-page.v83-inner.v83-course.course-standard-v561 main#main > section.course-detail-hero.page-hero:first-child > .container{
    width:calc(100% - 8px)!important;
    max-width:none!important;
    margin-left:4px!important;
    margin-right:4px!important;
  }

  body.course-standard-v561 .course-detail-hero .page-hero-grid{
    grid-template-columns:1fr!important;
    padding:4px!important;
    gap:0!important;
  }

  /* Image is the first visible hero element on mobile. */
  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-copy{
    order:2!important;
    width:100%!important;
    min-width:0!important;
    padding:20px 16px 22px!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;
  }
  body.course-standard-v561 .course-detail-hero .course-hero-media img{
    object-fit:cover!important;
    object-position:center!important;
  }

  /* Breadcrumb was wrapping awkwardly and competing with the title on narrow screens. */
  body.course-standard-v561 .course-detail-hero .breadcrumb{
    display:none!important;
  }

  body.course-standard-v561 .course-detail-hero h1{
    margin-top:0!important;
    margin-bottom:14px!important;
  }
  body.course-standard-v561 .course-detail-hero .keyword-intro{
    margin-top:0!important;
    margin-bottom:16px!important;
  }
}

@media (max-width:360px){
  body.course-standard-v561 .course-detail-hero .course-hero-media,
  body.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:18px 14px 20px!important;
  }
}