/**
 * Edufin - Hero Section Styles
 * Matches Figma design node 1012:11722
 * Full viewport width and height implementation
 */

.hero {
  position: relative;
  width: 100%;
  min-height: 110vh;
  display: flex;
  align-items: flex-start;
  /* Top padding: ~174px (10.875rem) -> using combined space variables */
  padding: calc(var(--space-30) + var(--space-13)) var(--space-30)
    var(--space-20);
  overflow: hidden;
}

/* =================================
   BACKGROUND IMAGES
   ================================= */

.hero-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Desktop background - visible by default */
.hero-background-desktop {
  display: block;
  background-image: url('../../images/hero-bg.webp'), linear-gradient(to bottom, #15271f 0%, #0a1b11 100%);
}

/* Tablet background - hidden by default */
.hero-background-tablet {
  display: none;
  background-image: url('../../images/hero-bg-tablet.webp'), linear-gradient(to bottom, #15271f 0%, #0a1b11 100%);
}

/* Mobile background - hidden by default */
.hero-background-mobile {
  display: none;
  background-image: url('../../images/hero-bg-mobile.webp'), linear-gradient(to bottom, #15271f 0%, #0a1b11 100%);
}

.hero-content {
  position: relative;
  z-index: 3;
  /* ~660px -> 41.25rem */
  max-width: 41.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero-heading {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-base-white);
}

/* Desktop heading size (above tablet breakpoint) */
@media (min-width: 64rem) {
  .hero-heading {
    font-size: 3.25rem;
  }
}

/* Animated gradient heading - sweeps left to right across all text */
.hero-heading-animated {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 40%,
    #e1ee57 45%,
    #bbff00 50%,
    #e1ee57 55%,
    #ffffff 60%,
    #ffffff 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: headingGradientSweep 4s ease-in-out infinite;
}

@keyframes headingGradientSweep {
  0% {
    background-position: 100% 50%;
  }
  60% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hero-subtext {
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-base-white);
  /* ~588px -> 36.75rem */
  max-width: 36.75rem;
}

.hero-buttons {
  display: flex;
  gap: var(--space-5);
}

/* Value propositions */
.hero-values {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hero-value-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-base-white);
  font-size: var(--text-sm);
  line-height: 1.71;
}

.hero-check-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* =================================
   TABLET VIEW (48rem - 64rem / 768px - 1024px)
   Matches Figma design node 1028:8615
   ================================= */

@media (max-width: 64rem) {
  /* 1024px */
  .hero {
    padding: var(--space-30) var(--space-5) var(--space-12);
    align-items: flex-start;
    justify-content: center;
    min-height: 65rem;
  }

  /* Switch backgrounds: hide desktop, show tablet */
  .hero-background-desktop {
    display: none;
  }

  .hero-background-tablet {
    display: block;
    background-size: 100%;
    background-position: center 50%;
  }

  .hero-content {
    max-width: 36.75rem; /* 588px */
    width: 100%;
    margin: 0 auto;
    align-items: center;
    text-align: center;
    gap: var(--space-8); /* 32px - matching Figma spacing */
  }

  .hero-text {
    align-items: center;
    gap: var(--space-4); /* 16px gap between heading and subtext */
  }

  .hero-heading {
    font-size: 2.75rem;
    text-align: center;
    line-height: 1.2;
  }

  .hero-subtext {
    font-size: var(--text-base); /* 16px */
    max-width: 31.875rem; /* 510px */
    text-align: center;
    line-height: var(--leading-normal); /* 1.5 / 24px line-height */
  }

  .hero-buttons {
    justify-content: center;
    gap: var(--space-5); /* 20px gap between buttons */
  }

  /* Tablet-sized buttons - matching navbar-cta style */
  .hero-buttons .btn {
    padding: 0.625rem 1.125rem;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: 1.25rem;
    border-radius: var(--radius-lg);
  }

  .hero-values {
    max-width: 27.5rem; /* 440px */
    width: 100%;
    align-items: flex-start;
    gap: var(--space-3); /* 12px gap between value items */
  }

  .hero-value-item {
    text-align: left;
    font-size: var(--text-sm); /* 14px */
    line-height: var(--leading-normal); /* 24px line-height */
  }
}

/* =================================
   MOBILE VIEW (< 48rem / 768px)
   ================================= */

@media (max-width: 48rem) {
  /* 768px */
  .hero {
    padding: var(--space-24) var(--space-5) var(--space-10);
    min-height: 60rem;
  }

  /* Switch backgrounds: hide tablet, show mobile */
  .hero-background-tablet {
    display: none;
  }

  .hero-background-mobile {
    display: block;
    background-size: cover;
    background-position: center center;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-heading {
    font-size: var(--text-3xl);
  }

  .hero-subtext {
    font-size: var(--text-sm);
    max-width: 100%;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-values {
    max-width: 100%;
  }
}