/**
 * Hero Section Styles - REWRITTEN
 * Node ID: 100-64960
 * Based on screenshot analysis
 *
 * Layout:
 * - Background: #FFE8DB peachy color
 * - Height: Auto to accommodate content
 * - Feature cards: Overlap hero background (~30% inside, ~70% outside)
 */

/* =============================================
 * HERO SECTION CONTAINER
 * ============================================= */

.hero {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: 550px;
  background-color: #FFE8DB;
  overflow: visible;
  padding: 0 240px 200px; /* Match header padding: 240px horizontal, 200px bottom for cards */
}

/* =============================================
 * BACKGROUND DECORATIVE PATTERNS
 * ============================================= */

/* Left dots pattern */
.hero__bg-pattern-left {
  position: absolute;
  left: 3%;
  top: 5%;
  width: 200px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
}

.hero__bg-pattern-left img {
  width: 100%;
  height: auto;
  display: block;
}

/* Right orange wave */
.hero__bg-pattern-right {
  position: absolute;
  right: 0;
  bottom: 0; /* Align to bottom of hero */
  width: 38%; /* Smaller width */
  max-width: 650px; /* Reduced max-width */
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.hero__bg-pattern-right img {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================================
 * HERO CONTENT
 * ============================================= */

.hero__content {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 0 0; /* No horizontal padding - will be applied by .hero wrapper */
  z-index: 10;
}

/* =============================================
 * HEADLINE
 * ============================================= */

.hero__headline {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 64px;
  line-height: 1.3;
  color: #1A1A1A;
  margin: 0 0 24px 0;
}

/* Orange gradient pill for "Mạng FPT" */
.hero__headline-highlight {
  display: inline-block;
  padding: 6px 20px;
  background: linear-gradient(180deg, #FF8F4B 0%, #FF5C00 100%);
  border-radius: 8px;
  color: #FFFFFF;
  white-space: nowrap;
}

/* =============================================
 * DESCRIPTION
 * ============================================= */

.hero__description {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  max-width: 600px;
  margin: 0 0 32px 0;
}

/* =============================================
 * CTA BUTTON
 * ============================================= */

.hero__cta {
  margin: 0;
}

/* =============================================
 * FEATURE CARDS SECTION
 * Cards overlap hero/banner by 50% using negative margin
 * 50% sits on banner, 50% sits on white background below
 * ============================================= */

.hero__features {
  position: relative;
  width: 100%;
  z-index: 20;
  padding: 0 240px; /* Match header padding */
  margin-top: -126px; /* Negative margin to overlap banner by 50% (252px height / 2) */
}

.hero__features-container {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: stretch;
  max-width: 1440px;
  margin: 0 auto;
}

/* =============================================
 * RESPONSIVE BEHAVIOR
 * ============================================= */

/* Tablet (768px - 1439px) */
@media (max-width: 1439px) {
  .hero {
    min-height: 480px;
    padding: 0 40px 160px; /* Match header tablet padding: 40px */
  }

  .hero__content {
    padding: 60px 0 0;
  }

  .hero__headline {
    font-size: 48px;
    line-height: 1.25;
  }

  .hero__headline-highlight {
    padding: 5px 16px;
  }

  .hero__description {
    font-size: 15px;
    line-height: 24px;
    max-width: 500px;
  }

  .hero__features {
    margin-top: -100px; /* Adjusted overlap for tablet */
    padding: 0 40px; /* Match header tablet padding */
  }

  .hero__features-container {
    gap: 12px;
  }

  .hero__bg-pattern-left,
  .hero__bg-pattern-right {
    display: none; /* Hide patterns */
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding: 0 16px 300px; /* Match header mobile padding: 16px */
  }

  .hero__content {
    padding: 40px 0 0;
  }

  .hero__headline {
    font-size: 36px;
    line-height: 1.2;
  }

  .hero__headline br {
    display: none;
  }

  .hero__headline-highlight {
    padding: 4px 12px;
    font-size: 36px;
  }

  .hero__description {
    font-size: 14px;
    line-height: 22px;
    max-width: 100%;
  }

  .hero__features {
    margin-top: -60px; /* Negative margin to overlap banner */
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .hero__features::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .hero__features-container {
    flex-direction: row;
    gap: 12px;
    flex-wrap: nowrap;
    width: max-content;
    padding-right: 16px; /* Extra space at end for scroll */
  }

  .hero__bg-pattern-left,
  .hero__bg-pattern-right {
    display: none;
  }
}