/* @layer components { */
  .f-hero {
    @apply relative flex items-center overflow-hidden;
    @apply min-h-[600px] md:min-h-[700px] lg:min-h-[700px];
  }

  .f-hero-background {
    @apply absolute inset-0 z-0 w-full h-full object-cover;
    object-position: center top;
  }

  .f-hero-overlay {
    @apply absolute inset-0 z-[1] bg-black/5;
  }

  .f-hero--right .f-hero-overlay {
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.1) 15%,
      rgba(0, 0, 0, 0.1) 30%,
      rgba(0, 0, 0, 0.5) 45%,
      rgba(0, 0, 0, 0.5) 55%,
      rgba(0, 0, 0, 0.5) 65%,
      rgba(0, 0, 0, 0.5) 75%,
      rgba(0, 0, 0, 0.75) 100%
    );
  }

  .f-hero--left .f-hero-overlay {
    background-image: linear-gradient(
      to left,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 0.5) 60%,
      rgba(0, 0, 0, 0.75) 100%
    );
  }

  .f-hero--center .f-hero-overlay {
    @apply bg-black/50;
    background-image: none;
  }

  .f-hero-container {
    @apply relative z-[2] w-full max-w-[1400px] mx-auto;
    @apply px-6 md:px-8 py-8 md:py-1;
    @apply grid grid-cols-1 gap-4;
  }

  .f-hero--right .f-hero-container,
  .f-hero--left .f-hero-container {
    @apply md:grid-cols-2;
  }

  .f-hero--right .f-hero-content {
    @apply md:col-start-2;
  }

  .f-hero--left .f-hero-content {
    @apply md:col-start-1;
  }

  .f-hero--center .f-hero-container {
    @apply md:grid-cols-1 md:max-w-4xl md:text-center;
  }


  .f-hero-content {
    @apply mx-1 flex flex-col gap-6;
    @apply text-[--f-hero-text];
  }

  .f-hero-title {
    @apply m-0 font-bold leading-tight;
    @apply text-4xl md:text-6xl lg:text-7xl text-center;
    @apply text-[--f-hero-header];
    @apply drop-shadow-[0_2px_8px_rgba(0,0,0,0.8)];
  }

  .f-hero-subtitles {
    @apply space-y-4;
  }

  .f-hero-subtitle {
    @apply m-0 leading-relaxed;
    @apply text-xl md:text-2xl lg:text-3xl;
    @apply pl-9 opacity-0;
    @apply drop-shadow-[0_1px_4px_rgba(0,0,0,0.8)];
    animation: fade-in-up 0.6s ease-out forwards;
    animation-delay: calc(var(--delay, 0) * 150ms);
  }

  .f-hero--center .f-hero-subtitle {
    @apply pl-0;
  }

  .f-hero-description {
    @apply m-0 max-w-2xl opacity-90;
    @apply text-base md:text-lg leading-relaxed;
    @apply drop-shadow-[0_1px_4px_rgba(0,0,0,0.8)];
  }

  .f-hero-ctas {
    @apply mt-2 flex flex-wrap gap-4;
  }

  .f-hero--left .f-hero-ctas {
    @apply justify-start;
  }

  .f-hero--right .f-hero-ctas {
    @apply justify-end;
  }

  .f-hero--center .f-hero-ctas {
    @apply justify-center;
  }

  .f-hero-ctas a {
    @apply w-full justify-center;
    @apply md:w-auto md:min-w-[280px] md:flex-1 md:max-w-[400px];
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* } */