/* =====================================================================
 * 10 — MOBILE
 * Mobile-first respondability + touch UX.
 * Тестується на: 320, 360, 390, 414, 430, 768, 1024 px.
 * ===================================================================== */

/* ===== ULTRA-SMALL (≤359 px — старі iPhone SE) ===== */
@media (max-width: 359px) {
    .sm-premium body {
        font-size: 15px;
    }

    .sm-premium h1, .sm-premium .h1 { font-size: 26px !important; }
    .sm-premium h2, .sm-premium .h2 { font-size: 22px !important; }
    .sm-premium h3, .sm-premium .h3 { font-size: 19px !important; }

    .sm-premium .container,
    .sm-premium .row > [class*="col-"] {
        padding-left: var(--sm-space-3);
        padding-right: var(--sm-space-3);
    }
}

/* ===== MOBILE (≤768 px) ===== */
@media (max-width: 768px) {

    /* ---------- HEADER MOBILE ---------- */
    .sm-premium .site-header,
    .sm-premium header.site-header {
        padding: 0;
    }

    .sm-premium .site-header .container,
    .sm-premium header.site-header .container {
        padding: var(--sm-space-3) var(--sm-space-4);
    }

    .sm-premium .site-logo img,
    .sm-premium .logo img,
    .sm-premium .custom-logo {
        max-height: 44px;
    }

    /* ---------- HAMBURGER (mega menu mobile button) ---------- */
    #mega-menu-wrap-primary .mega-menu-toggle {
        background: transparent !important;
        border: 1px solid var(--sm-gold) !important;
        border-radius: var(--sm-radius-sm) !important;
        padding: 8px !important;
        height: 44px !important;
        width: 44px !important;
    }

    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block {
        line-height: 44px !important;
    }

    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block:before,
    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-label {
        color: var(--sm-cream) !important;
    }

    /* ---------- MOBILE MEGA MENU (offcanvas) ---------- */
    #mega-menu-wrap-primary.mega-menu-mobile-collapse #mega-menu-primary {
        background: var(--sm-cream) !important;
        max-height: 70vh;
        overflow-y: auto;
        border-top: 2px solid var(--sm-gold) !important;
    }

    #mega-menu-wrap-primary.mega-menu-mobile-collapse #mega-menu-primary li.mega-menu-item a.mega-menu-link {
        background: transparent !important;
        color: var(--sm-blue) !important;
        font-family: var(--sm-font-body) !important;
        font-size: var(--sm-text-base) !important;
        font-weight: 500 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        padding: 16px 20px !important;
        border-bottom: 1px solid var(--sm-gray-light) !important;
    }

    #mega-menu-wrap-primary.mega-menu-mobile-collapse #mega-menu-primary li.mega-menu-item:hover > a.mega-menu-link,
    #mega-menu-wrap-primary.mega-menu-mobile-collapse #mega-menu-primary li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
        background: var(--sm-gold-light) !important;
        color: var(--sm-blue-deep) !important;
        border-left: 3px solid var(--sm-gold) !important;
        padding-left: 17px !important;
    }

    #mega-menu-wrap-primary.mega-menu-mobile-collapse #mega-menu-primary li.mega-menu-item ul.mega-sub-menu {
        background: var(--sm-cream-soft) !important;
        border-top: none !important;
        box-shadow: none !important;
        padding: var(--sm-space-2) 0 !important;
    }

    #mega-menu-wrap-primary.mega-menu-mobile-collapse #mega-menu-primary li.mega-menu-item ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
        font-size: var(--sm-text-sm) !important;
        padding: 12px 20px 12px 36px !important;
        color: var(--sm-charcoal-soft) !important;
    }

    /* ---------- HEADERS / SLIDER MOBILE ---------- */
    .sm-premium .rev_slider_wrapper,
    .sm-premium .slider-wrap {
        height: auto !important;
        min-height: 240px;
    }

    .sm-premium .rev_slider .tp-caption {
        font-size: 16px !important;
    }

    /* ---------- PADDING / SPACING MOBILE ---------- */
    .sm-premium section,
    .sm-premium .elementor-section {
        padding-left: var(--sm-space-3) !important;
        padding-right: var(--sm-space-3) !important;
    }

    .sm-premium .elementor-section.elementor-section-boxed > .elementor-container {
        padding: 0 !important;
    }

    /* ---------- CARDS MOBILE ---------- */
    .sm-premium .post,
    .sm-premium .post-block,
    .sm-premium .vinazine-post-grid .post-item {
        margin-bottom: var(--sm-space-4);
    }

    .sm-premium .post-content {
        padding: var(--sm-space-3) var(--sm-space-4) var(--sm-space-4);
    }

    .sm-premium .post-title,
    .sm-premium .entry-title {
        font-size: 19px !important;
    }

    .sm-premium .post-meta {
        font-size: var(--sm-text-xs);
        gap: var(--sm-space-2);
    }

    /* ---------- FORMS MOBILE ---------- */
    .sm-premium input[type="text"],
    .sm-premium input[type="email"],
    .sm-premium input[type="search"],
    .sm-premium textarea,
    .sm-premium select {
        font-size: 16px; /* запобігає zoom на iOS при focus */
        padding: 12px 14px;
    }

    /* ---------- SIDEBAR MOBILE (під контент) ---------- */
    .sm-premium .blog-page-with-sidebar {
        grid-template-columns: 1fr;
        gap: var(--sm-space-5);
    }

    .sm-premium .sidebar {
        margin-top: var(--sm-space-6);
    }

    /* ---------- FOOTER MOBILE — у 1 колонку ---------- */
    .sm-premium .site-footer .footer-widgets,
    .sm-premium .site-footer .row {
        display: block;
    }

    .sm-premium .site-footer .footer-widget,
    .sm-premium .site-footer .col,
    .sm-premium .site-footer [class*="col-"] {
        width: 100%;
        margin-bottom: var(--sm-space-5);
    }

    /* ---------- ELEMENTOR MOBILE TWEAKS ---------- */
    .sm-premium .elementor-element-edit-mode,
    .sm-premium .elementor-section .elementor-container {
        flex-wrap: wrap;
    }

    .sm-premium .elementor-column.elementor-col-50,
    .sm-premium .elementor-column.elementor-col-33,
    .sm-premium .elementor-column.elementor-col-25 {
        width: 100% !important;
    }
}

