/**
 * Responsive Styles
 * Mobile-first approach
 * 
 * @package SecureX
 * @since 1.0.0
 */

/* =========================
   BREAKPOINTS:
   - Mobile: < 768px (default)
   - Tablet: 768px - 1024px
   - Desktop: > 1024px
   ========================= */

/* =========================
   TABLET (768px and up)
   ========================= */

@media (max-width: 1024px) {
    /* Header adjustments */
    .sx-header-inner {
        gap: var(--sx-space-4);
    }
    
    .sx-header-cta {
        display: none;
    }
    
    /* Navigation */
    .sx-main-navigation {
        display: none;
    }
    
    .sx-mobile-menu-toggle {
        display: block;
    }
    
    /* Content layouts */
    .has-sidebar .sx-content-wrapper {
        grid-template-columns: 1fr;
    }
    
    .sidebar {
        position: static;
    }
    
    /* Posts grid */
    .sx-posts-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--sx-space-6);
    }
    
    /* Related posts */
    .sx-related-posts-grid {
        grid-template-columns: 1fr;
    }
    
    /* Author bio */
    .sx-author-bio {
        flex-direction: column;
        text-align: center;
    }
    
    /* Footer widgets */
    .sx-footer-widgets-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--sx-space-6);
    }
    
    /* Section padding */
    .sx-section {
        padding: var(--sx-space-12) 0;
    }
    
    .sx-section-lg {
        padding: var(--sx-space-16) 0;
    }
}

/* =========================
   MOBILE (767px and below)
   ========================= */

