/**
 * T396 (Zero Block): на мобильных absolute + фиксированные top/height и повторяющиеся
 * data-elem-id в разных #rec… дают наложение. Селекторы строго с #rec… + .course-landing-tilda.
 * Десктоп не трогаем (только max-width: 768px).
 */

@media (max-width: 768px) {
  /* ---------- Автор программы #rec873107281 ---------- */
  .course-landing-tilda #rec873107281 .t396__artboard {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: relative !important;
    padding-bottom: max(48px, calc(32px + env(safe-area-inset-bottom, 0px))) !important;
    box-sizing: border-box !important;
  }

  .course-landing-tilda #rec873107281 .t396__filter,
  .course-landing-tilda #rec873107281 .t396__carrier {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    pointer-events: none !important;
  }

  /* Декор: вне потока flex, не раздувает артборд */
  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1740647043558"],
  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1740647188745"] {
    position: absolute !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1740647215133"],
  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1466084312673"],
  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1473937900359"],
  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1469216647562"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    z-index: 2 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1740647215133"] {
    order: 1 !important;
  }
  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1466084312673"] {
    order: 2 !important;
  }
  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1473937900359"] {
    order: 3 !important;
  }
  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1469216647562"] {
    order: 4 !important;
  }

  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1740647215133"] .tn-atom__img,
  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1740647215133"] img {
    max-height: min(50vh, 320px) !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Подзаголовок: снять fixed height из Tilda */
  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1473937900359"] .tn-atom {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Перекрыть 11_responsive: меньше агрессивных переносов у имени и роли */
  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1466084312673"] .tn-atom,
  .course-landing-tilda #rec873107281 .tn-elem[data-elem-id="1473937900359"] .tn-atom {
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    -ms-hyphens: manual !important;
  }

  /* Соседние .t-rec: декор #rec872374542 рисуется под этим слоём. Непрозрачный фон обязателен:
     иначе через «пустые» пиксели артборда всё равно просвечивают полосы из нижнего блока. */
  .course-landing-tilda #rec872372160 {
    position: relative !important;
    z-index: 10 !important;
    background-color: #ffffff !important;
  }

  /* ---------- «Как проходит обучение» заголовок #rec872372160 (капсула + текст) ----------
     Не min-height:0 на carrier/filter — как у rec872374542, иначе схлопывание потока.
     Высоты не ниже Tilda: 639px 130px, 479px 120px + запас под перенос заголовка. */
  .course-landing-tilda #rec872372160 .t396__artboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    justify-items: center !important;
    height: auto !important;
    min-height: 130px !important;
    padding: 24px max(16px, env(safe-area-inset-left)) max(36px, 12px + env(safe-area-inset-bottom, 0px))
      max(16px, env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    isolation: isolate !important;
    background-color: #ffffff !important;
  }

  @media (max-width: 480px) {
    .course-landing-tilda #rec872372160 .t396__artboard {
      min-height: 140px !important;
    }
  }

  .course-landing-tilda #rec872372160 .tn-elem {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 auto !important;
    justify-self: center !important;
    align-self: center !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Капсула снизу по z-index, заголовок сверху — иначе линии T396 «режут» буквы */
  .course-landing-tilda #rec872372160 .tn-elem[data-elem-type="shape"] {
    z-index: 0 !important;
    width: min(100%, 720px) !important;
    pointer-events: none !important;
  }

  .course-landing-tilda #rec872372160 .tn-elem[data-elem-type="text"] {
    z-index: 15 !important;
    width: min(100%, 680px) !important;
    padding: 0 14px !important;
    background-color: #ffffff !important;
  }

  .course-landing-tilda #rec872372160 .tn-elem[data-elem-type="text"] .tn-atom {
    text-align: center !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    position: relative !important;
    z-index: 2 !important;
    background-color: #ffffff !important;
  }

  /* ---------- Таймлайн обучения #rec872374542 ----------
     Не трогаем height/min-height artboard: в T396 слои absolute — height:auto схлопывает
     блок в потоке, следующий #rec872372911 заезжает наверх. Safe-area — на .r.t-rec. */
  .course-landing-tilda #rec872374542 {
    position: relative !important;
    z-index: 0 !important;
    padding-top: 20px !important;
    padding-bottom: max(32px, calc(16px + env(safe-area-inset-bottom, 0px))) !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
  }

  /* Слой фигур ниже текста и иконок — линии декора не перечёркивают «10 недель» и фиолетовый абзац */
  .course-landing-tilda #rec872374542 .t396__artboard {
    isolation: isolate !important;
  }

  .course-landing-tilda #rec872374542 .tn-elem[data-elem-id="1740584034022"] {
    z-index: 0 !important;
    pointer-events: none !important;
  }

  .course-landing-tilda #rec872374542 .tn-elem[data-elem-id="1740488493231"] {
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .course-landing-tilda #rec872374542 .tn-elem[data-elem-id="1740583959585"] {
    z-index: 35 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 48px) !important;
    max-width: calc(100% - 48px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .course-landing-tilda #rec872374542 .tn-elem[data-elem-id="1740583959585"] .tn-atom {
    text-align: center !important;
    padding-left: 8px !important;
    padding-right: max(52px, env(safe-area-inset-right, 0px)) !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
  }

  .course-landing-tilda #rec872374542 .tn-elem[data-elem-id="1740316068129"] .tn-atom,
  .course-landing-tilda #rec872374542 .tn-elem[data-elem-id="1740583971984"] .tn-atom,
  .course-landing-tilda #rec872374542 .tn-elem[data-elem-id="1740584192106"] .tn-atom {
    background-color: #ffffff !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .course-landing-tilda #rec872374542 .tn-elem[data-elem-id="1740584192106"] {
    z-index: 32 !important;
  }

  .course-landing-tilda #rec872374542 .tn-elem[data-elem-id="1740316068129"] {
    z-index: 34 !important;
  }

  .course-landing-tilda #rec872374542 .tn-elem[data-elem-id="1740583971984"] {
    z-index: 33 !important;
  }

  /* Узкие телефоны: Tilda даёт artboard 490px при 479px — мало для многострочного подзаголовка.
     Tilda: «10 недель» 1740316068129 с top:-7px — линии заезжают на #rec872372160. */
  @media (max-width: 480px) {
    .course-landing-tilda #rec872374542 .t396__artboard,
    .course-landing-tilda #rec872374542 .t396__filter,
    .course-landing-tilda #rec872374542 .t396__carrier {
      min-height: 560px !important;
    }

    .course-landing-tilda #rec872374542 .tn-elem[data-elem-id="1740316068129"] {
      top: 12px !important;
    }

    /* Декор-полоса у верхней кромки — чуть ниже, чтобы не цепляла предыдущий рекорд */
    .course-landing-tilda #rec872374542 .tn-elem[data-elem-id="1740488493231"] {
      top: 24px !important;
    }
  }
}