/* ==========================================================================
   kubshm_lms_e9_desktop.css
   E9-2 / Desktop-extension / Рабочая редакция №2

   Назначение:
   - отдельный desktop-only слой поверх kubshm_lms_e9_mobile.css;
   - без изменения HTML-структуры страницы курса;
   - без дублирования mobile-базы;
   - только @media (min-width: ...).

   Текущая цель редакции:
   - перевести экран 1 «Список тем» с нижней fixed-панели
     на верхнюю action-зону рядом с заголовком курса;
   - убрать перекрытие нижних уроков длинного списка тем;
   - сохранить нижнюю fixed-навигацию только для reader-экранов.
   ========================================================================== */


/* ==========================================================================
   DESKTOP START / 768+
   Базовый tablet-desktop shell
   ========================================================================== */
@media (min-width: 768px){

  /* ------------------------------------------------------------------------
     1. Общий desktop-shell страницы курса
     ------------------------------------------------------------------------ */
 

  #state-active,
  #topicsView,
  #readerView{
    width: 100%;
  }

  #topicsView{
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }

  #readerHeader,
  #blockContainer,
  #readerNote{
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  .reader{
    min-height: calc(100dvh - 156px);
    gap: 18px;
  }

  /* ------------------------------------------------------------------------
     2. Экран 1 — список тем курса
     Новая desktop-модель: action-кнопки сверху, рядом с заголовком курса.
     Нижняя fixed-панель для topicsView на desktop не используется.
     ------------------------------------------------------------------------ */
  #state-active:has(#topicsView:not(.hidden)) > .card:first-of-type{
    max-width: 820px;
    margin: 0 auto 34px;
    display: grid;
    gap: 18px;
  }

  #state-active:has(#topicsView:not(.hidden)) > .card:first-of-type > div:first-child{
    display: grid;
    justify-items: center;
    gap: 0;
  }

  #state-active > .card:first-of-type h1{
    margin: 28px auto 0;
    max-width: 14ch;
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1.08;
    text-align: center;
  }

  #state-active:has(#topicsView:not(.hidden)) > .card:first-of-type > div:last-child{
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    z-index: auto;
    width: auto;
    max-width: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  #state-active:has(#topicsView:not(.hidden)) #studentBtn,
  #state-active:has(#topicsView:not(.hidden)) #continueBtn{
    width: auto;
    min-width: 196px;
    min-height: 52px;
    padding: 0 24px;
    font-size: 0.98rem;
    font-weight: 700;
    border-radius: 18px;
  }

  #state-active:has(#topicsView:not(.hidden)) #studentBtn{
    background: rgba(255,255,255,0.96);
    color: var(--text);
    border: 1px solid var(--line);
  }

  #state-active:has(#topicsView:not(.hidden)) #continueBtn{
    background: linear-gradient(180deg, #8c1fe2 0%, var(--accent) 100%);
    color: #fff;
    border: 1px solid transparent;
  }

  #state-active:has(#topicsView:not(.hidden)) #continueBtn.is-completed,
  #state-active:has(#topicsView:not(.hidden)) #continueBtn.is-completed:disabled{
    background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #6b7280;
    border-color: #d1d5db;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
  }

  #topics{
    gap: 36px;
  }

  .topic{
    gap: 16px;
  }

  .topic-head{
    gap: 14px;
    font-size: 1.72rem;
    line-height: 1.16;
  }

  .topic-lessons{
    gap: 10px;
  }

  .lesson{
    min-height: 72px;
    padding: 12px 16px 12px 18px;
    border-radius: 26px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
  }

  .lesson-title{
    gap: 12px;
  }

  .lesson-num{
    font-size: 1rem;
  }

  .lesson-name{
    font-size: 1.03rem;
  }

  .lesson-action .btn-lesson{
    min-width: 118px;
    min-height: 44px;
    padding: 0 18px;
    font-size: 0.98rem;
  }

  /* ------------------------------------------------------------------------
     3. Reader shared — экраны 2–5
     ------------------------------------------------------------------------ */
  #readerView{
    margin-top: 0;
  }

  #readerHeader{
    margin-bottom: 20px;
    padding-top: 4px;
  }

  #readerHeader h3{
    font-size: 1.95rem;
    line-height: 1.18;
  }

  #blockContainer{
    padding-bottom: 8px;
  }

  #readerNote{
    font-size: 0.96rem;
    line-height: 1.58;
  }

  #readerView .nav{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(100%, 760px);
    max-width: 760px;
    grid-template-columns: 1fr 1fr 1.08fr;
    gap: 10px;
    padding: 10px;
    bottom: calc(env(safe-area-inset-bottom) + 5px);
  }

  #readerView .nav .btn{
    min-height: 46px;
    padding: 0 16px;
    font-size: 0.98rem;
  }

  #readerView .nav #backToTopics{
    font-size: 0.95rem;
    padding-inline: 14px;
  }

  /* ------------------------------------------------------------------------
     4. Reader typography
     ------------------------------------------------------------------------ */
  #blockContainer h1{
    font-size: 2rem;
    margin-bottom: 14px;
  }

  #blockContainer h2{
    font-size: 1.7rem;
    margin-bottom: 14px;
  }

  #blockContainer h3{
    margin-top: 34px;
    margin-bottom: 12px;
    font-size: 1.34rem;
  }

  #blockContainer h4{
    font-size: 1.14rem;
    margin-bottom: 12px;
  }

  #blockContainer p{
    margin-bottom: 18px;
    font-size: 1.08rem;
    line-height: 1.78;
  }

  #blockContainer li{
    font-size: 1.08rem;
    line-height: 1.74;
  }

  #blockContainer ul,
  #blockContainer ol{
    margin-bottom: 20px;
    padding-left: 30px;
  }

  #blockContainer figure{
    margin: 22px 0 26px;
  }

  #blockContainer figcaption{
    margin-top: 10px;
    font-size: 0.88rem;
    line-height: 1.5;
  }

  #blockContainer hr{
    margin: 32px 0;
  }

  #blockContainer code{
    font-size: 0.96em;
  }

  /* ------------------------------------------------------------------------
     5. Reader media
     ------------------------------------------------------------------------ */
  #blockContainer img{
    border-radius: 26px;
  }

  #blockContainer iframe{
    border-radius: 26px;
  }

 


  .mini-gallery{
    gap: 16px;
    margin: 24px 0 28px;
  }

  .mini-gallery:has(img:only-child){
    grid-template-columns: 1fr;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  .mini-gallery:has(img:nth-child(2)):not(:has(img:nth-child(3))){
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mini-gallery:has(img:nth-child(3)):not(:has(img:nth-child(4))){
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mini-gallery:has(img:nth-child(4)):not(:has(img:nth-child(5))){
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mini-gallery:has(img:nth-child(5)){
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mini-gallery img{
    border-radius: 22px;
  }

  .mini-gallery:has(img:only-child) img{
    aspect-ratio: auto;
    max-height: 560px;
    width: 100%;
    object-fit: contain;
  }

  .mini-gallery:not(:has(img:only-child)) img{
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
  }









  #blockContainer .mini-gallery + p.note{
    max-width: 640px;
    margin: -8px auto 22px;
    font-size: 0.88rem;
  }

  /* ------------------------------------------------------------------------
     6. Экран 7 — quiz
     ------------------------------------------------------------------------ */
  .kub-quiz-multi-root{
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
  }

  .kub-quiz-multi-list{
    gap: 20px;
  }

  .kub-quiz-multi-question{
    border-radius: 24px;
  }

  .kub-quiz-multi-title{
    padding: 18px 18px 12px;
    font-size: 1.16rem;
    line-height: 1.5;
  }

  .kub-quiz-multi-item label{
    padding: 16px 18px;
    gap: 12px;
    font-size: 1.03rem;
    line-height: 1.58;
  }

  .kub-quiz-multi-check{
    min-height: 50px;
    max-width: 320px;
  }

  .lms-quiz-multi{
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  .lms-quiz-multi [data-quiz-question]{
    border-radius: 24px;
    padding: 16px 18px;
  }

  /* ------------------------------------------------------------------------
     7. Экран 6 — assignment upload
     ------------------------------------------------------------------------ */
  #files{
    min-height: 70px;
    padding: 14px 16px;
    border-radius: 26px;
    font-size: 1rem;
  }

  #files::file-selector-button{
    min-height: 46px;
    padding: 0 18px;
    border-radius: 16px;
  }

  #selGrid,
  #galGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  #selGrid .tile,
  #galGrid .tile{
    align-content: start;
    grid-template-rows: auto minmax(2.9em, auto);
    gap: 10px;
  }

  #selGrid .tile img,
  #selGrid .tile video,
  #selGrid .tile iframe,
  #galGrid .tile img,
  #galGrid .tile video,
  #galGrid .tile iframe,
  #selGrid .tile .chip,
  #galGrid .tile .chip{
    border-radius: 22px;
  }

  #selGrid .tile.tile--file .chip.file-badge,
  #galGrid .tile.tile--file .chip.file-badge{
    border-radius: 24px;
    padding: 16px 12px;
  }

  #selGrid .tile .meta,
  #galGrid .tile .meta{
    min-height: 2.9em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.92rem;
    line-height: 1.4;
    word-break: break-word;
  }

  #selGrid .tile .meta a,
  #galGrid .tile .meta a{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  #selGrid + p{
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
  }

  #selGrid + p .btn.btn-accent{
    min-width: 196px;
  }

  /* ------------------------------------------------------------------------
     8. Экраны 8–9 — control_check
     ------------------------------------------------------------------------ */
  .control-check-block{
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  .control-check-title{
    font-size: 1.66rem;
    margin-bottom: 16px !important;
  }

  .control-check-status{
    min-height: 40px;
    padding: 0 18px;
    font-size: 1rem;
  }

  .control-check-layout{
    gap: 16px;
  }


  .control-check-uploads-list{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .control-check-upload-name{
    font-size: 0.9rem;
    line-height: 1.32;
  }

  .control-check-send{
    min-height: 52px;
  }

 

 

  /* ------------------------------------------------------------------------
     9. Служебные состояния
     ------------------------------------------------------------------------ */
  #state-guest,
  #state-locked,
  #state-pending{
    max-width: 440px;
    margin-top: 72px;
  }

  #state-profile-required{
    max-width: 460px;
    margin-top: 72px;
  }

  #state-guest h1,
  #state-locked h1,
  #state-pending h1,
  #state-profile-required h1{
    font-size: 1.12rem;
  }

  #state-guest p,
  #state-locked p,
  #state-pending p,
  #state-profile-required .muted{
    font-size: 1rem;
  }

  #magicLogin{
    margin-top: 36px;
  }

  #ml_email,
  #studentProfileForm input[type="text"],
  #studentProfileForm input[type="email"],
  #studentProfileForm input[type="tel"]{
    min-height: 60px;
  }

  /* ------------------------------------------------------------------------
     10. Modal / system messages
     ------------------------------------------------------------------------ */
  .lms-system-modal__card{
    width: min(100%, 460px);
    border-radius: 26px;
    padding: 24px 20px 20px;
  }

  .lms-system-modal__title{
    font-size: 30px;
  }

  .lms-system-modal__text{
    font-size: 18px;
    line-height: 1.58;
  }

  .lms-system-modal__btn{
    min-width: 156px;
  }

  #lmsFinishToast{
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(18px);
    width: min(100%, 520px);
  }

  #lmsFinishToast.show{
    transform: translateX(-50%) translateY(0);
  }
}


