/* Responsive design for mobile and tablet devices */

/* Tablet styles (max-width: 1024px) */
@media screen and (max-width: 1024px) {
  :root {
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
  }

  header[role="banner"] {
    padding: var(--spacing-md);
  }

  main[role="main"] {
    padding: 0 var(--spacing-md);
  }

  .gallery-container {
    height: 75vh;
    /* Slightly less on tablets */
  }

  .gallery-image-container {
    height: calc(75vh - 2 * var(--spacing-md));
    min-width: 180px;
    max-width: calc(85vw - 2 * var(--spacing-md));
  }

  .gallery-scroll {
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
  }

  .impressum-content {
    padding: var(--spacing-md);
  }
}

/* Mobile styles (max-width: 768px) */
@media screen and (max-width: 768px) {
  :root {
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.25rem;
    --font-size-base: 0.9rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.125rem;
    --font-size-2xl: 1.25rem;
  }

  /* Minimalistic header on mobile */
  header[role="banner"] {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  nav[role="navigation"] {
    justify-content: center;
    margin-bottom: var(--spacing-xs);
  }

  /* Keep navigation horizontal and minimal on mobile */
  .nav-list {
    gap: var(--spacing-lg);
  }

  .nav-link {
    font-size: var(--font-size-base);
    min-height: 44px;
    /* Touch-friendly size */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-weight: 700;
  }

  .nav-link:hover {
    text-transform: uppercase;
  }

  /* Page titles */
  .gallery-title,
  .page-title {
    font-size: var(--font-size-xl);
    text-align: center;
  }

  /* Main content */
  main[role="main"] {
    padding: 0 var(--spacing-sm);
  }

  /* Gallery adjustments for mobile */
  .gallery-container {
    margin: var(--spacing-lg) 0;
    height: 70vh;
    /* Less on mobile for UI elements */
  }

  .gallery-scroll {
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
  }

  /* Smaller gallery images on mobile */
  .gallery-image-container {
    height: calc(70vh - 2 * var(--spacing-sm));
    min-width: 150px;
    max-width: calc(90vw - 2 * var(--spacing-sm));
  }

  .gallery-image-container:hover {
    transform: none;
    /* Disable hover effects on mobile */
    box-shadow: none;
  }

  .gallery-image-container:hover .gallery-image {
    transform: none;
  }

  /* Touch-friendly buttons */
  button {
    min-height: 44px;
    min-width: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
  }

  /* Gallery info and controls */
  .gallery-instructions {
    display: none;
    /* Hide mouse instructions on mobile */
  }

  .gallery-controls {
    gap: var(--spacing-sm);
    justify-content: center;
  }

  .control-hint {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.8rem;
  }

  /* Footer adjustments */
  footer[role="contentinfo"] {
    padding: var(--spacing-md);
    font-size: 0.8rem;
  }

  /* Impressum page mobile */
  .impressum-content {
    padding: var(--spacing-sm);
  }

  .legal-section {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }

  .back-link {
    padding: var(--spacing-md);
    min-height: 44px;
  }
}

/* Small mobile styles (max-width: 480px) */
@media screen and (max-width: 480px) {
  :root {
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --font-size-sm: 0.8rem;
    --font-size-base: 0.85rem;
  }

  /* Even more compact spacing */
  header[role="banner"] {
    padding: var(--spacing-sm);
  }

  main[role="main"] {
    padding: 0 var(--spacing-sm);
  }

  /* Very small gallery images */
  .gallery-container {
    height: 65vh;
  }

  .gallery-image-container {
    height: calc(65vh - 2 * var(--spacing-sm));
    min-width: 120px;
    max-width: calc(95vw - 2 * var(--spacing-sm));
  }

  .gallery-scroll {
    gap: var(--spacing-xs);
  }

  /* Compact text */
  .gallery-title,
  .page-title {
    font-size: var(--font-size-lg);
  }

  .gallery-empty,
  .gallery-error {
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .legal-section {
    padding: var(--spacing-sm);
  }
}

/* Landscape orientation on mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
  .gallery-container {
    height: 80vh;
    /* Use more space in landscape */
  }

  .gallery-image-container {
    height: calc(80vh - 2 * var(--spacing-sm));
  }

  header[role="banner"] {
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .nav-container {
    margin-bottom: var(--spacing-xs);
  }
}

/* High DPI displays */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min-resolution: 192dpi),
screen and (min-resolution: 2dppx) {

  /* Slightly smaller text on high DPI to account for sharpness */
  body {
    font-size: 15px;
  }
}

/* Print styles (optional but useful) */
@media print {

  /* Hide navigation and interactive elements */
  header nav,
  .nav-toggle,
  .gallery-controls,
  .retry-button,
  .back-navigation,
  footer {
    display: none !important;
  }

  /* Optimize for print */
  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
  }

  .gallery-title,
  .page-title {
    color: black !important;
    border-bottom: 1px solid black;
    padding-bottom: 0.5rem;
  }

  /* Print gallery as vertical list */
  .gallery-scroll {
    display: block !important;
    overflow: visible !important;
  }

  .gallery-image-container {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    page-break-inside: avoid;
  }

  .gallery-image {
    max-height: 300px;
    width: auto;
    margin: 0 auto;
  }

  /* Impressum print styles */
  .impressum-content {
    max-width: none !important;
    padding: 0 !important;
  }

  .legal-section {
    background: none !important;
    border: 1px solid black;
    margin-bottom: 1rem !important;
    page-break-inside: avoid;
  }
}

/* Accessibility: Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

  .gallery-image-container,
  .gallery-image,
  .nav-link,
  .back-link,
  button {
    transition: none !important;
    animation: none !important;
  }

  .gallery-scroll {
    scroll-behavior: auto !important;
  }
}

/* Accessibility: High contrast mode */
@media (prefers-contrast: high) {
  .gallery-image-container {
    border: 2px solid white;
  }

  .nav-link {
    border: 1px solid white;
  }

  button {
    border: 2px solid white;
  }
}

/* Dark mode support (in case user has different preference) */
@media (prefers-color-scheme: light) {

  /* This gallery is designed for dark theme, but provide light fallback */
  body {
    background-color: #f5f5f5;
    color: #333333;
  }

  :root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e0e0e0;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #888888;
  }
}