/* ===== TABLET (769–1024 px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {

    .sm-premium .container {
        max-width: 100%;
        padding-left: var(--sm-space-5);
        padding-right: var(--sm-space-5);
    }

    .sm-premium .posts-wrap,
    .sm-premium .blog-grid,
    .sm-premium .vinazine-post-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sm-premium .blog-page-with-sidebar {
        display: block;
    }

    .sm-premium .sidebar {
        margin-top: var(--sm-space-6);
    }

    /* Hero / featured smaller */
    .sm-premium .post-featured,
    .sm-premium .vinazine-featured-post .post-item {
        aspect-ratio: 16 / 9;
    }

    .sm-premium .single .entry-title {
        font-size: 38px !important;
    }
}

/* ===== TOUCH-FRIENDLY (ні hover на touch-screens) ===== */
@media (hover: none) {
    .sm-premium .post:hover,
    .sm-premium .post-block:hover,
    .sm-premium .vinazine-post-grid .post-item:hover {
        transform: none;
        box-shadow: var(--sm-shadow-sm);
    }

    .sm-premium .post:hover .post-thumbnail img,
    .sm-premium .post-block:hover .post-thumb img {
        transform: none;
    }

    /* Touch-target — мінімум 44x44 px (Apple HIG) */
    .sm-premium a,
    .sm-premium button,
    .sm-premium .btn {
        min-height: 44px;
    }

    .sm-premium .btn,
    .sm-premium .button,
    .sm-premium .elementor-button {
        min-height: 44px;
    }
}

/* ===== HORIZONTAL SCROLL FIX ===== */
.sm-premium body,
.sm-premium html,
.sm-premium #page,
.sm-premium .site {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ===== iOS / Safari ОПТИМІЗАЦІЇ ===== */
@supports (-webkit-touch-callout: none) {
    /* Safari ios */
    .sm-premium input[type="search"],
    .sm-premium input[type="text"] {
        -webkit-appearance: none;
        appearance: none;
    }

    /* Smooth scroll iOS */
    .sm-premium {
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== ANDROID FONT FIX ===== */
@supports not (-webkit-touch-callout: none) {
    .sm-premium body {
        text-rendering: geometricPrecision;
    }
}