/**
 * AI Services Blog - Responsive Design Styles
 * Path: /ai-services/css/responsive.css
 * 
 * Description: Comprehensive responsive design implementation with media query
 * breakpoints for mobile (< 768px), tablet (768px-1024px), and desktop (> 1024px).
 * 
 * Features:
 * - Mobile layout: Vertical filter bar stack, 1-column cards, full-width modal
 * - Tablet layout: 2x2 filter grid, 2-column cards, 50-60% modal width
 * - Desktop layout: Horizontal filters, 3-4 columns, responsive modal sizing
 * - Touch-friendly tap targets: minimum 44x44px on mobile devices
 * - Portrait and landscape orientation support
 * - Integration with ai-services.css, service-card.css, modal.css, filters.css
 * - No CSS conflicts with cascade-based override specificity
 * 
 * Requirements: 10.1-10.7
 */

/* ===================================================================
   1. BREAKPOINT DEFINITIONS
   =================================================================== */

/*
 * Breakpoint Strategy:
 * 
 * Mobile:  < 768px    (phones, small tablets in portrait)
 * Tablet:  768px-1024px (tablets in portrait/landscape, small laptops)
 * Desktop: > 1024px    (desktops, large tablets in landscape)
 * 
 * Additional breakpoints for fine-tuning:
 * - Extra small:  < 480px  (small phones)
 * - Large:        1200px+  (large desktop monitors)
 * - Extra large:  1400px+  (very large monitors)
 * - Ultra-wide:   1600px+  (cinema displays)
 */

/* ===================================================================
   2. GLOBAL RESPONSIVE ADJUSTMENTS - Mobile First
   =================================================================== */

/* Ensure all elements respect viewport width */
html,
body {
  width: 100%;
  overflow-x: hidden;
}

/* Mobile: Reduce default spacing */
@media (max-width: 767.98px) {
  :root {
    --container-padding: var(--spacing-3);
  }
  
  body {
    font-size: 14px;
  }
  
  h1 { font-size: var(--font-size-5xl); }
  h2 { font-size: var(--font-size-3xl); }
  h3 { font-size: var(--font-size-2xl); }
}

/* Tablet: Standard spacing */
@media (min-width: 768px) and (max-width: 1023.98px) {
  :root {
    --container-padding: var(--spacing-4);
  }
  
  body {
    font-size: 15px;
  }
}

/* Desktop and up: Full spacing and sizing */
@media (min-width: 1024px) {
  :root {
    --container-padding: var(--spacing-4);
  }
  
  body {
    font-size: 16px;
  }
}

/* ===================================================================
   3. CONTAINER RESPONSIVE BEHAVIOR
   =================================================================== */

