/* ============================================================
   RESPONSIVE CSS — AgriStat India Theme
   Mobile-first breakpoints: 640px | 768px | 1024px | 1280px
   ============================================================ */

/* ============================================================
   BREAKPOINT: max 1280px (large tablets / small laptops)
   ============================================================ */
@media (max-width: 1280px) {
    :root {
        --sidebar-width: 300px;
    }

    .container {
        padding: 0 var(--space-lg);
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: var(--space-xl);
    }

    .footer-grid .footer-col:last-child {
        grid-column: span 3;
        border-top: 1px solid var(--color-border);
        padding-top: var(--space-lg);
        margin-top: var(--space-md);
    }

    .research-areas-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   BREAKPOINT: max 1024px (tablets)
   ============================================================ */
@media (max-width: 1024px) {
    /* Navigation */
    .primary-nav,
    .nav-search {
        display: none;
    }

    .nav-toggle {
        display: flex;
        align-items: center;
    }

    /* Content layout */
    .content-area {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .sidebar-widget {
        margin-bottom: 0;
    }

    /* Stats ribbon */
    .stats-ribbon-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
    }

    .stat-item:nth-child(3) {
        border-right: none;
    }

    .stat-item:nth-child(4),
    .stat-item:nth-child(5) {
        border-top: 1px solid var(--color-border);
    }

    /* Profile card */
    .profile-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-credentials {
        justify-content: center;
    }

    .profile-actions {
        justify-content: center;
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Pricing */
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid .pricing-card:last-child {
        grid-column: span 2;
        max-width: 400px;
        margin: 0 auto;
        width: 100%;
    }

    /* Research areas */
    .research-areas-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Book card */
    .book-card {
        flex-direction: column;
        text-align: center;
    }

    /* Featured post */
    .featured-post {
        flex-direction: column;
    }

    .featured-post-thumb {
        width: 100%;
        height: 120px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid .footer-col:first-child {
        grid-column: span 2;
    }
}

/* ============================================================
   BREAKPOINT: max 768px (mobile landscape / large phones)
   ============================================================ */
@media (max-width: 768px) {
    /* Typography scale */
    html { font-size: 15px; }

    /* Hero */
    .hero {
        min-height: auto;
        padding: calc(var(--nav-height) + var(--space-2xl)) 0 var(--space-2xl);
    }

    .hero-actions {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Categories grid */
    .categories-grid {
        grid-template-columns: 1fr;
    }

    /* Post grid */
    .post-grid,
    .dataset-grid {
        grid-template-columns: 1fr;
    }

    /* Sidebar */
    .sidebar {
        grid-template-columns: 1fr;
    }

    /* Stats ribbon */
    .stats-ribbon-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-item {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

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

    .stat-item:nth-child(odd):not(:last-child) {
        border-right: 1px solid var(--color-border);
    }

    /* Services grid */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Pricing grid */
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-grid .pricing-card:last-child {
        grid-column: span 1;
        max-width: 100%;
    }

    /* Research areas */
    .research-areas-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Coauthors */
    .coauthors-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Filter bar */
    .filter-bar {
        flex-direction: column;
    }

    .filter-search,
    .filter-select {
        min-width: 100%;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid .footer-col:first-child {
        grid-column: span 1;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    .footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Mandi table - make scrollable */
    .mandi-table-wrapper {
        overflow-x: auto;
    }

    /* Category filters horizontal scroll */
    .category-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-sm);
        -webkit-overflow-scrolling: touch;
    }

    .filter-pill {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Error 404 */
    .error-number {
        font-size: 5rem;
    }
}

/* ============================================================
   BREAKPOINT: max 640px (small phones)
   ============================================================ */
@media (max-width: 640px) {
    :root {
        --space-2xl: 2rem;
        --space-3xl: 2.5rem;
    }

    html { font-size: 14px; }

    /* Nav */
    .logo-tagline {
        display: none;
    }

    /* Profile card */
    .profile-avatar {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    /* Research areas */
    .research-areas-grid {
        grid-template-columns: 1fr;
    }

    /* Coauthors */
    .coauthors-grid {
        grid-template-columns: 1fr;
    }

    /* Book card */
    .book-card {
        padding: var(--space-lg);
    }

    .book-emoji {
        font-size: 2.5rem;
    }

    /* Premium reports */
    .premium-reports-grid {
        grid-template-columns: 1fr;
    }

    /* Single post */
    .single-post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    /* Section header */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Stats ribbon */
    .stats-ribbon-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Mandi table font size */
    .mandi-table tbody td,
    .mandi-table thead th {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    /* Pagination */
    .pagination {
        gap: 4px;
    }

    .page-number,
    .pagination a,
    .pagination span {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    /* Contact grid */
    .contact-grid {
        gap: var(--space-lg);
    }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .site-header,
    .site-footer,
    .sidebar,
    .nav-toggle,
    .btn,
    .ad-slot,
    .filter-bar,
    .category-filters {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .content-area {
        grid-template-columns: 1fr;
    }

    a { color: #000; }
}

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

    html { scroll-behavior: auto; }
}

/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */
@media (prefers-contrast: high) {
    :root {
        --color-border: rgba(34, 197, 94, 0.4);
        --color-border-hover: rgba(34, 197, 94, 0.7);
        --color-dim: rgba(134, 239, 172, 0.85);
    }
}