/* ==========================================================================
   DESKTOP CORE / 1024+
   Основной desktop
   ========================================================================== */
@media (min-width: 1024px){

  /* ------------------------------------------------------------------------
     1. Общий desktop-shell страницы курса
     ------------------------------------------------------------------------ */
  #course{
    max-width: 1220px;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  #topicsView{
    max-width: 900px;
  }

  #readerHeader,
  #blockContainer,
  #readerNote{
    max-width: 820px;
  }

  .reader{
    min-height: calc(100dvh - 168px);
    gap: 20px;
  }

  /* ------------------------------------------------------------------------
     2. Экран 1 — список тем курса
     ------------------------------------------------------------------------ */
  #state-active:has(#topicsView:not(.hidden)) > .card:first-of-type{
    max-width: 900px;
    margin-bottom: 60px;
    gap: 20px;
  }

  #state-active > .card:first-of-type h1{
    margin: 34px auto 0;
    max-width: 20ch;
    font-size: clamp(2.5rem, 3vw, 3.2rem);
  }

  #state-active:has(#topicsView:not(.hidden)) #studentBtn,
  #state-active:has(#topicsView:not(.hidden)) #continueBtn{
    min-width: 208px;
    min-height: 54px;
    padding: 0 26px;
    font-size: 1rem;
  }

  #topics{
    gap: 80px;
  }

  .topic-head{
    font-size: 1.82rem;
  }

  .lesson{
    min-height: 76px;
    padding: 13px 18px 13px 20px;
    gap: 18px;
  }

  .lesson-name{
    font-size: 1.06rem;
  }

  .lesson-action .btn-lesson{
    min-width: 124px;
    min-height: 46px;
  }

  /* ------------------------------------------------------------------------
     3. Reader shared — экраны 2–5
     ------------------------------------------------------------------------ */
  #readerHeader{
    margin-bottom: 22px;
  }

  #readerHeader h3{
    font-size: 2.08rem;
  }

  #readerView .nav{
    width: min(100%, 820px);
    max-width: 820px;
    gap: 10px;
    padding: 10px;
  }

  #readerView .nav .btn{
    min-height: 48px;
    font-size: 1rem;
  }

  /* ------------------------------------------------------------------------
     4. Reader typography
     ------------------------------------------------------------------------ */
  #blockContainer h1{
    font-size: 2.18rem;
  }

  #blockContainer h2{
    font-size: 1.84rem;
  }

  #blockContainer h3{
    margin-top: 38px;
    font-size: 1.4rem;
  }

  #blockContainer h4{
    font-size: 1.18rem;
  }

  #blockContainer p,
  #blockContainer li{
    font-size: 1.1rem;
    line-height: 1.82;
  }

  #blockContainer figure{
    margin: 24px 0 28px;
  }

  #blockContainer figcaption{
    font-size: 0.9rem;
  }

  /* ------------------------------------------------------------------------
     5. Reader media
     ------------------------------------------------------------------------ */
    .mini-gallery{
    gap: 18px;
    margin: 26px 0 30px;
  }

  .mini-gallery:has(img:only-child){
    max-width: 820px;
  }

  .mini-gallery img{
    border-radius: 24px;
  }

  .mini-gallery:has(img:only-child) img{
    max-height: 620px;
  }

  /* ------------------------------------------------------------------------
     6. Экран 7 — quiz
     ------------------------------------------------------------------------ */
  .kub-quiz-multi-root,
  .lms-quiz-multi{
    max-width: 820px;
  }

  .kub-quiz-multi-question{
    border-radius: 26px;
  }

  .kub-quiz-multi-title{
    font-size: 1.18rem;
  }

  .kub-quiz-multi-item label{
    font-size: 1.04rem;
  }

  /* ------------------------------------------------------------------------
     7. Экран 6 — assignment upload
     ------------------------------------------------------------------------ */
  #selGrid,
  #galGrid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  #selGrid .tile,
  #galGrid .tile{
    grid-template-rows: auto minmax(3em, auto);
    gap: 12px;
  }

  #selGrid .tile.tile--file .chip.file-badge,
  #galGrid .tile.tile--file .chip.file-badge{
    padding: 18px 14px;
  }

  #selGrid .tile .meta,
  #galGrid .tile .meta{
    min-height: 3em;
    font-size: 0.94rem;
  }

  /* ------------------------------------------------------------------------
     8. Экраны 8–9 — control_check
     ------------------------------------------------------------------------ */
  .control-check-block{
    max-width: 820px;
  }

  .control-check-layout{
    gap: 18px;
  }

  .control-check-uploads-list{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .control-check-title{
    font-size: 1.78rem;
  }

  /* ------------------------------------------------------------------------
     9. Служебные состояния
     ------------------------------------------------------------------------ */
  #state-guest,
  #state-locked,
  #state-pending{
    margin-top: 84px;
  }

  #state-profile-required{
    margin-top: 84px;
  }

  /* ------------------------------------------------------------------------
     10. Modal / system messages
     ------------------------------------------------------------------------ */
  .lms-system-modal__card{
    width: min(100%, 480px);
  }

  #lmsFinishToast{
    width: min(100%, 560px);
  }
}


