/* ==========================================
   responsive.css - Media Queries & Responsive Design
   ========================================== */

/* ==========================================
   LARGE DESKTOP - Above 1440px
   ========================================== */
@media (min-width: 1441px) {
    .container {
        max-width: 1600px;
    }
    
    .project-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .three-column-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    h1 {
        font-size: var(--text-7xl);
    }
    
    h2 {
        font-size: var(--text-4xl);
    }
}

/* ==========================================
   DESKTOP - 1024px to 1440px
   ========================================== */
@media (min-width: 1024px) and (max-width: 1440px) {
    .project-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .masonry-grid {
        column-count: 3;
    }
}

/* ==========================================
   TABLET LANDSCAPE - 768px to 1023px
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding: 0 var(--space-md);
    }
    
    .project-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .three-column-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .masonry-grid {
        column-count: 2;
    }
    
    .swiss-grid {
        grid-template-columns: repeat(8, 1fr);
    }
    
    h1 {
        font-size: var(--text-5xl);
    }
    
    h2 {
        font-size: var(--text-3xl);
    }
    
    .filter-controls {
        gap: var(--space-xs);
    }
}

/* ==========================================
   TABLET PORTRAIT - 481px to 767px
   ========================================== */
@media (min-width: 481px) and (max-width: 767px) {
   /* Layout adjustments */
   .edition-info {
       /* Keep flex-direction: row for left/right layout */
       gap: var(--space-xs);
   }
    
    /* Layout adjustments */
    .edition-info {
        flex-direction: column;
        gap: var(--space-xs);
        text-align: center;
    }
    
    .edition-volume,
    .edition-date,
    .edition-type {
        text-align: center;
    }
    
    .nav-menu {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
    }
    
    .nav-link {
        width: 100%;
        text-align: center;
        padding: var(--space-sm);
    }
    
    .project-grid {
        grid-template-columns: 1fr;
    }
    
    .two-column-grid {
        grid-template-columns: 1fr;
    }
    
    .three-column-grid {
        grid-template-columns: 1fr;
    }
    
    .masonry-grid {
        column-count: 1;
    }
    
    .filter-controls {
        flex-direction: column;
        gap: var(--space-xs);
    }
    
    .filter-btn {
        width: 100%;
        padding: var(--space-sm);
    }
    
    /* Lightbox adjustments */
    .lightbox-content {
        padding: var(--space-sm);
        max-width: 100%;
        max-height: 100%;
        margin: var(--space-sm);
    }
    
    .lightbox-close {
        width: 32px;
        height: 32px;
        font-size: var(--text-xl);
    }
    
    .lightbox-media {
        max-width: 100%;
    }
    
    /* Footer adjustments */
    .site-footer {
        padding: var(--space-md) 0;
        margin-top: var(--space-lg);
    }
    
    .footer-content {
        font-size: 10px;
    }
    
    /* Spacing adjustments */
    section {
        margin: var(--space-lg) 0;
    }
    
    .main-content {
        margin: var(--space-md) 0;
    }
}

/* ==========================================
   SMALL MOBILE - Below 320px
   ========================================== */
@media (max-width: 319px) {
    .container {
        padding: 0 8px;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.125rem;
    }
    
    .retro-logo {
        width: 50px;
        height: 50px;
    }
    
    .logo-text {
        font-size: 1rem;
    }
}

/* ==========================================
   ORIENTATION QUERIES
   ========================================== */

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    .site-header {
        padding: var(--space-sm) 0;
    }
    
    .masthead {
        padding: var(--space-xs) 0;
    }
    
    h1 {
        font-size: var(--text-3xl);
    }
    
    .retro-logo {
        width: 50px;
        height: 50px;
    }
}

/* ==========================================
   HIGH DPI DISPLAYS
   ========================================== */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* Sharper borders for retina displays */
    .project-card,
    .filter-btn,
    .nav-link {
        border-width: 1px;
    }
    
    /* Adjust shadows for clarity */
    .project-card:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
    }
}

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

@media print {
    /* Hide non-essential elements */
    .site-header,
    .filter-section,
    .site-footer,
    .lightbox,
    .nav-menu {
        display: none !important;
    }
    
    /* Reset backgrounds */
    body {
        background: white;
        color: black;
        font-size: 12pt;
        line-height: 1.5;
    }
    
    /* Ensure content fits on page */
    .container {
        max-width: 100%;
        padding: 0;
    }
    
    .main-content {
        margin: 0;
    }
    
    /* Project cards for print */
    .project-card {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid #000;
        margin-bottom: 1rem;
        padding: 0.5rem;
    }
    
    .project-thumbnail {
        height: auto;
        max-height: 200px;
    }
    
    /* Typography for print */
    h1, h2, h3 {
        page-break-after: avoid;
        break-after: avoid;
    }
    
    h1 {
        font-size: 24pt;
    }
    
    h2 {
        font-size: 18pt;
        border-bottom: 2px solid #000;
    }
    
    h3 {
        font-size: 14pt;
    }
    
    /* Links for print */
    a {
        text-decoration: underline;
        color: black;
    }
    
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
    
    /* Images for print */
    img {
        max-width: 100%;
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .retro-logo {
        animation: none;
    }
    
    .nav-link.active::after {
        animation: none;
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --ink-black: #ffffff;
        --paper-white: #0a0a0a;
        --newsprint-gray: #a0a0a0;
        --aged-paper: #1a1a1a;
        --highlight:  #00ff88;
        --retro-glow:  #00ff88;
    }
    
    body {
        background-image: 
            repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(255, 255, 255, 0.02) 2px,
                rgba(255, 255, 255, 0.02) 4px
            );
    }
}

