/* ==========================================================================
   Cattle Expert — Responsive Overrides (Mobile-First)
   Breakpoints: 480px (phone), 768px (tablet), 1024px (desktop)
   ========================================================================== */

/* --- Pillars: 4-col → 2×2 on tablet → stack on phone --- */
@media (max-width: 1023px) {
    .ce-pillars {
        grid-template-columns: repeat(2, 1fr);
    }

    .ce-pillar {
        padding: var(--ce-space-md);
        border-right: none;
        border-bottom: 1px solid var(--ce-border-dark);
    }

    .ce-pillar:nth-child(odd) {
        border-right: 1px solid var(--ce-border-dark);
    }

    .ce-pillar:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

@media (max-width: 479px) {
    .ce-pillars {
        grid-template-columns: 1fr;
    }

    .ce-pillar {
        border-right: none !important;
    }
}

/* --- Navigation: phone only shows logo + call + burger --- */
@media (max-width: 767px) {
    /* Impreza handles this via its header builder responsive settings.
       These are fallback overrides in case needed. */
    .ce-nav-phone {
        font-size: 0;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- Hero: 2-col grid → vertical stack on phone --- */
@media (max-width: 767px) {
    .ce-hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .ce-hero-grid .ce-hero-left {
        padding: var(--ce-space-xl) var(--ce-content-padding);
    }

    .ce-hero-grid .ce-hero-right {
        min-height: 200px;
    }
}

/* --- Cards: 4-col → 2-col on tablet → 1-col on phone --- */
@media (max-width: 1023px) {
    .ce-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .ce-catalog-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Two-column sections → stack on tablet --- */
@media (max-width: 767px) {
    .ce-split {
        grid-template-columns: 1fr;
        gap: var(--ce-space-xl);
    }
}

/* --- Touch targets: minimum 44x44 --- */
@media (max-width: 767px) {
    .ce-btn {
        min-height: 44px;
        padding: 14px 24px;
    }

    /* Sticky CTA bar on product pages */
    .ce-sticky-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--ce-cream);
        padding: var(--ce-space-md) var(--ce-content-padding);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ce-sticky-cta__price {
        font-family: var(--ce-font-display);
        font-size: var(--ce-text-xl);
        color: var(--ce-text-primary);
    }

    /* Blog preview: horizontal scroll */
    .ce-blog-carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: var(--ce-space-md);
        padding-bottom: var(--ce-space-md);
    }

    .ce-blog-carousel > * {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }
}

/* --- Content tables (no class) → stacked on phone/tablet --- */
@media (max-width: 1023px) {
    .l-main table:not([class]),
    .l-main table:not([class]) tbody,
    .l-main table:not([class]) tr {
        display: block !important;
    }

    .l-main table:not([class]) tr {
        padding: 12px 0 !important;
        border-bottom: 1px solid #eee !important;
    }

    .l-main table:not([class]) td {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        padding: 0 16px !important;
    }

    /* Label — мелкая подпись */
    .l-main table:not([class]) td:first-child {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #999 !important;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        padding-bottom: 2px !important;
    }

    /* Value — основной контент */
    .l-main table:not([class]) td:last-child {
        font-size: 15px !important;
        color: #333 !important;
    }

    /* Убрать чередующийся фон строк — на стеке не нужен */
    .l-main table:not([class]) tr[style*="background"] {
        background: transparent !important;
    }
}

/* --- Desktop-only hover effects --- */
@media (hover: hover) and (pointer: fine) {
    .ce-card:hover {
        transform: translateY(-2px);
    }

    .ce-btn:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }
}

/* No hover on touch devices */
@media (hover: none) {
    .ce-card:hover,
    .ce-btn:hover {
        transform: none;
        opacity: 1;
    }
}