.container {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

@media (max-width: 479.98px) {
  .container {
    max-width: 100%;
  }
}

@media (min-width: 480px) and (max-width: 767.98px) {
  .container {
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .container {
    max-width: 100%;
  }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .container {
    max-width: 960px;
  }
}

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

/* ===================================================================
   4. HERO SECTION RESPONSIVE LAYOUT
   =================================================================== */

.hero-section {
  padding: var(--spacing-12) var(--spacing-4);
  text-align: center;
}

@media (max-width: 767.98px) {
  .hero-section {
    padding: var(--spacing-8) var(--spacing-3);
  }
  
  .hero-title {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: var(--spacing-4);
  }
  
  .hero-description {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: var(--spacing-4);
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero-section {
    padding: var(--spacing-10) var(--spacing-4);
  }
  
  .hero-title {
    font-size: 36px;
    margin-bottom: var(--spacing-5);
  }
  
  .hero-description {
    font-size: 16px;
    margin-bottom: var(--spacing-6);
  }
}

@media (min-width: 1024px) {
  .hero-section {
    padding: var(--spacing-12) var(--spacing-6);
  }
  
  .hero-title {
    font-size: 48px;
    margin-bottom: var(--spacing-6);
  }
  
  .hero-description {
    font-size: 18px;
    margin-bottom: var(--spacing-8);
  }
}

.hero-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  .hero-cta-buttons {
    flex-direction: row;
    gap: var(--spacing-4);
  }
}

/* ===================================================================
   5. FILTER BAR - MOBILE LAYOUT (< 768px)
   =================================================================== */

@media (max-width: 767.98px) {
  .filter-bar {
    padding: var(--spacing-4) var(--spacing-3);
    flex-direction: column;
  }
  
  /* Search input full width */
  .search-input {
    width: 100%;
    margin-bottom: var(--spacing-3);
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: 48px;
  }
  
  /* Vertical stack for filters */
  .filter-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    width: 100%;
    margin-bottom: var(--spacing-3);
  }
  
  /* Dropdown filters take full width */
  .filter-select,
  .filter-category,
  .filter-industry,
  .filter-department,
  .filter-framework {
    width: 100%;
    flex: none;
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: 48px;
    padding: var(--spacing-2) var(--spacing-3);
  }
  
  /* Clear button full width */
  .clear-filters,
  #clear-filters,
  button.btn-clear-filters {
    width: 100%;
    min-height: 48px;
    font-size: 14px;
    justify-content: center;
  }
  
  /* Results count below filters */
  .filter-results-count,
  .results-count {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: var(--spacing-3);
    padding: var(--spacing-2);
    font-size: 12px;
  }
  
  /* Collapsible filter sections */
  .filter-group {
    margin-bottom: var(--spacing-3);
  }
  
  .filter-group-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;
  }
  
  .filter-group-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base) ease;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
  }
  
  .filter-group.open .filter-group-content {
    max-height: 500px;
  }
  
  .filter-group.open .filter-group-icon {
    transform: rotate(180deg);
  }
}

/* ===================================================================
   6. FILTER BAR - TABLET LAYOUT (768px - 1023px)
   =================================================================== */

@media (min-width: 768px) and (max-width: 1023.98px) {
  .filter-bar {
    padding: var(--spacing-5) var(--spacing-4);
  }
  
  /* Search input full width on its own row */
  .search-input {
    width: 100%;
    margin-bottom: var(--spacing-4);
    display: block;
  }
  
  /* 2x2 grid layout for filters on tablet */
  .filter-controls {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3);
    align-items: center;
    margin-bottom: var(--spacing-4);
  }
  
  /* Dropdowns fill their grid cells */
  .filter-select,
  .filter-category,
  .filter-industry,
  .filter-department,
  .filter-framework {
    width: 100%;
    min-height: 44px;
  }
  
  /* Results count spans both columns */
  .filter-results-count,
  .results-count {
    grid-column: 1 / -1;
    justify-self: end;
    font-size: 13px;
  }
  
  /* Clear button in grid */
  .clear-filters,
  #clear-filters,
  button.btn-clear-filters {
    min-height: 44px;
  }
}

/* ===================================================================
   7. FILTER BAR - DESKTOP LAYOUT (>= 1024px)
   =================================================================== */

@media (min-width: 1024px) {
  .filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    padding: var(--spacing-6) var(--spacing-4);
  }
  
  /* Search input on top, full width */
  .search-input {
    width: 100%;
    margin-bottom: 0;
    display: block;
  }
  
  /* Horizontal layout for filters */
  .filter-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing-3);
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }
  
  /* Dropdowns flex and grow */
  .filter-select,
  .filter-category,
  .filter-industry,
  .filter-department,
  .filter-framework {
    flex: 1;
    min-width: 120px;
    min-height: 44px;
  }
  
  /* Clear button doesn't grow */
  .clear-filters,
  #clear-filters,
  button.btn-clear-filters {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
  }
  
  /* Results count on the right */
  .filter-results-count,
  .results-count {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* ===================================================================
   8. SERVICES GRID - RESPONSIVE COLUMNS
   =================================================================== */

.services-grid {
  display: grid;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
}

/* Mobile: 1 column */
@media (max-width: 767.98px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
  }
  
  .department-section {
    margin-bottom: var(--spacing-8);
  }
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
    padding: var(--spacing-4);
  }
  
  .department-section {
    margin-bottom: var(--spacing-10);
  }
  
  /* Allow featured cards to span 2 columns */
  .service-card.featured {
    grid-column: span 2;
  }
}

