/**
 * TechHub Tamil - Responsive Styles
 * Mobile-first approach with breakpoints
 */

/* ========================================
   Breakpoints Reference:
   - xs: 0 - 479px (Mobile small)
   - sm: 480px - 639px (Mobile large)
   - md: 640px - 767px (Tablet small)
   - lg: 768px - 1023px (Tablet large)
   - xl: 1024px - 1279px (Desktop small)
   - 2xl: 1280px+ (Desktop large)
======================================== */

/* ========================================
   1. Extra Large Screens (1280px+)
======================================== */
@media (min-width: 1280px) {
    .container {
        padding: 0 2rem;
    }
    
    .hide-2xl {
        display: none !important;
    }
    
    .show-2xl {
        display: block !important;
    }
}

/* ========================================
   2. Large Screens (1024px - 1279px)
======================================== */
@media (max-width: 1279px) {
    :root {
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2rem;
    }
    
    .hide-xl {
        display: none !important;
    }
    
    .show-xl {
        display: block !important;
    }
    
    /* Grid adjustments */
    .grid-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Charts section */
    .charts-section {
        grid-template-columns: 1fr;
    }
    
    /* Article layout */
    .article-layout {
        grid-template-columns: 1fr;
    }
    
    .article-sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .sidebar-panel {
        margin-bottom: 0;
    }
    
    .sticky-toc {
        position: static;
    }
}

/* ========================================
   3. Medium-Large Screens (768px - 1023px)
======================================== */
@media (max-width: 1023px) {
    :root {
        --sidebar-width: 0;
        --navbar-height: 60px;
    }
    
    .hide-lg {
        display: none !important;
    }
    
    .show-lg {
        display: block !important;
    }
    
    /* Sidebar - Hidden by default on tablet */
    .sidebar {
        transform: translateX(-100%);
        width: 260px;
    }
    
    .sidebar.active {
        transform: translateX(0);
    }
    
    /* Main content - Full width */
    .main-content {
        margin-left: 0;
    }
    
    /* Navbar */
    .navbar-toggle {
        display: flex;
    }
    
    .navbar-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--dark-light);
        flex-direction: column;
        padding: 1rem;
        gap: 0;
        border-bottom: 1px solid var(--border-color);
    }
    
    .navbar-menu.active {
        display: flex;
    }
    
    .navbar-menu li {
        width: 100%;
    }
    
    .navbar-link {
        display: block;
        padding: 1rem;
        border-radius: var(--border-radius-md);
    }
    
    .navbar-link:hover {
        background: rgba(99, 102, 241, 0.1);
    }
    
    .navbar-link.active::after {
        display: none;
    }
    
    /* Grid adjustments */
    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Content grid */
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    /* Featured container */
    .featured-container {
        grid-template-columns: 1fr;
    }
    
    /* Plan container */
    .plan-container {
        grid-template-columns: 1fr;
    }
    
    /* Editor layout */
    .editor-layout {
        grid-template-columns: 1fr;
    }
    
    .editor-sidebar {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Help container */
    .help-container {
        grid-template-columns: 1fr;
    }
    
    .help-image {
        display: none;
    }
}

