/* Hero Block Frontend Styles */

@keyframes gentleFade {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.6; }
}

.wp-block-jesusbaena-hero-block {
  position: relative;
  min-height: 100vh;
  background: var(--color-bg-main);
  overflow: hidden;
  padding-top: clamp(5rem, 8vh, 8rem);
  padding-bottom: env(safe-area-inset-bottom);
}

.wp-block-jesusbaena-hero-block .absolute.inset-0 {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.wp-block-jesusbaena-hero-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
  opacity: 0.35;
  filter: grayscale(20%) contrast(1.05) brightness(1.1);
}

.wp-block-jesusbaena-hero-block .relative.z-10 {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wp-block-jesusbaena-hero-block h1 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: clamp(2.75rem, 8vw, 6rem);
  letter-spacing: -0.03em;
  word-spacing: 0.1em;
  line-height: 0.95;
  color: var(--color-text-main);
  margin: 0;
}

.wp-block-jesusbaena-hero-block .text-primary {
  color: var(--color-primary);
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 2.5rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.wp-block-jesusbaena-hero-block .text-primary span {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--color-text-main);
}

.wp-block-jesusbaena-hero-block p {
  color: var(--color-text-main);
  margin: 0;
}

.wp-block-jesusbaena-hero-block .description {
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 500;
  line-height: 1.6;
}

.wp-block-jesusbaena-hero-block .description-secondary {
  font-size: clamp(0.925rem, 1.6vw, 1.1rem);
  line-height: 1.65;
  opacity: 0.9;
}

.wp-block-jesusbaena-hero-block a {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-text-light);
  font-weight: 500;
  padding: 0.825rem 1.85rem;
  font-size: 1.025rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: clamp(0.75rem, 1.5vw, var(--radius-md));
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-medium);
  -webkit-tap-highlight-color: transparent;
}

.wp-block-jesusbaena-hero-block a:hover {
  transform: translateY(-2px);
  background: var(--color-primary-hover);
  box-shadow: 0 6px 20px rgba(181, 51, 36, 0.2);
}

.wp-block-jesusbaena-hero-block .scroll-indicator {
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  z-index: 20;
  opacity: 0.4;
  animation: gentleFade 3s ease-in-out infinite;
}

.wp-block-jesusbaena-hero-block .scroll-indicator div {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--color-text-main), transparent);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .wp-block-jesusbaena-hero-block .scroll-indicator {
    display: none;
  }
}

@media (max-width: 768px) {
  .wp-block-jesusbaena-hero-block {
    padding-top: clamp(4rem, 6vh, 6rem);
  }

  .wp-block-jesusbaena-hero-block h1 {
    font-size: clamp(2.5rem, 10vw, 5rem);
  }

  .wp-block-jesusbaena-hero-block .text-primary {
    font-size: clamp(1.1rem, 4vw, 2rem);
  }
}