/* Desktop (1024px - 1199px): 3 columns */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-5);
    padding: var(--spacing-5);
  }
  
  .department-section {
    margin-bottom: var(--spacing-12);
  }
}

/* Large Desktop (1200px+): 3-4 columns */
@media (min-width: 1200px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-6);
    padding: var(--spacing-6);
  }
  
  /* Option for 3-column layout */
  .services-grid.three-column {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .department-section {
    margin-bottom: var(--spacing-12);
  }
}

/* Extra large (1400px+): Maintain 4 columns with larger gap */
@media (min-width: 1400px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-8);
  }
}

/* ===================================================================
   9. SERVICE CARD - RESPONSIVE SIZING
   =================================================================== */

.service-card {
  transition: all var(--transition-base);
}

/* Mobile card styling */
@media (max-width: 767.98px) {
  .service-card {
    padding: var(--spacing-3);
    margin-bottom: var(--spacing-3);
  }
  
  .service-card-image {
    aspect-ratio: 16 / 9;
    margin-bottom: var(--spacing-3);
  }
  
  .service-name {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: var(--spacing-2);
  }
  
  .service-description {
    font-size: 13px;
    line-height: 1.5;
    -webkit-line-clamp: 3;
  }
  
  .service-benefit {
    padding: var(--spacing-2) var(--spacing-3);
    margin-bottom: var(--spacing-2);
  }
  
  .benefit-text {
    font-size: 11px;
    -webkit-line-clamp: 2;
  }
  
  .badge {
    font-size: 10px;
    padding: var(--spacing-1) var(--spacing-2);
  }
  
  .btn-learn-more {
    width: 100%;
    min-width: auto;
    min-height: 44px;
    font-size: 13px;
    padding: var(--spacing-2) var(--spacing-3);
  }
}

/* Tablet card styling */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .service-card {
    padding: var(--spacing-4);
  }
  
  .service-card-image {
    aspect-ratio: 3 / 2;
    margin-bottom: var(--spacing-4);
  }
  
  .service-name {
    font-size: 18px;
  }
  
  .service-description {
    font-size: 14px;
  }
  
  .btn-learn-more {
    min-height: 40px;
    font-size: 13px;
  }
}

/* Desktop card styling (1024px+) */
@media (min-width: 1024px) {
  .service-card {
    padding: var(--spacing-4);
  }
  
  .service-card-image {
    aspect-ratio: 4 / 3;
    margin-bottom: var(--spacing-4);
  }
  
  .service-name {
    font-size: 18px;
  }
  
  .btn-learn-more {
    min-height: 40px;
  }
}

/* ===================================================================
   10. MODAL - RESPONSIVE SIZING
   =================================================================== */

.modal-overlay {
  z-index: var(--z-modal-backdrop);
}

.modal-container {
  z-index: var(--z-modal);
}

/* Mobile: Full width modal sliding from bottom */
@media (max-width: 767.98px) {
  .modal-container {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 90vh;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
    transform: translateY(100%);
  }
  
  .modal-overlay.active .modal-container {
    transform: translateY(0);
  }
  
  .modal-header {
    padding: var(--spacing-4);
  }
  
  .modal-close {
    top: var(--spacing-4);
    right: var(--spacing-4);
    width: 36px;
    height: 36px;
  }
  
  .modal-service-name {
    font-size: 20px;
    margin-bottom: var(--spacing-2);
  }
  
  .modal-body {
    padding: var(--spacing-4);
  }
  
  .section-heading {
    font-size: 16px;
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-2);
  }
  
  .modal-section p {
    font-size: 13px;
    line-height: 1.6;
  }
  
  .btn-primary-cta {
    font-size: 13px;
    padding: var(--spacing-3) var(--spacing-4);
    min-height: 44px;
  }
  
  .related-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2);
  }
  
  .related-service-name {
    font-size: 11px;
  }
}