/* ==========================================================================
   DESKTOP WIDE / 1280+
   Широкий desktop без расползания интерфейса
   ========================================================================== */
@media (min-width: 1280px){

  /* ------------------------------------------------------------------------
     1. Общий desktop-shell страницы курса
     ------------------------------------------------------------------------ */
  #course{
    max-width: 1360px;
    padding-left: 40px;
    padding-right: 40px;
  }

  #topicsView{
    max-width: 960px;
  }

  #readerHeader,
  #blockContainer,
  #readerNote{
    max-width: 860px;
  }

  /* ------------------------------------------------------------------------
     2. Экран 1 — список тем курса
     ------------------------------------------------------------------------ */
  #state-active:has(#topicsView:not(.hidden)) > .card:first-of-type{
    max-width: 960px;
  }

  #state-active > .card:first-of-type h1{
    margin-top: 50px;
    margin-bottom: 30px;
    font-size: 3.28rem;
  }

  .topic-head{
    font-size: 1.52rem;
  }

  .lesson{
    min-height: 90px;
  }

  #state-active:has(#topicsView:not(.hidden)) #studentBtn,
  #state-active:has(#topicsView:not(.hidden)) #continueBtn{
    min-width: 214px;
  }

  /* ------------------------------------------------------------------------
     3. Reader shared — экраны 2–5
     ------------------------------------------------------------------------ */
  #readerHeader h3{
    font-size: 2.16rem;
  }

  #readerView .nav{
    width: min(100%, 860px);
    max-width: 560px;
  }

  /* ------------------------------------------------------------------------
     4. Reader typography
     ------------------------------------------------------------------------ */
  #blockContainer p,
  #blockContainer li{
    font-size: 1.12rem;
  }

  /* ------------------------------------------------------------------------
     5. Reader media
     ------------------------------------------------------------------------ */
   .mini-gallery:has(img:only-child){
    max-width: 860px;
  }

  .mini-gallery:has(img:only-child) img{
    max-height: 680px;
  }

  /* ------------------------------------------------------------------------
     6. Экран 7 — quiz
     ------------------------------------------------------------------------ */
  .kub-quiz-multi-root,
  .lms-quiz-multi{
    max-width: 860px;
  }

  /* ------------------------------------------------------------------------
     7. Экран 6 — assignment upload
     ------------------------------------------------------------------------ */
  #selGrid,
  #galGrid{
    gap: 16px;
  }

  #selGrid .tile,
  #galGrid .tile{
    grid-template-rows: auto minmax(3.1em, auto);
  }

  #selGrid .tile .meta,
  #galGrid .tile .meta{
    min-height: 3.1em;
  }

  /* ------------------------------------------------------------------------
     8. Экраны 8–9 — control_check
     ------------------------------------------------------------------------ */
  .control-check-block{
    max-width: 860px;
  }

  .control-check-uploads-list{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* ------------------------------------------------------------------------
     9. Служебные состояния
     ------------------------------------------------------------------------ */
  #state-guest,
  #state-locked,
  #state-pending{
    max-width: 448px;
  }

  #state-profile-required{
    max-width: 472px;
  }

  /* ------------------------------------------------------------------------
     10. Modal / system messages
     ------------------------------------------------------------------------ */
  #lmsFinishToast{
    width: min(100%, 580px);
  }
}

