/* =============================================
   RESPONSIVE & MOBILE-FIRST DESIGN
   ============================================= */

/* =============================================
   SMALL DEVICES (XS) - 320px to 479px
   ============================================= */

@media (max-width: 479px) {
  /* TYPOGRAPHY */
  h1 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-lg);
    line-height: var(--line-height-tight);
  }

  h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
  }

  h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
  }

  h4 {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
  }

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

  .subtitle {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-lg);
  }

  /* LAYOUT & SPACING */
  .container {
    padding: 0 var(--spacing-md);
  }

  /* Remove side padding for full-width sections */
  header {
    padding: 0;
  }

  .navbar {
    padding: 0 var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-md);
  }

  .navbar-brand {
    flex-basis: 100%;
    font-size: var(--font-size-base);
  }

  .navbar-logo {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-base);
  }

  .navbar-nav {
    flex-basis: 100%;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs);
  }

  /* HERO SECTION */
  .hero {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .hero-text h1 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
  }

  .hero-text .subtitle {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-lg);
  }

  .hero-cta {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .hero-cta .btn {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-sm);
  }

  .hero-visual {
    min-height: 200px;
    padding: var(--spacing-2xl) var(--spacing-md);
  }

  .hero-visual-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
  }

  /* FEATURES */
  .features-section {
    padding: var(--spacing-2xl) var(--spacing-md);
  }

  .features-header h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-lg);
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

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

  .feature-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
  }

  .feature-card h3 {
    font-size: var(--font-size-base);
  }

  .feature-card p {
    font-size: var(--font-size-xs);
  }

  /* BUTTONS */
  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    width: 100%;
  }

  .btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }

  .btn-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
  }

  .btn-block {
    width: 100%;
  }

  /* CARDS */
  .card {
    padding: var(--spacing-lg);
  }

  .card-header,
  .card-body,
  .card-footer {
    padding: var(--spacing-lg);
  }

  /* FORMS */
  .form-group {
    margin-bottom: var(--spacing-md);
  }

  .form-label {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-sm);
  }

  .form-input,
  .form-select,
  .form-textarea {
    padding: var(--spacing-md);
    font-size: 16px; /* Prevent zoom on iOS */
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  /* ANALYSIS PAGE */
  .placement-analysis {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .analysis-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .analysis-form,
  .analysis-results {
    padding: var(--spacing-lg);
  }

  /* TABLES */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table {
    font-size: var(--font-size-xs);
  }

  .table th,
  .table td {
    padding: var(--spacing-sm);
  }

  .alternatives-table th {
    padding: var(--spacing-sm);
    font-size: var(--font-size-xs);
  }

  .alternatives-table td {
    padding: var(--spacing-sm);
    font-size: var(--font-size-xs);
  }

  /* OPTIONS PAGE */
  .options-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-md);
  }

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

  .option-label {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .option-card h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
  }

  .option-description {
    font-size: var(--font-size-xs);
  }

  .option-details {
    padding: var(--spacing-md);
    font-size: var(--font-size-xs);
  }

  /* ETHICS PAGE */
  .ethics-content {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .ethics-section {
    margin-bottom: var(--spacing-2xl);
  }

  .ethics-section h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }

  .disclaimer {
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
  }

  .disclaimer h3 {
    font-size: var(--font-size-base);
  }

  .disclaimer p {
    font-size: var(--font-size-xs);
  }

  .principles-list {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

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

  .principle-card h4 {
    font-size: var(--font-size-base);
  }

  .principle-card p {
    font-size: var(--font-size-xs);
  }

  /* FOOTER */
  footer {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .footer-section h4 {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
  }

  .footer-section a {
    font-size: var(--font-size-xs);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .footer-copyright {
    font-size: var(--font-size-xs);
  }

  /* ALERTS */
  .alert {
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
  }

  .alert-icon {
    font-size: var(--font-size-base);
  }

  .alert-title {
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-xs);
  }

  .alert-description {
    font-size: var(--font-size-xs);
  }

  /* FIT SCORE */
  .fit-score {
    font-size: var(--font-size-2xl);
  }

  /* MODALS */
  .modal {
    width: 95%;
    max-height: 95vh;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--spacing-md);
  }

  /* PAGINATION */
  .pagination {
    gap: var(--spacing-xs);
  }

  .pagination-item {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }

  /* BREADCRUMBS */
  .breadcrumb {
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
  }

  /* GRIDS */
  .grid-auto,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .grid {
    gap: var(--spacing-md);
  }

  /* FLEXBOX */
  .flex-wrap {
    flex-direction: column;
  }

  /* SPACING REDUCTIONS */
  .p-2xl {
    padding: var(--spacing-lg);
  }

  .m-2xl {
    margin: var(--spacing-lg);
  }

  .gap-2xl {
    gap: var(--spacing-lg);
  }

  .gap-xl {
    gap: var(--spacing-lg);
  }

  .mt-2xl {
    margin-top: var(--spacing-xl);
  }

  .mb-2xl {
    margin-bottom: var(--spacing-xl);
  }

  /* TEXT SIZES */
  .text-5xl {
    font-size: var(--font-size-2xl);
  }

  .text-4xl {
    font-size: var(--font-size-2xl);
  }

  .text-3xl {
    font-size: var(--font-size-xl);
  }

  .text-2xl {
    font-size: var(--font-size-lg);
  }
}

/* =============================================
   SMALL DEVICES (SM) - 480px to 639px
   ============================================= */

