@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {

  .jb-section {
    @apply w-full px-4 py-6 md:px-6 md:py-6 lg:px-2 bg-[#2c2c2c] flex items-center
          min-h-[calc(100dvh-120px)] lg:min-h-[calc(100dvh-100px)]
          tablet-landscape:min-h-fit tablet-landscape:py-20;
  }
  .jb-container {
    @apply relative max-w-[1480px] md:max-w-[1480px] lg:max-w-[1780px] mx-auto rounded-[30px] md:rounded-[54px] border border-[#f08719]
           shadow-[0_0_60px_rgba(192,35,35,0.43)] my-12 px-6 py-8 md:px-10 md:py-10 xl:py-14;
  }

  .jb-container-alt {
        @apply relative max-w-[1480px] md:max-w-[1480px] lg:max-w-[1780px] mx-auto rounded-[30px] md:rounded-[54px] border border-[#c02323]
              my-12 px-6 py-8 md:px-10 md:py-10 xl:py-14;
        animation: breathingGlow 4s ease-in-out infinite;
    }

    @keyframes breathingGlow {
        0%, 100% { box-shadow: 0 0 40px rgba(192, 35, 35, 0.30); }
        50%      { box-shadow: 0 0 70px rgba(192, 35, 35, 0.55); }
    }

  .jb-grid {
        @apply grid grid-cols-1 lg:grid-cols-2 items-center gap-8 lg:gap-12 h-full;
    }

  .jb-text-left {
      @apply text-left mt-6 lg:mt-0;
  }

  .jb-text-right {
      @apply text-left mt-6 lg:text-right lg:mt-0;
  }

  .jb-heading {
    @apply text-[#cfcfcf] font-extrabold text-[40px] xl:text-[72px] lg:text-[60px] md:text-[52px] sm:text-[46px] leading-[1.6] mb-8
          tablet-landscape:text-[52px] tablet-landscape:mb-6;
  }

  .jb-paragraph {
    @apply text-[#d9d9d9] text-[18px] md:text-[20px] xl:text-[24px] leading-[1.6];
  }

  .jb-video-wrapper {
    @apply relative w-full max-w-[320px] xl:max-w-[530px] lg:max-w-[460px] md:max-w-[400px] sm:max-w-[360px] aspect-[11/10] mx-auto
          tablet-landscape:aspect-[11/10] tablet-landscape:max-h-[50vh];
  }

  .jb-video {
    @apply relative w-full h-full object-cover rounded-[28px] md:rounded-[54px];
  }

  .jb-video-trial {
    @apply relative w-full h-full object-cover rounded-[28px] md:rounded-[54px];
  }

  @media (min-width:768px) and (orientation:landscape){
      .jb-grid{
          @apply grid-cols-2;
      }
  }
}