/* ==========================================================================
   search-block.css — pill-shaped search bar with two fields + button
   Markup: <form class="search-block">
            <div class="search-field"><i><label><input></div>
            <div class="search-field">...</div>
            <button class="btn btn-primary btn-lg">...</button>
   Used in hero and closing CTA. White on dark backgrounds.
   ========================================================================== */

.search-block {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 0;
  background: white;
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
  border-radius: var(--pill);
  box-shadow: var(--shadow-lg);
  align-items: stretch;
  /* Reset inherited text-align so the component renders identically
     whether it sits in a centered (.closing) or left-aligned (.hero) context. */
  text-align: left;
}

.search-field {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-10) var(--space-18);
  border-radius: var(--pill);
  position: relative;
  transition: background .15s ease;
}
.search-field:focus-within { background: var(--bg-3); }

/* Vertical divider between fields */
.search-field + .search-field::before {
  content: "";
  position: absolute;
  left: 0; top: var(--space-14); bottom: var(--space-14);
  width: 1px;
  background: var(--line);
}

/* Leading icon */
.search-field .ic,
.search-field [data-lucide],
.search-field svg.lucide {
  width: 20px;
  height: 20px;
  color: var(--ink-3);
  flex-shrink: 0;
}

.search-field .col { flex: 1; min-width: 0; }

.search-field label {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin-bottom: var(--space-3);
  font-family: inherit;
}

.search-field input {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: var(--fs-input);
  padding: 0;
  color: var(--ink);
  outline: none;
  font-family: inherit;
  font-weight: var(--fw-medium);
}
.search-field input::placeholder {
  color: var(--muted);
  font-weight: var(--fw-regular);
}

/* Submit button override (taller to match field height) */
.search-block .btn {
  height: auto;
  min-height: 56px;
  padding: 0 var(--space-28);
  margin-left: var(--space-8);
}
.search-block .btn svg { width: 18px; height: 18px; }

/* Periodic shine sweep — gentle attention nudge to "Search" only.
   Sits on ::after so it doesn't fight the existing ::before hover sweep. */
.search-block .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(var(--white-rgb), .32) 50%,
    transparent 62%
  );
  transform: translateX(-110%);
  animation: search-shine 4.5s cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes search-shine {
  0%   { transform: translateX(-110%); }
  30%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}
@media (prefers-reduced-motion: reduce) {
  .search-block .btn-primary::after { animation: none; }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Pill radius doesn't fit a vertical stack — switch to a tame card radius
     so the inner Search button doesn't get clipped by the outer oval. */
  .search-block {
    grid-template-columns: 1fr;
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    /* hero centers everything on mobile; search-block needs left-aligned labels/inputs */
    text-align: left;
  }
  .search-block .btn {
    width: 100%;
    min-height: 52px;
    margin-left: 0;
    margin-top: var(--space-4);
  }
  /* Search-field padding eases inward so input doesn't crowd the radius */
  .search-block .search-field { padding: var(--space-12) var(--space-16); }
  /* Divider switches to horizontal between stacked fields */
  .search-field + .search-field::before {
    top: 0; bottom: auto; left: var(--space-14); right: var(--space-14);
    width: auto; height: 1px;
  }
}