/* Homepage hero search.
   One panel hosts every field's content: the "where" browser, the event-type
   list and the guests range. Each widget keeps the markup its bundled
   controller expects, so the rules below only neutralise the floating-dropdown
   positioning those controllers assume. */

@media (min-width: 1024px) {
  .hero-heading-fit {
    font-size: 56px !important;
    line-height: 1.05 !important;
  }

  /* The card sits in a shrink-to-fit column, so with flex-1 + min-w-0 fields it
     collapses to their min-content (688px) instead of the 888px the design asks
     for, clipping the "Where's your event?" placeholder mid-word. Production
     reaches 888px only because its fixed-width fields overflow into the cap;
     stating the width keeps it there once the fields can shrink. */
  #desktopSearchFormWrapper {
    width: 888px;
  }
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

legend {
  padding: 0;
  display: table;
  max-width: 100%;
  white-space: normal;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Match the search card's corner radius (.clip-search, 24px) so the panel
   reads as an extension of the search box on the hero. */
.hero--dropdown {
  border-radius: 24px;
}

body {
  /* The panel is a fixed-height frame so it never resizes as the user moves
     between fields. The value is the height the city browser needs (its
     heading plus two rows of venue cards); every other pane scrolls inside it. */
  --hero-panel-height: 330px;

  /* .hero--dropdown caps itself with `max-height: var(--hero-dropdown-height)`,
     and the hero's resize handler only writes that variable once the window is
     resized. The default keeps the frame inside short viewports until then. */
  --hero-dropdown-height: min(70vh, 720px);
}

.hero-search-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: var(--hero-panel-height);
}

.hero-search-panel__pane {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
}

.hero-search-panel__pane.is-active {
  display: flex;
  flex-direction: column;
}

.hero-search-panel__pane--event {
  padding: 0;
}

/* Safety net for the invariant "an open frame always shows a view". The hosted
   widgets are still closed by the bundled controllers, which know nothing about
   this frame, so a stray close would otherwise leave a blank white box. */
.hero-search-panel.visible:not(:has(.hero-search-panel__view.visible)) {
  display: none;
}

/* Shown when a pane has nothing to browse, so the frame is never a blank white box. */
.hero-search-panel__empty {
  margin: auto;
  padding: 2rem 1.5rem;
  color: #999;
  font-family: Neue, sans-serif;
  font-size: 1rem;
  text-align: center;
}

/* The event type panel is the shared picker (event-type-chip.css), sized there as a
   490px standalone flyout. Hosted here it is the full width of the frame. */
.hero-search-panel__pane--event .hero-search-panel__view {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  padding: 1rem 1.5rem;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* The picker nests its list two plain blocks below the panel, so the panel's
   height never reached the list: it grew to its full content height and the
   panel clipped the overflow with no scrollbar. Both wrappers have to shrink
   for the list's own overflow to engage. */
.hero-search-panel__pane--event .event-type-picker__content,
.hero-search-panel__pane--event .filter-toolbar__event-type {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.hero-search-panel__pane--event .filter-toolbar__event-type__search {
  flex: 0 0 auto;
}

/* Two columns roughly halve a list that would otherwise be a long single-column
   scroll inside the fixed-height frame. */
.hero-search-panel__pane--event .filter-toolbar__event-type__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.hero-search-panel__pane--event .filter-toolbar__event-type__option {
  padding: 0.75rem 1.25rem;
}

.hero-search-panel__pane--event .filter-toolbar__event-type__option:nth-child(odd) {
  border-right: 1px solid #eee;
}

/* Odd item count: the trailing cell has no neighbour to divide it from. */
.hero-search-panel__pane--event .filter-toolbar__event-type__option:last-child:nth-child(odd) {
  border-right: 0;
}

/* The hosted widgets ship as absolutely positioned dropdowns. Inside the panel
   they are plain blocks, and the panel itself owns visibility. */
.hero-search-panel__view {
  position: static;
  width: 100%;
  max-height: none;
  margin: 0;
  border: 0;
  transform: none;
  opacity: 1;
  visibility: visible;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Kept more specific than the per-pane display rules above, so a hidden view
   stays hidden regardless of rule order. */
.hero-search-panel .hero-search-panel__view:not(.visible) {
  display: none;
}

/* Clear (x) buttons: `bottom-3` is purged from the compiled Tailwind bundle, so
   `bottom` falls back to auto and the button drops onto the divider. Anchor
   them to the right of the input and centre on the entered text (the input has
   `pb-3`, so the text sits toward the top of the box). */
#whereClearBtn,
#clearEventTypeBtn,
#clearAttendeesBtn {
  bottom: 11px;
  right: 0;
}

/* Reserve room on the right of each field for the clear (x) button, but only
   once the field is filled (that's the only time the button shows). While a
   field is empty the placeholder gets the full width so it isn't clipped. */
.filled #searchActivity,
.filled #activtyFilter,
.filled #heroAttendees {
  padding-right: 2.25rem;
}