/*
 * SinavBox Authentication Pages Responsive Styles
 * Mobile-first responsive design
 */

/* ===== TABLET (max-width: 1024px) ===== */
@media (max-width: 1024px) {
  .auth-container {
    flex-direction: column;
  }
  
  .auth-brand-section {
    flex: 0 0 auto;
    min-height: 50vh;
    padding: var(--auth-space-2xl);
  }
  
  .auth-form-section {
    flex: 0 0 auto;
    padding: var(--auth-space-2xl);
  }
  
  .auth-brand-features {
    display: none;
  }
}

/* ===== MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {
  :root {
    --auth-text-4xl: 28px;
    --auth-text-3xl: 24px;
    --auth-space-3xl: 48px;
    --auth-space-2xl: 32px;
  }
  
  .auth-container {
    flex-direction: column;
  }
  
  .auth-brand-section {
    min-height: 40vh;
    padding: var(--auth-space-xl) var(--auth-space-lg);
    text-align: center;
  }
  
  .auth-brand-title {
    font-size: var(--auth-text-3xl);
  }
  
  .auth-brand-subtitle {
    max-width: 100%;
    font-size: var(--auth-text-base);
  }
  
  .auth-brand-features {
    display: none;
  }
  
  .auth-brand-trust {
    flex-direction: column;
    gap: var(--auth-space-sm);
    align-items: center;
    text-align: center;
  }
  
  .auth-form-section {
    padding: var(--auth-space-xl) var(--auth-space-lg);
  }
  
  .auth-form-container {
    max-width: 100%;
  }
  
  .auth-form-title {
    font-size: var(--auth-text-2xl);
  }
  
  .auth-exam-type-grid {
    grid-template-columns: 1fr;
  }
  
  .auth-btn {
    padding: 14px var(--auth-space-lg);
    font-size: var(--auth-text-base);
  }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
  :root {
    --auth-text-4xl: 24px;
    --auth-text-3xl: 20px;
    --auth-space-3xl: 32px;
  }
  
  .auth-brand-section {
    min-height: 35vh;
    padding: var(--auth-space-lg);
  }
  
  .auth-form-section {
    padding: var(--auth-space-lg);
  }
  
  .auth-form-title {
    font-size: var(--auth-text-xl);
  }
  
  .auth-form-subtitle {
    font-size: var(--auth-text-sm);
  }
  
  .auth-brand-trust {
    font-size: var(--auth-text-xs);
  }
}