/**
 * EVENTRIPPLE DESIGN SYSTEM V2
 * Responsive Design Fixes
 * File: 08-responsive-fixes.css
 * 
 * Comprehensive responsive improvements addressing identified issues
 * Date: November 13, 2025
 * Version: 2.0
 */

/* =================================================================
   MOBILE BREAKPOINTS - Extra Small Devices
   ================================================================= */

/* iPhone SE and small Android devices (320px - 374px) */
@media (max-width: 374px) {
  /* Text wrapping for constrained spaces */
  .form-label,
  .form-check-label,
  .radio-label,
  [class*="radio"] label,
  label {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    max-width: 100%;
  }
  
  /* Slightly smaller text for very narrow screens */
  .form-label,
  label {
    font-size: 0.875rem;
    line-height: 1.4;
  }
  
  /* Button text wrapping */
  .btn {
    white-space: normal;
    text-align: center;
    min-height: 44px;
  }
  
  /* Tab labels wrap */
  .tab-trigger,
  [role="tab"] {
    white-space: normal;
    text-align: center;
    padding-inline: var(--space-sm);
  }
}

/* Modern iPhones (375px - 413px) */
@media (min-width: 375px) {
  /* Slightly more comfortable spacing */
  .form-group {
    margin-bottom: var(--space-lg);
  }
  
  /* Cards get more padding */
  .card {
    padding: var(--space-lg);
  }
  
  /* Modal padding adjustment */
  .modal-content {
    padding: var(--space-lg);
  }
}

/* =================================================================
   TOUCH TARGETS - Mobile Optimization
   ================================================================= */

@media (max-width: 768px) {
  /* Ensure all interactive elements meet 44x44px minimum */
  .btn,
  button,
  [role="button"],
  .link,
  a[href],
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 44px;
    min-width: 44px;
    padding-inline: var(--space-sm);
  }

  /* Icon-only buttons */
  .btn--icon,
  .icon-button {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }

  /* Small buttons still tappable */
  .btn--sm {
    min-height: 40px;
    font-size: 0.875rem;
    padding-inline: var(--space-sm);
  }
  
  /* Form inputs minimum size */
  .form-input,
  .form-select,
  .form-textarea {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom */
    padding: var(--space-sm) var(--space-md);
  }
  
  /* Checkboxes and radios larger */
  .form-check-input,
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
    margin-inline-end: var(--space-sm);
  }
  
  /* Links get adequate padding */
  a {
    padding: var(--space-xs) 0;
    min-height: 32px;
    display: inline-block;
  }
}

/* =================================================================
   TAB NAVIGATION - Mobile Scrolling
   ================================================================= */

@media (max-width: 640px) {
  /* Tabs scroll horizontally on mobile */
  .tab-list {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-xs);
    padding-bottom: var(--space-xs);
    padding-inline-start: 2rem; /* Prevent left tab cutoff */
    padding-inline-end: 2rem; /* Show partial next tab */
    justify-content: flex-start;
    scroll-snap-type: x mandatory; /* Mandatory for better snap */
    scroll-behavior: smooth;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--color-border) transparent;
  }

  /* Custom scrollbar for webkit browsers */
  .tab-list::-webkit-scrollbar {
    height: 4px;
  }

  .tab-list::-webkit-scrollbar-track {
    background: transparent;
  }

  .tab-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
  }

  .tab-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
  }

  /* Tabs don't shrink, scroll instead */
  .tab {
    flex-shrink: 0;
    min-width: max-content;
    padding-inline: var(--space-md);
    white-space: nowrap;
    scroll-snap-align: start;
    font-size: var(--font-size-sm);
  }
}

/* Very small screens - tighter spacing */
@media (max-width: 374px) {
  .tab {
    padding-inline: var(--space-sm);
    gap: var(--space-xs);
  }

  .tab svg {
    width: 14px;
    height: 14px;
  }
}

@media (min-width: 641px) {
  /* Center tabs on larger screens */
  .tab-list {
    justify-content: center;
  }
}

