/* ============================================
   АДАПТИВНЫЕ СТИЛИ - EmpireG.RU | DLE 19.0
   ============================================ */

/* NOTE: Mobile offcanvas panel styles (.main_nav, .aside_l, .aside_r)
   are defined in header.css. This file handles only content/layout responsive changes. */

/* DESKTOP (1200px) */
@media only screen and (max-width: 1200px) {
    .wrap { padding: 0 10px; }
    .aside_l, .aside_r { min-width: 200px; max-width: 220px; }
    .aside_r { min-width: auto; max-width: none; }
}

/* TABLET LARGE (1024px) */
@media only screen and (max-width: 1024px) {
    .hide_mobile { display: none !important; }
    .item { flex-direction: column; }
    .item_img { max-width: 100%; border-right: none; border-bottom: 1px solid #ddd; }
    /* nav-link span is handled by header.css — do NOT override here */
}

/* TABLET (800px) */
@media only screen and (max-width: 800px) {
    .wrap { flex-direction: column; display: block !important; }
    .content_bl { border-left: none; border-right: none; width: 100%; }
    .aside_l, .aside_r { width: 100%; max-width: none; min-width: auto; }
    .carousel-item { width: 160px; }
    .carousel-item .item-img { height: 220px; }
}

/* TABLET SMALL (768px) */
@media only screen and (max-width: 768px) {
    .mobile-only { display: flex !important; }
    /* On mobile, sidebars become offcanvas (handled by header.css) */
    .aside_l { display: block; }
    .aside_r { display: block; }
}

/* MOBILE (640px) */
@media only screen and (max-width: 640px) {
    .item { display: block; }
    .item_img { max-width: none; border-right: 0; padding: 0; display: flex; justify-content: center; }
    .item_img img { border: 1px solid #ddd; padding: 10px; max-width: 230px; margin: 15px; }
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea { font-size: 16px !important; } /* Prevents iOS zoom on focus */
    .carousel-item { width: 140px; }
    .carousel-item .item-img { height: 200px; }

    /* Improve card readability on mobile */
    .ssx-card { margin: 0 0 12px; }
    .ssx-side { max-width: 200px; }
}

/* MOBILE (480px) */
@media only screen and (max-width: 480px) {
    body { font-size: 13px; }
    .carousel-item { width: 130px; }
    .carousel-item .item-img { height: 180px; }
    .carousel-control { width: 36px; height: 36px; font-size: 14px; }
    .carousel-item .item-rating { font-size: 10px; padding: 4px 8px; }
}

/* MOBILE SMALL (360px) */
@media only screen and (max-width: 360px) {
    .container { padding: 0 8px; }
    .item_img img { max-width: 180px; }
    .btn { padding: 8px 12px; font-size: 13px; }
    .carousel-item { width: 120px; }
    .carousel-item .item-img { height: 165px; }
}

/* MOBILE TINY (320px) */
@media only screen and (max-width: 320px) {
    body { font-size: 12px; }
    .item_img img { max-width: 150px; margin: 10px; }
    .carousel-item { width: 110px; }
    .carousel-item .item-img { height: 150px; }
}

/* LANDSCAPE MOBILE */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .logo img { max-height: 120px; width: auto; }
}

/* TOUCH DEVICES — only interactive elements, not all links */
@media (hover: none) and (pointer: coarse) {
    button, .btn, .nav-link, .ssx-favBtn, .eg-comment-submit-btn {
        min-height: 44px;
    }
    .nav-link:hover, .btn:hover { transform: none; }
}

/* PRINT */
@media print {
    .header_top, .aside_l, .aside_r, .site-footer, .speedbar, button, .btn,
    .scroll-fixed-btns, .eg-chat-panel, .eg-chat-overlay { display: none !important; }
    .wrap { display: block; }
    .content_bl { width: 100%; border: none; }
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}