/* 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. Every pane scrolls inside it, the city browser included. */
  --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.
   Centres itself rather than relying on a flex parent: the browse view is a plain
   block scroller. */
.hero-search-panel__empty {
  display: grid;
  place-content: center;
  min-height: 100%;
  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;
}

/* `.filled` above is the markup's original hook for this, and nothing sets it any
   more: the controller that put it on a `track--filled` fieldset shipped inside
   dist/main.js. bindClearButton() in js/hero-search.js now drives all three fields'
   buttons directly and marks the field while its button is showing, so the space is
   reserved from the same state that shows it. Still conditional, for the reason the
   comment above gives -- "Enter the preferred event type" clears a 36px reservation
   by 29px, but it would not survive one permanently. */
#searchActivity.is-clearable,
#activtyFilter.is-clearable,
#heroAttendees.is-clearable {
  padding-right: 2.25rem;
}

/* Commit footer, shared by the event type and guests panes. The event type pane
   gets its classes from the shared picker component (classPrefix), the guests
   pane writes its own, so both names are styled together here rather than
   duplicating the chrome in two files. Values are the /venues toolbar panel
   footer (.filter-toolbar__chip-dropdown__* in main.css) so a user who has seen
   one recognises the other.

   Only ever rendered inside the hero panel, which is why these live here. */
.hero-search-panel__footer,
.hero-search-panel__pane--event .event-type-picker__footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: #fff;
  border-top: 1px solid rgb(0 0 0 / 8%);
}

/* The event pane's view is padded (1rem 1.5rem), so the footer is pulled back out
   to the edges for its divider to span the frame like the guests one does. */
.hero-search-panel__pane--event .event-type-picker__footer {
  margin: 0 -1.5rem -1rem;
}

.hero-search-panel__clear,
.hero-search-panel__pane--event .event-type-picker__clear {
  padding: 0.25rem 0;
  border: none;
  background: none;
  color: #a8a8a8;
  font-family: Neue, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.hero-search-panel__apply,
.hero-search-panel__pane--event .event-type-picker__apply {
  min-width: 120px;
  height: 40px;
  padding: 0 1rem;
  border: none;
  border-radius: 4px;
  background: #c8d200;
  color: #000;
  font-family: 'Neue Plak', Neue, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.hero-search-panel__apply:hover,
.hero-search-panel__pane--event .event-type-picker__apply:hover {
  background: #b7c000;
}