/**
 * Standardized Responsive Breakpoints - Mobile First Approach
 * 
 * Breakpoints:
 * - Mobile: 320px - 767px (default styles)
 * - Tablet: 768px - 1023px
 * - Desktop: 1024px - 1199px  
 * - Large: 1200px+
 */

/* ==========================================================================
   MOBILE FIRST BASE STYLES (320px+)
   ========================================================================== */

/* Container and Layout */
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Typography - Mobile optimized */
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
h3 { font-size: clamp(1.25rem, 3.5vw, 1.75rem); }
h4 { font-size: clamp(1.125rem, 3vw, 1.5rem); }

/* Grid Systems */
.grid-1 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* ==========================================================================
   TABLET STYLES (768px+)
   ========================================================================== */
@media (min-width: 768px) {
    .container {
        max-width: 740px;
        padding: 0 1.5rem;
    }
    
    /* Grid adaptations */
    .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .grid-4 { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    
    /* Typography adjustments */
    h1 { font-size: clamp(2rem, 4vw, 3rem); }
    h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
}

/* ==========================================================================
   DESKTOP STYLES (1024px+)
   ========================================================================== */
@media (min-width: 1024px) {
    .container {
        max-width: 1000px;
        padding: 0 2rem;
    }
    
    /* Grid final forms */
    .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

/* ==========================================================================
   LARGE DESKTOP STYLES (1200px+)
   ========================================================================== */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        padding: 0 2rem;
    }
}

/* ==========================================================================
   EXTRA LARGE DESKTOP STYLES (1400px+)
   ========================================================================== */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
        padding: 0 2rem;
    }
}

/* ==========================================================================
   TOUCH OPTIMIZATIONS
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Touch-friendly button sizes */
    .btn, button, .pill {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
    }
    
    /* Larger tap targets */
    .article-card,
    .post-card {
        min-height: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .article-card:hover,
    .post-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   HIGH-DPI DISPLAY OPTIMIZATIONS
   ========================================================================== */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
    /* High-DPI specific optimizations will be added here */
}

/* ==========================================================================
   PERFORMANCE UTILITIES
   ========================================================================== */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.hidden { display: none !important; }
.show { display: block !important; }