/* Tablet: 50-60% width, slide from right */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .modal-container {
    width: 60%;
    max-width: 90%;
    transform: translateX(100%);
  }
  
  .modal-overlay.active .modal-container {
    transform: translateX(0);
  }
  
  .modal-header {
    padding: var(--spacing-5);
  }
  
  .modal-close {
    top: var(--spacing-5);
    right: var(--spacing-5);
  }
  
  .modal-service-name {
    font-size: 28px;
    margin-bottom: var(--spacing-3);
  }
  
  .modal-body {
    padding: var(--spacing-5);
  }
  
  .section-heading {
    font-size: 18px;
    margin-bottom: var(--spacing-4);
  }
  
  .modal-section p {
    font-size: 14px;
  }
  
  .btn-primary-cta {
    min-height: 44px;
  }
  
  .related-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 50% width, slide from right */
@media (min-width: 1024px) {
  .modal-container {
    width: 50%;
    max-width: 600px;
    transform: translateX(100%);
    border-radius: 0;
  }
  
  .modal-overlay.active .modal-container {
    transform: translateX(0);
  }
  
  .modal-header {
    padding: var(--spacing-6);
  }
  
  .modal-close {
    top: var(--spacing-6);
    right: var(--spacing-6);
  }
  
  .modal-service-name {
    font-size: 32px;
    margin-bottom: var(--spacing-4);
  }
  
  .modal-body {
    padding: var(--spacing-6);
  }
  
  .section-heading {
    font-size: 20px;
    margin-bottom: var(--spacing-5);
  }
  
  .modal-section p {
    font-size: 15px;
    line-height: 1.7;
  }
  
  .btn-primary-cta {
    min-height: 48px;
  }
  
  .related-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===================================================================
   11. DEPARTMENT SECTION - RESPONSIVE LAYOUT
   =================================================================== */

.department-section {
  margin-bottom: var(--spacing-8);
}

.department-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
  padding-bottom: var(--spacing-4);
  border-bottom: 2px solid var(--color-border-gray);
}

/* Mobile department section */
@media (max-width: 767.98px) {
  .department-section {
    margin-bottom: var(--spacing-6);
  }
  
  .department-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
  }
  
  .department-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .department-title {
    font-size: 18px;
    margin-bottom: var(--spacing-1);
  }
  
  .department-description {
    font-size: 13px;
  }
  
  .department-count {
    font-size: 11px;
  }
}

/* Tablet department section */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .department-header {
    gap: var(--spacing-3);
  }
  
  .department-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
  
  .department-title {
    font-size: 22px;
  }
}

/* Desktop department section */
@media (min-width: 1024px) {
  .department-header {
    gap: var(--spacing-4);
  }
  
  .department-title {
    font-size: 28px;
  }
}

/* ===================================================================
   12. TOUCH-FRIENDLY TAP TARGETS (Mobile)
   =================================================================== */

/* Ensure minimum 44x44px touch targets on mobile */
@media (max-width: 1023.98px) {
  .btn-learn-more,
  button,
  a[role="button"],
  input[type="button"],
  input[type="submit"],
  .service-card,
  select.filter-select,
  .filter-select,
  .clear-filters,
  #clear-filters,
  .modal-close,
  .btn-primary-cta,
  .related-service-card {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Increase spacing around tap targets */
  .btn-learn-more {
    margin: var(--spacing-2);
  }
  
  .service-card {
    margin: var(--spacing-2);
  }
}

/* Extra touch target padding on very small screens */
@media (max-width: 479.98px) {
  .btn-learn-more,
  button,
  select.filter-select,
  .modal-close {
    min-height: 48px;
    padding: var(--spacing-2) var(--spacing-3);
  }
  
  .search-input,
  .filter-select {
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: 48px;
  }
}

/* ===================================================================
   13. PORTRAIT AND LANDSCAPE ORIENTATION
   =================================================================== */

/* Portrait orientation (mobile/tablet) */
@media (orientation: portrait) {
  @media (max-width: 767.98px) {
    .modal-container {
      height: 85vh;
      max-height: 85vh;
    }
  }
  
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .modal-container {
      width: 70%;
      max-width: 90%;
    }
  }
}

