/* South Broadway BID — directory and business pages. */
.hub-page-heading-directory { --cat-tint: var(--tint); }

/* ---------- Controls ---------- */
.hub-directory-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.2rem; padding: 1.4rem; border: var(--border-bold); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-sticker-lg); }
.hub-directory-controls label { display: block; margin-bottom: .45rem; font: 700 .8rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.hub-directory-search { flex: 1 1 320px; }
.hub-directory-category { flex: 0 1 240px; }
.hub-input-icon { position: relative; }
.hub-input-icon .hub-icon { position: absolute; left: 1rem; top: 50%; width: 20px; height: 20px; color: var(--blue-ink); transform: translateY(-50%); pointer-events: none; }
.hub-input-icon input { padding-left: 2.8rem !important; }
.hub-directory-controls .sbbid-button { min-height: 50px; }
.hub-filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.hub-directory-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; padding: 1.4rem 0; }
.hub-directory-status p { margin: 0 auto 0 0; font: 650 var(--text-sm) var(--font-body); }

/* ---------- Layout ---------- */
.hub-directory-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 1.75rem; }
.hub-business-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.hub-business-card .hub-card-image { aspect-ratio: 16 / 9; }
.hub-business-card h3 { margin: .7rem 0 .45rem; font-size: 1.35rem; }
.hub-business-card .hub-card-body { padding: 1.1rem 1.15rem 1.25rem; }
.hub-address { margin-bottom: .5rem !important; color: var(--muted); font-size: var(--text-xs) !important; }
.hub-card-description { display: -webkit-box; overflow: hidden; margin-bottom: .6rem !important; color: var(--ink); font-size: var(--text-xs) !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.hub-business-card .hub-cover-initials { font-size: clamp(2.6rem, 5vw, 3.6rem); }
.hub-load-more { width: 100%; margin-top: 1.5rem; }

/* ---------- Map ---------- */
.hub-map-panel { position: sticky; top: calc(var(--header-h) + 1rem); overflow: hidden; border: var(--border-bold); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-sticker-lg); }
.admin-bar .hub-map-panel { top: calc(var(--header-h) + 32px + 1rem); }
.hub-map-heading { padding: 1.1rem 1.3rem; border-bottom: var(--border-bold); background: var(--ink); color: #fff; }
.hub-map-heading h2 { margin: 0 0 .25rem; color: #fff; font-size: 1.5rem; }
.hub-map-heading p { margin: 0; color: var(--on-dark-muted); font-size: var(--text-xs); }
.hub-map { height: min(640px, calc(100vh - 220px)); min-height: 420px; background: var(--blue-soft); z-index: 0; }
.hub-map-toggle { display: none; }
.hub-directory-layout + .hub-map-note { position: relative; margin: 2rem 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }

/* ---------- Single business ---------- */
.hub-page-heading-cat { background: var(--tint); }   /* neutro: el color de categoria vive en el chip y en el pin */
.hub-page-heading-cat .hub-heading-shapes span:first-child { background: var(--ink); }
.hub-business-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.hub-business-hero h1 { margin-top: 1rem; }
.hub-business-hero .hub-chip { background: var(--paper); }
.hub-hero-address { margin-top: 1.2rem !important; font-weight: 650; }
.hub-business-cover { aspect-ratio: 1; overflow: hidden; border: var(--border-bold); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker-lg); transform: rotate(var(--tilt)); }
.hub-business-cover img { width: 100%; height: 100%; object-fit: cover; }
.hub-business-cover .hub-cover-initials { font-size: clamp(4rem, 10vw, 7rem); }
.hub-business-cover .hub-cover-icon { width: 48px; height: 48px; right: 1.4rem; bottom: 1.3rem; }
.hub-related { border-top: var(--border-bold); background: var(--tint); }

@media (max-width: 1023px) {
  .hub-directory-layout { grid-template-columns: 1fr; }
  .hub-map-panel { position: relative; top: auto; display: none; grid-row: 1; }
  .admin-bar .hub-map-panel { top: auto; }
  .hub-map-panel.is-open { display: block; }
  .hub-map-toggle { display: inline-flex; }
  .hub-map { height: 440px; min-height: 0; }
  .hub-business-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hub-business-hero { grid-template-columns: 1fr; }
  .hub-business-cover { max-width: 260px; }
}
@media (max-width: 600px) {
  .hub-business-grid { grid-template-columns: 1fr; }
  .hub-directory-controls { flex-direction: column; align-items: stretch; padding: 1.1rem; border-radius: var(--radius-md); }
  .hub-directory-search, .hub-directory-category { flex-basis: auto; }
  .hub-filter-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1rem; padding: 0 1rem .5rem; scroll-snap-type: x proximity; scrollbar-width: none; }
  .hub-filter-chips::-webkit-scrollbar { display: none; }
  .hub-filter-chips .hub-chip { flex-shrink: 0; white-space: nowrap; scroll-snap-align: start; }
}
.hub-directory-controls input, .hub-directory-controls select { text-transform: none; letter-spacing: normal; font-weight: 500; }