/* Responsive refinements for specified breakpoints */

@media (min-width: 1024px) {
  .hero__grid {
    gap: clamp(var(--space-6), 4vw, var(--space-10));
  }

  .hero__content h1 {
    font-size: clamp(2.25rem, 3.2vw, var(--font-size-4xl));
  }

  .trust-features__grid {
    gap: clamp(var(--space-4), 2vw, var(--space-6));
  }

  .service-cards {
    gap: clamp(16px, 1.8vw, 24px);
  }

  .role-cards,
  .article-cards {
    gap: clamp(16px, 1.8vw, 24px);
  }
}

@media (max-width: 1280px) {
  .hero__content h1 {
    font-size: 2.5rem;
  }
}

@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }

  .hero__content h1 {
    font-size: 2.125rem;
  }

  .service-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card,
  .service-card--wide {
    grid-column: span 1;
  }

  .contact-grid {
    gap: var(--space-7);
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .role-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .role-card {
    padding: var(--space-5);
    min-height: auto;
  }

  .article-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .role-cards {
    grid-template-columns: 1fr;
  }

  .article-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: var(--mobile-page-padding);
  }

  .join-programs__steps--desktop {
    display: none;
  }

  .join-programs__steps--mobile {
    display: flex;
  }
}

@media (min-width: 769px) {
  .join-programs__steps--mobile {
    display: none;
  }

  .join-programs__steps--desktop {
    display: grid;
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 12px 18px;
  }
}

@media (max-width: 390px) {
  .section__heading {
    font-size: 1.2rem;
  }
}

/* Prevent horizontal overflow */
html,
body {
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
}