/* Blog Archive Intro Hero Section */
.focusedspark-blog-intro-hero {
  position: relative;
  max-width: 1200px;
  margin: -148px auto 32px;
  padding: 16px 24px 48px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 460px) {
  .focusedspark-blog-intro-hero {
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      margin-top: -64px;
      padding-top: 8px;
  }
}

/* Content Section */
.blog-intro-content {
  z-index: 2;
  padding-bottom: 100px; /* Add padding to create space for search box */
}

.blog-intro-headline {
  font-size: 36px;
  font-weight: 700;
  color: #212B36;
  margin-bottom: 16px;
  margin-top: 0;
  line-height: 1.2;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@media (min-width: 768px) {
  .blog-intro-headline {
      font-size: 48px;
  }
}

.blog-intro-text {
  font-size: 16px;
  color: #637381;
  line-height: 1.7;
  margin-bottom: 16px;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.blog-intro-text:last-of-type {
  margin-bottom: 0;
}

/* Visual Section with Ava Image */
.blog-intro-visual {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-intro-ava-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  opacity: 0.9;
  z-index: 0;
  position: relative;
}

@media (min-width: 960px) {
  .blog-intro-ava-image {
      max-width: 600px;
  }
}

/* Search Box - Wide, Extends Above Ava Image */
.blog-intro-search-box {
  position: absolute;
  bottom: 10%; /* Position from bottom of hero container */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 40px 36px; /* Increased top/bottom padding */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(145, 158, 171, 0.24);
  width: 98%; /* Very wide - extends beyond image */
  max-width: 1300px; /* Much wider to extend above image */
  min-width: 320px;
  margin-top: 48px; /* Additional space from text above */
}

@media (min-width: 768px) {
  .blog-intro-search-box {
      bottom: 8%; /* Adjust bottom position */
      width: 96%; /* Very wide on tablet */
      max-width: 1400px; /* Extends well beyond image */
      padding: 44px 40px; /* More padding on larger screens */
      margin-top: 64px; /* More space from text */
  }
}

@media (min-width: 1200px) {
  .blog-intro-search-box {
      width: 94%; /* Wide to extend above image */
      max-width: 1300px; /* Extends well beyond 1200px hero container */
      /* Center properly without negative margin */
      left: 50%;
      transform: translateX(-50%); /* Keep centered */
      padding: 18px 44px; /* Even more padding on desktop */
      margin-top: 80px; /* Maximum space from text */
  }
}

.search-label {
  display: block;
  font-size: 14px;
  color: #637381;
  margin-bottom: 12px;
  font-weight: 600;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Ensure search form takes full width */
.blog-intro-search-box .search-form,
.blog-intro-search-box form {
  display: flex;
  gap: 12px;
  margin: 0;
  width: 100%;
  max-width: none; /* Remove any max-width constraints */
}

/* Ensure search input takes full available width */
.blog-intro-search-box input[type="search"],
.blog-intro-search-box input[type="text"],
.blog-intro-search-box .search-field {
  flex: 1 1 740px; /* Use 0% as base to allow full expansion */
  width: 740px; /* Let flex handle width */
  max-width: none; /* Remove max-width constraints */
  min-width: 740px; /* Allow shrinking below content size */
  padding: 14px 16px;
  border: 1px solid rgba(145, 158, 171, 0.24);
  border-radius: 8px;
  font-size: 16px;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.blog-intro-search-box input[type="search"]:focus,
.blog-intro-search-box input[type="text"]:focus,
.blog-intro-search-box .search-field:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.blog-intro-search-box input[type="submit"] {
  padding: 14px 24px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  flex-shrink: 0; /* Prevent button from shrinking */
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.blog-intro-search-box input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.blog-intro-search-box input[type="submit"]:active {
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 959px) {
  .focusedspark-blog-intro-hero {
      text-align: center;
  }

  .blog-intro-content {
      padding-bottom: 80px; /* Less padding on mobile */
  }

  .blog-intro-visual {
      min-height: 300px;
  }

  .blog-intro-search-box {
      bottom: 5%; /* Adjust for mobile */
      width: 98%; /* Nearly full width on mobile */
      min-width: 280px;
      padding: 32px 28px; /* Slightly less padding on mobile */
      margin-top: 32px; /* Less space on mobile */
  }

  .blog-intro-search-box .search-form,
  .blog-intro-search-box form {
      flex-direction: column;
      width: 100%;
  }

  .blog-intro-search-box input[type="search"],
  .blog-intro-search-box input[type="text"],
  .blog-intro-search-box .search-field {
      width: 100%;
      max-width: none;
  }

  .blog-intro-search-box input[type="submit"] {
      width: 100%;
  }
}