/* ========================================
   4. Tablet Screens (640px - 767px)
======================================== */
@media (max-width: 767px) {
    :root {
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.5rem;
    }
    
    .hide-md {
        display: none !important;
    }
    
    .show-md {
        display: block !important;
    }
    
    /* Section padding */
    .section {
        padding: 3rem 5%;
    }
    
    /* Hero section */
    .hero h1,
    .ai-hero h1,
    .earning-hero h1 {
        font-size: 2rem;
    }
    
    .hero p,
    .ai-hero p,
    .earning-hero p {
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Stats grid */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1.25rem;
    }
    
    .stat-value {
        font-size: 1.75rem;
    }
    
    /* Grid adjustments */
    .grid-cols-3,
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    /* Services grid */
    .services-grid,
    .methods-grid,
    .ai-tools-grid,
    .software-grid,
    .articles-grid,
    .tutorials-grid {
        grid-template-columns: 1fr;
    }
    
    /* AI grid */
    .ai-grid {
        grid-template-columns: 1fr;
    }
    
    /* Categories grid */
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    /* Tools grid */
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Page header */
    .page-header h1 {
        font-size: 1.75rem;
    }
    
    .page-header p {
        font-size: 1rem;
    }
    
    /* Article title */
    .article-title {
        font-size: 1.75rem;
    }
    
    /* Article meta */
    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    /* Article content */
    .article-content {
        padding: 1.5rem;
    }
    
    .article-body h2 {
        font-size: 1.4rem;
    }
    
    .article-body h3 {
        font-size: 1.2rem;
    }
    
    /* Article sidebar */
    .article-sidebar {
        grid-template-columns: 1fr;
    }
    
    /* Form row */
    .form-row {
        grid-template-columns: 1fr;
    }
    
    /* Search filter box */
    .search-filter-box {
        flex-direction: column;
    }
    
    .search-input-wrapper {
        width: 100%;
    }
    
    /* Filter bar */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-left {
        flex-direction: column;
    }
    
    .search-box input {
        width: 100%;
    }
    
    /* Articles table */
    .articles-table-wrapper {
        overflow-x: auto;
    }
    
    .articles-table {
        min-width: 800px;
    }
    
    /* Download item */
    .download-item {
        flex-wrap: wrap;
    }
    
    .download-stats {
        text-align: left;
        width: 100%;
        margin-top: 1rem;
    }
    
    /* Author box */
    .author-box {
        flex-direction: column;
        text-align: center;
    }
    
    .author-social {
        justify-content: center;
    }
    
    /* Share buttons */
    .share-buttons {
        flex-direction: column;
    }
    
    .share-btn {
        justify-content: center;
    }
    
    /* Success grid */
    .success-grid {
        grid-template-columns: 1fr;
    }
    
    /* Related posts grid */
    .related-posts-grid {
        grid-template-columns: 1fr;
    }
    
    /* Article navigation */
    .article-navigation {
        grid-template-columns: 1fr;
    }
    
    /* CTA box */
    .cta-box {
        padding: 2.5rem 1.5rem;
    }
    
    .cta-box h2 {
        font-size: 1.5rem;
    }
    
    /* Request box */
    .request-box {
        grid-template-columns: 1fr;
        padding: 2rem;
    }
    
    /* Newsletter box */
    .newsletter-box {
        padding: 2.5rem 1.5rem;
    }
    
    .newsletter-box h2 {
        font-size: 1.5rem;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-form input {
        width: 100%;
    }
    
    /* Calculator form */
    .calculator-form {
        grid-template-columns: 1fr;
    }
    
    /* Topbar */
    .topbar {
        padding: 0.75rem 1rem;
    }
    
    .topbar-right {
        gap: 0.5rem;
    }
    
    .save-btn span,
    .add-new-btn span {
        display: none;
    }
    
    /* Page content */
    .page-content {
        padding: 1rem;
    }
    
    /* Editor toolbar */
    .editor-toolbar {
        gap: 0.25rem;
        padding: 0.75rem;
    }
    
    .toolbar-btn {
        width: 32px;
        height: 32px;
    }
    
    .toolbar-divider {
        display: none;
    }
    
    /* Editor sidebar */
    .editor-sidebar {
        grid-template-columns: 1fr;
    }
    
    /* Quick actions */
    .quick-actions {
        flex-wrap: wrap;
    }
    
    /* Pagination */
    .pagination {
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Prompts grid */
    .prompts-grid {
        grid-template-columns: 1fr;
    }
    
    /* Learning path */
    .path-item {
        flex-direction: column;
        gap: 1rem;
    }
    
    .path-item::before {
        display: none;
    }
    
    /* Resources grid */
    .resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Comparison table */
    .comparison-table {
        display: block;
        overflow-x: auto;
    }
    
    /* Comment reply */
    .comment-reply {
        margin-left: 1.5rem;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    
    .social-links {
        justify-content: center;
    }
}

/* ========================================
   5. Small Mobile Screens (480px - 639px)
======================================== */
@media (max-width: 639px) {
    .hide-sm {
        display: none !important;
    }
    
    .show-sm {
        display: block !important;
    }
    
    /* Body padding */
    body {
        font-size: 0.9375rem;
    }
    
    /* Container */
    .container {
        padding: 0 1rem;
    }
    
    /* Section */
    .section {
        padding: 2.5rem 1rem;
    }
    
    /* Hero */
    .hero,
    .ai-hero,
    .earning-hero {
        padding: 7rem 1rem 3rem;
    }
    
    .hero h1,
    .ai-hero h1,
    .earning-hero h1 {
        font-size: 1.75rem;
    }
    
    /* Buttons */
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .btn-lg {
        padding: 0.875rem 1.75rem;
    }
    
    /* Cards */
    .card {
        border-radius: var(--border-radius-lg);
    }
    
    .card-body {
        padding: 1.25rem;
    }
    
    /* Service card */
    .service-card,
    .method-card,
    .ai-tool-card {
        padding: 1.5rem;
    }
    
    /* Stats */
    .stats-grid {
        gap: 0.75rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
    
    /* Categories grid */
    .categories-grid {
        grid-template-columns: 1fr;
    }
    
    /* Tools grid */
    .tools-grid {
        grid-template-columns: 1fr;
    }
    
    /* Platform toggle */
    .platform-toggle {
        flex-direction: column;
        align-items: stretch;
    }
    
    .platform-btn {
        justify-content: center;
    }
    
    /* Filter tabs */
    .filter-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .filter-tab {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    /* Showcase scroll */
    .showcase-scroll {
        padding: 0 1rem;
    }
    
    .showcase-item {
        width: 160px;
        padding: 1rem;
    }
    
    /* Quick stats */
    .quick-stats {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .stat-badge {
        justify-content: center;
    }
    
    /* TOC */
    .toc {
        padding: 1rem;
    }
    
    /* Step card */
    .step-card {
        padding: 1.5rem 1rem;
    }
    
    /* Code block */
    .code-block pre {
        padding: 1rem;
        font-size: 0.8rem;
    }
    
    /* Modal */
    .modal {
        padding: 1.5rem;
        margin: 1rem;
    }
    
    /* WhatsApp float */
    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        bottom: 1.5rem;
        right: 1.5rem;
    }
    
    /* Back to top */
    .back-to-top {
        width: 44px;
        height: 44px;
        right: 4.5rem;
        bottom: 1.5rem;
    }
    
    /* Success earning */
    .success-earning {
        margin-left: 0;
        margin-top: 1rem;
        text-align: left;
    }
    
    /* Success author */
    .success-author {
        flex-wrap: wrap;
    }
    
    /* Calculator result */
    .calc-result-amount {
        font-size: 2rem;
    }
    
    /* Resources grid */
    .resources-grid {
        grid-template-columns: 1fr;
    }
    
    /* CTA buttons */
    .cta-buttons {
        flex-direction: column;
    }
    
    /* Language options */
    .language-options {
        flex-direction: column;
    }
    
    /* Bulk actions */
    .bulk-actions {
        flex-wrap: wrap;
    }
    
    /* Admin sidebar */
    .sidebar {
        width: 100%;
    }
}

/* ========================================
   6. Extra Small Mobile (< 480px)
======================================== */
@media (max-width: 479px) {
    :root {
        --font-size-5xl: 1.5rem;
        --font-size-4xl: 1.375rem;
        --font-size-3xl: 1.25rem;
        --font-size-2xl: 1.125rem;
    }
    
    .hide-xs {
        display: none !important;
    }
    
    .show-xs {
        display: block !important;
    }
    
    /* Navbar */
    .navbar {
        padding: 0.75rem 1rem;
    }
    
    .navbar-logo {
        font-size: 1.25rem;
    }
    
    .lang-switcher {
        display: none;
    }
    
    /* Hero */
    .hero h1,
    .ai-hero h1,
    .earning-hero h1 {
        font-size: 1.5rem;
    }
    
    .hero-badge {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }
    
    /* Section title */
    .section-title {
        font-size: 1.375rem;
    }
    
    .section-subtitle {
        font-size: 0.9rem;
    }
    
    /* Page header */
    .page-header {
        padding: 6rem 1rem 2rem;
    }
    
    .page-header h1 {
        font-size: 1.5rem;
    }
    
    .page-header h1 i {
        display: none;
    }
    
    /* Article title */
    .article-title {
        font-size: 1.5rem;
    }
    
    /* Article content */
    .article-content {
        padding: 1rem;
    }
    
    .article-body h2 {
        font-size: 1.25rem;
    }
    
    /* Featured image */
    .featured-image {
        margin: -1rem 1rem 0;
    }
    
    .featured-image-placeholder {
        height: 200px;
    }
    
    /* Author info */
    .author-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    /* Comment */
    .comment {
        flex-direction: column;
    }
    
    .comment-body {
        width: 100%;
    }
    
    .comment-reply {
        margin-left: 0;
    }
    
    /* Login */
    .login-box {
        padding: 1.5rem;
    }
    
    .demo-credentials {
        padding: 0.75rem;
    }
    
    /* Dashboard */
    .dashboard {
        padding: 1rem;
    }
    
    /* Quick actions */
    .quick-action-btn {
        flex: 1;
        padding: 0.75rem;
        font-size: 0.8rem;
    }
    
    .quick-action-btn i {
        display: none;
    }
    
    /* Editor card */
    .editor-card {
        padding: 1rem;
    }
    
    .title-input {
        font-size: 1.25rem !important;
    }
}

/* ========================================
   7. Landscape Mode Adjustments
======================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero,
    .ai-hero,
    .earning-hero {
        min-height: auto;
        padding: 5rem 5% 2rem;
    }
    
    .hero-stats {
        flex-direction: row;
    }
    
    .modal {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ========================================
   8. High Resolution Screens
======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders on retina */
    .card,
    .btn,
    .form-input {
        border-width: 0.5px;
    }
}

/* ========================================
   9. 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;
    }
}

/* ========================================
   10. Dark Mode (already dark, for light mode toggle)
======================================== */
@media (prefers-color-scheme: light) {
    /* If you want to add light mode support later */
    /* .light-mode { ... } */
}

/* ========================================
   11. Print Styles
======================================== */
@media print {
    /* Hide non-essential elements */
    .navbar,
    .sidebar,
    .whatsapp-float,
    .back-to-top,
    .chatbot-container,
    .share-section,
    .comments-section,
    .related-posts-section,
    .newsletter-section,
    .cta,
    .footer {
        display: none !important;
    }
    
    /* Reset colors for print */
    body {
        background: white !important;
        color: black !important;
    }
    
    .article-content {
        background: white !important;
        border: none !important;
        padding: 0 !important;
    }
    
    .article-body h2,
    .article-body h3 {
        color: black !important;
    }
    
    .article-body p {
        color: #333 !important;
    }
    
    /* Links */
    a {
        color: black !important;
        text-decoration: underline !important;
    }
    
    /* Page breaks */
    h2, h3 {
        page-break-after: avoid;
    }
    
    img, table {
        page-break-inside: avoid;
    }
}