/**
 * Bull Finder Responsive Styles
 * Mobile-first responsive design for all screen sizes
 */

/* ========================================
   MOBILE FIRST (320px+)
   Base styles above
   ======================================== */

/* ========================================
   SMALL PHONES (400px+)
   ======================================== */

@media (min-width: 400px) {
  .bf-operation-cards {
    grid-template-columns: 1fr;
  }

  .bf-goal-grid {
    grid-template-columns: 1fr;
  }

  .bf-results-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   LARGE PHONES (576px+)
   ======================================== */

@media (min-width: 576px) {
  .bf-container {
    padding: 20px;
  }

  .bf-operation-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .bf-goal-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bf-bottles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bf-question-choices {
    grid-template-columns: repeat(2, 1fr);
  }

  .bf-quiz-navigation {
    flex-direction: row;
    justify-content: space-between;
  }

  .bf-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bf-compare-bar {
    flex-direction: row;
  }

  .bf-legend-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   TABLETS (768px+)
   ======================================== */

@media (min-width: 768px) {
  .bf-header {
    padding: 40px 0;
  }

  .bf-header h1 {
    font-size: 2.5em;
  }

  .bf-step-number {
    font-size: 1.2em;
  }

  .bf-operation-card {
    padding: 40px 30px;
    margin:20px;
  }

  .bf-operation-icon {
    font-size: 4em;
  }

  .bf-operation-card h2 {
    font-size: 1.8em;
  }

  .bf-goal-card {
    padding: 30px 25px;
  }

  .bf-goal-icon {
    font-size: 3em;
  }

  .bf-question-text {
    font-size: 2em;
  }

  .bf-slider {
    height: 12px;
  }

  .bf-slider::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
  }

  .bf-slider::-moz-range-thumb {
    width: 30px;
    height: 30px;
  }

  .bf-bottle-option {
    padding: 30px 20px;
  }

  .bf-choice-card {
    padding: 30px 25px;
  }

  .bf-choice-icon {
    font-size: 3.5em;
  }

  .bf-results-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .bf-comparison-bulls {
    grid-template-columns: 200px repeat(auto-fit, minmax(220px, 1fr));
  }

  .bf-comparison-row {
    grid-template-columns: 200px repeat(auto-fit, minmax(220px, 1fr));
  }

  .bf-legend-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========================================
   DESKTOPS (992px+)
   ======================================== */

@media (min-width: 992px) {
  .bf-container {
    max-width: 1200px;
    padding: 30px;
  }

  .bf-header h1 {
    font-size: 3em;
  }

  .bf-progress-tracker {
    display: flex;
  }

  .bf-goal-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .bf-bottles-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .bf-question-choices {
    grid-template-columns: repeat(3, 1fr);
  }

  .bf-results-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .bf-comparison-actions {
    justify-content: flex-start;
  }

  .bf-comparison-actions .bf-btn {
    flex: 0 1 auto;
  }
}

/* ========================================
   LARGE DESKTOPS (1200px+)
   ======================================== */

@media (min-width: 1200px) {
  .bf-container {
    max-width: 1400px;
  }

  .bf-header h1 {
    font-size: 3.5em;
  }

  .bf-operation-cards {
  }

  .bf-goal-grid {
    max-width: 1200px;
  }

  .bf-results-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================================
   TOUCH DEVICES
   ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .bf-operation-card,
  .bf-goal-card,
  .bf-choice-card,
  .bf-bottle-option {
    min-height: 120px;
  }

  /* Disable hover effects on touch devices */
  .bf-operation-card:hover,
  .bf-goal-card:hover,
  .bf-choice-card:hover,
  .bf-bottle-option:hover {
    transform: none;
    box-shadow: var(--bf-shadow);
  }

  .bf-bull-card:hover {
    transform: none;
  }

  .bf-bull-card:hover .bf-image-overlay {
    opacity: 0;
  }

  /* Show view button by default on cards */
  .bf-bull-card .bf-image-overlay {
    opacity: 0.8;
  }

  .bf-view-btn {
    font-size: 1.1em;
    padding: 15px 30px;
  }

  /* Larger slider thumbs for touch */
  .bf-slider::-webkit-slider-thumb {
    width: 35px;
    height: 35px;
  }

  .bf-slider::-moz-range-thumb {
    width: 35px;
    height: 35px;
  }

  /* Larger checkboxes */
  .bf-card-select input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }

  /* Larger star targets */
  .bf-star {
    font-size: 2.5em;
    padding: 10px;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .bf-header,
  .bf-progress-tracker,
  .bf-quiz-navigation,
  .bf-compare-bar,
  .bf-card-actions,
  .bf-comparison-actions {
    display: none;
  }

  .bf-container {
    max-width: 100%;
  }

  .bf-bull-card,
  .bf-comparison-row {
    break-inside: avoid;
  }

  .bf-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

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

  .bf-operation-card:hover,
  .bf-goal-card:hover,
  .bf-choice-card:hover,
  .bf-bull-card:hover {
    transform: none;
  }

  .bf-ring-fill,
  .bf-trait-bar-fill,
  .bf-compare-bar-fill,
  .bf-thermometer-fill {
    transition: none;
  }

  .bf-achievement-popup {
    animation: none;
  }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
  .bf-operation-card,
  .bf-goal-card,
  .bf-choice-card,
  .bf-bull-card {
    border: 2px solid currentColor;
  }

  .bf-btn {
    border: 2px solid currentColor;
  }

  .bf-slider::-webkit-slider-thumb,
  .bf-slider::-moz-range-thumb {
    border: 2px solid currentColor;
  }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --bf-bg: #1a1a1a;
    --bf-text: #e0e0e0;
    --bf-text-light: #b0b0b0;
    --bf-border: #333;
    --bf-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    --bf-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.6);
  }

  body.bull-finder-page {
    background: #121212;
    color: #e0e0e0;
  }

  .bf-operation-card,
  .bf-goal-card,
  .bf-choice-card,
  .bf-bull-card,
  .bf-question,
  .bf-comparison-table-wrapper {
    background: #1e1e1e;
    border-color: #333;
  }

  .bf-operation-card:hover,
  .bf-goal-card:hover,
  .bf-choice-card:hover,
  .bf-bull-card:hover {
    background: #252525;
  }

  .bf-progress-step {
    background: #2a2a2a;
  }

  .bf-progress-step.completed {
    background: var(--bf-primary);
  }

  .bf-slider {
    background: #333;
  }

  .bf-trait-bar-container,
  .bf-compare-bar-container {
    background: #333;
  }

  .bf-key-traits,
  .bf-comparison-row {
    background: #1a1a1a;
  }

  .bf-comparison-row:hover {
    background: #252525;
  }

  .bf-comparison-bull-value {
    background: #1e1e1e;
  }

  .bf-results-tips,
  .bf-comparison-legend {
    background: #1a1a1a;
  }

  .bf-no-results,
  .bf-no-comparison {
    color: #b0b0b0;
  }
}

