/* South Broadway BID — homepage (loaded only on the front page). */

/* ---------- Hero (0.3.0): full-bleed media + two-register headline ---------- */
.hub-hero { position: relative; display: flex; align-items: flex-end; min-height: min(88vh, 760px); padding: clamp(3rem, 7vw, 5rem) 0 clamp(5.5rem, 10vw, 8rem); background: var(--dark-deep); color: #fff; overflow: hidden; isolation: isolate; }
.hub-hero-media { position: absolute; inset: 0; z-index: -2; }
.hub-hero-media img, .hub-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hub-hero-video { z-index: 1; opacity: 0; transition: opacity .8s var(--ease-out); }
.hub-hero-video[src] { opacity: 1; }
.hub-hero-video:not([src]) { display: none; }   /* sin fuente (o con movimiento reducido) no debe tapar el poster */
.hub-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, #0b1626f5 0%, #0b1626d6 44%, #0b162661 100%); }
.hub-hero-inner { position: relative; z-index: 1; }
.hub-hero-kicker { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.4rem !important; padding: .45rem 1rem .45rem .8rem; border: 2px solid #ffffff4d; border-radius: var(--radius-pill); color: var(--amber); font: 700 var(--text-xs)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.hub-live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 #c08a2e99; animation: hub-pulse 2s infinite; }
@keyframes hub-pulse { 70% { box-shadow: 0 0 0 10px #c08a2e00; } 100% { box-shadow: 0 0 0 0 #c08a2e00; } }
.sbbid-page .hub-hero-title { display: flex; flex-direction: column; max-width: 18ch; margin: 0 0 1.4rem; color: #fff; font-size: var(--title-xl); font-weight: 800; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.sbbid-page .hub-hero-title em { margin-bottom: .02em; color: var(--amber); }
.hub-rotator { position: relative; display: block; height: .94em; overflow: hidden; padding-bottom: .1em; box-sizing: content-box; }
.hub-rotator-word { display: inline-block; }   /* el giro lo anima JS (Web Animations); en reposo siempre visible */
.hub-hero-place { display: block; }
.hub-hero-place .hub-brand-dot { color: var(--amber); }
.hub-hero-description { max-width: 48ch; margin-bottom: 0 !important; color: var(--on-dark); font-size: var(--text-lg); line-height: 1.55; }
.hub-hero .hub-actions { margin-top: 2rem; }
.hub-video-toggle { position: absolute; right: clamp(1rem, 3vw, 2rem); top: clamp(1rem, 3vw, 2rem); z-index: 3; padding: .5rem .9rem; border: 2px solid #ffffff80; border-radius: var(--radius-pill); background: #0b1626b3; color: #fff; font: 600 .78rem var(--font-body); cursor: pointer; }
.hub-video-toggle:hover { border-color: var(--amber); color: var(--amber); }

/* ---------- Search (placement; component lives in custom.css) ---------- */
.hub-search-wrap { position: relative; z-index: 3; margin-top: clamp(-4.5rem, -6vw, -3rem); }
.hub-search-chips { justify-content: center; margin-top: 1.25rem; }

/* ---------- Stats ---------- */
.hub-stats { padding: clamp(3rem, 6vw, 4.5rem) 0 0; }
.hub-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hub-stats p { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 1.4rem 1.2rem 1.2rem; border-top: var(--border-bold); }
.hub-stats strong { color: var(--ink); font: 700 clamp(2.8rem, 1.8rem + 4vw, 4.8rem)/1 var(--font-num); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.hub-stats span { color: var(--muted); font-weight: 600; }

/* ---------- Category bento ---------- */
.hub-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: clamp(.8rem, 1.5vw, 1.2rem); }
.hub-bento-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; padding: 1.3rem; overflow: hidden; border: 2px solid var(--ink); border-radius: var(--radius-md); background: var(--dark); color: #fff; box-shadow: inset 0 -5px 0 var(--cat); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }   /* isolation: sin esto, el fondo del propio elemento pinta por delante de sus hijos con z-index negativo (img, overlay) y la foto queda invisible */
.hub-bento-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-sticker-lg), inset 0 -5px 0 var(--cat); }
.hub-bento-0 { grid-column: span 2; grid-row: span 2; }
.hub-bento-1 { grid-column: span 2; }
.hub-bento-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.hub-bento-card.has-image::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #141414ee 0%, #14141499 38%, transparent 72%); box-shadow: inset 0 -5px 0 var(--cat); }
.hub-bento-card.has-image { color: #fff !important; }
.hub-bento-card, .hub-bento-card .hub-bento-title { color: #fff !important; }   /* mosaico oscuro: gana al color de enlace del tema padre */
.hub-bento-card:hover > img { transform: scale(1.06); }
.hub-bento-icon { display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid currentColor; border-radius: 50%; background: #ffffff26; transition: transform .45s var(--ease-bounce); }
.hub-bento-card.has-image .hub-bento-icon { background: var(--cat); border-color: var(--ink); color: var(--cat-ink); }
.hub-bento-icon .hub-icon { width: 28px; height: 28px; }
.hub-bento-card:hover .hub-bento-icon { transform: scale(1.08); }
.hub-bento-label { display: flex; flex-direction: column; gap: .35rem; margin-top: 2rem; }
.hub-bento-title { font: 800 clamp(1.45rem, 1.1rem + 1.2vw, 2rem)/1 var(--font-display); letter-spacing: -.03em; }
.hub-bento-0 .hub-bento-title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); }
.hub-bento-count { color: var(--on-dark-muted) !important; font: 650 var(--text-sm)/1 var(--font-body); opacity: .92; }
.hub-bento-arrow { position: absolute; top: 1.2rem; right: 1.2rem; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); transition: transform .3s var(--ease-bounce), background-color .2s; }
.hub-bento-card:hover .hub-bento-arrow { transform: rotate(45deg); background: var(--amber); }

/* ---------- Events ---------- */
.hub-events-home { border-block: var(--border-bold); background: var(--blue-soft); }
.hub-event-card .hub-date-badge { top: 1rem; }
.hub-section-bottom { margin-top: 2rem; text-align: right; }

/* ---------- Dot map teaser ---------- */
.hub-map-teaser { background: var(--dark); color: var(--on-dark); }
.hub-map-teaser h2 { color: #fff; font-size: var(--title-lg); }
.hub-map-teaser h2 em { color: var(--amber); }   /* sobre fondo oscuro: 5.7:1 */
.hub-map-teaser .hub-eyebrow { color: var(--amber); }
.hub-map-teaser .hub-section-lead { color: var(--on-dark-muted); }
.hub-map-teaser-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); }
.hub-map-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 1rem; padding: 0; list-style: none; }
.hub-map-legend li { display: flex; }
.hub-legend-item { display: inline-flex; align-items: center; gap: .5rem; min-height: 38px; padding: .35rem .8rem; border: 2px solid #ffffff2e; border-radius: var(--radius-pill); color: var(--on-dark) !important; font: 650 var(--text-xs)/1 var(--font-body); cursor: pointer; transition: background-color .18s, border-color .18s, transform .18s var(--ease-bounce); }
.hub-legend-item:hover { background: #ffffff14; border-color: #ffffff66; }
html[data-motion] .hub-legend-item:hover, .hub-legend-item:hover { transform: translateY(-2px); }
.hub-legend-item[aria-pressed="true"] { background: #ffffff1f; border-color: var(--amber); }
.hub-legend-dot { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: var(--cat, var(--amber)); flex: 0 0 auto; }
.hub-legend-item.is-all .hub-legend-dot { background: var(--amber); }
.hub-legend-count { color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.hub-legend-item[aria-pressed="true"] .hub-legend-count { color: var(--amber); }
.hub-map-status { margin: 0 0 1.6rem !important; color: var(--on-dark-muted); font: 600 var(--text-xs) var(--font-body); }
.hub-dot-map { position: relative; margin: 0; padding: 1.25rem; border: var(--border-bold); border-radius: var(--radius-lg); background: var(--bg); color: var(--ink); box-shadow: 6px 6px 0 var(--amber); transform: rotate(var(--tilt)); }
.hub-dot-map .hub-dot-map-preview { display: block; width: 100%; max-height: 560px; }   /* solo la vista previa: Leaflet dibuja los puntos en su propio <svg> y no debe redimensionarse */
.hub-home-map { position: relative; min-height: 420px; border-radius: var(--radius-md); background: var(--bg); }
.hub-home-map.is-live { height: min(560px, 60vh); z-index: 0; }   /* z-index: Leaflet crea sus propias capas apiladas */
.hub-home-map .leaflet-container { border-radius: var(--radius-md); font-family: var(--font-body); }
.hub-home-map .leaflet-interactive:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.hub-dot { stroke: var(--paper); stroke-width: .9; transform-box: fill-box; transform-origin: center; }
.hub-js .hub-dot-map .hub-dot-map-preview .hub-dot { opacity: 0; transform: scale(0); transition: opacity .4s, transform .5s var(--ease-bounce); transition-delay: calc(var(--i) * 6ms); }
.hub-js .hub-dot-map.is-visible .hub-dot-map-preview .hub-dot { opacity: 1; transform: scale(1); }
.hub-dot:hover { stroke: var(--ink); stroke-width: 1.5; }
.hub-dot-map figcaption { margin-top: .6rem; color: var(--muted); font: 600 .75rem var(--font-body); text-align: center; }

/* ---------- Spotlight ---------- */
.hub-spotlight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); }
.hub-spotlight-media { position: relative; aspect-ratio: 1.05; }
.hub-spotlight-media > img, .hub-spotlight-media > .hub-cover { width: 100%; height: 100%; object-fit: cover; border: var(--border-bold); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker-lg); }
.hub-spotlight-media .hub-sticker { position: absolute; left: -14px; bottom: 28px; }
.hub-spotlight h2 { font-size: var(--title-md); }
.hub-spotlight h2 em { color: var(--amber-ink); }  /* fondo claro: el registro decorativo usa la variante oscura */
.hub-spotlight h3 { margin-top: 1rem; font-size: var(--title-sm); }
.hub-spotlight .hub-chip { margin-top: .5rem; }

/* ---------- Story ---------- */
.hub-story { border-block: var(--border-bold); background: var(--tint); }   /* el ambar se reserva para la llamada final */
.hub-story h2 em { color: var(--amber-ink); }

.hub-story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); }
.hub-story-photo { position: relative; }
.hub-story-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--border-bold); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker-lg); }
.hub-story-seal { position: absolute; right: -30px; top: -40px; width: 130px; color: var(--ink); animation: hub-spin 36s linear infinite reverse; }

