/* ==========================================================================
   HERO SEARCH HOMEPAGE
   Based on: PHASE_7B_DESIGN_PREMIUM_SPEC.md - Hero Search Section
   ========================================================================== */

.hero-search {
  /* Height responsiv */
  min-height: clamp(400px, 70vh, 550px);
  
  /* Background gradient (Opțiunea A - RECOMANDATĂ din design spec) */
  background: linear-gradient(135deg, 
    var(--color-white) 0%, 
    var(--color-gray-50) 50%, 
    var(--color-gray-100) 100%
  );
  
  /* Padding vertical */
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  
  /* Centrat vertical */
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .hero-search {
    min-height: clamp(500px, 60vh, 700px);
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
  }
}

.hero-search__container {
  width: 100%;
  max-width: 900px;  /* Mai îngust decât layout general → focus */
  margin: 0 auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

/* ==========================================================================
   TITLU HERO
   ========================================================================== */

.hero-search__title {
  font-size: 2.5rem;  /* 40px mobile */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-gray-800);
  text-align: center;
  margin-bottom: var(--space-lg);
}

@media (min-width: 1024px) {
  .hero-search__title {
    font-size: var(--font-size-5xl);  /* 72px desktop */
  }
}

/* ==========================================================================
   SUBTITLU
   ========================================================================== */

.hero-search__subtitle {
  font-size: var(--font-size-base);  /* 16px mobile */
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-500);
  text-align: center;
  margin-bottom: var(--space-2xl);
  max-width: 600px;  /* Readable line length */
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .hero-search__subtitle {
    font-size: var(--font-size-xl);  /* 20px desktop */
  }
}

/* ==========================================================================
   CONTAINER FORMULAR
   ========================================================================== */

.hero-search__form-container {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-large);
  transition: all var(--transition-base);
}

.hero-search__form-container:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xlarge);
}

/* ==========================================================================
   FORMULAR GRID (va fi completat în STEP 6)
   ========================================================================== */

.hero-search__form {
  display: grid;
  gap: var(--space-sm);  /* 12px mobile */
  grid-template-columns: 1fr;  /* Mobile: stacked */
}

@media (min-width: 640px) {
  .hero-search__form {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--space-md);  /* 16px tablet/desktop */
  }
  
  /* Input text full width pe primul rând */
  .hero-search__form > :first-child {
    grid-column: 1 / -1;
  }
  
  /* Button full width pe ultimul rând */
  .hero-search__form > :last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .hero-search__form {
    grid-template-columns: 1fr 0.8fr 0.8fr 200px;  /* Desktop: input text mai lat, button fix */
    grid-template-rows: auto;
    gap: var(--space-md);
  }
  
  /* Reset grid spans pentru desktop */
  .hero-search__form > :first-child,
  .hero-search__form > :last-child {
    grid-column: auto;
  }
}