/* Landscape orientation (mobile/tablet) */
@media (orientation: landscape) {
  @media (max-width: 767.98px) {
    .hero-section {
      padding: var(--spacing-4);
    }
    
    .hero-title {
      font-size: 24px;
      line-height: 1.2;
      margin-bottom: var(--spacing-2);
    }
    
    .hero-description {
      font-size: 12px;
      margin-bottom: var(--spacing-2);
    }
    
    .filter-bar {
      padding: var(--spacing-2);
    }
    
    .search-input,
    .filter-select,
    .clear-filters {
      min-height: 40px;
      font-size: 14px;
    }
    
    .modal-container {
      height: 95vh;
      max-height: 95vh;
    }
  }
  
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .modal-container {
      width: 55%;
      max-width: 85%;
      height: 90vh;
    }
  }
}

/* ===================================================================
   14. FIXED NAVIGATION & STICKY ELEMENTS
   =================================================================== */

/* Sticky filter bar - responsive z-index management */
.filter-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* Adjust sticky positioning for header on mobile */
@media (max-width: 767.98px) {
  .filter-bar {
    top: 0;
    margin-top: 0;
  }
}

/* ===================================================================
   15. FLOATING CTA BUTTON - RESPONSIVE
   =================================================================== */

.floating-cta {
  position: fixed;
  bottom: var(--spacing-6);
  right: var(--spacing-6);
  width: auto;
  padding: var(--spacing-3) var(--spacing-5);
  z-index: var(--z-fixed);
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  box-shadow: 0 4px 12px rgba(255, 31, 142, 0.3);
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  min-height: 48px;
}

/* Show on desktop */
@media (min-width: 1024px) {
  .floating-cta {
    display: flex;
  }
}

/* Hide when modal is open */
body.modal-open .floating-cta {
  display: none;
}

/* Mobile positioning - adjusted for smaller screens */
@media (max-width: 767.98px) {
  .floating-cta {
    bottom: var(--spacing-4);
    right: var(--spacing-4);
    display: flex;
    width: auto;
    padding: var(--spacing-2) var(--spacing-4);
    font-size: 12px;
    min-height: 44px;
  }
}

/* ===================================================================
   16. BREADCRUMB NAVIGATION - RESPONSIVE
   =================================================================== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  font-size: var(--font-size-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  .breadcrumb {
    padding: var(--spacing-3);
    font-size: 11px;
  }
}

/* ===================================================================
   17. RESPONSIVE UTILITIES - SHOW/HIDE
   =================================================================== */

/* Show on mobile only */
.show-mobile {
  display: block;
}

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

/* Hide on mobile */
.hide-mobile {
  display: none;
}

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

/* Show on tablet */
.show-tablet {
  display: none;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .show-tablet {
    display: block;
  }
}

/* Show on desktop only */
.show-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .show-desktop {
    display: block;
  }
}

/* ===================================================================
   18. RESPONSIVE COLUMN CLASSES
   =================================================================== */

/* 1 column on mobile */
@media (max-width: 767.98px) {
  .col-auto {
    flex-basis: 100%;
  }
  
  .col-sm-auto {
    flex-basis: 100%;
  }
  
  .col-md-auto {
    flex-basis: 100%;
  }
  
  .col-lg-auto {
    flex-basis: 100%;
  }
}

/* 2 columns on tablet */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .col-md-6 {
    flex-basis: 50%;
  }
  
  .col-md-half {
    flex-basis: 50%;
  }
}

/* 3-4 columns on desktop */
@media (min-width: 1024px) {
  .col-lg-4 {
    flex-basis: 33.333%;
  }
  
  .col-lg-3 {
    flex-basis: 25%;
  }
}

/* ===================================================================
   19. RESPONSIVE FONT SIZES
   =================================================================== */

/* Fluid typography scaling */
@media (max-width: 479.98px) {
  html {
    font-size: 13px;
  }
  
  h1 { font-size: clamp(24px, 5vw, 32px); }
  h2 { font-size: clamp(20px, 4.5vw, 28px); }
  h3 { font-size: clamp(16px, 4vw, 24px); }
}