/* ==========================================================================
   DESKTOP FOOTER / Подвал страницы курса
   Показывается только на desktop и только на экране "Список тем".
   Закреплён внизу экрана.
   Требует HTML:
   <footer class="lms-course-footer" style="display:none">...</footer>
   ========================================================================== */

@media (min-width: 768px){

  .lms-course-footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;

    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(16px, 4vw, 48px);

    width: 100%;
    margin: 0;
    padding: 18px clamp(20px, 5vw, 72px) calc(18px + env(safe-area-inset-bottom));

    background-color: #5B00A6;
    color: #ffffff;
    font-family: 'SourceSansPro-Regular', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: clamp(0.9rem, 1.4vw, 1rem);
    line-height: 1.5;
    text-align: center;

    box-shadow: 0 -14px 34px rgba(31, 20, 52, 0.16);
  }

  main#course:has(#state-active:not([hidden]) #topicsView:not(.hidden)) ~ .lms-course-footer{
    display: grid !important;
  }

  main#course:has(#state-active:not([hidden]) #topicsView:not(.hidden)){
    padding-bottom: calc(118px + env(safe-area-inset-bottom));
  }

  .lms-course-footer p{
    margin: 0;
    padding: 0;
  }

  .lms-course-footer a{
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease;
  }

  .lms-course-footer a:hover{
    color: #FFDFFF;
    opacity: 0.9;
  }
}

