/* Responsive styles - Breakpoints and mobile adaptations */

/* Mobile-first approach */
/* Base: < 640px (mobile) */

.widget-card {
  width: calc(100% - 32px);
  max-width: var(--widget-width);
}

.widget-card.expanded {
  width: calc(100% - 32px);
  max-width: var(--widget-expanded-width);
}

.philosophy-content {
  padding: var(--space-4);
}

.question-text {
  font-size: var(--text-base);
}

.answer-btn {
  min-height: 48px;
  padding: var(--space-3);
}

.progress-track {
  height: 6px;
}

.expanded-footer {
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.expanded-footer-left {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.session-info {
  width: 100%;
}

/* Tablet: 640px - 1024px */
@media (min-width: 640px) {
  .widget-card {
    width: var(--widget-width);
  }
  
  .widget-card.expanded {
    width: var(--widget-expanded-width);
  }
  
  .philosophy-content {
    padding: var(--space-5);
  }
  
  .question-text {
    font-size: var(--text-lg);
  }
  
  .answer-btn {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
  }
  
  .progress-track {
    height: 6px;
  }
  
  .expanded-footer {
    flex-direction: row;
    align-items: center;
  }
  
  .expanded-footer-left {
    flex-direction: row;
    align-items: center;
  }
  
  .session-info {
    width: auto;
  }
}

/* Desktop: > 1024px */
@media (min-width: 1024px) {
  .widget-card.expanded {
    width: var(--widget-expanded-width);
  }
  
  .philosophy-content {
    padding: var(--space-6);
  }
  
  .question-text {
    font-size: var(--text-lg);
  }
  
  .progress-track {
    height: 6px;
  }
}

/* Large desktop: > 1280px */
@media (min-width: 1280px) {
  .captcha-container {
    padding: var(--space-8);
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .answer-btn {
    min-height: 52px;
  }
  
  .checkbox-area {
    min-width: 52px;
    min-height: 52px;
  }
  
  .footer-link,
  .refresh-link {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .widget-card {
    border-width: 2px;
  }
  
  .answer-btn {
    border-width: 2px;
  }
  
  .progress-track {
    border: 1px solid var(--color-border);
  }
}

/* Dark mode support (optional enhancement) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-bg-elevated: #202124;
    --color-surface: #202124;
    --color-surface-muted: #1a1a1a;
    --color-bg-hover: #2a2a2a;
    --color-bg-active: #3a3a3a;
    --color-page: #000000;
    --color-border: #404040;
    --color-border-hover: #606060;
    --color-text-primary: #e8eaed;
    --color-text-secondary: #9aa0a6;
    --color-text-tertiary: #80868b;
    --color-accent: #8ab4f8;
    --color-accent-hover: #aecbfa;
    --color-accent-light: #1a3a5c;
    --color-success: #81c995;
    --color-success-light: #1a3a2a;
    --color-error: #f28b82;
    --color-error-light: #3a1a1a;
  }
  
  body {
    background-color: var(--color-page);
  }
  
  .checkbox-visual {
    background: var(--color-surface);
  }
  
  .answer-btn {
    background: var(--color-surface);
  }
}

/* Print styles */
@media print {
  .widget-card {
    box-shadow: none;
    border: 1px solid #000;
  }
  
  .spinner-container,
  .progress-container {
    display: none;
  }
  
  .answer-btn {
    border: 1px solid #000;
  }
}