/**
 * Reports & Indices Pages - Mobile Optimization
 * Bloomberg-grade finance UX for mobile devices
 * 
 * Combined optimizations for both similar list/card pages
 * Breakpoints: <768px mobile, 768-1023px tablet, ≥1024px desktop
 */

/* ============================================
   MOBILE BREAKPOINT (<768px) - REPORTS
   ============================================ */
@media (max-width: 767px) {
  
  /* --------------------------------------------
     REPORTS CONTAINER - Full width, ultra-compact, OVERFLOW HIDDEN
     -------------------------------------------- */
  .reports-container {
    padding: 8px !important;
    padding-bottom: 80px !important; /* Bottom nav safe area */
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  
  /* BODY overflow hidden on mobile for reports */
  body:has(.reports-container) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  /* HTML overflow */
  html:has(.reports-container) {
    overflow-x: hidden !important;
  }
  
  /* --------------------------------------------
     REPORTS HEADER - Ultra-compact
     -------------------------------------------- */
  .reports-header {
    margin-bottom: 8px !important;
    padding: 0 !important;
  }
  
  .reports-title {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
  }
  
  .reports-subtitle {
    font-size: 0.75rem !important;
    margin-top: 2px !important;
  }
  
  /* Explain panel compact */
  .explain-panel.mb-6 {
    margin-bottom: 8px !important;
    margin: 0 -8px 8px !important;
    width: calc(100% + 16px) !important;
  }
  
  .explain-trigger {
    padding: 10px 12px !important;
    min-height: 44px !important;
  }
  
  .explain-trigger-text {
    font-size: 0.75rem !important;
  }
  
  .explain-content {
    padding: 10px 12px !important;
  }
  
  .explain-grid {
    gap: 10px !important;
  }
  
  .explain-section {
    padding: 8px !important;
  }
  
  .explain-section-title {
    font-size: 0.75rem !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }
  
  .explain-section-text {
    font-size: 0.6875rem !important;
    line-height: 1.5 !important;
  }
  
  /* --------------------------------------------
     MARKET DIGEST HERO - Ultra-compact mobile
     -------------------------------------------- */
  .market-digest-hero {
    margin: 0 -8px !important;
    padding: 10px !important;
    border-radius: 0 !important;
    margin-bottom: 10px !important;
    width: calc(100% + 16px) !important;
    overflow: hidden !important;
  }
  
  /* Hero Header */
  .digest-hero-header {
    margin-bottom: 8px !important;
  }
  
  .digest-hero-title-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  
  .digest-badge {
    font-size: 0.5625rem !important;
    padding: 3px 8px !important;
    display: inline-flex !important;
    width: fit-content !important;
  }
  
  .digest-hero-title {
    font-size: 1rem !important;
    margin: 4px 0 2px !important;
    line-height: 1.2 !important;
  }
  
  .digest-hero-date {
    font-size: 0.625rem !important;
  }
  
  /* Timeline Navigation - Compact horizontal scroll */
  .digest-timeline-nav {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 6px 0 !important;
    margin: 0 -10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    display: flex !important;
    gap: 4px !important;
    scroll-snap-type: x mandatory !important;
  }
  
  .digest-timeline-nav::-webkit-scrollbar {
    display: none !important;
  }
  
  .timeline-day-btn {
    flex: 0 0 auto !important;
    min-width: 48px !important;
    padding: 8px 10px !important;
    font-size: 0.6875rem !important;
    border-radius: 6px !important;
    scroll-snap-align: start !important;
    min-height: 36px !important;
  }
  
  .day-label {
    font-size: 0.625rem !important;
    white-space: nowrap !important;
  }
  
  /* Digest Content - Compact and readable */
  .digest-day-content {
    padding: 12px !important;
    border-radius: 10px !important;
    margin-top: 8px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-secondary) !important;
  }
  
  /* Digest sections styling */
  .digest-section,
  .digest-item {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--border-secondary) !important;
  }
  
  .digest-section:last-child,
  .digest-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  
  /* Digest category headers */
  .digest-category,
  .digest-section-title {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: var(--accent-primary) !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  
  .digest-category svg,
  .digest-section-title svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Force ALL content to wrap - FINAL NUCLEAR OPTION */
  .market-digest-hero .digest-day-content,
  .market-digest-hero .digest-day-content *,
  .reports-container .digest-day-content,
  .reports-container .digest-day-content *,
  .digest-day-content,
  .digest-day-content * {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: break-all !important; /* CRITICAL: break-all for long strings */
    white-space: normal !important;
    box-sizing: border-box !important;
  }
  
  .market-digest-hero .digest-content-wrapper,
  .reports-container .digest-content-wrapper,
  .digest-content-wrapper {
    font-size: 0.8125rem !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: break-all !important; /* CRITICAL */
    hyphens: auto !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
  }
  
  .market-digest-hero .digest-content-wrapper *,
  .reports-container .digest-content-wrapper *,
  .digest-content-wrapper * {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    width: auto !important;
  }
  
  /* Reset block elements to block display */
  .digest-content-wrapper h1,
  .digest-content-wrapper h2,
  .digest-content-wrapper h3,
  .digest-content-wrapper h4,
  .digest-content-wrapper h5,
  .digest-content-wrapper h6,
  .digest-content-wrapper p,
  .digest-content-wrapper ul,
  .digest-content-wrapper ol,
  .digest-content-wrapper div,
  .digest-content-wrapper blockquote {
    display: block !important;
    width: 100% !important;
  }
  
  .digest-content-wrapper h1,
  .digest-content-wrapper h2,
  .digest-content-wrapper h3 {
    font-size: 0.875rem !important;
    margin-top: 14px !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--border-secondary) !important;
  }
  
  .digest-content-wrapper h4,
  .digest-content-wrapper h5 {
    font-size: 0.8125rem !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
    color: var(--accent-primary) !important;
  }
  
  .digest-content-wrapper p {
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
    color: var(--text-secondary) !important;
  }
  
  /* Long comma-separated lists - handled in reports-hero.css */
  
  .digest-content-wrapper ul,
  .digest-content-wrapper ol {
    padding-left: 14px !important;
    margin-bottom: 8px !important;
  }
  
  .digest-content-wrapper li {
    margin-bottom: 4px !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    color: var(--text-secondary) !important;
  }
  
  /* Highlight important numbers/percentages */
  .digest-content-wrapper strong,
  .digest-content-wrapper b {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
  }
  
  /* Tables in digest - horizontal scroll */
  .digest-content-wrapper table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    font-size: 0.75rem !important;
  }
  
  .digest-content-wrapper pre,
  .digest-content-wrapper code {
    font-size: 0.75rem !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }
  
  /* Links AND emphasized text - READABLE INLINE */
  .digest-content-wrapper a,
  .digest-day-content a {
    color: var(--accent-primary) !important;
    text-decoration: underline !important;
    text-decoration-style: dotted !important;
    text-underline-offset: 2px !important;
    font-weight: 600 !important;
  }
  
  .digest-content-wrapper em,
  .digest-day-content em {
    color: var(--accent-primary) !important;
    font-style: italic !important;
    font-weight: 600 !important;
  }
  
  /* Section paragraphs - proper spacing, no overlap */
  .digest-content-wrapper p,
  .digest-day-content p {
    display: block !important;
    margin: 10px 0 !important;
    line-height: 1.7 !important;
    font-size: 0.8125rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Section headers in digest */
  .digest-content-wrapper h2,
  .digest-content-wrapper h3,
  .digest-content-wrapper h4,
  .digest-day-content h2,
  .digest-day-content h3,
  .digest-day-content h4 {
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--border-secondary) !important;
    font-weight: 700 !important;
  }
  
  .digest-content-wrapper h2,
  .digest-day-content h2 {
    font-size: 1rem !important;
  }
  
  .digest-content-wrapper h3,
  .digest-day-content h3 {
    font-size: 0.9375rem !important;
  }
  
  .digest-content-wrapper h4,
  .digest-day-content h4 {
    font-size: 0.875rem !important;
  }
  
  /* Lists in digest */
  .digest-content-wrapper ul,
  .digest-content-wrapper ol,
  .digest-day-content ul,
  .digest-day-content ol {
    margin: 10px 0 !important;
    padding-left: 20px !important;
  }
  
  .digest-content-wrapper li,
  .digest-day-content li {
    margin-bottom: 6px !important;
    line-height: 1.6 !important;
    font-size: 0.8125rem !important;
  }

  /* Blockquotes */
  .digest-content-wrapper blockquote {
    padding: 8px 10px !important;
    margin: 10px 0 !important;
    font-size: 0.8125rem !important;
    border-left-width: 2px !important;
  }
  
  /* Images responsive */
  .digest-content-wrapper img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Archive Access */
  .digest-archive-access {
    margin-top: 12px !important;
    padding-top: 12px !important;
  }
  
  .archive-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
    font-size: 0.875rem !important;
    min-height: 44px !important;
  }
  
  .archive-hint {
    font-size: 0.625rem !important;
  }
  
  /* --------------------------------------------
     RESEARCH LIBRARY - Cards grid
     -------------------------------------------- */
  .research-library {
    margin-top: 16px !important;
  }
  
  .research-library-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  
  .research-library-title {
    font-size: 1.125rem !important;
  }
  
  /* Reports Grid - Single column */
  .reports-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  /* Report Card */
  .report-card {
    padding: 14px !important;
    border-radius: 10px !important;
  }
  
  .report-card-header {
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  
  .report-category-badge {
    font-size: 0.5625rem !important;
    padding: 3px 8px !important;
  }
  
  .report-card-title {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
  }
  
  .report-card-excerpt {
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
    -webkit-line-clamp: 3 !important;
  }
  
  .report-card-footer {
    margin-top: 10px !important;
    padding-top: 10px !important;
    font-size: 0.6875rem !important;
  }
  
  .report-date {
    font-size: 0.6875rem !important;
  }
  
  .report-read-time {
    font-size: 0.625rem !important;
  }
  
  /* --------------------------------------------
     ARCHIVE MODAL - Full screen mobile
     -------------------------------------------- */
  .archive-modal-overlay {
    padding: 0 !important;
  }
  
  .archive-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  .archive-modal-header {
    padding: 14px 16px !important;
  }
  
  .archive-modal-title {
    font-size: 1rem !important;
  }
  
  .archive-modal-close {
    width: 36px !important;
    height: 36px !important;
  }
  
  .archive-modal-body {
    padding: 16px !important;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  .archive-list {
    gap: 8px !important;
  }
  
  .archive-item {
    padding: 12px !important;
    border-radius: 8px !important;
  }
  
  .archive-item-date {
    font-size: 0.75rem !important;
  }
  
  .archive-item-title {
    font-size: 0.875rem !important;
  }
  
}

/* ============================================
   MOBILE BREAKPOINT (<768px) - INDICES
   ============================================ */
@media (max-width: 767px) {
  
  /* --------------------------------------------
     INDICES CONTAINER - Ultra-compact
     -------------------------------------------- */
  main.container:has(.indices-grid) {
    padding: 8px !important;
    padding-bottom: 80px !important;
  }
  
  /* --------------------------------------------
     PAGE HEADER - Ultra-compact
     -------------------------------------------- */
  .dashboard-header:has(+ .explain-panel) {
    margin-bottom: 8px !important;
  }
  
  .dashboard-title {
    font-size: 1.25rem !important;
  }
  
  .dashboard-subtitle {
    font-size: 0.75rem !important;
    margin-top: 2px !important;
  }
  
  /* Count badge */
  .update-badge {
    font-size: 0.6875rem !important;
    padding: 4px 10px !important;
  }
  
  .update-badge svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* --------------------------------------------
     ELITE FILTER BAR - Stack on mobile
     -------------------------------------------- */
  .elite-filter-bar {
    margin-bottom: 12px !important;
  }
  
  .elite-filter-flex {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  /* Search full width */
  .elite-search-grow,
  .elite-search-wrapper {
    width: 100% !important;
    flex: none !important;
  }
  
  .elite-search {
    height: 44px !important;
    font-size: 1rem !important;
  }
  
  /* Dropdowns in row */
  .custom-select-compact {
    flex: 1 !important;
  }
  
  .custom-select-trigger {
    height: 44px !important;
    padding: 0 12px !important;
  }
  
  .custom-select-label {
    font-size: 0.75rem !important;
  }
  
  /* Results compact */
  .filter-results-display {
    padding: 10px 14px !important;
  }
  
  .filter-results-count {
    font-size: 1.125rem !important;
  }
  
  .filter-results-label {
    font-size: 0.625rem !important;
  }
  
  /* --------------------------------------------
     INDICES GRID - Ultra-compact single column
     -------------------------------------------- */
  .indices-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  /* Index Card - ULTRA COMPACT */
  .index-card {
    padding: 10px !important;
    border-radius: 10px !important;
  }
  
  /* Card Header */
  .index-card-header {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  
  .index-logo {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
  
  .index-logo-text {
    font-size: 0.75rem !important;
  }
  
  .index-name {
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
  }
  
  .index-description {
    font-size: 0.6875rem !important;
    -webkit-line-clamp: 1 !important;
    margin-top: 2px !important;
  }
  
  /* Signal Badge */
  .index-signal-badge {
    font-size: 0.5625rem !important;
    padding: 3px 8px !important;
  }
  
  /* Performance Metrics Row - COMPACT */
  .index-metrics-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    margin: 8px 0 !important;
  }
  
  .index-metric {
    padding: 6px 4px !important;
    border-radius: 6px !important;
    text-align: center !important;
  }
  
  .index-metric-label {
    font-size: 0.5rem !important;
    margin-bottom: 1px !important;
  }
  
  .index-metric-value {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
  }
  
  /* Performance value with % */
  .index-perf-value {
    font-size: 1.125rem !important;
  }
  
  /* Main Performance Section - CRITICAL MOBILE FIX */
  .index-card-main-perf {
    padding: 8px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
  }
  
  .main-perf-label {
    font-size: 0.5rem !important;
    margin-bottom: 2px !important;
  }
  
  .main-perf-value {
    font-size: 1.25rem !important; /* Was 2rem - CRITICAL */
    line-height: 1.1 !important;
  }
  
  /* Index hero section in card */
  .index-hero {
    padding: 6px !important;
  }
  
  .index-hero-perf {
    font-size: 1.25rem !important;
  }
  
  /* Secondary Perf Metrics Row (1Y, YTD, HOUR) */
  .index-perf-row,
  .index-metrics-compact {
    gap: 4px !important;
    margin: 6px 0 !important;
  }
  
  .index-perf-item,
  .idx-perf-item {
    padding: 4px 6px !important;
  }
  
  .perf-label {
    font-size: 0.5rem !important;
  }
  
  .perf-value {
    font-size: 0.75rem !important;
  }
  
  /* Quality Indicators Row */
  .index-quality-row {
    display: flex !important;
    gap: 4px !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
  }
  
  .index-quality-badge {
    flex: 1 !important;
    min-width: 50px !important;
    padding: 4px 6px !important;
    border-radius: 4px !important;
    font-size: 0.5rem !important;
    text-align: center !important;
  }
  
  .quality-badge-icon {
    width: 10px !important;
    height: 10px !important;
  }
  
  /* Card Footer - ULTRA COMPACT */
  .index-card-footer {
    margin-top: 8px !important;
    padding-top: 8px !important;
    font-size: 0.625rem !important;
  }
  
  .index-holdings-count {
    font-size: 0.5625rem !important;
  }
  
  /* Footer Metrics - CRITICAL MOBILE FIX */
  .footer-metrics {
    gap: 4px !important;
    flex-wrap: wrap !important;
  }
  
  .metric-badge-vertical {
    padding: 6px 8px !important;
    min-width: 48px !important;
    border-radius: 6px !important;
  }
  
  .metric-badge-vertical .metric-label {
    font-size: 0.4375rem !important;
    letter-spacing: 0.02em !important;
  }
  
  .metric-badge-vertical .metric-value {
    font-size: 1rem !important; /* Was 2rem - CRITICAL */
    font-weight: 700 !important;
  }
  
  /* Active/In/Out badges compact */
  .metric-badge-active,
  .metric-badge-in,
  .metric-badge-out {
    padding: 6px 8px !important;
  }
  
  /* Clock badge in indices */
  .index-clock-badge,
  .clock-badge-compact {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
  }
  
  .clock-badge-compact svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* --------------------------------------------
     LOADING STATE
     -------------------------------------------- */
  .indices-loading {
    min-height: 200px !important;
  }
  
  .loading-spinner svg {
    width: 32px !important;
    height: 32px !important;
  }
  
  /* --------------------------------------------
     EMPTY STATE
     -------------------------------------------- */
  .indices-empty {
    padding: 24px !important;
    min-height: 200px !important;
  }
  
  .indices-empty-icon {
    width: 48px !important;
    height: 48px !important;
  }
  
  .indices-empty h3 {
    font-size: 1.125rem !important;
  }
  
  .indices-empty p {
    font-size: 0.875rem !important;
  }
  
}

/* ============================================
   TABLET BREAKPOINT (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  
  /* Reports Grid - 2 columns */
  .reports-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  
  /* Indices Grid - 2 columns */
  .indices-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  
  /* Elite Filter - Row layout */
  .elite-filter-flex {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  
  .elite-search-grow {
    flex: 2 !important;
    min-width: 250px !important;
  }
  
  .custom-select-compact {
    flex: 1 !important;
    min-width: 140px !important;
  }
  
}

/* ============================================
   LIGHT MODE FIXES
   ============================================ */
:root:not(.dark) {
  
  @media (max-width: 767px) {
    
    /* Market Digest Hero */
    .market-digest-hero {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.03)) !important;
    }
    
    /* Timeline buttons */
    .timeline-day-btn {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.1) !important;
      color: var(--text-secondary) !important;
    }
    
    .timeline-day-btn.active {
      background: var(--accent-primary) !important;
      color: white !important;
    }
    
    /* Digest content */
    .digest-day-content {
      background: white !important;
      border-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Report cards */
    .report-card {
      background: white !important;
      border-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Index cards */
    .index-card {
      background: white !important;
      border-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    .index-metric {
      background: rgba(0, 0, 0, 0.03) !important;
    }
    
    .index-quality-badge {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Archive modal */
    .archive-modal {
      background: white !important;
    }
    
    .archive-item {
      background: rgba(0, 0, 0, 0.02) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
    }
    
    .archive-item:hover {
      background: rgba(0, 0, 0, 0.04) !important;
    }
    
  }
  
}

/* ============================================
   TOUCH FEEDBACK
   ============================================ */
@media (max-width: 767px) {
  
  .timeline-day-btn:active,
  .report-card:active,
  .index-card:active,
  .archive-item:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }
  
  /* Card press feedback */
  .report-card,
  .index-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }
  
}

/* ============================================
   SAFE AREA INSETS
   ============================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    .reports-container,
    main.container:has(.indices-grid) {
      padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (max-width: 767px) {
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}