/**
 * Tablet View Optimizer - Frontend Styles
 * Core responsive rules applied when tablet class is active
 */

/* Responsive table wrapper */
.tvo-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.tvo-table-wrap table {
    margin-bottom: 0;
}

/* Tablet-specific rules */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Prevent horizontal overflow */
    html.tvo-tablet,
    html.tvo-tablet body {
        overflow-x: hidden;
    }

    /* Fluid media */
    .tvo-tablet img,
    .tvo-tablet video,
    .tvo-tablet iframe,
    .tvo-tablet embed,
    .tvo-tablet object {
        max-width: 100%;
        height: auto;
    }

    /* Sidebar stacking */
    .tvo-tablet .sidebar,
    .tvo-tablet aside.widget-area {
        width: 100%;
        float: none;
        margin-top: 2rem;
    }

    /* Hero section tweaks */
    .tvo-tablet .hero,
    .tvo-tablet .hero-section {
        min-height: 50vh;
        padding: 3rem 1.5rem;
    }

    /* Card layouts */
    .tvo-tablet .card,
    .tvo-tablet .post-card {
        margin-bottom: 1.5rem;
    }

    /* Improve readability */
    .tvo-tablet article,
    .tvo-tablet .entry-content {
        max-width: 100%;
    }

    /* Button touch targets */
    .tvo-tablet .btn,
    .tvo-tablet .button,
    .tvo-tablet button {
        min-height: 44px;
    }

    /* Fix fixed-position elements */
    .tvo-tablet .sticky-sidebar,
    .tvo-tablet .fixed-sidebar {
        position: relative !important;
    }

    /* Footer columns */
    .tvo-tablet .footer-widgets,
    .tvo-tablet .site-footer .widget-area {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    /* WooCommerce adjustments */
    .tvo-tablet .woocommerce ul.products li.product {
        width: 48% !important;
        margin-right: 4% !important;
    }
    .tvo-tablet .woocommerce ul.products li.product:nth-child(2n) {
        margin-right: 0 !important;
    }
    .tvo-tablet .woocommerce ul.products li.product:nth-child(2n+1) {
        clear: both;
    }
}

/* Lazy load image placeholder */
.tvo-lazy {
    background: #f0f0f0;
    min-height: 50px;
    transition: opacity 0.3s ease;
}

.tvo-lazy.tvo-loaded {
    background: transparent;
}

/* Smooth transitions */
@media (min-width: 768px) and (max-width: 1024px) {
    .tvo-tablet * {
        transition: padding 0.2s ease, margin 0.2s ease;
    }
}