/* responsive.css */

/* Гарантируем, что картинки масштабируются */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Универсальные отступы для секций */
section {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Подгонка заголовков под маленькие экраны */
h1, h2, h3, h4, h5 {
  word-break: break-word;
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 3rem); /* масштабируем от 24px до 48px */
}

h3 {
  font-size: clamp(1.25rem, 3vw, 2rem); /* 20–32px */
}

p {
  font-size: clamp(1rem, 2.5vw, 1.25rem); /* 16–20px */
  line-height: 1.5;
}

/* Для модалки: автоадаптация */
#loginModal .max-w-md {
  width: 90%;
  max-width: 400px;
}

/* Адаптация кнопки поддержки */
button.fixed {
  font-size: clamp(0.875rem, 2vw, 1rem);
}

/* Корректная прокрутка внутри карусели */
#carousel img {
  width: 100vw;
  height: auto;
}

/* Прячем "тяжёлые" изображения или меняем размер на очень малых экранах */
@media (max-width: 480px) {
  .md\\:grid-cols-2,
  .md\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  .text-4xl {
    font-size: 1.5rem !important;
  }

  .text-5xl {
    font-size: 2rem !important;
  }
}

.grid-cols-responsive {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .grid-cols-responsive {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .grid-cols-responsive {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-cols-responsive {
    grid-template-columns: repeat(4, 1fr);
  }
}