/**
 * Responsive Design
 * Mobile-first media queries and responsive utilities
 */

/* ========================================
   Mobile (320px - 767px) - Default styles
   ======================================== */

/* Base mobile styles are in base.css and components.css */

/* ========================================
   Tablet (768px - 1023px)
   ======================================== */

@media (min-width: 768px) {
  /* Layout Heights */
  :root {
    --header-height: 85px;
  }

  /* Typography */
  h1 {
    font-size: 3.5rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  /* Container */
  .container {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  /* App Layout */
  .app-header {
    padding: var(--spacing-lg);
  }

  .app-main {
    padding: var(--spacing-2xl) 0;
  }

  /* Cards */
  .card {
    padding: var(--spacing-xl);
  }

  /* Form Groups - Two column layout for shorter fields */
  .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }

  /* Landing Page */
  .landing-hero {
    padding: var(--spacing-2xl) 0 var(--spacing-xl);
  }

  .logo {
    max-width: 250px;
  }

  /* Review Section - Side-by-side layout on tablets+ */
  .review-data {
    grid-template-columns: auto 1fr;
    gap: var(--spacing-sm) var(--spacing-md);
  }

  .review-data dt {
    margin-top: 0;
  }

  .review-data dd {
    margin-bottom: 0;
  }
}

/* ========================================
   Desktop (1024px+)
   ======================================== */

@media (min-width: 1024px) {
  /* Typography */
  h1 {
    font-size: 4rem;
  }

  /* Form Layout - Larger forms */
  .form-container {
    max-width: 800px;
    margin: 0 auto;
  }

  /* Progress Bar - Full width on all screens */
  .progress-container {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Review Section */
  .review-data {
    grid-template-columns: 200px 1fr;
  }
}

/* ========================================
   Touch Targets (Mobile)
   ======================================== */

@media (max-width: 767px) {
  /* Ensure minimum touch target size of 44x44px */
  .btn,
  .lang-btn,
  .btn-edit,
  button,
  a.btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Form inputs */
  .form-input,
  .form-textarea,
  .form-select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Radio and checkbox labels */
  .radio-label,
  .checkbox-label {
    min-height: 44px;
  }
}

/* ========================================
   Landscape Orientation (Mobile)
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
  /* Layout Heights */
  :root {
    --header-height: 60px;
  }

  /* Reduce padding in landscape mode */
  .app-header {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .app-main {
    padding: var(--spacing-md) 0;
  }

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

  .landing-hero {
    padding: var(--spacing-md) 0;
  }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  /* Hide navigation and interactive elements */
  .step-navigation,
  .language-switcher,
  .btn-edit,
  .app-header,
  .app-footer {
    display: none;
  }

  /* Optimize for print */
  body {
    background: white;
    color: black;
  }

  .card,
  .review-category {
    border: 1px solid #000;
    page-break-inside: avoid;
  }

  /* Ensure readable text */
  * {
    color: black !important;
  }
}

/* ========================================
   Responsive Utilities
   ======================================== */

/* Hide/Show utilities */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }

  .hide-tablet-up {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hide-desktop {
    display: none;
  }
}

/* Responsive spacing */
@media (min-width: 768px) {
  .md\:mt-xl { margin-top: var(--spacing-xl); }
  .md\:mb-xl { margin-bottom: var(--spacing-xl); }
}

/* Responsive text alignment */
@media (min-width: 768px) {
  .md\:text-left { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right { text-align: right; }
}