/**
 * Global mobile / tablet fixes — cs.dev-meta.ru
 * Breakpoints: 991px tablet, 640px phone, 480px small phone
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img,
video {
    max-width: 100%;
    height: auto;
}

.container {
    padding-left: 16px;
    padding-right: 16px;
}

/* ——— Header ——— */
@media (max-width: 991px) {
    .nx-nav,
    .nx-nav-desktop,
    .main-nav {
        display: none !important;
    }

    .nx-burger {
        display: flex !important;
    }
}

@media (max-width: 480px) {
    .nx-mobile {
        width: min(100vw, 320px);
    }

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ——— Home layout: категории выше контента на телефоне ——— */
@media (max-width: 1100px) {
    .home-layout {
        padding-left: 0;
        padding-right: 0;
    }

    .home-sidebar {
        position: static;
        top: auto;
        order: 0;
        margin-bottom: 8px;
    }

    .home-main {
        order: 1;
        min-width: 0;
    }

    .home-hero-band {
        margin-left: -12px;
        margin-right: -12px;
        width: calc(100% + 24px);
        max-width: 100vw;
    }
}

/* ——— Hero slider ——— */
@media (max-width: 640px) {
    .hero-slide-title {
        font-size: 22px;
    }

    .hero-slide-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-slide-actions .hero-btn-dl,
    .hero-slide-actions .hero-btn-builds,
    .hero-slide-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-stats-grid {
        grid-template-columns: 1fr;
    }

    .hero-stat {
        border-right: none !important;
        border-bottom: 1px solid #333741;
    }

    .hero-stat:last-child {
        border-bottom: none;
    }

    .hero-slider-tabs {
        padding-bottom: 4px;
    }
}

@media (max-width: 480px) {
    .hero-slider-tab-label {
        max-width: 64px;
    }

    .hero-slide-visual {
        height: 160px !important;
        max-height: 160px !important;
    }
}

/* ——— Roulette: компактный вид на телефонах ——— */
@media (max-width: 640px) {
    .home-roulette {
        border-radius: 14px;
        padding: 10px;
    }

    .rl-title {
        font-size: 16px;
    }

    .rl-window {
        height: 156px;
    }

    .rl-card {
        flex: 0 0 200px;
        grid-template-columns: 64px 1fr;
        padding: 8px;
        gap: 8px;
    }

    .rl-toolbar {
        gap: 10px;
    }

    .rl-status-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* Карусель топ-сборок — стили в home-cscom.css */

section.container > .builds-grid:not(.builds-grid--carousel) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ——— Feed ——— */
@media (max-width: 640px) {
    .feed-card {
        grid-template-columns: 1fr;
    }

    .feed-card-cover img {
        height: 160px;
    }

    .feed-card-body h3 {
        font-size: 16px;
    }

    .feed-card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .feed-card-actions .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .home-feed-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ——— Sidebar widgets ——— */
@media (max-width: 640px) {
    .sidebar-build-scroll {
        max-height: 360px;
    }

    .sidebar-cat-toggle {
        font-size: 10px;
        padding: 10px;
    }
}

/* ——— Search ——— */
@media (max-width: 640px) {
    .search-head h1 {
        font-size: 22px;
    }

    .search-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .search-form-row input[type="search"],
    .search-form-row .btn {
        width: 100%;
    }

    .search-result-cover img,
    .search-result-cover .cover-placeholder {
        width: 100%;
        height: 140px;
    }
}

/* ——— Build page ——— */
@media (max-width: 991px) {
    .build-page-container,
    .load .build-page-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .page-build .blog-area.pt-120 {
        padding-top: 20px !important;
    }

    .page-build .blog-area.pb-175 {
        padding-bottom: 40px !important;
    }

    .page-build .fg-gallery-row {
        flex-wrap: wrap !important;
    }

    .page-build .fg-gallery__main-link img,
    .page-build .fg-gallery__main img {
        max-height: none;
        min-height: 0;
        object-fit: cover;
    }
}

@media (max-width: 760px) {
    .page-build .fg-entry-gallery .col-sm-4,
    .page-build .fg-gallery-col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 480px) {
    .page-build .fg-entry-gallery .col-sm-4,
    .page-build .fg-gallery-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .page-build .dlx94-panel,
    .page-build .dl-grid {
        width: 100%;
    }

    .page-build .csart-wrap .entry-title-wrap h1,
    .page-build .blog-details-wrap h1 {
        font-size: 20px;
        line-height: 1.25;
    }
}

/* ——— Auth / submit / profile ——— */
@media (max-width: 640px) {
    .auth-page {
        padding: 24px 0 48px;
    }

    .auth-card {
        padding: 20px 16px;
        border-radius: 12px;
    }

    .auth-card h1 {
        font-size: 20px;
    }
}

/* ——— Footer ——— */
@media (max-width: 640px) {
    .footer-grid {
        gap: 20px;
    }

    .footer-bottom {
        text-align: left;
    }
}

/* ——— Touch targets ——— */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .tab,
    .rl-btn,
    .rl-game-tab,
    .rl-opt,
    .sidebar-build-btn,
    .nx-burger,
    .nx-user-btn {
        min-height: 44px;
    }

    .nx-user-wrap:hover .nx-user-drop {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .nx-user-wrap.open .nx-user-drop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .pagination-link,
    .pagination-btn:not(.is-disabled) {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(255, 122, 26, .25);
    }
}

/* ——— Home pagination (mobile) ——— */
@media (max-width: 640px) {
    .page-home-cscom main {
        overflow-x: visible;
    }

    .pagination {
        position: relative;
        z-index: 5;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 40px;
        padding-bottom: 16px;
    }

    .pagination-btn {
        order: 1;
        flex: 1 1 calc(50% - 6px);
        min-height: 48px;
        font-size: 14px;
    }

    .pagination-pages {
        order: 2;
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 8px;
        padding: 4px 2px 8px;
        scrollbar-width: none;
    }

    .pagination-pages::-webkit-scrollbar {
        display: none;
    }

    .pagination-link {
        flex: 0 0 auto;
        scroll-snap-align: center;
        min-width: 44px;
        min-height: 44px;
    }

    .builds-list-meta {
        font-size: 14px;
        margin-bottom: 10px;
    }

    #builds {
        scroll-margin-top: 80px;
    }
}