/* Homepage, events first (October 2026): the event list must be visible
   without scrolling. Loaded after the inline homepage styles. */

/* Compact hero */
.hero {
  min-height: 0;
  padding-top: clamp(18px, 2.4vw, 34px);
  padding-bottom: clamp(10px, 1.6vw, 22px);
  align-items: start;
}
.hero-intro h1.hero-title-question {
  font-size: clamp(3rem, 5vw, 4.8rem);
  line-height: .92;
}
.hero-intro .hero-copy { margin-top: 10px; }
/* Two hero buttons (clubs, events); styles shared by both homepages. */
.venue-jumps { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.venue-jumps a { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 11px 20px; border: 1px solid rgba(243, 239, 228, .14); border-radius: 999px; color: #f3efe4; font-size: .9rem; font-weight: 800; }
.venue-jumps a:first-child { color: #0c0d0b; background: #7ce5ff; border-color: #7ce5ff; }

/* Desktop weather panel: forecast only, without the clothing tip box. */
.hero-program { align-self: start; }
.weather-feature { min-height: 0; padding-top: 16px; padding-bottom: 16px; }
.weather-advice { display: none; }

/* Section heading keeps the homepage display size, with room above it.
   The events section follows a hidden #events anchor, so target it directly. */
.hero + .section { padding-top: clamp(28px, 3vw, 44px); }
#dogadanja { padding-top: clamp(28px, 3vw, 44px); }
#dogadanja .section-title { line-height: .9; }

/* One row: count, genre filters, then quick links. Scrolls sideways when
   it does not fit, so it never wraps onto a second line. */
.filter-row {
  padding: 12px 0 14px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-row .result-count { flex: 0 0 auto; margin-right: 6px; }
.filter-row .chips { flex: 0 0 auto; width: auto; margin: 0; padding: 0; overflow: visible; }
.filter-row .intent-links { flex: 0 0 auto; margin: 0; flex-wrap: nowrap; }
.filter-row .chip,
.filter-row .intent-links a { white-space: nowrap; }
.filter-row .chip,
.filter-row .intent-links a { min-height: 38px; }
.filter-divider { flex: 0 0 1px; align-self: stretch; margin: 6px 6px; background: rgba(243, 239, 228, .16); }

@media (max-width: 760px) {
  .hero { padding: 14px 0 6px; gap: 0; }
  .hero-intro .eyebrow { display: none; }
  .hero-intro h1.hero-title-question { font-size: clamp(2.6rem, 12vw, 3.6rem); line-height: .9; }
  .hero-intro .hero-copy { display: block; margin-top: 12px; font-size: .92rem; line-height: 1.45; }
  .venue-jumps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .venue-jumps a { justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px; font-size: .76rem; line-height: 1.15; }
  .mobile-hero-tools { display: none; }
  .hero + .section,
  #dogadanja { padding-top: 34px; }
  .filter-row {
    flex-direction: row;
    align-items: center;
    margin-right: -14px;
    padding: 10px 14px 12px 0;
  }
  .filter-row .chips { width: auto; margin-right: 0; padding-right: 0; }
}

/* One divider between the filter row and the list (the list had its own). */
#event-list.event-list { border-top: 0; }

/* Event search: magnifier first in the filter row, the field and shortcuts under it
   (assets/js/event-search.js). 16px input text keeps iOS from zooming in. */
.search-toggle {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--ink, #0c0d0b);
  background: var(--paper, #f3efe4);
  cursor: pointer;
}
.search-toggle svg { width: 17px; height: 17px; }
.search-toggle[aria-expanded="true"] { background: #08c4e8; }
.search-toggle:focus-visible { outline: 2px solid #08c4e8; outline-offset: 2px; }
.event-search { padding: 16px 0 16px; }  /* clear of the filter row's bottom line */
.event-search[hidden], .event-search-suggest[hidden] { display: none; }
.event-search-field {
  height: 50px;
  padding: 0 6px 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid #08c4e8;
  border-radius: 999px;
  background: #191b17;
}
.event-search-field > svg { width: 18px; height: 18px; flex: none; color: #08c4e8; }  /* the magnifier only */
.event-search-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  color: var(--paper, #f3efe4);
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
}
.event-search-field input::placeholder { color: #7f837a; }
.event-search-field input::-webkit-search-cancel-button { display: none; }
.event-search-clear {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #8f938a;
  background: transparent;
  cursor: pointer;
}
.event-search-clear svg { width: 18px; height: 18px; display: block; }
.event-search-clear:hover { color: var(--paper, #f3efe4); }
.event-search-suggest h4 {
  margin: 16px 4px 8px;
  color: #8f938a;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.event-search-suggest .sug { display: flex; flex-wrap: wrap; gap: 8px; }
.event-search-suggest button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(243, 239, 228, .16);
  border-radius: 999px;
  color: #d8d5ca;
  background: transparent;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}
.event-search-suggest button:hover { color: var(--paper, #f3efe4); border-color: var(--paper, #f3efe4); }

/* Optical centring on phones: the caps sat ~1px low in the 38px pills. */
@media (max-width: 760px) {
  .filter-row .chip,
  .filter-row .intent-links a,
  .filter-bar .seasonal-link { padding-bottom: 2px; }
}