/* ===== RESPONSIVE UTILITIES ===== */
/* Global responsive helpers for better mobile experience */

/* Container utilities */
.container-fluid {
  width: 100%;
  padding: 0 var(--gutter);
}

.container-sm {
  max-width: 576px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-md {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-lg {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-xl {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Flex utilities */
.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.d-none {
  display: none;
}

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

.flex-row {
  flex-direction: row;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: flex-end;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end;
}

/* Spacing utilities */
.m-0 { margin: 0; }
.m-1 { margin: var(--gutter-sm); }
.m-2 { margin: var(--gutter); }
.m-3 { margin: var(--gutter-lg); }

.p-0 { padding: 0; }
.p-1 { padding: var(--gutter-sm); }
.p-2 { padding: var(--gutter); }
.p-3 { padding: var(--gutter-lg); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--gutter-sm); }
.mt-2 { margin-top: var(--gutter); }
.mt-3 { margin-top: var(--gutter-lg); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--gutter-sm); }
.mb-2 { margin-bottom: var(--gutter); }
.mb-3 { margin-bottom: var(--gutter-lg); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--gutter-sm); }
.pt-2 { padding-top: var(--gutter); }
.pt-3 { padding-top: var(--gutter-lg); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--gutter-sm); }
.pb-2 { padding-bottom: var(--gutter); }
.pb-3 { padding-bottom: var(--gutter-lg); }

/* Text utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }

.fw-light { font-weight: 300; }
.fw-normal { font-weight: 400; }
.fw-bold { font-weight: 700; }

/* Responsive display */
@media (max-width: 768px) {
  .d-md-none { display: none; }
  .d-md-block { display: block; }
  .d-md-flex { display: flex; }
}

@media (min-width: 769px) {
  .d-sm-none { display: none; }
  .d-sm-block { display: block; }
  .d-sm-flex { display: flex; }
}

/* Touch-friendly buttons */
.btn-touch {
  min-height: 44px;
  min-width: 44px;
  padding: var(--gutter-sm) var(--gutter);
}

/* Safe area for mobile devices with notches */
@supports (padding: max(0px)) {
  .safe-area-top {
    padding-top: max(var(--gutter), env(safe-area-inset-top));
  }

  .safe-area-bottom {
    padding-bottom: max(var(--gutter), env(safe-area-inset-bottom));
  }
}

/* Improved scrolling on mobile */
@media (max-width: 768px) {
  * {
    -webkit-overflow-scrolling: touch;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Prevent zoom on input focus (iOS) */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Font size adjustments for mobile devices */
@media (max-width: 768px) {
  :root {
    --font-size-base: clamp(16px, 4vw, 18px);
    --font-size-h2: clamp(2.2rem, 8vw, 4rem);
    --font-size-h3: clamp(1.8rem, 6vw, 2.6rem);
    --font-size-subtitle: clamp(1.4rem, 4vw, 1.8rem);
  }

  .insights-title {
    font-size: clamp(2.5rem, 10vw, 3rem);
  }

  #insights-content-title {
    font-size: clamp(1.8rem, 6vw, 2.2rem);
  }

  /* Clients section font adjustments */
  .center-content h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .center-content p {
    font-size: clamp(1rem, 4vw, 1.2rem);
  }

  /* Contact section font adjustments */
  .contact-title {
    font-size: clamp(3rem, 12vw, 4rem);
  }

  .contact-subtitle {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
  }

  /* Other sections - general font size increases */
  h1, h2, h3 {
    font-size: clamp(1.8rem, 6vw, var(--font-size-h1));
  }

  p, span, div {
    font-size: clamp(1rem, 3vw, var(--font-size-base));
  }

  /* Specific adjustments for sections */
  .journey-card h3 {
    font-size: clamp(1.2rem, 5vw, 1.375rem);
  }

  .journey-card p {
    font-size: clamp(0.8rem, 3vw, 0.875rem);
  }

  .step {
    font-size: clamp(1.2rem, 5vw, 1.375rem);
  }
}