/* Кастомный CSS, кроме Tailwind */

/* Стили для социальных ссылок (например, Telegram) */
.social__link {
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
}

.social__link::before {
  position: absolute;
  content: "";
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.social__link:focus::before {
  box-shadow: 0px 0px 0px 2px rgba(232, 232, 237, 0.5);
  border-radius: 3px;
}

.social__link:hover::before {
  opacity: 0.7;
}

.social__link:active::before {
  box-shadow: 3px 3px 15px #160cda80;
  border-radius: 6px;
}

.social__link--telegram::before {
  background-image: url(telegram-white.svg);
}

@media (max-width: 480px) {
  /* Хедер */
  header .h-\[55vh\] {
    height: 45vh !important;
  }
  
  header .h-\[55vh\] p {
    margin-bottom: 1rem !important;
  }
  
  header .h-\[55vh\] p .block {
    padding-bottom: 0.5rem !important;
  }
  
  header .h-\[55vh\] p .block:first-child {
    font-size: 2rem !important;
  }
  
  header .h-\[55vh\] p .block:nth-child(2),
  header .h-\[55vh\] p .block:nth-child(3) {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
    padding-bottom: 0.25rem !important;
  }
  
  header .h-\[55vh\] p .block:last-child {
    padding-bottom: 0 !important;
  }
  
  header .h-\[30vh\] {
    height: 35vh !important;
  }
  
  header .h-\[30vh\] p,
  header .h-\[30vh\] a,
  header .h-\[30vh\] span {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
  
  /* Иконка Telegram */
  .social__link {
    width: 30px;
    height: 30px;
  }
  
  .social__link::before {
    background-size: contain !important;
    background-position: center !important;
  }
  
  /* Все секции + базовая типографика */
  section {
    padding: 1.5rem 1.4rem !important;
  }
  
  section h2 {
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
  }
  
  section h2 .block {
    padding-bottom: 0.5rem !important;
  }
  
  section li {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
  
  section .space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.5rem !important;
  }
  
  /* Стрелки */
  .animate-bounce {
    bottom: 5px !important;
    font-size: 1.9rem !important;
  }
  
  /* Финальная CTA */
  section.bg-blue-500 {
    padding: 2rem 1rem !important;
  }
  
  section.bg-blue-500 h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }
  
  section.bg-blue-500 p {
    font-size: 0.85rem !important;
  }
}