/* Responsive Design Utilities and Media Queries */

/* Mobile-first approach breakpoints */
/* Small devices (landscape phones, 576px and up) */
/* Medium devices (tablets, 768px and up) */
/* Large devices (desktops, 992px and up) */
/* Extra large devices (large desktops, 1200px and up) */

/* Container responsive behavior */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

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

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

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

/* Responsive Grid Utilities */
@media (max-width: 1199px) {
  .grid-cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .grid-cols-4,
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-cols-4,
  .grid-cols-3,
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
  
  .row {
    flex-direction: column;
  }
  
  .col {
    width: 100%;
  }
}

/* Responsive Typography */
@media (max-width: 991px) {
  :root {
    --font-size-4xl: 2rem;
    --font-size-3xl: 1.75rem;
    --font-size-2xl: 1.5rem;
    --font-size-xl: 1.25rem;
  }
}

@media (max-width: 767px) {
  :root {
    --font-size-4xl: 1.75rem;
    --font-size-3xl: 1.5rem;
    --font-size-2xl: 1.25rem;
    --font-size-xl: 1.125rem;
  }
}

/* Intermediate breakpoint for smoother font-size transitions */
@media (max-width: 576px) {
  :root {
    --font-size-4xl: 1.625rem; /* 26px - between 28px and 24px */
    --font-size-3xl: 1.375rem; /* 22px - between 24px and 20px */
    --font-size-2xl: 1.1875rem; /* 19px - smoother progression */
    --font-size-xl: 1.0625rem; /* 17px - smoother progression */
  }
}

@media (max-width: 479px) {
  :root {
    --font-size-4xl: 1.5rem;
    --font-size-3xl: 1.25rem;
    --font-size-2xl: 1.125rem;
    --font-size-xl: 1rem;
  }
}

/* Responsive Spacing */
@media (max-width: 767px) {
  :root {
    --space-3xl: 3rem;
    --space-2xl: 2rem;
    --space-xl: 1.5rem;
  }
  
  .section {
    padding: var(--space-2xl) 0;
  }
  
  .section-lg {
    padding: var(--space-3xl) 0;
  }
}

@media (max-width: 479px) {
  :root {
    --space-3xl: 2rem;
    --space-2xl: 1.5rem;
    --space-xl: 1rem;
  }
  
  .section {
    padding: var(--space-xl) 0;
  }
  
  .section-lg {
    padding: var(--space-2xl) 0;
  }
  
  .container {
    padding: 0 var(--space-md); /* Increased from var(--space-sm) for better breathing room */
  }
}

/* Responsive Button Adjustments */
@media (max-width: 767px) {
  .btn {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-sm);
    width: 100%;
    max-width: 300px;
  }
  
  .btn + .btn {
    margin-top: var(--space-md);
  }
}

/* Responsive Card Adjustments */
@media (max-width: 767px) {
  .card {
    padding: var(--space-lg);
  }
}

@media (max-width: 479px) {
  .card {
    padding: var(--space-md);
  }
}

/* Hide/Show Utilities for Different Screen Sizes */
.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-grid {
  display: grid !important;
}

/* Small devices and up */
@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-grid { display: grid !important; }
}

/* Medium devices and up */
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-grid { display: grid !important; }
}

/* Large devices and up */
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-grid { display: grid !important; }
}

/* Extra large devices and up */
@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-inline { display: inline !important; }
  .d-xl-inline-block { display: inline-block !important; }
  .d-xl-flex { display: flex !important; }
  .d-xl-grid { display: grid !important; }
}

/* Text Alignment Responsive Utilities */
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }

@media (min-width: 576px) {
  .text-sm-start { text-align: left !important; }
  .text-sm-end { text-align: right !important; }
  .text-sm-center { text-align: center !important; }
}

@media (min-width: 768px) {
  .text-md-start { text-align: left !important; }
  .text-md-end { text-align: right !important; }
  .text-md-center { text-align: center !important; }
}

@media (min-width: 992px) {
  .text-lg-start { text-align: left !important; }
  .text-lg-end { text-align: right !important; }
  .text-lg-center { text-align: center !important; }
}

/* Responsive Margin and Padding Utilities */
@media (max-width: 767px) {
  .m-md-0 { margin: 0 !important; }
  .mt-md-0 { margin-top: 0 !important; }
  .mb-md-0 { margin-bottom: 0 !important; }
  .ml-md-0, .mx-md-0 { margin-left: 0 !important; }
  .mr-md-0, .mx-md-0 { margin-right: 0 !important; }
  
  .p-md-0 { padding: 0 !important; }
  .pt-md-0 { padding-top: 0 !important; }
  .pb-md-0 { padding-bottom: 0 !important; }
  .pl-md-0, .px-md-0 { padding-left: 0 !important; }
  .pr-md-0, .px-md-0 { padding-right: 0 !important; }
}

/* Responsive Width Utilities */
@media (max-width: 767px) {
  .w-md-100 { width: 100% !important; }
  .w-md-75 { width: 75% !important; }
  .w-md-50 { width: 50% !important; }
  .w-md-25 { width: 25% !important; }
  .w-md-auto { width: auto !important; }
}

/* Touch-friendly Target Sizes for Mobile */
@media (max-width: 767px) {
  button,
  .btn,
  a {
    min-height: 44px;
    min-width: 44px;
  }
  
  input,
  textarea,
  select {
    min-height: 44px;
  }
}

/* Responsive Image Handling */
@media (max-width: 767px) {
  img {
    height: auto !important;
  }
}

/* Responsive Table Handling */
@media (max-width: 767px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  table {
    min-width: 600px;
  }
}

/* Print Styles Enhancement */
@media print {
  .no-print,
  .header,
  .footer,
  .btn,
  .navbar,
  .mobile-menu-toggle {
    display: none !important;
  }
  
  .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }
  
  .section {
    padding: 1rem 0 !important;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  p, blockquote {
    page-break-inside: avoid;
  }
}

/* Accessibility Improvements for Mobile */
@media (max-width: 767px) {
  /* Larger focus indicators on touch devices */
  .focus-outline:focus {
    outline-width: 3px;
    outline-offset: 3px;
  }
  
  /* Better spacing for touch targets */
  .nav-link,
  .dropdown-link,
  .footer-link {
    padding: var(--space-md) var(--space-sm);
  }
}

/* Reduced Motion Support */
@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;
  }
  
  .fade-in,
  .slide-in-left,
  .slide-in-right {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --border-light: #000000;
    --border-medium: #000000;
    --shadow-light: none;
    --shadow-medium: none;
    --shadow-large: none;
  }
  
  .btn {
    border-width: 2px;
  }
  
  .card {
    border-width: 2px;
  }
}