@media (min-width: 480px) and (max-width: 767.98px) {
  html {
    font-size: 14px;
  }
  
  h1 { font-size: clamp(28px, 5.5vw, 36px); }
  h2 { font-size: clamp(22px, 4.8vw, 30px); }
  h3 { font-size: clamp(18px, 4.2vw, 26px); }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  html {
    font-size: 15px;
  }
  
  h1 { font-size: clamp(32px, 5vw, 40px); }
  h2 { font-size: clamp(24px, 4vw, 32px); }
  h3 { font-size: clamp(20px, 3.5vw, 28px); }
}

@media (min-width: 1024px) {
  html {
    font-size: 16px;
  }
}

/* ===================================================================
   20. RESPONSIVE SPACING & PADDING
   =================================================================== */

/* Main content area responsive padding */
.ai-services-page {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 767.98px) {
  .ai-services-page {
    padding: 0;
  }
}

@media (min-width: 768px) {
  .ai-services-page {
    padding: 0;
  }
}

/* ===================================================================
   21. RESPONSIVE NO-RESULTS STATE
   =================================================================== */

#no-results-message {
  padding: var(--spacing-8);
  text-align: center;
}

@media (max-width: 767.98px) {
  #no-results-message {
    padding: var(--spacing-6);
  }
  
  #no-results-message i {
    font-size: 36px;
    margin-bottom: var(--spacing-4);
  }
  
  #no-results-message h3 {
    font-size: 18px;
    margin-bottom: var(--spacing-3);
  }
  
  #no-results-message p {
    font-size: 13px;
    margin-bottom: var(--spacing-4);
  }
}

@media (min-width: 768px) {
  #no-results-message {
    padding: var(--spacing-12);
  }
}

/* ===================================================================
   22. LOADING SKELETON - RESPONSIVE
   =================================================================== */

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ===================================================================
   23. SCROLLBAR RESPONSIVE SIZING
   =================================================================== */

/* Larger scrollbar on touch devices */
@media (hover: none) {
  ::-webkit-scrollbar {
    width: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: var(--radius-full);
  }
}

/* ===================================================================
   24. REDUCED MOTION - PERFORMANCE OPTIMIZATION
   =================================================================== */

@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;
  }
}

/* ===================================================================
   25. HIGH CONTRAST MODE
   =================================================================== */

@media (prefers-contrast: more) {
  .filter-bar,
  .modal-container,
  .service-card {
    border-width: 2px;
  }
  
  .badge,
  button,
  .btn-learn-more {
    border-width: 2px;
  }
}

/* ===================================================================
   26. PRINT RESPONSIVE STYLES
   =================================================================== */

@media print {
  .filter-bar,
  .modal-overlay,
  .modal-container,
  .floating-cta,
  .btn-learn-more {
    display: none !important;
  }
  
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .service-card {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ===================================================================
   27. ACCESSIBILITY - KEYBOARD FOCUS RESPONSIVE
   =================================================================== */

/* Larger focus indicators on mobile for touch users */
@media (max-width: 1023.98px) {
  *:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}

/* Standard focus indicators on desktop */
@media (min-width: 1024px) {
  *:focus-visible {
    outline-width: 2px;
    outline-offset: 2px;
  }
}

/* ===================================================================
   28. PERFORMANCE - GPU ACCELERATION
   =================================================================== */

.modal-container,
.service-card,
.filter-bar {
  will-change: transform;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .modal-container,
  .service-card:hover {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* ===================================================================
   29. EXTRA SMALL DEVICES (< 480px)
   =================================================================== */

@media (max-width: 479.98px) {
  /* Reduce padding on very small screens */
  .filter-bar,
  .modal-header,
  .modal-body,
  .hero-section {
    padding: var(--spacing-3);
  }
  
  /* Reduce gaps on mobile */
  .filter-controls,
  .services-grid {
    gap: var(--spacing-2);
  }
  
  /* Single line breadcrumbs */
  .breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

/* ===================================================================
   30. LARGE DESKTOP (>= 1400px)
   =================================================================== */

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
  
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-8);
  }
  
  .modal-container {
    width: 600px;
  }
  
  .hero-section {
    padding: var(--spacing-16) var(--spacing-8);
  }
  
  .filter-bar {
    padding: var(--spacing-8) var(--spacing-6);
  }
}