/* =================================================================
   MODAL FIXES - Full-Screen on Mobile
   ================================================================= */

@media (max-width: 480px) {
  /* Modals take more screen space on very small devices */
  .modal-container,
  [role="dialog"] {
    width: 95vw;
    margin: 0.5rem;
    max-width: none;
  }
  
  /* Full-screen modals on tiny screens */
  .modal-container.modal--full,
  .modal-container[data-size="full"] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    max-height: 100vh;
  }
  
  /* Modal content scrolls */
  .modal-content {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
}

/* =================================================================
   FOOTER RESPONSIVE - Better Stacking
   ================================================================= */

@media (max-width: 360px) {
  /* Stack all footer columns on very narrow screens */
  .footer-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
  
  .footer-column {
    width: 100%;
  }
  
  /* Smaller footer text */
  .footer-link,
  .footer-text {
    font-size: 0.875rem;
  }
}

@media (min-width: 361px) and (max-width: 640px) {
  /* 2 column layout on small phones */
  .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
  
  /* Brand column spans full width */
  .footer-column:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 641px) {
  /* 3+ columns on tablets and up */
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-xl);
  }
}

/* =================================================================
   RADIO & CHECKBOX GROUPS - Better Wrapping
   ================================================================= */

@media (max-width: 640px) {
  /* Stack radio groups vertically on mobile */
  .radio-group,
  [role="radiogroup"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  /* Individual radio items */
  .radio-group-item,
  .form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm);
  }
  
  /* Labels wrap nicely */
  .radio-group-item label,
  .form-check label {
    flex: 1;
    white-space: normal;
    word-wrap: break-word;
    min-width: 0;
  }
}

@media (min-width: 641px) {
  /* Horizontal layout on larger screens if space allows */
  .radio-group,
  [role="radiogroup"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
  }
}

/* =================================================================
   BUTTON GROUPS - Responsive Stacking
   ================================================================= */