@media (max-width: 639px) {
  .container {
    padding: 0 var(--spacing-md);
  }

  h1 {
    font-size: var(--font-size-3xl);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  h3 {
    font-size: var(--font-size-lg);
  }

  .hero-content {
    grid-template-columns: 1fr;
  }

  .hero-text h1 {
    font-size: var(--font-size-2xl);
  }

  .hero-cta {
    flex-direction: column;
  }

  .hero-cta .btn {
    width: 100%;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .analysis-content {
    grid-template-columns: 1fr;
  }

  .options-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .principles-list {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   MEDIUM DEVICES (MD) - 640px to 767px
   ============================================= */

@media (max-width: 767px) {
  .container {
    padding: 0 var(--spacing-lg);
  }

  h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-lg);
  }

  h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-lg);
  }

  .navbar {
    padding: 0 var(--spacing-lg);
  }

  .navbar-nav {
    gap: var(--spacing-lg);
    font-size: var(--font-size-sm);
  }

  .hero {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .hero-text h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-lg);
  }

  .hero-cta {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .hero-cta .btn {
    width: 100%;
  }

  .hero-visual {
    min-height: 250px;
    padding: var(--spacing-2xl);
  }

  .features-section {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

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

  .analysis-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .analysis-form,
  .analysis-results {
    padding: var(--spacing-lg);
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .options-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

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

  .principles-list {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }

  /* TABLE STACKING */
  .table {
    font-size: var(--font-size-sm);
  }

  .table th,
  .table td {
    padding: var(--spacing-md);
  }

  /* REDUCE PADDING FOR SECTIONS */
  .placement-analysis {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  .ethics-content {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }
}

/* =============================================
   LARGE DEVICES (LG) - 768px to 1023px
   ============================================= */

@media (max-width: 1023px) {
  .container {
    padding: 0 var(--spacing-lg);
  }

  .navbar-nav {
    gap: var(--spacing-xl);
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }

  .analysis-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .options-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .principles-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }

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

  /* FORM ADJUSTMENTS */
  .form-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }
}

/* =============================================
   EXTRA LARGE DEVICES (XL) - 1024px to 1279px
   ============================================= */

@media (min-width: 1024px) and (max-width: 1279px) {
  .container {
    padding: 0 var(--spacing-lg);
  }

  .hero-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
  }

  .analysis-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
  }

  .options-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
  }

  .principles-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
  }
}

/* =============================================
   EXTRA LARGE DEVICES (2XL) - 1280px+
   ============================================= */

@media (min-width: 1280px) {
  .container {
    padding: 0 var(--spacing-lg);
  }

  .hero-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
  }

  .features-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2xl);
  }

  .analysis-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
  }

  .options-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
  }

  .principles-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2xl);
  }

  .footer-content {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3xl);
  }
}

/* =============================================
   TABLET LANDSCAPE & KEYBOARD INPUTS (LG+)
   ============================================= */

@media (min-width: 1024px) {
  /* Optimize hover states for desktop */
  .card:hover {
    box-shadow: var(--shadow-lg);
  }

  .feature-card:hover {
    transform: translateY(-4px);
  }

  .btn:hover {
    opacity: 0.9;
  }

  /* Allow full-width analysis on desktop */
  .analysis-content {
    grid-template-columns: 1fr 1fr;
  }
}

/* =============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================= */

@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets for mobile */
  .btn {
    min-height: 44px;
    min-width: 44px;
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .btn-sm {
    min-height: 40px;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .form-input,
  .form-select,
  .form-textarea {
    min-height: 44px;
    padding: var(--spacing-md);
    font-size: 16px; /* Prevent iOS zoom */
  }

  .pagination-item {
    min-height: 44px;
    min-width: 44px;
    padding: var(--spacing-md);
  }

  /* Remove hover effects on touch */
  .card:hover {
    box-shadow: var(--shadow-sm);
  }

  .feature-card:hover {
    transform: none;
  }

  .btn:active {
    transform: scale(0.95);
  }
}

/* =============================================
   LANDSCAPE ORIENTATION (Mobile)
   ============================================= */

@media (max-height: 600px) and (orientation: landscape) {
  h1 {
    margin-bottom: var(--spacing-md);
  }

  h2 {
    margin-bottom: var(--spacing-sm);
  }

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

  .hero-visual {
    min-height: 150px;
  }

  .features-section {
    padding: var(--spacing-lg) var(--spacing-md);
  }

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

  .navbar-nav {
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
  }
}

/* =============================================
   PORTRAIT ORIENTATION (Tablets)
   ============================================= */

@media (orientation: portrait) and (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

/* =============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================= */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure borders look crisp */
  .card {
    border-width: 1px;
  }

  .alert {
    border-left-width: 4px;
  }

  .table th {
    border-bottom-width: 2px;
  }
}

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

@media print {
  body {
    background-color: white;
    color: black;
  }

  header,
  footer,
  .navbar,
  .disclaimer,
  .alert,
  .hero-cta {
    display: none;
  }

  .container {
    max-width: 100%;
  }

  .card,
  .analysis-results {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  a {
    text-decoration: underline;
  }

  /* Maintain contrast for printing */
  h1, h2, h3, h4, h5, h6 {
    color: black;
    page-break-after: avoid;
  }

  p {
    orphans: 3;
    widows: 3;
  }
}

/* =============================================
   DARK MODE SUPPORT (OPTIONAL)
   ============================================= */

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }

  .card,
  .modal,
  .form-input,
  .form-select {
    background-color: #1e1e1e;
    color: #e0e0e0;
  }

  .card {
    border-color: #333;
  }

  input::placeholder {
    color: #999;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

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

@media (prefers-contrast: more) {
  :root {
    --color-primary: #0033aa;
    --color-success: #008000;
    --color-error: #cc0000;
  }

  .card {
    border-width: 2px;
  }

  .btn {
    border-width: 2px;
  }
}