/* responsive.css - Адаптивные стили
 * Только медиа-запросы и переопределения под ширину экрана. Базовые стили — в core/components/layout. */

/* Планшеты (от 768px до 1024px) */
@media (max-width: 1024px) {
    /* Лента */
    .feed-layout {
        grid-template-columns: 1fr 280px;
        gap: 1.5rem;
    }
    
    /* Шапка */
    .header-nav {
        margin: 0 1rem;
        max-width: 320px;
    }
    
    .header-search {
        margin: 0 1rem;
        max-width: 300px;
    }
    
    /* Подвал: логотип сверху по центру, навигация — 3 колонки */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .footer-nav {
        grid-column: 1;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
    }
    
    .footer-brand {
        display: flex;
        /* text-align: center; */
    }
    
    .footer-description {
        max-width: 420px;
        margin: 0 auto;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    /* Профиль — та же сетка 25% | 75%, блок 100% */
    .profile-top-row {
        grid-template-columns: minmax(80px, 25%) 1fr;
        align-items: flex-start;
    }
    
    .profile-avatar-wrap {
        flex-shrink: 0;
    }
    
    .profile-avatar {
        width: 100%;
        max-width: 120px;
        height: auto;
        aspect-ratio: 1;
    }
    
    /* Вкладки профиля — только иконки на планшетах */
    .profile-nav .nav-tabs {
        width: 100%;
    }
    
    .profile-nav .nav-tab {
        flex: 1;
    }
    
    .profile-nav .nav-tab-label {
        display: none;
    }
    
    .profile-nav .nav-tab-link {
        width: 100%;
        justify-content: center;
        padding: 0.625rem 0.375rem;
    }
    
    .profile-nav .nav-tab-link svg,
    .profile-nav .nav-tab-link [data-lucide],
    .profile-nav .nav-tab-link i {
        margin: 0;
        width: 0.9375rem;
        height: 0.9375rem;
    }
}

/* Планшеты и телефоны (до 768px) */
@media (max-width: 768px) {
    /* Убираем горизонтальную прокрутку на всех страницах (в т.ч. настройки) */
    html {
        overflow-x: hidden;
    }
    .main-layout .container,
    .page-content {
        max-width: 100%;
        min-width: 0;
    }
    .feed-layout.settings-layout,
    .feed-layout .feed-main {
        min-width: 0;
    }
    .settings-section .card,
    .settings-section .card-body,
    .form-settings {
        min-width: 0;
    }
    .settings-avatar-row {
        flex-wrap: wrap;
    }

    .reaction-picker-popover {
        max-width: min(400px, calc(100vw - 2rem));
    }
    /* Переменные для мобильных (высота шапки на планшетах, чтобы .user-dropdown совпадал) */
    :root {
        --header-height: 64px;
        --container-padding: var(--space-3);
    }
    
    /* Шапка */
    .header-content {
        padding: 0 var(--container-padding);
    }
    
    /* Поиск в шапке скрыт на мобильном; иконки меню показываем как на ПК */
    .header-search {
        display: none;
    }

    
    .header-nav {
        display: block;
        margin: 0;
        max-width: none;
    }
    
    .header-nav .nav-list {
        gap: 0.25rem;
    }
    
    .header-nav .nav-link-icon {
        padding: 0.5rem;
    }

    .header-nav .nav-link-icon [data-lucide] {
        width: 1.55rem;
        height: 1.55rem;
    }

    .header-nav .nav-link-icon svg {
        width: 1.7rem;
        height: 1.7rem;
    }


    
    .auth-buttons {
        gap: 0.5rem;
    }
    
    .auth-buttons .btn {
        padding: 0.5rem 1rem;
        font-size: var(--font-size-xs);
    }
    
    /* Основной макет: одна колонка, лента по центру (макс. 600px) */
    .feed-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .feed-main {
        width: 100%;
        max-width: var(--content-max);
        margin-left: auto;
        margin-right: auto;
    }
    
    .feed-layout--notifications .feed-main {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Сайдбар: на мобиле только истории над лентой, остальное скрыто */
    .feed-sidebar {
        display: contents;
    }

    .feed-sidebar > *:not(.stories-sidebar-card) {
        display: none;
    }

    /* Компактный зазор между историями и лентой (не трогаем страницы без историй) */
    .feed-layout:has(.stories-sidebar-card) {
        gap: 0.5rem;
        /* общий padding ленты уже есть — не раздуваем сверху из‑за блока историй */
        padding-top: var(--space-3);
    }

    .stories-sidebar-card {
        order: -1;
        width: 100%;
        max-width: var(--content-max);
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Форма создания поста */

    .post-create-header {
        gap: 0.75rem;
    }
    
    .post-create-avatar {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    /* Посты — единый горизонтальный padding */
    .post-card {
        --post-pad-x: 0.8rem;
        --post-pad-y: 0.8rem;
    }

    .post-header, .post-content {
        padding: var(--post-pad-y) var(--post-pad-x);
    }

    .post-actions {
        padding: 0 var(--post-pad-x) 0.65rem;
    }

    .post-comment:has(.comments-section),
    .post-comment:has(.comment-form),
    .post-comment:has(.post-comments-disabled) {
        padding: 0.65rem var(--post-pad-x) 0.8rem;
    }

    .post-actions {
        gap: 0;
    }
    
    /* Карточки */
    .card-body {
        padding: 1.25rem;
    }
    
    /* Страница входа/регистрации */
    .auth-layout {
        padding: 1rem;
    }
    
    .auth-card {
        padding: 2rem;
    }
    
    /* Подвал: те же 3 колонки навигации */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-nav {
        grid-column: 1;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
    }
    
    .footer-brand {
        /* text-align: center; */
        display: flex;
    }
    
    /* Сетки */
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Модальные окна */
    .modal-content {
        max-width: 95%;
        width: 95%;
    }
    
    /* Шапка fixed (база в layout.css) — выше модалок меню на мобильном */
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--z-modal);
        display: flex;
        align-items: center;
        height: var(--header-height);
        min-height: var(--header-height);
        padding: 0;
    }
    
    .site-header .container {
        flex: 1;
        width: 100%;
        min-height: 0;
        display: flex;
        align-items: center;
    }
    
    .header-content {
        align-items: center;
    }
    
    .main-layout {
        /* padding-top: 1rem; */
    }
    
    /* Выпадающее меню под шапкой: top привязан к высоте шапки */
    .user-dropdown {
        position: fixed;
        top: 54px;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-top: 0;
        z-index: calc(var(--z-modal) - 1);
    }
    
    .user-dropdown.show {
        animation: slideInDown 0.2s ease;
    }
    
    @keyframes slideInDown {
        from {
            transform: translateY(-100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    /* Компактный поиск в меню пользователя на мобильных */
    .dropdown-search-mobile {
        display: flex;
        align-items: flex-start;
        gap: 0.375rem;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--color-border-light);
        background: var(--color-bg-secondary);
        position: relative;
    }
    .dropdown-search-mobile .dropdown-search-input-wrapper {
        flex: 1;
        min-width: 0;
    }
    .dropdown-search-mobile .search-suggestions {
        z-index: calc(var(--z-dropdown) + 1);
    }
    .dropdown-search-mobile .dropdown-search-input {
        flex: 1;
        min-width: 0;
        padding: 0.375rem 0.5rem;
        font-size: var(--font-size-sm);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-bg);
    }
    .dropdown-search-mobile .dropdown-search-btn {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: none;
        border-radius: var(--radius-sm);
        background: var(--color-primary);
        color: var(--color-text-inverse);
        cursor: pointer;
        transition: background-color var(--transition-fast), transform var(--transition-fast);
    }
    .dropdown-search-mobile .dropdown-search-btn:hover {
        background: var(--color-primary-hover);
    }
    .dropdown-search-mobile .dropdown-search-btn [data-lucide] {
        width: 1rem;
        height: 1rem;
    }
}

/* Узкие телефоны (до 480px) */
@media (max-width: 480px) {
    :root {
        --header-height: 56px;
    }
    
    .site-header {
        height: var(--header-height);
        min-height: var(--header-height);
        padding: 0;
    }

    .header-nav .nav-link-icon [data-lucide] {
        width: 1.2rem;
        height: 1.2rem;
    }

    .header-nav .nav-link-icon svg {
        width: 1.2rem;
        height: 1.2rem;
    }

    .reaction-picker-popover {
        max-width: calc(100vw - 2rem);
    }
    /* Шапка */
    .header-logo .logo-subtitle {
        display: none;
    }
    
    .auth-buttons .btn-text {
        display: none;
    }
    
    .auth-buttons .btn {
        padding: 0.5rem;
        min-width: 2.5rem;
        justify-content: center;
    }
    
    /* Посты */
    .post-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .post-author {
        flex: 1;
        min-width: 0;
    }
    
    .post-category {
        order: 1;
        width: 100%;
        text-align: center;
    }
    
    /* Профиль — та же сетка 25% | 75%, блок 100% */
    .profile-info {
        padding: 1.5rem 1rem;
    }
    
    .profile-top-row {
        grid-template-columns: minmax(72px, 32%) 1fr;
        gap: var(--space-4);
        align-items: center;
    }
    
    .profile-avatar {
        width: 100%;
        max-width: 96px;
        height: auto;
        aspect-ratio: 1;
    }
    
    .profile-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-1) var(--space-2);
    }

    .profile-stat-label {
        font-size: 0.65rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .profile-stat-value {
        font-size: var(--font-size-sm);
    }
    
    .profile-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
    
    /* Вкладки профиля — только иконки на мобильных */
    .profile-nav .nav-tabs {
        width: 100%;
    }
    
    .profile-nav .nav-tab {
        flex: 1;
    }
    
    .profile-nav .nav-tab-label {
        display: none;
    }
    
    .profile-nav .nav-tab-link {
        width: 100%;
        justify-content: center;
        padding: 0.625rem 0.25rem;
    }
    
    .profile-nav .nav-tab-link svg,
    .profile-nav .nav-tab-link [data-lucide],
    .profile-nav .nav-tab-link i {
        margin: 0;
        width: 0.875rem;
        height: 0.875rem;
    }
    
    /* Карточки */
    .card-header,
    .card-body,
    .card-footer {
        padding: 1rem;
    }
    
    /* Подвал: 2 колонки навигации (занимают больше ширины) */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding: 0 1rem;
    }
    
    .footer-nav {
        grid-column: 1;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    
    .footer-brand {
        display: block;
    }
    
    .footer-description {
        margin-left: auto;
        margin-right: auto;
    }
    
    .footer-bottom {
        flex-direction: column;
        padding: 2rem 1rem;
    }
    
    .footer-legal {
        gap: 1rem;
    }
    
    /* Модальные окна */
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1.25rem;
    }
    
    .modal-footer {
        gap: 0.75rem;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
    
    /* Сетки */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    /* Пагинация */
    .pagination ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Админ панель — выбор периода не перекрывается шапкой, блок в колонку */
    .admin-period-select {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .admin-period-select select {
        flex: 1;
        min-width: 0;
        max-width: none;
    }
    
    /* Страница входа/регистрации — компактно */
    .auth-card {
        padding: 1rem;
    }
    
    .auth-logo {
        font-size: 1.5rem;
    }
    
    .auth-title {
        font-size: var(--font-size-lg);
    }
    
    /* Поля ввода — минимум 16px, иначе iOS зумит при фокусе */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input.form-control,
    textarea,
    select,
    .search-input,
    [contenteditable="true"] {
        font-size: 1rem !important;
    }
    
    .header-logo .logo-text {
        font-size: 1.35rem;
    }
    
    .user-avatar {
        width: 2rem;
        height: 2rem;
    }
    
    .auth-buttons {
        gap: 0.25rem;
    }
    
    .auth-buttons .btn {
        padding: 0.375rem;
        min-width: 2rem;
    }
    
    /* Уведомления */
    .notifications-page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .notification-link {
        padding: 0.75rem 1rem;
        padding-right: 2.75rem;
        gap: 0.75rem;
    }
    .notification-item.unread::after {
        right: 2.35rem;
    }
    .notification-avatar-wrap {
        width: 40px;
        height: 40px;
    }
    .notification-close-btn {
        opacity: 1;
    }

    .main-layout--messages .container {
        padding-left: 0;
        padding-right: 0;
    }
    
    .messages-layout {
        padding: 0;
    }
    
    .messages-page {
        min-height: calc(100vh - var(--header-height));
        height: calc(100vh - var(--header-height));
    }
}


/* Портретная ориентация */
@media (max-height: 600px) and (orientation: portrait) {
    .auth-layout {
        padding: 1rem 0;
    }
    
    .auth-card {
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-content {
        max-height: 90vh;
    }
}

/* Ландшафт на узких экранах: сайдбар без sticky; шапка остаётся fixed */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
    .feed-sidebar {
        position: static;
        max-height: none;
    }
}

/* Высокое разрешение (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-text {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Печать */
@media print {
    .site-header,
    .feed-sidebar,
    .create-post-form,
    .post-actions,
    .site-footer {
        display: none !important;
    }
    
    .main-layout,
    .container,
    .page-content,
    .feed-layout {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    
    .feed-main {
        width: 100%;
    }
    
    body {
        background-color: white;
        color: black;
        font-size: 12pt;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
    
    .post-card {
        border: 1px solid #ddd;
        box-shadow: none;
        page-break-inside: avoid;
        margin-bottom: 1cm;
    }
}

/* Админка: навигация не под фиксированной шапкой на мобильном */
@media (max-width: 768px) {
    .admin-nav {
        padding-bottom: 0.75rem;
    }

    /* Лайтбокс: на мобильных переключение свайпом, стрелки не нужны */
    .post-image-lightbox-nav {
        display: none !important;
    }
}

/* Сообщения — мобильная версия, во весь экран */
@media (max-width: 768px) {
    .main-layout--messages {
        /* padding-top: 0; */
        min-height: 100vh;
    }
    
    .main-layout--messages .container {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        height: calc(100vh - var(--header-height));
    }
    
    .messages-layout {
        padding: 0;
        max-width: 100%;
        height: 100%;
    }
    
    .messages-page {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        min-height: calc(100vh - var(--header-height));
        height: calc(100vh - var(--header-height));
        max-height: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .messages-page > .messages-sidebar {
        grid-column: 1;
        grid-row: 1 / -1;
        max-height: none;
        min-height: 0;
        height: 100%;
    }
    
    .messages-page > .messages-chat-placeholder,
    .messages-page > .messages-chat-active {
        grid-column: 1;
        grid-row: 1 / -1;
        display: none !important;
    }
    
    .messages-sidebar {
        border-right: none;
        border-bottom: none;
        flex-shrink: 0;
    }
    
    .messages-page.mobile-chat-open .messages-sidebar {
        display: none;
    }
    
    .messages-page.mobile-chat-open .messages-chat-placeholder {
        display: none !important;
    }
    
    .messages-page.mobile-chat-open .messages-chat-active {
        grid-column: 1;
        grid-row: 1 / -1;
        min-height: 0;
        height: 100%;
        display: flex !important;
        flex-direction: column;
    }
    
    .chat-back {
        display: flex;
    }
    
    .messages-header {
        padding: var(--pad-block);
    }
    
    .messages-header h1 {
        font-size: var(--font-size-lg);
    }
    
    .messages-chat-placeholder .chat-back {
        display: none;
    }
    
    .messages-chat-placeholder,
    .messages-chat-active {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    
    .messages-thread {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    .messages-list {
        flex: 1;
        min-height: 0;
        padding: 0.5rem 0.75rem;
        padding-bottom: 1rem;
        scroll-padding-bottom: 1rem;
    }
    
    .message-main {
        max-width: min(88%, 36rem);
    }

    .message-bubble {
        max-width: 100%;
    }
    
    .messages-send-form {
        padding: 0.5rem 0.75rem;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        z-index: 2;
    }
    
    .messages-attach-preview {
        max-height: 100px;
    }
    
    .messages-contenteditable {
        min-height: 36px;
        font-size: 16px;
    }
    
    .messages-send-form .btn-attach {
        width: 36px;
        height: 36px;
    }
    
    .messages-send-form .btn-send {
        width: 36px;
        height: 36px;
    }
    
    .messages-chat-header {
        padding: 0.5rem 0.75rem;
    }
    
    .chat-partner-link {
        min-width: 0;
    }
    
    .chat-partner-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .chat-partner-avatar {
        width: 32px;
        height: 32px;
    }
    
    .conversation-item {
        padding: 0.5rem 0.75rem;
    }
    
    .conversation-avatar-wrap {
        width: 40px;
        height: 40px;
    }
    
    .conversation-avatar {
        width: 40px;
        height: 40px;
    }
    
    .messages-selected-bar {
        padding: 0.5rem 0.75rem;
    }
}