/* ============================================================
   Demotivation v2 — Mobile fixes
   Подключается ПОСЛЕ redesign.css.
   Преимущественно @media (max-width: 900px) и (max-width: 480px).
   Покрывает типовые проблемы на 375 / 414 / 768.
   ============================================================ */

/* ─── Базовые ограничения ─────────────────────────────────── */
img, video, iframe, svg {
    max-width: 100%;
}

/* Длинные слова/ссылки не должны разрывать контейнер */
.dem-page__title,
.dem-page__subtitle,
.comment__body,
.dem-card__titles b,
.dem-card__titles span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ─── Шапка: компактнее на средних ────────────────────────── */
@media (max-width: 900px) {
    .site-header__row {
        gap: 8px;
    }

    .site-logo {
        max-width: 55vw;
    }

    .site-header__actions {
        gap: 4px;
    }

    /* Кнопка «Установить» на мобильном — только иконка */
    .pwa-install-btn span {
        display: none;
    }
    .pwa-install-btn {
        padding: 6px 8px;
    }
}

/* На самых узких — nav чуть плотнее */
@media (max-width: 480px) {
    .site-nav a {
        padding: 6px 10px;
        font-size: 12.5px;
    }

    .site-header__actions .btn {
        padding: 6px 10px;
        font-size: 12.5px;
    }
}