@media (min-width: 1024px){

  .lms-course-footer{
    padding-top: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  main#course:has(#state-active:not([hidden]) #topicsView:not(.hidden)){
    padding-bottom: calc(124px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 1280px){

  .lms-course-footer{
    padding-left: 88px;
    padding-right: 88px;
  }

  main#course:has(#state-active:not([hidden]) #topicsView:not(.hidden)){
    padding-bottom: calc(128px + env(safe-area-inset-bottom));
  }
}



/* ==========================================================================
   LMS / Photoshop для интерьера / Блок 1. Вступление
   Добавлено в конец kubshm_lms_e9_desktop.css
   Назначение:
   - отдельный визуальный компонент первого блока курса;
   - стили не затрагивают остальные блоки LMS;
   - базовая часть работает и на mobile, так как файл подключается после mobile CSS.
   ========================================================================== */

#blockContainer .lms-intro-hero{
  width: 100%;
  margin: 0 auto;
  padding: clamp(18px, 5vw, 34px);
  border: 1px solid rgba(221, 217, 228, 0.92);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 0%, rgba(143,36,229,0.10) 0, rgba(143,36,229,0) 34%),
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.86) 100%);
  box-shadow: 0 18px 44px rgba(31, 20, 52, 0.10);
  overflow: hidden;
}

#blockContainer .lms-intro-hero__main{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 5vw, 30px);
  align-items: center;
}

#blockContainer .lms-intro-hero__copy{
  min-width: 0;
}

#blockContainer .lms-intro-hero__badge{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 0 0 16px !important;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(91, 0, 166, 0.08);
  color: #5B00A6;
  font-size: 0.92rem !important;
  line-height: 1 !important;
 
  letter-spacing: -0.01em;
}

#blockContainer .lms-intro-hero__title{
  
 margin: 14px 0 22px !important;
  color: #171827;
  font-size: clamp(1.5rem, 4vw, 2.3rem) !important;
  line-height: 1.04 !important;
  font-weight: 500 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}

