/* Academia Yamilet · Mobile course layout v59
   Final responsive guard for the base course renderer and the enhanced course view. */

@media (max-width: 760px) {
  [data-course-view] {
    width: 100% !important;
    min-width: 0 !important;
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
  }

  [data-course-view] > [data-course-detail],
  [data-course-detail] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Compact course hero. The original layout is used when the enhancement layer has not decorated yet. */
  [data-course-detail] .course-detail-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
    align-items: start !important;
    gap: 16px !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 24px 20px 22px !important;
    margin: 0 0 14px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  [data-course-detail] .course-detail-head > div {
    min-width: 0 !important;
    width: 100% !important;
  }

  [data-course-detail] .course-detail-head .eyebrow {
    display: block !important;
    margin: 0 0 10px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: .12em !important;
  }

  [data-course-detail] .course-detail-head h2 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 14px !important;
    font-size: clamp(38px, 10vw, 50px) !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  [data-course-detail] .course-detail-head p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  [data-course-detail] .progress-orb {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    flex: none !important;
    margin: 22px 0 0 !important;
    align-self: start !important;
  }

  [data-course-detail] .progress-orb strong {
    font-size: 26px !important;
    line-height: 1 !important;
  }

  [data-course-detail] .progress-orb span {
    margin-top: 5px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .09em !important;
  }

  [data-course-detail] .progress-track.large {
    height: 7px !important;
    margin: 12px 0 22px !important;
  }

  [data-course-detail] .syllabus {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Base module renderer: this is the layout visible in the supplied screenshots. */
  [data-course-detail] .module-block {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  [data-course-detail] .module-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 20px 18px 18px !important;
    box-sizing: border-box !important;
  }

  [data-course-detail] .module-head > div {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  [data-course-detail] .module-label {
    display: block !important;
    width: auto !important;
    margin: 0 0 6px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    letter-spacing: .13em !important;
    white-space: nowrap !important;
  }

  [data-course-detail] .module-head h3 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 8px !important;
    font-size: 28px !important;
    line-height: 1.04 !important;
    letter-spacing: -.025em !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  [data-course-detail] .module-head p {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.52 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }

  [data-course-detail] .module-head > span:not(.module-label) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
    min-width: 54px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    background: rgba(18, 63, 53, .07) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Enhanced week-card renderer: preserve the number tile when the decorator is active. */
  [data-course-detail] .academy-week-card .module-head {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
  }

  [data-course-detail] .academy-week-card .academy-week-number {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
  }

  [data-course-detail] .academy-week-card .module-head > div {
    grid-column: 2 !important;
  }

  [data-course-detail] .academy-week-card .academy-module-count {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 48px !important;
  }

  [data-course-detail] .academy-week-progress {
    padding: 0 18px 15px !important;
  }

  /* Denser, touch-friendly lesson list. */
  [data-course-detail] .lesson-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  [data-course-detail] .lesson-row {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  [data-course-detail] .lesson-type {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
  }

  [data-course-detail] .lesson-copy {
    min-width: 0 !important;
    width: 100% !important;
  }

  [data-course-detail] .lesson-copy strong {
    display: block !important;
    width: 100% !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  [data-course-detail] .lesson-copy small {
    display: block !important;
    margin-top: 4px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  [data-course-detail] .lesson-check {
    width: 24px !important;
    min-width: 24px !important;
    font-size: 14px !important;
  }

  [data-course-detail] .module-block:last-child {
    margin-bottom: 18px !important;
  }
}

@media (max-width: 430px) {
  [data-course-detail] .course-detail-head {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 22px 18px 20px !important;
  }

  [data-course-detail] .course-detail-head h2 {
    font-size: clamp(36px, 11.5vw, 46px) !important;
  }

  [data-course-detail] .progress-orb {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    justify-self: start !important;
  }

  [data-course-detail] .progress-orb strong {
    font-size: 20px !important;
  }

  [data-course-detail] .progress-orb span {
    margin: 0 !important;
  }

  [data-course-detail] .module-head {
    padding: 18px 16px 16px !important;
  }

  [data-course-detail] .module-head h3 {
    font-size: 25px !important;
  }

  [data-course-detail] .lesson-list {
    padding: 10px !important;
  }

  [data-course-detail] .lesson-row {
    grid-template-columns: 42px minmax(0, 1fr) 20px !important;
    gap: 10px !important;
    min-height: 64px !important;
    padding: 10px !important;
  }

  [data-course-detail] .lesson-type {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
}