/* ---------- Impact ---------- */
.hub-impact-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.hub-impact-grid article { position: relative; padding: 1.4rem 1.3rem 1.5rem; overflow: hidden; border: var(--border-bold); border-radius: var(--radius-md); background: var(--paper); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.hub-impact-grid article:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-sticker); }   /* mismo gesto que el resto de tarjetas del sitio */
.hub-impact-number { position: absolute; top: .5rem; right: .9rem; color: var(--amber); font: 700 3rem/1 var(--font-num); letter-spacing: .01em; opacity: .55; }   /* cifras = Big Shoulders, como el hero, las fechas y los monogramas */
.hub-impact-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 1.2rem; border-radius: var(--radius-sm); background: var(--ink); color: var(--amber); }
.hub-impact-icon .hub-icon { width: 26px; height: 26px; }
.hub-impact-grid h3 { min-height: 2lh; font-size: 1.3rem; }   /* dos lineas reservadas: el texto de las cinco tarjetas arranca a la misma altura */
.hub-impact-grid p { margin: 0; color: var(--muted); font-size: var(--text-sm); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hub-impact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .hub-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-map-teaser-grid, .hub-spotlight, .hub-story-grid { grid-template-columns: 1fr; }
  .hub-dot-map { max-width: 460px; justify-self: center; width: 100%; }
  .hub-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hub-hero .hub-actions > * { flex: 1 1 100%; }
  .hub-search-chips { justify-content: flex-start; }
  .hub-bento-0, .hub-bento-1 { grid-column: span 2; }
  .hub-bento-0 { grid-row: span 1; min-height: 260px; }
  .hub-bento-card { min-height: 170px; padding: 1rem; border-radius: var(--radius-md); }
  .hub-bento-icon { width: 46px; height: 46px; }
  .hub-bento-arrow { width: 36px; height: 36px; top: .9rem; right: .9rem; }
  .hub-impact-grid { grid-template-columns: 1fr 1fr; }
  .hub-impact-grid article:last-child { grid-column: 1 / -1; }
  .hub-story-seal { width: 90px; right: -10px; top: -30px; }
  .hub-stats p { padding-inline: .2rem; }
}
@media (max-width: 420px) { .hub-impact-grid { grid-template-columns: 1fr; } }