#blockContainer .lms-intro-hero__lead{
  margin: 14px 0 22px !important;
  max-width: 48ch;
  color: #5B00A6 !important;
  font-size: clamp(1.02rem, 4.5vw, 1.22rem) !important;
  line-height: 1.42 !important;
  font-weight: 500;
  letter-spacing: -0.02em;
}

#blockContainer .lms-intro-hero__text{
  display: grid;
  gap: 12px;
  max-width: 58ch;
}

#blockContainer .lms-intro-hero__text p{
  margin: 0 !important;
  color: #3f4350 !important;
  font-size: clamp(0.98rem, 4vw, 1.06rem) !important;
  line-height: 1.62 !important;
}

#blockContainer .lms-intro-hero__figure{
  margin: 0 !important;
  min-width: 0;
}

#blockContainer .lms-intro-hero__figure img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(221, 217, 228, 0.92);
  border-radius: 22px !important;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(31, 20, 52, 0.14);
}

#blockContainer .lms-intro-hero__features{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: clamp(20px, 5vw, 28px);
}

#blockContainer .lms-intro-hero__feature{
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon text";
  column-gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(221, 217, 228, 0.92);
  border-radius: 20px;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 8px 22px rgba(31, 20, 52, 0.06);
}

#blockContainer .lms-intro-hero__feature-icon{
  grid-area: icon;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(143,36,229,0.14) 0%, rgba(91,0,166,0.06) 100%);
  border: 1px solid rgba(91, 0, 166, 0.12);
  color: #6f15c7;
}

#blockContainer .lms-intro-hero__feature-icon svg{
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#blockContainer .lms-intro-hero__feature h4{
  grid-area: title;
  margin: 0 0 4px !important;
  color: #171827 !important;
  font-size: 1.03rem !important;
  line-height: 1.18 !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em;
}

#blockContainer .lms-intro-hero__feature p{
  grid-area: text;
  margin: 0 !important;
  color: #676a76 !important;
  font-size: 0.94rem !important;
  line-height: 1.42 !important;
}

#blockContainer .lms-intro-hero__next{
  margin: clamp(18px, 5vw, 26px) 0 0 !important;
  padding: 16px 18px;
  border: 1px solid rgba(91, 0, 166, 0.18);
  border-radius: 20px;
  background: rgba(242, 233, 251, 0.56);
  color: #4e4d58 !important;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
}

#blockContainer .lms-intro-hero__next strong{
  color: #5B00A6;
  font-weight: 750;
}

/* Mobile small */
@media (max-width: 420px){

  #blockContainer .lms-intro-hero{
    padding: 16px;
    border-radius: 24px;
  }

  #blockContainer .lms-intro-hero__badge{
    min-height: 30px;
    margin-bottom: 14px !important;
    padding: 0 12px;
    font-size: 0.7rem !important;
  }

  

  #blockContainer .lms-intro-hero__lead{
    margin-top: 12px !important;
    margin-bottom: 18px !important;
    font-size: 1rem !important;
  }

  #blockContainer .lms-intro-hero__text{
    gap: 10px;
  }

  #blockContainer .lms-intro-hero__text p{
    font-size: 0.96rem !important;
    line-height: 1.58 !important;
  }

  #blockContainer .lms-intro-hero__figure img{
    border-radius: 20px !important;
  }

  #blockContainer .lms-intro-hero__feature{
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 12px;
    padding: 14px;
    border-radius: 18px;
  }

  #blockContainer .lms-intro-hero__feature-icon{
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }

  #blockContainer .lms-intro-hero__feature-icon svg{
    width: 23px;
    height: 23px;
  }

  #blockContainer .lms-intro-hero__feature h4{
    font-size: 0.98rem !important;
  }

  #blockContainer .lms-intro-hero__feature p{
    font-size: 0.88rem !important;
  }

  #blockContainer .lms-intro-hero__next{
    padding: 14px 15px;
    border-radius: 18px;
    font-size: 0.92rem !important;
  }
}

/* Tablet / desktop */
@media (min-width: 768px){

  #blockContainer .lms-intro-hero{
    width: min(100%, 1120px);
    margin-left: 50%;
    transform: translateX(-50%);
    padding: clamp(24px, 3.4vw, 44px);
    border-radius: 30px;
  }

  #blockContainer .lms-intro-hero__main{
    grid-template-columns: minmax(0, 0.88fr) minmax(360px, 1.12fr);
    gap: clamp(28px, 4vw, 52px);
  }

  

  #blockContainer .lms-intro-hero__lead{
    font-size: clamp(1.08rem, 1.45vw, 1.24rem) !important;
  }

  #blockContainer .lms-intro-hero__features{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  #blockContainer .lms-intro-hero__feature{
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "title"
      "text";
    justify-items: center;
    text-align: center;
    min-height: 150px;
    padding: 18px 16px 16px;
  }

  #blockContainer .lms-intro-hero__feature-icon{
    margin-bottom: 12px;
  }

  #blockContainer .lms-intro-hero__next{
    
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }
}

