/* -------------------------------------------
   АДАПТИВ ДО 960px (планшеты + телефоны)
   Всё, что внутри этого блока, работает,
   когда ширина окна <= 960px
-------------------------------------------- */
@media (max-width: 960px) {

    /* Внешняя "карточка" отчёта */
    .report-container {
        border-radius: 0;
        box-shadow: none;
        padding: 22px 18px 24px;
    }

    /* Грид с KPI-карточками */
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 4px;
    }

    /* Блок с графиком + текстом под ним */
    .two-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Monthly returns table */
    .monthly-table {
        min-width: 860px;
        font-size: 10px;
    }

    .monthly-table th,
    .monthly-table td {
        padding: 6px 8px;
    }

    .monthly-section .section-caption {
        text-align: left;
    }

    /* Вертикальные отступы между секциями */
    .section {
        margin-top: 4px;
        margin-bottom: 4px;
    }

    /* KPI-карточки (планшеты/телефоны <=960px) */
    .kpi-card {
        padding: 14px 12px 14px;
    }

    .kpi-label {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .kpi-value {
        font-size: 22px;
    }

    .kpi-sub {
        font-size: 10px;
        margin-top: 4px;
    }

    /* ============================
       HERO-ШАПКА НА ПЛАНШЕТАХ/МОБИЛЕ (<=960)
       ============================ */

    .hero-header {
        padding: 24px 20px 24px;
        height: auto;
        min-height: 0;
    }

    .hero-header .hero {
        position: static;
        width: 100%;
        height: auto;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;

        margin: 0;
        padding: 0;
        border: 0;
    }

    .hero-header .hero-title,
    .hero-header .hero-strategy,
    .hero-header .hero-sub {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        margin: 0;
        text-align: center;
    }

    .hero-header .hero-title {
        display: flex;
        flex-direction: column;
        align-items: center;

        font-size: 30px;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    .hero-title-main,
    .hero-title-accent {
        display: block;
    }

    .hero-title-accent {
        margin-left: 0;
        top: 0;
    }

    .hero-header .hero-strategy {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .hero-header .hero-sub {
        margin-top: 4px;
        max-width: 420px;
        padding: 0 12px;
        white-space: normal;
        line-height: 1.5;
        font-size: 10px;
    }

    /* Заголовки секций + CTA */
    .section-header {
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .section-cta {
        margin-left: auto;
    }
}

/* -------------------------------------------
   АДАПТИВ ДО 640px (телефоны)
   Всё, что внутри, перекрывает настройки
   выше, когда ширина окна <= 640px
-------------------------------------------- */
@media (max-width: 640px) {

    /* KPI-грид: остаёмся в 2 колонки, но фиксируем gap для телефонов */        
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .monthly-table {
        min-width: 760px;
    }

    /* Верхняя панель */
    .top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .top-meta {
        text-align: left;
    }

    /* Контейнер отчёта */
    .report-container {
        padding: 18px 14px 22px;
    }

    /* Hero-шапка */
    .hero-header {
        padding: 18px 12px 18px;
        height: auto;
        min-height: 180px;
    }

    .hero-header .hero {
        justify-content: flex-start;
    }

    .hero-header .hero-title {
        font-size: 18px;
        letter-spacing: 0.006em;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;

        width: 100%;
        margin-top: 0;
    }

    .hero-title-main,
    .hero-title-accent {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .hero-title-main {
        text-align: left;
        margin-right: 8px;
    }

    .hero-title-accent {
        text-align: right;
        margin-left: 8px;
    }

    .hero-header .hero-strategy {
        font-size: 13px;
        text-align: center;
        margin-top: 80px;
    }

    .hero-header .hero-sub {
        display: block;

        position: absolute;
        right: 3px;
        bottom: 8px;

        max-width: 100%;
        text-align: right;
        font-size: 5.5px;
        line-height: 1.4;
        white-space: normal;
    }

    /* Заголовок секции + кнопка */
    .section-header {
        flex-direction: row;
        justify-content: space-between;
        gap: 4px 8px;
        text-align: left;
        align-items: flex-end;
    }

    .section-cta {
        margin-left: 12px;
    }

    .section-cta-btn {
        padding: 4px 10px;
        font-size: 9px;
        letter-spacing: 0.04em;
        margin-bottom: 5px;
    }

    /* KPI с иконкой "?" */
    .kpi-label {
        position: relative;
        padding-right: 18px;
        justify-content: center;
        font-size: 9px;
    }

    .kpi-label .kpi-info {
        position: absolute;
        top: 1px;
        right: 2px;
        margin-left: 0;

        width: 14px;
        height: 14px;
        font-size: 8px;
        line-height: 1;

        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .kpi-value {
        font-size: 20px;
    }

    .kpi-sub {
        font-size: 9px;
    }
}

/* -------------------------------------------
   АДАПТИВ ДЛЯ МАЛЕНЬКИХ IPHONE (<= 420px)
   Уменьшаем ключевые шрифты ~на 1pt
-------------------------------------------- */
@media (max-width: 420px) {

    /* Hero-тайтл и подзаголовки */
    .hero-header .hero-title {
        font-size: 17px !important;
        letter-spacing: 0.004em;
    }

    .hero-title-main,
    .hero-title-accent {
        font-size: 17px !important;
    }

    .hero-title-accent {
        margin-left: 4px;
    }

    .hero-header .hero-strategy {
        font-size: 12px !important;
    }

    .hero-header .hero-sub {
        font-size: 4.5px !important;
    }

    /* KPI-блоки */
    .kpi-card {
        padding: 14px 12px 14px;
    }

    .kpi-label {
        font-size: 9px;
    }

    .kpi-value {
        font-size: 20px;
    }

    .kpi-sub {
        font-size: 10px;
        margin-top: 4px;
    }

    /* Тексты секций и футера */
    .section-title {
        font-size: 16px;
    }

    .section-caption {
        font-size: 11px;
    }

    .text-panel {
        font-size: 12px;
    }

    .footer-left strong,
    .footer-right {
        font-size: 11px;
    }

    /* Кнопка CTA */
    .section-cta-btn {
        padding: 3px 8px;
        font-size: 8px;
        letter-spacing: 0.05em;
    }
}