@media (max-width: 480px) {
  /* Stack button groups on very small screens */
  .button-group,
  .btn-group,
  .cluster {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .button-group > *,
  .btn-group > *,
  .cluster > * {
    width: 100%;
  }

  /* Exception: Keep event meta items inline (icon + text) */
  .event-detail-header-meta .cluster,
  .text-secondary.cluster {
    flex-direction: row;
    width: auto;
  }

  .event-detail-header-meta .cluster > *,
  .text-secondary.cluster > * {
    width: auto;
  }
}

@media (min-width: 481px) {
  /* Horizontal on larger screens */
  .button-group,
  .btn-group {
    flex-direction: row;
    gap: var(--space-sm);
  }
}

/* =================================================================
   FORM LAYOUT - Responsive Improvements
   ================================================================= */

@media (max-width: 640px) {
  /* Full-width form elements on mobile */
  .form-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  
  .form-group {
    width: 100%;
    min-width: 0;
  }
  
  /* Labels above inputs on mobile */
  .form-label-group {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
}

@media (min-width: 641px) {
  /* Side-by-side on tablets */
  .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  
  .form-row--thirds {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Full-width modifiers */
  .form-group--full {
    grid-column: 1 / -1;
  }
}

/* =================================================================
   CARD RESPONSIVE - Progressive Padding
   ================================================================= */

.card {
  /* Mobile base - keep minimal padding on phones */
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Tablets and larger: increase padding */
@media (min-width: 640px) {
  .card {
    padding: var(--space-lg);
  }
}

@media (min-width: 768px) {
  .card {
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .card {
    padding: var(--space-2xl);
  }
}

/* =================================================================
   MOBILE SPACING OPTIMIZATIONS - Phase 1-4
   ================================================================= */

/* Phase 1: Critical Fixes - Modal Padding */
@media (max-width: 374px) {
  .modal-content,
  .modal-container,
  [role="dialog"] .modal-content {
    padding: var(--space-sm); /* 8px */
  }
}

@media (min-width: 375px) and (max-width: 639px) {
  .modal-content,
  .modal-container,
  [role="dialog"] .modal-content {
    padding: var(--space-md); /* 16px */
  }
}

/* Phase 1: Critical Fixes - Card Padding Enhancement */
@media (max-width: 479px) {
  .card {
    padding: var(--space-sm); /* 8px - even smaller for very small screens */
  }
}

/* Phase 1: Critical Fixes - Empty State Padding */
@media (max-width: 479px) {
  .empty-state,
  [class*="empty-state"] {
    padding-block: var(--space-lg); /* 24px */
    padding-inline: var(--space-sm); /* 8px */
  }
}

@media (min-width: 480px) and (max-width: 639px) {
  .empty-state,
  [class*="empty-state"] {
    padding-block: var(--space-xl); /* 32px */
    padding-inline: var(--space-md); /* 16px */
  }
}

/* Phase 1: Critical Fixes - Button Padding */
@media (max-width: 479px) {
  .btn:not(.btn--icon),
  button:not(.btn--icon) {
    padding-inline: var(--space-sm); /* 8px */
  }
}

/* Phase 2: Component Padding - Search Bar Icon Spacing */
@media (max-width: 639px) {
  .search-input,
  .search-bar input,
  input[type="search"] {
    padding-inline-start: var(--space-xl); /* 32px instead of 48px */
  }
}

/* Phase 2: Component Padding - Card Header/Body/Footer */
@media (max-width: 374px) {
  .card-header,
  .card-body,
  .card-footer {
    padding: var(--space-sm); /* 8px */
  }
}

/* Phase 2: Component Padding - Data/Stat Cards */
@media (max-width: 479px) {
  .data-card,
  .stat-card,
  [class*="stat-card"],
  [class*="data-card"] {
    padding: var(--space-sm); /* 8px */
  }
}

@media (min-width: 480px) and (max-width: 639px) {
  .data-card,
  .stat-card,
  [class*="stat-card"],
  [class*="data-card"] {
    padding: var(--space-md); /* 16px */
  }
}

/* Phase 2: Component Padding - Form Group Spacing */
@media (max-width: 479px) {
  .form-group {
    margin-bottom: var(--space-md); /* 16px instead of 24px */
  }
}

/* Phase 3: Layout Spacing - Footer Padding */
@media (max-width: 479px) {
  .footer,
  footer {
    padding-block: var(--space-lg); /* 24px */
    padding-inline: var(--space-md); /* 16px */
  }
}

@media (min-width: 480px) and (max-width: 639px) {
  .footer,
  footer {
    padding-block: var(--space-xl); /* 32px */
    padding-inline: var(--space-lg); /* 24px */
  }
}

/* Phase 3: Layout Spacing - Page Container */
@media (max-width: 374px) {
  .page-container,
  [class*="page-container"] {
    padding-inline: var(--space-xs); /* 4px */
  }
}

@media (min-width: 375px) and (max-width: 479px) {
  .page-container,
  [class*="page-container"] {
    padding-inline: var(--space-sm); /* 8px */
  }
}

/* Phase 4: Polish - Filter Panels */
@media (min-width: 480px) and (max-width: 639px) {
  .filter-panel,
  [class*="filter-panel"] {
    padding: var(--space-lg); /* 24px */
  }
}

@media (max-width: 479px) {
  .filter-panel,
  [class*="filter-panel"] {
    padding: var(--space-md); /* 16px */
  }
}

/* Phase 4: Polish - Loading Overlays */
@media (max-width: 639px) {
  .loading-overlay-content,
  [class*="loading-overlay"] > * {
    padding: var(--space-lg); /* 24px */
  }
}

/* Phase 4: Polish - Event/Offer Cards */
@media (max-width: 639px) {
  .event-card,
  .offer-card,
  [class*="event-card"],
  [class*="offer-card"] {
    padding: var(--space-md); /* 16px */
  }
}

@media (max-width: 479px) {
  .event-card,
  .offer-card,
  [class*="event-card"],
  [class*="offer-card"] {
    padding: var(--space-sm); /* 8px */
  }
}

/* Phase 4: Polish - Alert Padding */
@media (max-width: 374px) {
  .alert {
    padding: var(--space-sm); /* 8px */
  }
}

/* =================================================================
   TEXT WRAPPING - Prevent Overflow
   ================================================================= */

/* Apply to all text containers */
.text-wrap,
p,
.card-description,
.alert-message,
.badge {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto; /* Safari iOS 4.2+ */
  hyphens: auto;
}

/* Headings can break if necessary */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Long URLs or technical text */
.text-break,
code,
pre {
  overflow-wrap: break-word;
  word-break: break-all;
}

/* =================================================================
   UTILITY CLASSES - Responsive Helpers
   ================================================================= */

/* Hide on mobile */
@media (max-width: 640px) {
  .hidden-mobile {
    display: none !important;
  }
}

/* Show only on mobile */
@media (min-width: 641px) {
  .mobile-only {
    display: none !important;
  }
}

/* Hide on tablet */
@media (min-width: 641px) and (max-width: 1023px) {
  .hidden-tablet {
    display: none !important;
  }
}

/* Hide on desktop */
@media (min-width: 1024px) {
  .hidden-desktop {
    display: none !important;
  }
}

/* =================================================================
   ACCESSIBILITY - Focus States on Touch
   ================================================================= */

@media (hover: none) and (pointer: coarse) {
  /* Touch devices: Show focus states on tap */
  .btn:active,
  button:active,
  a:active,
  [role="button"]:active {
    outline: 2px solid var(--color-action-primary);
    outline-offset: 2px;
  }
}

/* =================================================================
   WAITING ANIMATION - Hourglass & Message Rotation
   ================================================================= */

/* Waiting animation container */
.waiting-animation-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-lg) var(--space-md);
  margin: var(--space-lg) 0;
  background: linear-gradient(135deg, hsl(212, 85%, 96%) 0%, hsl(212, 75%, 92%) 100%);
  border: 1px solid hsl(212, 50%, 85%);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.dark .waiting-animation-container {
  background: linear-gradient(135deg, hsl(212, 30%, 15%) 0%, hsl(212, 25%, 18%) 100%);
  border-color: hsl(212, 30%, 25%);
}

.waiting-animation-content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: hsl(212, 85%, 45%);
}

.dark .waiting-animation-content {
  color: hsl(212, 85%, 60%);
}

/* Hourglass wrapper */
.hourglass-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hourglass-svg {
  color: hsl(212, 85%, 45%);
}

.dark .hourglass-svg {
  color: hsl(212, 85%, 60%);
}

/* Waiting message */
.waiting-message {
  font-size: 0.95rem;
  font-weight: 500;
  font-style: italic;
  animation: message-fade 4s ease-in-out infinite;
}

/* Sand particle animations */
.sand-particle {
  animation: sand-fall 2s ease-in infinite;
}

.sand-particle-1 {
  animation-delay: 0s;
}

.sand-particle-2 {
  animation-delay: 0.3s;
}

.sand-particle-3 {
  animation-delay: 0.6s;
}

.sand-particle-4 {
  animation-delay: 0.9s;
}

/* Keyframes for sand falling */
@keyframes sand-fall {
  0% {
    transform: translateY(0);
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(28px);
    opacity: 0;
  }
}

/* Keyframes for message fade */
@keyframes message-fade {
  0%, 100% {
    opacity: 1;
  }
  45%, 55% {
    opacity: 0.3;
  }
}

/* Hourglass sand top draining animation */
.hourglass-sand-top {
  animation: sand-drain 3s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes sand-drain {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.5);
  }
}

/* Hourglass sand bottom filling animation */
.hourglass-sand-bottom {
  animation: sand-fill 3s ease-in-out infinite;
  transform-origin: center top;
}

@keyframes sand-fill {
  0%, 100% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1);
  }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .waiting-animation-container {
    padding: var(--space-md) var(--space-sm);
  }

  .waiting-message {
    font-size: 0.875rem;
  }

  .hourglass-svg {
    width: 28px;
    height: 36px;
  }
}

/* =================================================================
   PERFORMANCE - Reduce Motion
   ================================================================= */

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