/* ==========================================
   CONTAINER QUERIES (Future CSS)
   ========================================== */

/* Container query support (when available) */
@supports (container-type: inline-size) {
    .project-grid {
        container-type: inline-size;
    }
    
    @container (min-width: 700px) {
        .project-card {
            grid-column: span 6;
        }
    }
    
    @container (min-width: 1000px) {
        .project-card {
            grid-column: span 4;
        }
    }
}

/* ==========================================
   UTILITY CLASSES FOR RESPONSIVE
   ========================================== */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 767px) {
    .show-mobile {
        display: block !important;
    }
    
    .show-mobile.inline {
        display: inline !important;
    }
    
    .show-mobile.flex {
        display: flex !important;
    }
}

/* Show only on tablet */
.show-tablet {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .show-tablet {
        display: block !important;
    }
    
    .show-tablet.inline {
        display: inline !important;
    }
    
    .show-tablet.flex {
        display: flex !important;
    }
}

/* Show only on desktop */
.show-desktop {
    display: none !important;
}

@media (min-width: 1024px) {
    .show-desktop {
        display: block !important;
    }
    
    .show-desktop.inline {
        display: inline !important;
    }
    
    .show-desktop.flex {
        display: flex !important;
    }
}

/* Mobile fix: ensure breathing room under card text */
@media (max-width: 768px) {
    .nav-menu {
        gap: var(--space-sm);
    }
    
    .filter-controls {
        gap: var(--space-xs);
    }
    
    /* REMOVED .edition-info font-size override - let layout.css control it */
    
    .container {
        padding: 0 var(--space-sm);
    }
    
    /* Mobile card fixes */
    .category-card {
        height: auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
    }

    .category-thumbnail {
        aspect-ratio: 5 / 4;
        flex-shrink: 0;
    }

    .category-content {
        padding: var(--space-md);
        padding-bottom: 16px !important;
        min-height: 140px !important;
        display: flex;
        flex-direction: column;
    }

    .category-description {
        margin-top: auto;
    }

    .filter-controls {
        flex-direction: column;
    }
}

/* ==========================================
   MOBILE - 320px to 480px
   ========================================== */
@media (max-width: 480px) {
   /* Base adjustments */
   body {
       font-size: var(--text-sm);
   }
   
   .container {
       padding: 0 var(--space-xs);
   }
   
   /* Header adjustments */
   .site-header {
       padding: var(--space-md) 0 var(--space-sm);
   }
   
   .edition-info {
       /* Keep horizontal layout - no flex-direction: column */
       gap: 4px;
       /* Font size controlled by layout.css */
   }
   
   .masthead {
       padding: var(--space-sm) 0;
   }
   
    /* Typography adjustments */
    h1 {
        font-size: clamp(1.75rem, 10vw, var(--text-4xl));
        letter-spacing: -0.01em;
    }
    
    h2 {
        font-size: clamp(1.25rem, 6vw, var(--text-2xl));
        margin-bottom: var(--space-sm);
    }
    
    h3 {
        font-size: var(--text-lg);
    }
    
    .site-subtitle {
        font-size: 10px;
    }
    
    /* Navigation adjustments */
    .main-nav {
        margin: var(--space-sm) 0;
        padding: var(--space-xs) 0;
    }
    
    .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-xs);
    }
    
    .nav-link {
        width: 100%;
        text-align: center;
        padding: var(--space-sm);
        border: 1px solid var(--border-light);
    }
    
    /* Grid adjustments */
    .project-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .swiss-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-sm);
    }
    
    /* Component adjustments */
    .project-card {
        padding: var(--space-sm);
    }
    
    .project-thumbnail {
        height: 150px;
    }
    
    .project-title {
        font-size: var(--text-base);
    }
    
    .project-description {
        font-size: var(--text-xs);
    }
    
    .retro-logo {
        width: 60px;
        height: 60px;
    }
    
    .logo-text {
        font-size: var(--text-lg);
    }
    
    /* Filter adjustments */
    .filter-section {
        padding: var(--space-sm);
    }
    
    .filter-controls {
        flex-direction: column;

/* Mobile fix: ensure breathing room under card text */
@media (max-width: 768px) {
  .category-card {
    height: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
  }

  .category-thumbnail {
    aspect-ratio: 5 / 4;
    flex-shrink: 0;
  }

  .category-content {
    padding: var(--space-md);
    padding-bottom: 16px !important; /* Adds breathing room below text */
    min-height: 140px !important;     /* Ensures enough space for content stack */
    display: flex;
    flex-direction: column;
  }

  .category-description {
    margin-top: auto;
  }

  .filter-controls {
    flex-direction: column;
  }
}