/* Wide desktop */
@media (min-width: 1280px){

  #blockContainer .lms-intro-hero{
    width: min(100%, 1200px);
  }

  #blockContainer .lms-intro-hero__figure img{
    border-radius: 26px !important;
  }
}



/* ==========================================================================
   LMS / Photoshop для интерьера / Блок 1. Вступление
   Локальное расширение hero-карточки за пределы #blockContainer.
   Не меняет глобальную ширину #blockContainer и не влияет на квизы, задания,
   видео и обычные текстовые блоки.
   ========================================================================== */

@media (min-width: 768px){

  #blockContainer .lms-intro-hero{
    position: relative;
    left: 50%;
    width: min(calc(100vw - 48px), 1120px);
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%);
  }
}

@media (min-width: 1024px){

  #blockContainer .lms-intro-hero{
    width: min(calc(100vw - 64px), 1160px);
  }
}

@media (min-width: 1280px){

  #blockContainer .lms-intro-hero{
    width: min(calc(100vw - 80px), 1300px);
  }
}

/* ==========================================================================
   LMS / Photoshop для интерьера / Планшеты
   На планшетах в портретной ориентации hero-блок остаётся в одну колонку.
   Двухколоночная композиция включается только с 900px.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 899px){

  #blockContainer .lms-intro-hero__main{
    grid-template-columns: 1fr !important;
    gap: 24px;
  }


  #blockContainer .lms-intro-hero__figure img{
    max-height: none;
    object-fit: contain;
  }
}

@media (min-width: 900px){

  #blockContainer .lms-intro-hero__main{
    grid-template-columns: minmax(0, 0.88fr) minmax(360px, 1.12fr);
    gap: clamp(28px, 4vw, 52px);
  }
}



/* ==========================================================================
   LMS / Universal / Context card
   Универсальная контекстная карточка учебного блока.

   Назначение:
   - вводит ученика в смысл темы;
   - показывает 2–4 ключевых направления через карточки;
   - может содержать ресурс для скачивания;
   - не привязана к конкретному курсу.
   ========================================================================== */

#blockContainer .lms-context-card{
  display: grid;
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(18px, 4.8vw, 32px);
  border: 1px solid rgba(221, 217, 228, 0.92);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(143,36,229,0.08) 0, rgba(143,36,229,0) 34%),
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 100%);
  box-shadow: 0 14px 34px rgba(31, 20, 52, 0.08);
  overflow: hidden;
}

#blockContainer .lms-context-card__head{
  display: grid;
  gap: 40px;
  min-width: 0;
}

@media (max-width: 767px){

  #blockContainer .lms-context-card__head{
    gap: 15px;
  }
}

#blockContainer .lms-context-card__eyebrow{
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 31px;
  margin: 0 !important;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(91, 0, 166, 0.08);
  color: #5B00A6 !important;
  font-size: 0.84rem !important;
  line-height: 1 !important;
 
  letter-spacing: -0.01em;
}

#blockContainer .lms-context-card h3{
  margin: 0 !important;
  color: #171827 !important;
  font-size: clamp(1.55rem, 5vw, 2.18rem) !important;
  line-height: 1.12 !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}

#blockContainer .lms-context-card__lead{
  max-width: 60ch;
  margin: 0 !important;
  color: #5B00A6 !important;
  font-size: clamp(0.98rem, 3.8vw, 1.1rem) !important;
  line-height: 1.52 !important;
  font-weight: 500;
  letter-spacing: -0.015em;
}

#blockContainer .lms-context-card__body{
  display: grid;
  gap: 12px;
  min-width: 0;
}

#blockContainer .lms-context-card__body p{

  color: #3f4350 !important;
  font-size: clamp(0.96rem, 3.6vw, 1.02rem) !important;
  line-height: 1.64 !important;
}

#blockContainer .lms-context-card__items{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
}

#blockContainer .lms-context-card__item{
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon text";
  column-gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(221, 217, 228, 0.92);
  border-radius: 20px;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 8px 22px rgba(31, 20, 52, 0.05);
}

#blockContainer .lms-context-card__icon{
  grid-area: icon;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(143,36,229,0.13) 0%, rgba(91,0,166,0.05) 100%);
  border: 1px solid rgba(91, 0, 166, 0.12);
  color: #6f15c7;
}

