@import './variables.css';

/*
  Глобальные responsive-стили: контейнер, секции, заголовки.
  Стили .double-list / .list-item общие для секций "Проблема" и "Как работает".
  Секционные медиа-запросы — в файлах hero, solution, audience, entities, works-by, onboarding, start-trial.
*/

/* Breakpoint: 1399px */
@media (max-width: 1399px) {
    .container-xl {
        padding: 0 var(--container-padding);
    }

    .container-xl.g-0 > .row {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }
}

/* Breakpoint: 1199px — double-list (Проблема + Как работает) */
@media (max-width: 1199px) {
    .double-list {
        flex-direction: column;
        padding: var(--gap-3xl) var(--gap-2xl);
    }

    .list-item-holder {
        width: 100%;
    }
}

/* Breakpoint: 768px — layout + double-list */
@media (max-width: 768px) {
    .container-xl {
        padding: 0 var(--container-padding-tablet);
    }

    .container-xl.g-0 > .row {
        padding-left: var(--container-padding-tablet);
        padding-right: var(--container-padding-tablet);
    }

    section {
        padding: var(--section-padding-tablet);
    }

    section.pt-0 {
        padding-top: 0;
    }

    section.pb-0 + section.pt-0 {
        padding-top: var(--gap-5xl);
    }

    .section-header {
        margin-bottom: var(--margin-section-header-tablet);
    }

    .section-header h1 {
        font-size: var(--font-size-h1-tablet);
        line-height: var(--line-height-h1-tablet);
        margin-bottom: var(--gap-md);
    }

    .section-header h2 {
        font-size: var(--font-size-h2-tablet);
        line-height: var(--line-height-h2-tablet);
        margin-bottom: var(--gap-md);
    }

    .section-header p {
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
    }

    .double-list {
        padding: var(--gap-2xl) var(--gap-xl);
        border-radius: var(--radius-xl);
    }

    .list-item {
        flex-direction: row;
        text-align: left;
        gap: var(--gap-md);
        align-items: flex-start;
    }

    .list-item-holder {
        gap: var(--gap-lg);
    }

    .list-item-holder.align-left .list-item {
        align-items: flex-start;
        text-align: left;
    }

    .list-item-image {
        padding-top: 2px;
    }

    .list-item-text h3 {
        font-size: var(--font-size-h3);
    }

    .list-item-text p {
        font-size: var(--font-size-body-small);
        line-height: var(--line-height-body);
    }
}

/* Breakpoint: 480px — layout + double-list */
@media (max-width: 480px) {
    .container-xl {
        padding: 0 var(--container-padding-mobile);
    }

    .container-xl.g-0 > .row {
        padding-left: var(--container-padding-mobile);
        padding-right: var(--container-padding-mobile);
    }

    section {
        padding: var(--section-padding-mobile);
    }

    section.pb-0 + section.pt-0 {
        padding-top: var(--section-padding-mobile);
    }

    .section-header {
        margin-bottom: var(--margin-section-header-mobile);
    }

    .section-header h1 {
        font-size: var(--font-size-h1-mobile);
        line-height: var(--line-height-h1-mobile);
        margin-bottom: var(--gap-sm);
    }

    .section-header h2 {
        font-size: var(--font-size-h2-mobile);
        line-height: var(--line-height-h2-mobile);
        margin-bottom: var(--gap-sm);
    }

    .section-header p {
        font-size: var(--font-size-body-small);
        line-height: 22px;
    }

    .double-list {
        padding: var(--gap-xl) var(--gap-md);
        border-radius: var(--radius-lg);
    }

    .list-item {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--gap-sm);
    }

    .list-item-holder {
        gap: var(--gap-md);
    }

    .list-item-holder.align-left .list-item {
        align-items: flex-start;
        text-align: left;
    }

    .list-item-image {
        padding-top: 2px;
        flex-shrink: 0;
    }

    .list-item-image img {
        width: var(--icon-size-md);
        height: var(--icon-size-md);
    }

    .list-item-image i {
        font-size: var(--icon-size-md);
    }

    .list-item-text {
        flex: 1;
        min-width: 0;
    }

    .list-item-text h3 {
        font-size: var(--font-size-body-large);
        line-height: 26px;
    }

    .list-item-text p {
        font-size: var(--font-size-small);
        line-height: 22px;
    }
}