/* ─── Hero: кнопки в столбик на 375 ───────────────────────── */
@media (max-width: 420px) {
    .hero {
        padding: 36px 16px 32px;
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .hero__actions .btn {
        width: 100%;
        padding: 13px 18px;
        font-size: 14.5px;
    }
}

/* ─── Сетка демо: 1 колонка до 420px ──────────────────────── */
@media (max-width: 420px) {
    .dem-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ─── Страница демо: голосование ──────────────────────────── */
@media (max-width: 640px) {
    /* 3 кнопки голосования — делаем прокручиваемый ряд */
    .dem-page__vote {
        padding: 12px;
        gap: 6px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
    }
    .dem-page__vote::-webkit-scrollbar { display: none; }

    .dem-page__vote-label,
    .dem-page__vote-hint {
        flex: 0 0 auto;
    }

    .dem-vote-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 9px 12px;
        font-size: 13px;
    }

    .dem-vote-btn__count {
        margin-left: 4px;
        padding: 0 5px;
        font-size: 10px;
    }

    /* Если браузер поддерживает :has — центруем когда влезает */
    @supports selector(:has(*)) {
        .dem-page__vote:not(:has(.dem-vote-btn:last-child)) {
            justify-content: center;
        }
    }
}

/* ─── Linkbar (ссылки под голосованием) ──────────────────── */
@media (max-width: 640px) {
    .dem-page__linkbar {
        gap: 2px;
        margin-top: 12px;
    }
    .dem-page__linkbar a {
        padding: 7px 11px;
        font-size: 12.5px;
    }
}

@media (max-width: 380px) {
    .dem-page__linkbar a {
        padding: 6px 9px;
        font-size: 12px;
    }
}

/* ─── Комментарии: дерево ─────────────────────────────────── */
/*
 * При depth > 5 дерево уезжало за экран.
 * Ограничиваем отступ: min(8 * 10px, depth * 10px). Т.е. после
 * 8 уровня дерево больше не сдвигается.
 */
@media (max-width: 640px) {
    .comment {
        margin-left: calc(min(var(--depth, 0), 6) * 10px);
        padding: 8px 10px;
    }

    .comment__children {
        padding-left: 8px;
        margin-left: 2px;
    }
}

@media (max-width: 380px) {
    .comment {
        margin-left: calc(min(var(--depth, 0), 4) * 8px);
        padding: 7px 8px;
    }
    .comment__children {
        padding-left: 6px;
        margin-left: 1px;
        border-left-width: 1px;
    }
}

/* ─── Комментарии: кнопки действий ────────────────────────── */
@media (max-width: 640px) {
    .comment__actions {
        gap: 3px 4px;
    }

    .comment__action-btn {
        padding: 4px 8px;
        font-size: 11.5px;
    }

    .comment__action-btn__label {
        display: inline;
    }

    .comment__rating {
        padding: 1px;
    }

    .comment__rating .comment__action-btn {
        min-width: 22px;
        padding: 2px 5px;
        font-size: 12px;
    }

    .comment__rating-value {
        min-width: 18px;
        font-size: 11.5px;
    }

    .comment__action-btn__count {
        padding: 0 5px;
        font-size: 9.5px;
    }
}

/* На очень узких — прячем текст у кнопок «Изменить / Удалить», оставляем иконку */
@media (max-width: 380px) {
    .comment__action-btn[data-action="edit-own-comment"] .comment__action-btn__label,
    .comment__action-btn[data-action="delete-own-comment"] .comment__action-btn__label {
        display: none;
    }
}

/* ─── Форма комментария и ответа ─────────────────────────── */
@media (max-width: 640px) {
    .comment-form {
        padding: 10px;
    }

    .comment-form textarea {
        font-size: 15px; /* предотвращает zoom в iOS при фокусе */
        min-height: 100px;
    }

    .comment-reply-wrap {
        padding: 10px 10px 12px;
        margin: 10px 0 4px;
    }

    .comment-reply-wrap__header {
        font-size: 12px;
        padding: 5px 7px;
        flex-wrap: wrap;
    }

    /* BB-панель — горизонтальный скролл */
    .bb-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 4px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .bb-toolbar .link-btn {
        flex: 0 0 auto;
        padding: 4px 8px;
        font-size: 12px;
        white-space: nowrap;
    }
}

/* ─── Форма создания /crop ────────────────────────────────── */
@media (max-width: 640px) {
    .create-page {
        padding: 20px 0 32px;
    }

    .create-head h1 {
        font-size: 22px;
    }

    .create-head p {
        font-size: 14px;
    }

    .maker {
        gap: 20px;
    }

    .maker__canvas {
        aspect-ratio: 4 / 3;
        padding: 16px;
        border-radius: 12px;
    }

    .maker__submit {
        padding: 14px 18px;
        font-size: 15px;
    }

    .crop-page {
        padding: 20px 0 32px;
    }
}

/* ─── Формы — не даём браузеру зуммить на фокусе ─────────── */
@media (max-width: 640px) {
    .form-row input[type="text"],
    .form-row input[type="email"],
    .form-row input[type="password"],
    .form-row input[type="url"],
    .form-row input[type="number"],
    .form-row textarea,
    .form-row select,
    .sidebar__search input,
    .search-form input {
        font-size: 16px;
    }
}

/* ─── Модалки (правила, пожаловаться) ────────────────────── */
@media (max-width: 480px) {
    .report-modal,
    .rules-modal {
        padding: 8px;
    }

    .report-modal__dialog,
    .rules-modal__dialog {
        padding: 20px 16px 16px;
        max-height: calc(100vh - 16px);
        border-radius: 12px;
    }

    .report-modal__title,
    .rules-modal__dialog h2 {
        font-size: 17px;
    }

    .report-cause {
        padding: 8px 10px;
    }

    .report-cause__label {
        font-size: 13px;
    }

    .report-cause__hint {
        font-size: 11px;
    }

    .report-modal__actions {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .report-modal__actions .btn {
        width: 100%;
    }
}

/* ─── Админка ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .admin-table {
        font-size: 12px;
    }

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

    /* Кнопки в очереди модерации — переносить */
    .admin-queue__actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    .admin-queue__actions .btn {
        font-size: 12px;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .admin-queue__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-queue__actions .btn,
    .admin-queue__actions .inline-form {
        width: 100%;
    }
    .admin-queue__actions .inline-form .btn {
        width: 100%;
    }
}

/* ─── Подвал — на узких ссылки плотнее ───────────────────── */
@media (max-width: 480px) {
    .site-footer__col a {
        padding: 6px 0;
        font-size: 13.5px;
    }

    .site-footer__bottom {
        font-size: 12px;
    }
}

/* ─── Тосты — уже под экран с отступами ──────────────────── */
@media (max-width: 640px) {
    .toast {
        left: 12px;
        right: 12px;
        max-width: none;
        font-size: 13px;
        padding: 10px 14px;
    }
}

/* ─── Кнопка темы / установить — тапабельная область ────── */
@media (max-width: 900px) {
    .theme-toggle,
    .pwa-install-btn {
        min-width: 36px;
        min-height: 36px;
        padding: 6px;
    }
}