@media (max-width: 767px) {
    /* Typography scaling */
    :root {
        --sx-text-5xl: 2.25rem;   /* 36px */
        --sx-text-4xl: 1.875rem;  /* 30px */
        --sx-text-3xl: 1.5rem;    /* 24px */
        --sx-text-2xl: 1.25rem;   /* 20px */
        --sx-text-xl: 1.125rem;   /* 18px */
    }
    
    /* Container padding */
    .sx-container,
    .sx-container-fluid {
        padding-left: var(--sx-space-3);
        padding-right: var(--sx-space-3);
    }
    
    /* Header */
    .site-header {
        padding: var(--sx-space-3) 0;
    }
    
    .site-header.sticky {
        padding: var(--sx-space-2) 0;
    }
    
    .sx-custom-logo img {
        max-height: 40px;
    }
    
    .sx-site-title {
        font-size: var(--sx-text-xl);
    }
    
    .sx-site-description {
        display: none;
    }
    
    .sx-header-actions {
        gap: var(--sx-space-2);
    }
    
    .sx-search-toggle,
    .sx-dark-mode-toggle {
        padding: var(--sx-space-1);
    }
    
    /* Top Bar */
    .sx-top-bar {
        font-size: var(--sx-text-xs);
        padding: var(--sx-space-1) 0;
    }
    
    .sx-top-bar-inner {
        flex-direction: column;
        gap: var(--sx-space-2);
    }
    
    .sx-top-bar-left,
    .sx-top-bar-right {
        width: 100%;
        justify-content: center;
        gap: var(--sx-space-2);
        font-size: var(--sx-text-xs);
    }
    
    .sx-top-contact {
        font-size: var(--sx-text-xs);
    }
    
    /* Breadcrumbs */
    .sx-breadcrumbs {
        font-size: var(--sx-text-xs);
        padding: var(--sx-space-2) 0;
    }
    
    /* Posts Grid */
    .sx-posts-grid {
        grid-template-columns: 1fr;
        gap: var(--sx-space-4);
    }
    
    .sx-post-card {
        border-radius: var(--sx-radius-md);
    }
    
    .sx-post-content {
        padding: var(--sx-space-4);
    }
    
    .sx-post-title {
        font-size: var(--sx-text-lg);
    }
    
    .sx-post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sx-space-2);
    }
    
    /* Single Post */
    .sx-single-post {
        padding: var(--sx-space-8) 0;
    }
    
    .sx-single-header {
        margin-bottom: var(--sx-space-6);
    }
    
    .sx-single-title {
        font-size: var(--sx-text-3xl);
        margin-bottom: var(--sx-space-4);
    }
    
    .sx-single-meta {
        flex-direction: column;
        gap: var(--sx-space-3);
    }
    
    .sx-author-info {
        width: 100%;
    }
    
    .sx-single-thumbnail {
        margin-bottom: var(--sx-space-6);
        border-radius: var(--sx-radius-lg);
    }
    
    .sx-single-content {
        font-size: var(--sx-text-base);
    }
    
    .sx-single-content h2 {
        font-size: var(--sx-text-2xl);
        margin-top: var(--sx-space-6);
    }
    
    .sx-single-content h3 {
        font-size: var(--sx-text-xl);
        margin-top: var(--sx-space-4);
    }
    
    .sx-single-content blockquote {
        padding-left: var(--sx-space-4);
        font-size: var(--sx-text-lg);
    }
    
    .sx-single-content img {
        border-radius: var(--sx-radius-md);
    }
    
    /* Author Bio */
    .sx-author-bio {
        padding: var(--sx-space-6);
        border-radius: var(--sx-radius-lg);
        margin: var(--sx-space-8) auto;
    }
    
    /* Related Posts */
    .sx-related-posts {
        margin: var(--sx-space-8) auto;
    }
    
    .sx-related-posts-title {
        font-size: var(--sx-text-2xl);
        margin-bottom: var(--sx-space-4);
    }
    
    /* Social Share */
    .sx-social-share {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .sx-social-share-label {
        width: 100%;
        text-align: center;
        margin-bottom: var(--sx-space-2);
    }
    
    /* Comments */
    .sx-comments-area {
        margin: var(--sx-space-8) auto;
    }
    
    .sx-comments-title {
        font-size: var(--sx-text-2xl);
        margin-bottom: var(--sx-space-6);
    }
    
    .sx-comment-body {
        flex-direction: column;
        padding: var(--sx-space-4);
    }
    
    .sx-comment-avatar {
        align-self: center;
    }
    
    .sx-comment-form {
        padding: var(--sx-space-6);
        border-radius: var(--sx-radius-lg);
    }
    
    .children {
        margin-left: var(--sx-space-4);
    }
    
    /* Page */
    .sx-page-content {
        padding: var(--sx-space-6) 0;
    }
    
    .sx-page-article {
        padding: var(--sx-space-6);
        border-radius: var(--sx-radius-lg);
    }
    
    .sx-page-header {
        margin-bottom: var(--sx-space-6);
        padding-bottom: var(--sx-space-4);
    }
    
    .sx-page-title {
        font-size: var(--sx-text-3xl);
    }
    
    /* Archive */
    .sx-archive {
        padding: var(--sx-space-8) 0;
    }
    
    .sx-archive-header {
        margin-bottom: var(--sx-space-8);
        padding: var(--sx-space-8) var(--sx-space-4);
        border-radius: var(--sx-radius-xl);
    }
    
    .sx-archive-title {
        font-size: var(--sx-text-3xl);
    }
    
    .sx-archive-description {
        font-size: var(--sx-text-base);
    }
    
    /* Search */
    .sx-search-results {
        padding: var(--sx-space-8) 0;
    }
    
    .sx-search-header {
        margin-bottom: var(--sx-space-6);
    }
    
    .sx-search-title {
        font-size: var(--sx-text-3xl);
    }
    
    .sx-search-count {
        font-size: var(--sx-text-base);
    }
    
    .sx-search-result {
        flex-direction: column;
        padding: var(--sx-space-4);
    }
    
    .sx-search-result-thumbnail {
        width: 100%;
    }
    
    .sx-search-result-title {
        font-size: var(--sx-text-xl);
    }
    
    /* Search Modal */
    .sx-search-modal-content {
        padding: var(--sx-space-6);
    }
    
    .sx-search-field {
        font-size: var(--sx-text-base);
        padding: var(--sx-space-3) var(--sx-space-4);
    }
    
    /* 404 Page */
    .sx-error-404 {
        padding: var(--sx-space-12) 0;
    }
    
    .sx-error-404-title {
        font-size: var(--sx-text-4xl);
    }
    
    .sx-error-404-description {
        font-size: var(--sx-text-base);
    }
    
    .sx-error-404-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .sx-error-404-actions .sx-btn {
        width: 100%;
    }
    
    .sx-error-404-suggestions h2 {
        font-size: var(--sx-text-2xl);
        margin-bottom: var(--sx-space-6);
    }
    
    /* Pagination */
    .pagination,
    .page-links {
        gap: var(--sx-space-1);
        flex-wrap: wrap;
    }
    
    .pagination .page-numbers,
    .page-links a,
    .page-links > span {
        min-width: 36px;
        height: 36px;
        padding: 0 var(--sx-space-2);
        font-size: var(--sx-text-sm);
    }
    
    /* Post Navigation */
    .post-navigation {
        margin: var(--sx-space-8) auto;
    }
    
    .nav-links {
        grid-template-columns: 1fr;
        gap: var(--sx-space-4);
    }
    
    .nav-previous,
    .nav-next {
        padding: var(--sx-space-4);
    }
    
    .nav-subtitle {
        font-size: var(--sx-text-xs);
    }
    
    .nav-title {
        font-size: var(--sx-text-base);
    }
    
    /* Sidebar */
    .sidebar .widget {
        padding: var(--sx-space-4);
        margin-bottom: var(--sx-space-4);
        border-radius: var(--sx-radius-md);
    }
    
    .sidebar .widget-title {
        font-size: var(--sx-text-lg);
    }
    
    /* Footer */
    .sx-footer-widgets {
        padding: var(--sx-space-12) 0 var(--sx-space-8);
    }
    
    .sx-footer-widgets-grid {
        grid-template-columns: 1fr;
        gap: var(--sx-space-6);
    }
    
    .sx-footer-bottom {
        padding: var(--sx-space-4) 0;
    }
    
    .sx-footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: var(--sx-space-3);
    }
    
    .sx-footer-info {
        order: 3;
    }
    
    .sx-footer-navigation {
        order: 2;
    }
    
    .sx-footer-social {
        order: 1;
    }
    
    .sx-footer-menu {
        flex-direction: column;
        gap: var(--sx-space-2);
    }
    
    /* Back to Top */
    .sx-back-to-top {
        bottom: var(--sx-space-4);
        right: var(--sx-space-4);
        width: 44px;
        height: 44px;
    }
    
    /* Buttons */
    .sx-btn {
        padding: var(--sx-space-2) var(--sx-space-4);
        font-size: var(--sx-text-sm);
    }
    
    /* Section */
    .sx-section {
        padding: var(--sx-space-8) 0;
    }
    
    .sx-section-sm {
        padding: var(--sx-space-6) 0;
    }
    
    .sx-section-lg {
        padding: var(--sx-space-12) 0;
    }
    
    .sx-section-header {
        margin-bottom: var(--sx-space-8);
    }
    
    .sx-section-title {
        font-size: var(--sx-text-3xl);
    }
    
    .sx-section-subtitle {
        font-size: var(--sx-text-xs);
    }
    
    .sx-section-description {
        font-size: var(--sx-text-base);
    }
    
    /* Grid System */
    .sx-row {
        margin-left: calc(-1 * var(--sx-space-3));
        margin-right: calc(-1 * var(--sx-space-3));
    }
    
    .sx-col,
    [class*="sx-col-"] {
        padding-left: var(--sx-space-3);
        padding-right: var(--sx-space-3);
    }
    
    /* Mobile: All columns stack */
    [class*="sx-col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* WordPress Alignment */
    .alignleft,
    .alignright {
        float: none;
        margin: var(--sx-space-4) auto;
        display: block;
    }
    
    .alignfull {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    
    /* Gallery */
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sx-space-2);
    }
    
    .gallery-columns-2,
    .gallery-columns-3,
    .gallery-columns-4,
    .gallery-columns-5,
    .gallery-columns-6 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Utilities */
    .sx-hide-mobile {
        display: none !important;
    }
}

