/* ==========================================================================
   Hospital — additive small-screen hardening ("веб версия" / 375px)
   --------------------------------------------------------------------------
   Правила живут ТОЛЬКО внутри max-width media-queries: базовые стили
   существующих файлов не переопределяются, ничего не удаляется.
   Подключается после mobile.css, поэтому при равной специфичности выигрывает.
   Задача: на 375px нет горизонтального переполнения, блоки выровнены,
   карточки/таблицы складываются, тап-таргеты >= 44px, текст не обрезается.
   ========================================================================== */

/* --- 1. Таблицы кабинета (profile.php: .data-table) ---------------------- */
/* На узком экране таблица превращается в собственный скролл-контейнер,
   а не растягивает страницу вправо. */
@media (max-width: 576px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table th,
    .data-table td {
        padding: 10px;
        white-space: normal;
    }
}

/* --- 2. Общие ограничения: ничего не шире вьюпорта ----------------------- */
@media (max-width: 420px) {
    .container,
    .site-main {
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    img,
    svg,
    video,
    canvas,
    table {
        max-width: 100%;
    }

    .data-table { font-size: 0.78rem; }
    .card,
    .pp-card,
    .h-card,
    .cabinet-panel,
    .profile-section {
        max-width: 100%;
    }

    /* --- 3. Инструкция «Как это работает» (index.php) --- */
    .how_section {
        padding: 0 4px;
        margin-top: 40px;
    }
    .how_inner { max-width: 100%; }
    .how_subtitle { margin-bottom: 26px; }
    .how_steps {
        max-width: 100%;
        gap: 10px;
    }
    /* вертикальные стрелки между сложенными карточками только съедают высоту */
    .how_arrow { display: none; }
    .how_step_card {
        padding: 20px 16px 18px;
        border-radius: 16px;
    }
    .how_step_watermark {
        font-size: 3rem;
        right: 10px;
    }
    .how_step_cta {
        display: flex;
        width: 100%;
        justify-content: center;
        min-height: 44px;
        align-items: center;
    }

    /* --- 4. Маркет конфигов (market.php) --- */
    .mk-wrap { padding: 0 12px 48px; }
    .mk-hero { padding: 22px 14px 20px; }
    .mk-title {
        font-size: clamp(1.4rem, 7vw, 1.8rem);
        overflow-wrap: anywhere;
    }
    .mk-sub { max-width: 100%; }
    .mk-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .mk-bar { flex-direction: column; align-items: stretch; }
    .mk-search {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }
    .mk-input {
        min-width: 0;
        width: 100%;
        font-size: 16px; /* iOS не зумит поле ввода */
    }
    .mk-search-btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    .mk-sorts {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        flex-wrap: nowrap;
    }
    .mk-grid { grid-template-columns: 1fr; }
    .mk-card,
    .mk-empty,
    .mk-publish { max-width: 100%; }
    .mk-empty p,
    .mk-publish p { max-width: 100%; }

    /* --- 5. Подписка / кабинет / активация ключа --- */
    .sub-plan-grid { max-width: 100%; }
    .cabinet-nav-link {
        min-width: 0;
        flex: 1 1 100%;
    }
    .cabinet-panel,
    .cabinet-widget,
    .profile-section { padding-left: 12px; padding-right: 12px; }
    .activate-key-input { font-size: 16px; }
    .activate-submit-btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }
    .activate-hint { font-size: 0.78rem; }

    /* --- 6. Скачать (downloads.php) --- */
    .lb-check-inline { max-width: 100%; }
    .table-responsive-wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- 7. Совсем узкие экраны (375px и меньше) ---------------------------- */
@media (max-width: 375px) {
    .container,
    .site-main { padding-left: 10px; padding-right: 10px; }

    .h-hero-title { font-size: clamp(1.75rem, 10vw, 2.1rem); }
    .h-hero-lead { font-size: 0.9rem; }

    .how_step_watermark { font-size: 2.6rem; }
    .how_step_card { padding: 18px 14px 16px; }

    .mk-stats { grid-template-columns: 1fr; }
    .mk-sort { font-size: 0.78rem; }

    .h-btn,
    .cabinet-btn,
    .mk-search-btn,
    .how_step_cta {
        min-height: 44px;
    }
}

/* --- 8. Карточка конфига (market-detail.php -> /market/<id>) ------------- */
/* Правила только внутри max-width, как и весь файл: базовые стили карточки
   лежат в inline-блоке market-detail.php и здесь лишь ужимаются. */
@media (max-width: 900px) {
    .mkd-wrap { padding: 18px 14px 48px; }
    .mkd-layout { grid-template-columns: 1fr; }
    .mkd-shot { border-radius: 16px; }
    .mkd-card { padding: 15px 14px; }
    .mkd-title { font-size: clamp(1.25rem, 6.2vw, 1.7rem); }
    .mkd-desc { font-size: .88rem; }
    .mkd-thumb { width: 88px; height: 54px; }
    .mkd-review-date { margin-left: 0; }
    .mkd-version .mkd-author { margin-left: 0; }
    .mkd-side .h-btn { min-height: 46px; }
}

@media (max-width: 420px) {
    .mkd-wrap { padding: 14px 10px 42px; }
    .mkd-crumbs { font-size: .78rem; }
    .mkd-card { border-radius: 15px; padding: 13px 12px; }
    .mkd-shot { aspect-ratio: 4 / 3; border-radius: 14px; }
    .mkd-shot-badge,
    .mkd-shot-free { top: 8px; font-size: .66rem; padding: 5px 9px; }
    .mkd-shot-badge { left: 8px; }
    .mkd-shot-free { right: 8px; }
    .mkd-thumbs { gap: 6px; }
    .mkd-thumb { width: 78px; height: 48px; border-radius: 9px; }
    .mkd-rating-row { gap: 8px; }
    .mkd-meta { gap: 9px; font-size: .75rem; }
    .mkd-meta .mkd-author { margin-left: 0; }
    .mkd-tag { font-size: .72rem; padding: 5px 9px; }
    .mkd-actions .h-btn { width: 100%; justify-content: center; min-height: 46px; }
    .mkd-free-value { font-size: 1.35rem; }
    .mkd-free-block { padding: 12px 13px; }
    .mkd-stars-input label { font-size: 1.55rem; }
    .mkd-textarea { font-size: 16px; } /* iOS не зумит поле ввода */
    .mkd-submit { min-height: 48px; }
    .mkd-review-ava { width: 32px; height: 32px; }
    .mkd-reviews-list { gap: 10px; }
    .mkd-review { padding: 11px; }
    .mkd-404 { padding: 26px 14px; }
    .mkd-404 h1 { font-size: 1.12rem; }
    .mkd-404 .mkd-actions .h-btn { min-height: 46px; }
    .mk-free { font-size: .66rem; left: 8px; bottom: 8px; padding: 4px 8px; }
}

@media (max-width: 375px) {
    .mkd-wrap { padding: 12px 8px 40px; }
    .mkd-thumb { width: 72px; height: 44px; }
    .mkd-textarea { min-height: 76px; }
}

/* --- 9. Вход и регистрация: тап-таргет по галочке ------------------------ */
@media (max-width: 576px) {
    .auth-checkbox,
    .auth-checkbox-inline {
        gap: 8px;
    }
    .auth-checkbox input,
    .auth-checkbox-inline input {
        width: 20px;
        height: 20px;
    }
    .auth-checkbox label,
    .auth-checkbox-inline label {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 0;
    }
}