/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

/* Mobile - Extra Small (320px - 640px) */
@media (max-width: 640px) {
    :root {
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.75rem;
        --font-size-2xl: 1.5rem;
        --space-4xl: 3rem;
        --space-3xl: 2rem;
        --space-2xl: 1.5rem;
    }

    .site-header {
        padding: var(--space-3xl) var(--space-md) var(--space-2xl);
        margin-bottom: var(--space-3xl);
    }

    .site-title {
        font-size: var(--font-size-3xl);
    }

    .site-subtitle {
        font-size: var(--font-size-base);
    }

    .gallery {
        padding: 0 var(--space-md);
    }

    .photo-name {
        font-size: 1.75rem;
    }

    .photo-item {
        margin-bottom: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }

    .site-footer {
        padding: var(--space-3xl) var(--space-md);
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        margin-bottom: var(--space-2xl);
    }
}

/* Tablet (640px - 768px) */
@media (min-width: 641px) and (max-width: 768px) {
    :root {
        --font-size-4xl: 2.5rem;
    }

    .photo-name {
        font-size: 2rem;
    }
}

/* Large screens (769px+) */
@media (min-width: 769px) {
    .photo-name {
        font-size: 2.5rem;
    }
}

/* Extra large screens (1280px+) */
@media (min-width: 1280px) {
    .container {
        padding: 0 var(--space-lg);
    }

    .photo-item {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Print */
@media print {
    body {
        background-color: white;
        color: black;
    }

    .site-header,
    .site-footer {
        display: none;
    }

    .photo-item {
        page-break-inside: avoid;
        margin-bottom: 2rem;
    }

    a {
        text-decoration: underline;
    }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--bg-primary);
        color: var(--text-primary);
    }
}