/* =========================
   SMALL MOBILE (480px and below)
   ========================= */

@media (max-width: 480px) {
    /* Further reduce text sizes */
    :root {
        --sx-text-5xl: 2rem;      /* 32px */
        --sx-text-4xl: 1.75rem;   /* 28px */
        --sx-text-3xl: 1.375rem;  /* 22px */
    }
    
    /* Container */
    .sx-container,
    .sx-container-fluid {
        padding-left: var(--sx-space-2);
        padding-right: var(--sx-space-2);
    }
    
    /* Single column gallery */
    .gallery {
        grid-template-columns: 1fr;
    }
    
    /* Smaller buttons */
    .sx-btn {
        padding: var(--sx-space-2) var(--sx-space-3);
        font-size: var(--sx-text-xs);
    }
    
    /* Tighter spacing */
    .sx-section {
        padding: var(--sx-space-6) 0;
    }
    
    .sx-section-lg {
        padding: var(--sx-space-10) 0;
    }
}

/* =========================
   LANDSCAPE MOBILE
   ========================= */

@media (max-width: 767px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .sx-section {
        padding: var(--sx-space-6) 0;
    }
    
    .site-header {
        padding: var(--sx-space-2) 0;
    }
}

/* =========================
   TABLET LANDSCAPE (1024px - 1280px)
   ========================= */

@media (min-width: 1025px) and (max-width: 1280px) {
    .sx-container {
        max-width: var(--sx-container-lg);
    }
    
    .sx-posts-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* =========================
   LARGE DESKTOP (1920px and up)
   ========================= */

@media (min-width: 1920px) {
    .sx-container {
        max-width: 1600px;
    }
    
    :root {
        --sx-text-5xl: 4rem;      /* 64px */
        --sx-text-4xl: 3rem;      /* 48px */
        --sx-text-3xl: 2.25rem;   /* 36px */
    }
}

/* =========================
   PRINT STYLES
   ========================= */

@media print {
    .site-header,
    .sx-breadcrumbs,
    .sidebar,
    .sx-social-share,
    .sx-related-posts,
    .sx-comments-area,
    .post-navigation,
    .site-footer,
    .sx-back-to-top,
    .sx-mobile-menu-toggle,
    .sx-search-toggle,
    .sx-dark-mode-toggle {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
    
    .sx-single-content {
        max-width: 100%;
    }
}

/* =========================
   REDUCED MOTION
   ========================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}