/**
 * Мобильные переопределения для главной и общих блоков.
 * Подключается после выгрузки Webflow; перебивает неадаптивные значения (большие rem/em).
 */
@media screen and (max-width: 991px) {
  .hero .hero_star {
    margin-left: 0 !important;
    margin-top: 1rem;
  }
  /* Hero не выходит за край экрана */
  .hero {
    overflow-x: hidden;
  }
  .hero .hero_wrapper {
    width: 100% !important;
  }
  .hero .hero_back {
    width: 100% !important;
    box-sizing: border-box;
    position: relative;
  }
  .hero .hero_back_gradient {
    bottom: -0.1rem;
    height: 100%;
    min-height: 100%;
  }
}

@media screen and (max-width: 767px) {
  /* Убираем обнуление паддингов у футера из выгрузки (.padding-global.f) */
  .padding-global.f {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* Перебиваем выгрузку: огромные размеры на мобильных */
  ._19px-txt {
    font-size: 1rem !important;
  }
  .heading {
    font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
    line-height: 1.25 !important;
  }
  ._30px-text {
    font-size: 1.35rem !important;
  }
  .logo {
    width: 10rem !important;
    max-width: 160px;
  }
  /* Hero: убираем фиксированные высоты из выгрузки */
  .hero .hero_wrapper {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 1.5rem !important;
  }
  .hero .hero_back {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 2rem;
    border-radius: 1.5rem;
    box-sizing: border-box;
  }
  .hero .hero_back_gradient {
    height: 100vh;
    width: 100vw;
  }

  .hero_star {
    display: none;
  }
  /* Бегущая строка: контейнер по ширине экрана, без переполнения */
  .hero .runnig_line_wrapper {
    width: 100% !important;
    max-width: 100%;
    margin-top: 2rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    overflow: hidden;
    box-sizing: border-box;
  }
  .hero .running_line {
    width: 100% !important;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  /* Полоса иконок: ширина по контенту (8 иконок + отступы), без фиксированных 76rem */
  .hero .line_item,
  .hero .running_line .line_item {
    width: auto !important;
    min-width: min-content !important;
    max-width: none !important;
    flex-shrink: 0;
    grid-column-gap: 2.5rem !important;
    grid-row-gap: 2.5rem !important;
  }
  .hero .train {
    flex-shrink: 0;
    grid-column-gap: 2.5rem !important;
    grid-row-gap: 2.5rem !important;
  }
  /* Градиенты по краям: по ширине видимой области, узкие полосы затухания */
  .hero .running_line_gradient {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    box-sizing: border-box;
    pointer-events: none;
  }
  .hero .running_line_gradient .left_gradient,
  .hero .running_line_gradient .right_gradient {
    width: 7.5rem !important;
    min-width: 7.5rem !important;
    height: 100% !important;
    flex: none !important;
  }
  /* Hero: ритм отступов между заголовком, текстом и кнопками */
  .hero .hero_main {
    margin-top: 2rem !important;
    grid-column-gap: 0 !important;
    grid-row-gap: 1.25rem !important;
    row-gap: 1.25rem !important;
  }
  .hero .hero_h1 {
    width: 100% !important;
    grid-column-gap: 0 !important;
    grid-row-gap: 0.875rem !important;
    row-gap: 0.875rem !important;
  }
  .hero .hero_h1 .heading {
    margin-bottom: 0 !important;
  }
  .hero .hero_h1 ._19px-txt {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .hero .hero_buttons {
    padding-top: 0 !important;
    margin-top: 0 !important;
    grid-column-gap: 0 !important;
    grid-row-gap: 0.75rem !important;
    row-gap: 0.75rem !important;
    flex-direction: column;
    align-items: stretch;
  }
  .hero .contact_me,
  .hero .view_projects {
    width: 100% !important;
    max-width: 18rem !important;
    min-height: 3rem !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
  }
  .hero .hero_star {
    margin-left: 0 !important;
    margin-top: 1rem;
  }
  .hero .hero_star .svg-2 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  /* Иконки в бегущей строке — читаемый размер на мобильных */
  .hero .rl-icon {
    width: 2rem !important;
    height: 2rem !important;
    flex-shrink: 0;
  }

  /* Навбар: кнопка «Написать» и подпись темы */
  .nav_button {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 2.5rem !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    border-radius: 2rem !important;
  }
  .nav_button ._19px-txt {
    font-size: 0.9rem !important;
  }
  .theme-toggle-label {
    font-size: 0.9rem !important;
  }
  /* Проекты: карточки 16:9 по ширине контейнера на мобильных */
  .projects .div-block-25 {
    width: 100%;
    max-width: 100%;
  }
  .projects-list {
    grid-template-columns: 1fr;
    gap: 0 0;
    row-gap: 2rem;
  }
  .projects .project-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
  }
  .projects .slide_wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    box-sizing: border-box;
  }
  .projects .slide_wrapper .project_image {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .project-card {
    min-width: 280px !important;
    max-width: 85vw;
  }
  /* Обо мне: изображение и кнопка в пределах экрана */
  .about_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
  }
  .about_wrap {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
  }
  .about_left {
    width: 100% !important;
    max-width: 18rem !important;
    min-width: 0 !important;
    height: auto !important;
    display: flex;
    justify-content: center;
  }
  .about .image-6 {
    width: 100% !important;
    max-width: 18rem !important;
    min-width: 0 !important;
    height: auto !important;
    display: block;
  }
  .about_right {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    grid-column-gap: 0 !important;
    grid-row-gap: 0.875rem !important;
    row-gap: 0.875rem !important;
  }
  .about_right ._30px-text {
    font-size: 1.2rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .about_right ._19px-txt-copy {
    font-size: 0.95rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .about .contact_me.blue {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 2.75rem !important;
    height: auto !important;
    padding: 0.65rem 1.5rem !important;
    font-size: 0.95rem !important;
    border-radius: 2rem !important;
    box-sizing: border-box;
  }
  /* Форма: компактные поля и кнопка на мобильных (перебиваем 7rem, 2.21em из выгрузки) */
  .form {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .form .form_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .form .form-block,
  .form .form-2 {
    grid-column-gap: 0 !important;
    grid-row-gap: 1rem !important;
    row-gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .form .div-block-21 {
    flex-direction: column !important;
    gap: 1rem;
  }
  .form .text-field,
  .form .textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
    padding: 1rem 1.15rem !important;
    min-height: 2.75rem !important;
    height: auto !important;
    border-radius: 9999px !important;
  }
  .form .textarea {
    min-height: 4.5rem !important;
    resize: vertical;
    border-radius: 1.5rem !important;
  }
  .form .submit-button {
    width: 100% !important;
    max-width: 18rem !important;
    min-height: 2.75rem !important;
    height: auto !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    border-radius: 9999px !important;
  }
  .form .div-block-23 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    margin-top: 0.5rem !important;
  }
  .form .form-consent__item input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.2rem;
  }
  .form .form-consent__text {
    font-size: 0.95rem !important;
  }
  .form ._30px-text,
  .form ._19px-txt {
    font-size: 1rem !important;
  }
  .form .div-block-24 ._30px-text {
    font-size: 1.15rem !important;
  }
  .form .socials {
    gap: 1.25rem !important;
  }
  .form .social_link {
    font-size: 1.05rem !important;
    padding: 0.7rem 1.4rem !important;
  }
  /* Подвал: текст и соцкнопки не огромные на мобильных */
  .footer_wrapper {
    padding: 2rem 0 !important;
  }
  .footer .nav_top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer .footer_menu ._19px-txt {
    font-size: 0.95rem !important;
  }
  .footer_menu {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .footer .nav_bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }
  .footer .nav_bottom ._19px-txt-copy {
    font-size: 0.9rem !important;
    text-align: center;
  }
  .footer .navbar_links {
    width: auto !important;
    gap: 1rem;
    justify-content: center;
  }
  .footer .nav_link {
    width: 2.5rem !important;
    height: 2.5rem !important;
    flex-shrink: 0;
  }
  .footer .nav_link svg {
    width: 100%;
    height: 100%;
  }
  /* Cookie-баннер на мобильных */
  .cookie-banner {
    padding: 1rem;
  }
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cookie-banner__text {
    font-size: 0.9rem;
  }
  .cookie-banner__actions {
    justify-content: stretch;
    flex-direction: row;
  }
  .cookie-banner__btn {
    flex: 1;
    min-width: 0;
  }
  .privacy-page {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .privacy-page__title {
    font-size: 1.6rem !important;
  }
  .privacy-content h2 {
    font-size: 1.25rem !important;
  }
}

@media screen and (max-width: 479px) {
  .heading {
    font-size: 1.35rem !important;
  }
  ._30px-text {
    font-size: 1.15rem !important;
  }
  ._19px-txt {
    font-size: 0.95rem !important;
  }
  /* Hero: чуть плотнее отступы на узких экранах */
  .hero .hero_main {
    grid-row-gap: 1rem !important;
    row-gap: 1rem !important;
  }
  .hero .hero_h1 {
    grid-row-gap: 0.75rem !important;
    row-gap: 0.75rem !important;
  }
  .hero .hero_buttons {
    grid-row-gap: 0.65rem !important;
    row-gap: 0.65rem !important;
  }
  /* Бегущая строка на узких экранах: меньше отступы и иконки */
  .hero .runnig_line_wrapper {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .hero .line_item,
  .hero .running_line .line_item {
    grid-column-gap: 2.5rem !important;
    grid-row-gap: 2.5rem !important;
  }
  .hero .train {
    grid-column-gap: 2.5rem !important;
    grid-row-gap: 2.5rem !important;
  }
  .hero .rl-icon {
    width: 1.75rem !important;
    height: 1.75rem !important;
  }
  .hero .running_line_gradient .left_gradient,
  .hero .running_line_gradient .right_gradient {
    width: 7.5rem !important;
    min-width: 7.5rem !important;
  }
  .hero .contact_me,
  .hero .view_projects {
    max-width: 100% !important;
    min-height: 2.75rem !important;
    padding: 0.65rem 1.25rem !important;
    font-size: 0.95rem !important;
  }
  .about .image-6 {
    max-width: 16rem !important;
  }
  .about .contact_me.blue {
    padding: 0.6rem 1.25rem !important;
    font-size: 0.9rem !important;
  }
  .about_right {
    grid-row-gap: 0.75rem !important;
    row-gap: 0.75rem !important;
  }
  .nav_button {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.85rem !important;
  }
  .form .text-field,
  .form .textarea {
    min-height: 2.5rem !important;
    padding: 1rem 1rem !important;
    font-size: 0.95rem !important;
    border-radius: 9999px !important;
  }
  .form .textarea {
    min-height: 10rem !important;
    border-radius: 1.25rem !important;
  }
  .form .submit-button {
    max-width: 100% !important;
    min-height: 2.75rem !important;
    padding: 0.7rem 1.25rem !important;
    font-size: 0.95rem !important;
    border-radius: 9999px !important;
  }
  .form .form-2,
  .form .form-block {
    grid-row-gap: 0.875rem !important;
    row-gap: 0.875rem !important;
  }
  .form .div-block-24 ._30px-text {
    font-size: 1.05rem !important;
  }
  .form .socials {
    gap: 1.5rem !important;
  }
  .form .social_link {
    font-size: 1rem !important;
    padding: 0.65rem 1.25rem !important;
  }
  .footer .nav_bottom ._19px-txt-copy {
    font-size: 0.85rem !important;
  }
  .footer .nav_link {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }
  .projects .project-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .project-card {
    min-width: 260px !important;
  }
  .privacy-page {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .privacy-page__title {
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .privacy-content {
    font-size: 0.95rem !important;
  }
  .privacy-content h2 {
    font-size: 1.2rem !important;
    margin-top: 1.5rem !important;
  }
}