/* ============================================================
   Explore Page — search-section backdrop + layout
   ============================================================ */

/* ── Search hero backdrop ── */
.search-section {
  background-image: url(../../img/searchBg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 600px;
  position: relative;
  overflow: hidden;
}

/* Multi-layer overlay — navy left, fade right */
.search-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      rgba(10, 19, 51, 0.92) 0%,
      rgba(26, 79, 130, 0.62) 48%,
      rgba(0, 0, 0, 0.14) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.32) 0%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.22) 100%
    );
  z-index: 1;
}

/* ── Form container floats in the lower portion of the backdrop ── */
.search-section + .container {
  margin-top: -280px;
  position: relative;
  z-index: 10;
}

.product-section{
  padding-top: 60px;
}

/* ════════════════════════════════════
   Responsive
   ════════════════════════════════════ */

/* ≤ 1199px */
@media (max-width: 1199.98px) {
  .search-section {
    height: 420px;
  }

  .search-section + .container {
    margin-top: -260px;
  }

  .product-section{
    padding-top: 40px;
  }
}

/* ≤ 991px — shorter backdrop */
@media (max-width: 991.98px) {
  .search-section {
    height: 360px;
  }

  .search-section + .container {
    margin-top: -220px;
  }

  .product-section{
    padding-top: 30px;
  }
}

/* ≤ 767px — hide backdrop entirely, form sits flush at top */
@media (max-width: 767.98px) {
  .search-section {
    display: none;
  }

  .search-section + .container {
    margin-top: 0;
  }

  .product-section{
    padding-top: 20px;
  }
}