#blockContainer .lms-context-card__icon svg{
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#blockContainer .lms-context-card__item h4{
  grid-area: title;
  margin: 0 0 4px !important;
  color: #171827 !important;
  font-size: 1rem !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

#blockContainer .lms-context-card__item p{
  grid-area: text;
  margin: 0 !important;
  color: #676a76 !important;
  font-size: 0.9rem !important;
  line-height: 1.42 !important;
}

#blockContainer .lms-context-card__resource{
  display: grid;
  gap: 14px;
  align-items: center;
  padding: 17px;
  border: 1px solid rgba(91, 0, 166, 0.16);
  border-radius: 22px;
  background: rgba(242, 233, 251, 0.52);
}

#blockContainer .lms-context-card__resource-text{
  min-width: 0;
}

#blockContainer .lms-context-card__resource h4{
  margin: 0 0 6px !important;
  color: #171827 !important;
  font-size: 1.02rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

#blockContainer .lms-context-card__resource p{
  margin: 0 !important;
  color: #4e4d58 !important;
  font-size: 0.94rem !important;
  line-height: 1.55 !important;
}

#blockContainer .lms-context-card__resource-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8c1fe2 0%, #5B00A6 100%);
  color: #ffffff !important;
  font-size: 0.96rem;
  line-height: 1;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(91, 0, 166, 0.18);
  white-space: nowrap;
}

#blockContainer .lms-context-card__resource-link::before{
  content: "↓";
  display: inline-block;
  margin-right: 8px;
  font-size: 1.05em;
  line-height: 1;
}

/* Mobile small */
@media (max-width: 420px){

  #blockContainer .lms-context-card{
    gap: 18px;
    padding: 16px;
    border-radius: 24px;
  }

  #blockContainer .lms-context-card__eyebrow{
    min-height: 29px;
    padding: 0 11px;
    font-size: 0.74rem !important;
  }

  #blockContainer .lms-context-card h3{
    font-size: clamp(1.45rem, 7.4vw, 1.95rem) !important;
    line-height: 1.14 !important;
  }

  #blockContainer .lms-context-card__lead{
    font-size: 0.96rem !important;
    line-height: 1.48 !important;
  }

  #blockContainer .lms-context-card__body p{
    font-size: 0.94rem !important;
    line-height: 1.58 !important;
  }

  #blockContainer .lms-context-card__item{
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px;
    padding: 14px;
    border-radius: 18px;
  }

  #blockContainer .lms-context-card__icon{
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  #blockContainer .lms-context-card__icon svg{
    width: 21px;
    height: 21px;
  }

  #blockContainer .lms-context-card__item h4{
    font-size: 0.96rem !important;
  }

  #blockContainer .lms-context-card__item p{
    font-size: 0.84rem !important;
  }

  #blockContainer .lms-context-card__resource{
    padding: 15px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  #blockContainer .lms-context-card__resource-link{
    width: 100%;
    min-height: 48px;
  }
}

/* Tablet / desktop */
@media (min-width: 768px){

  #blockContainer .lms-context-card{
    gap: 22px;
    padding: clamp(24px, 3vw, 34px);
    border-radius: 28px;
  }

  #blockContainer .lms-context-card__items{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  #blockContainer .lms-context-card__item{
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "title"
      "text";
    justify-items: center;
    align-content: start;
    text-align: center;
    min-height: 144px;
    padding: 17px 14px 15px;
  }

  #blockContainer .lms-context-card__icon{
    margin-bottom: 11px;
  }

  #blockContainer .lms-context-card__resource{
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    padding: 19px 20px;
    margin-top: 40px;
  }
}

/* Desktop */
@media (min-width: 1024px){

  #blockContainer .lms-context-card{
    gap: 24px;
  }

  #blockContainer .lms-context-card h3{
    font-size: clamp(1.82rem, 2.5vw, 2.32rem) !important;
  }

  #blockContainer .lms-context-card__body{
    gap: 14px;
  }

  #blockContainer .lms-context-card__item{
    min-height: 148px;
  }
}




/* ==========================================================================
   LMS reader lists / Списки внутри учебных блоков
   ========================================================================== */

#blockContainer ol,
#blockContainer ul{
  margin: clamp(14px, 2.2vw, 22px) 0 clamp(20px, 3vw, 30px);
  padding-left: clamp(24px, 3vw, 34px);
  color: #25252b;
}

#blockContainer li{
  margin: 0 0 clamp(1px, 1.6vw, 10px);
  padding-left: clamp(2px, 0.6vw, 6px);
  color: #25252b;
  font-size: clamp(0.9rem, 1.15vw, 1rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}





#blockContainer li::marker{
  color: #5B00A6;
  font-weight: 700;
}

#blockContainer li:last-child{
  margin-bottom: 0;
}