/* ========================================
   LANDSCAPE ORIENTATION (MOBILE)
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
  .bf-header {
    padding: 20px 0;
  }

  .bf-header h1 {
    font-size: 1.8em;
  }

  .bf-operation-card,
  .bf-goal-card {
    padding: 20px 15px;
  }

  .bf-operation-icon,
  .bf-goal-icon {
    font-size: 2.5em;
  }

  .bf-question-text {
    font-size: 1.5em;
  }

  .bf-visual-container {
    min-height: 100px;
  }
}

/* ========================================
   SPECIFIC BREAKPOINT ADJUSTMENTS
   ======================================== */

/* iPad Portrait */
@media (min-width: 768px) and (max-width: 991px) {
  .bf-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bf-comparison-bulls,
  .bf-comparison-row {
    grid-template-columns: 150px repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* iPad Landscape */
@media (min-width: 992px) and (max-width: 1199px) {
  .bf-results-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Small Desktop */
@media (min-width: 1200px) and (max-width: 1399px) {
  .bf-container {
    max-width: 1200px;
  }

  .bf-results-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========================================
   UTILITY CLASSES FOR RESPONSIVE CONTROL
   ======================================== */

.bf-hide-mobile {
  display: none;
}

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

  .bf-hide-desktop {
    display: none;
  }
}

.bf-mobile-only {
  display: block;
}

@media (min-width: 768px) {
  .bf-mobile-only {
    display: none;
  }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus visible for keyboard navigation */
.bf-operation-card:focus-visible,
.bf-goal-card:focus-visible,
.bf-choice-card:focus-visible,
.bf-btn:focus-visible {
  outline: 3px solid var(--bf-accent);
  outline-offset: 3px;
}

/* Skip to content link */
.bf-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--bf-primary);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 10000;
}

.bf-skip-link:focus {
  top: 0;
}

/* Screen reader only text */
.bf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}