/* BLOC Magazine - Responsive Styles */
/* Mobile-first responsive design */

/* ===== CSS Variables for Responsive Design ===== */
:root {
  /* Breakpoints */
  --mobile: 480px;
  --tablet: 768px;
  --desktop: 1024px;
  --wide: 1200px;
}

/* ===== Base Responsive Adjustments ===== */
@media (max-width: 768px) {
  /* Header */
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  
  nav {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  /* Hero */
  .hero {
    padding: var(--space-2xl) var(--space-lg);
  }
  
  .hero-stats {
    flex-direction: column;
    gap: var(--space-lg);
  }
  
  /* Featured Grid */
  .featured-grid {
    grid-template-columns: 1fr;
  }
  
  /* Category Grid */
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Articles Grid */
  .articles-grid {
    grid-template-columns: 1fr;
  }
  
  /* Filter Controls */
  .filter-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  #category-filter, #search-input {
    width: 100%;
  }
  
  /* Newsletter Form */
  .newsletter-form {
    flex-direction: column;
  }
  
  /* Footer */
  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  /* Pagination */
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  /* Mobile-specific adjustments */
  
  /* Header */
  .logo {
    font-size: 1.25rem;
  }
  
  nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  
  .nav-link {
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
  }
  
  /* Hero */
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 0.875rem;
  }
  
  .stat-number {
    font-size: 1.5rem;
  }
  
  /* Category Grid */
  .category-grid {
    grid-template-columns: 1fr;
  }
  
  .category-card {
    padding: var(--space-lg);
  }
  
  /* Article Cards */
  .article-card {
    padding: var(--space-md);
  }
  
  .article-title {
    font-size: 1.125rem;
  }
  
  .article-excerpt {
    font-size: 0.75rem;
  }
  
  /* Footer */
  .city-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  
  /* Pagination buttons smaller on mobile */
  .page-btn {
    padding: var(--space-xs) var(--space-sm);
    min-width: 32px;
    font-size: 0.75rem;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  /* Tablet-specific adjustments */
  
  /* Featured Grid */
  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Category Grid */
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Articles Grid */
  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Footer */
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  /* Desktop optimizations */
  
  /* Featured Grid */
  .featured-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Category Grid */
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Articles Grid */
  .articles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Smooth animations for desktop */
  .category-card,
  .article-card,
  .featured-card {
    transition: transform var(--transition-base);
  }
  
  .category-card:hover,
  .article-card:hover,
  .featured-card:hover {
    transform: translateY(-4px);
  }
}

/* ===== Print Styles ===== */
@media print {
  /* Hide non-essential elements */
  nav,
  .newsletter,
  .social-links,
  .filter-controls,
  .hero-stats,
  .category-grid {
    display: none !important;
  }
  
  /* Adjust colors for printing */
  body {
    background: white !important;
    color: black !important;
    font-size: 12pt !important;
  }
  
  a {
    color: black !important;
    text-decoration: underline !important;
  }
  
  /* Ensure content is visible */
  .container {
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  .articles-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .article-card {
    border: 1px solid #ccc !important;
    background: white !important;
    break-inside: avoid;
  }
  
  /* Add URLs after links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.875em;
    color: #666;
  }
  
  /* Page breaks */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  .article-card {
    page-break-inside: avoid;
  }
}

/* ===== Reduced Motion Preferences ===== */
@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;
  }
  
  html {
    scroll-behavior: auto;
  }
  
  .category-card:hover,
  .article-card:hover,
  .featured-card:hover {
    transform: none !important;
  }
}

/* ===== High Contrast Mode ===== */
@media (prefers-contrast: high) {
  :root {
    --accent: #ffd700;
    --accent-dark: #b8860b;
  }
  
  .article-card,
  .category-card,
  .featured-card {
    border-width: 2px;
  }
  
  .nav-link::after {
    height: 3px;
  }
}

/* ===== Dark Mode (already dark, but for consistency) ===== */
@media (prefers-color-scheme: dark) {
  /* Our site is already dark, ensure consistency */
  body {
    background: var(--black);
    color: var(--white);
  }
}

/* ===== Touch Device Optimizations ===== */
@media (hover: none) and (pointer: coarse) {
  /* Increase tap targets for touch devices */
  .nav-link {
    padding: var(--space-sm) var(--space-md);
  }
  
  .page-btn,
  .category-card,
  .article-card {
    min-height: 44px; /* Apple's minimum tap target size */
  }
  
  /* Remove hover effects that don't work on touch */
  .category-card:hover,
  .article-card:hover,
  .featured-card:hover {
    transform: none;
  }
  
  /* Show active states for touch feedback */
  .category-card:active,
  .article-card:active,
  .featured-card:active {
    background: var(--gray-300);
  }
}

/* ===== Orientation-specific adjustments ===== */
@media (orientation: landscape) and (max-height: 500px) {
  /* Landscape on mobile devices */
  .hero {
    padding: var(--space-xl) var(--space-lg);
    min-height: auto;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .featured-grid,
  .category-grid,
  .articles-grid {
    grid-auto-flow: column;
    overflow-x: auto;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  
  /* Hide some elements in landscape */
  .hero-stats {
    display: none;
  }
}

/* ===== Performance optimizations for slower devices ===== */
@media (prefers-reduced-data: reduce) {
  /* Don't load background images */
  .hero::before {
    background: none !important;
  }
  
  /* Use system fonts */
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  
  /* Reduce animations */
  * {
    animation: none !important;
    transition: none !important;
  }
}