/* ═══════════════════════════════════════════════════════════════════════════
   Gladiator Sports — feed.css
   ───────────────────────────────────────────────────────────────────────────
   The signed-in, TikTok-style event feed (feed.html). Loaded only on that page so
   styles.css / portal.css stay cache-stable. Inherits every token + component from
   styles.css (.btn, .chiplet, .form-card) and reuses portal.css's .filter-chip(s)
   for the kind filters. This file adds the immersive full-height layout: a flex
   column shell, the vertical scroll-snap feed, the slide overlay, the right-rail
   actions, the Feed/Map toggle, and the immersive map container.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shell: lock the viewport, let only the feed scroll ──────────────────────
   Scoped to .feed-body so these viewport rules never leak to other pages. */
.feed-body {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.feed-body .site-header,
.feed-body .og-subnav { flex: 0 0 auto; }

/* Several feed regions set an explicit `display`, which would otherwise beat the
   UA `[hidden] { display: none }` (equal specificity, author wins). Restore the
   hidden-attribute toggle so feed.js can show/hide the gate, controls, views. */
.feed-body [hidden] { display: none !important; }

.feed-main {
  flex: 1 1 auto;
  min-height: 0;            /* let the inner scroller own the overflow */
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* ── Control bar: Feed/Map toggle + kind filters ─────────────────────────── */
.feed-controls {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 18px; flex-wrap: wrap;
  padding: 11px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(180deg, rgba(16,14,10,0.72), rgba(10,9,7,0.42));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  position: relative; z-index: 4;
}
.feed-controls .filter-chips { margin: 0; }

/* Segmented Feed | Map toggle */
.feed-seg {
  display: inline-flex; padding: 3px; gap: 3px;
  border: 1px solid var(--border-gold); border-radius: 999px;
  background: rgba(240,234,214,0.04);
}
.feed-seg__btn {
  appearance: none; cursor: pointer; border: 0; background: none;
  font-family: var(--display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: 7px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px;
  transition: color .16s ease, background .16s ease;
}
.feed-seg__btn svg { width: 15px; height: 15px; }
.feed-seg__btn:hover { color: var(--gold-light); }
.feed-seg__btn[aria-pressed="true"] { color: #0c0b08; background: var(--gold); }

/* ── Sign-in gate ────────────────────────────────────────────────────────── */
.feed-gate { flex: 1 1 auto; display: grid; place-items: center; padding: 24px; }
.feed-gate .empty { max-width: 460px; }

/* ── The vertical scroll-snap feed ───────────────────────────────────────── */
.feed {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; scroll-behavior: smooth;
  scrollbar-width: none;            /* Firefox */
  overscroll-behavior: contain;
}
.feed::-webkit-scrollbar { display: none; }      /* WebKit */
@media (prefers-reduced-motion: reduce) { .feed { scroll-behavior: auto; } }

.slide {
  /* min-height (not a fixed height) so a slide that's taller than the viewport —
     a long title, lots of stats, a short phone — grows and stays fully scrollable
     instead of clipping its top. Short slides still fill the screen, bottom-anchored. */
  min-height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
}

/* Full-bleed sport imagery + readability scrim */
.slide__bg { position: absolute; inset: 0; z-index: 0; }
.slide__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,6,5,0.55) 0%, rgba(6,6,5,0.10) 22%, rgba(6,6,5,0.20) 55%, rgba(6,6,5,0.86) 100%);
}

.slide__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 920px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 52px) clamp(30px, 7vh, 72px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}

.slide__content { flex: 1 1 auto; min-width: 0; }
.slide__kind {
  font-family: var(--display); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-light);
}
.slide__title {
  font-family: var(--display); font-weight: 800; line-height: 1.04; color: var(--ink);
  font-size: clamp(30px, 6.4vw, 56px); margin: 7px 0 6px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.slide__meta { color: var(--ink-soft); font-size: clamp(15px, 2vw, 18px); }

.slide__stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.slide__stat {
  border: 1px solid var(--border-gold); border-radius: 10px; padding: 8px 14px;
  background: rgba(12,11,8,0.4); backdrop-filter: blur(3px);
}
.slide__stat span { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.slide__stat strong { font-family: var(--display); font-size: 17px; color: var(--gold-light); }
.slide__stat--free strong { color: #7bd88f; }

.slide__progress { margin: 14px 0 18px; max-width: 340px; }
.slide__progress .progress { margin-top: 6px; }
.slide__progtext { font-size: 13.5px; color: var(--muted); }

.slide__cta { margin-top: 4px; }

/* ── Right-rail app-style actions (Save / Share) ─────────────────────────── */
.slide__rail { flex: 0 0 auto; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.feed-act {
  appearance: none; cursor: pointer; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--ink); font-family: var(--display); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
}
.feed-act__btn {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-gold); background: rgba(12,11,8,0.5); backdrop-filter: blur(4px);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  color: var(--ink-soft);
}
.feed-act svg { width: 21px; height: 21px; }
.feed-act:hover .feed-act__btn { transform: scale(1.08); border-color: var(--gold); color: var(--gold-light); }
.feed-act:focus-visible .feed-act__btn { outline: 2px solid var(--gold); outline-offset: 2px; }
.feed-act.is-on .feed-act__btn { background: var(--gold); border-color: var(--gold); color: #0c0b08; }
.feed-act__label { opacity: .85; }

/* ── Scroll hint (fades once the user scrolls) ───────────────────────────── */
.feed-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 3; pointer-events: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); background: rgba(8,7,5,0.5); border: 1px solid var(--border-gold);
  padding: 7px 14px; border-radius: 999px; backdrop-filter: blur(4px);
  transition: opacity .4s ease;
}
.feed-hint svg { width: 14px; height: 14px; animation: feed-bob 1.6s ease-in-out infinite; }
.feed-main.is-scrolled .feed-hint { opacity: 0; }
@keyframes feed-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .feed-hint svg { animation: none; } }

/* ── Empty state inside the feed ─────────────────────────────────────────── */
.feed-empty { flex: 1 1 auto; display: grid; place-items: center; padding: 24px; }
.feed-empty .empty { max-width: 460px; }

/* ── Immersive map view (relocated globe) ────────────────────────────────── */
.feed-map { flex: 1 1 auto; min-height: 0; position: relative; }
.feed-globe { position: absolute; inset: 0; background: #0a0604; }
/* Same explicit land/water painting as the public page used — only a light boost. */
.feed-globe .maplibregl-canvas { filter: saturate(1.05) contrast(1.04); }
.feed-map__legend {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: rgba(240,234,214,0.7);
  background: rgba(8,7,5,0.55); border: 1px solid var(--border-gold); padding: 8px 14px; border-radius: 10px;
  backdrop-filter: blur(4px);
}
.feed-map__legend span { display: inline-flex; align-items: center; gap: 7px; }
.feed-map__legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.feed-map__legend i.lg-tournament { background: #d39a3c; box-shadow: 0 0 8px 1px rgba(211,154,60,0.7); }
.feed-map__legend i.lg-game { background: #d23b3b; box-shadow: 0 0 8px 1px rgba(210,59,59,0.7); }
.feed-map__legend i.lg-pickup { background: #9fb0c3; box-shadow: 0 0 8px 1px rgba(159,176,195,0.7); }

/* The globe's gladiator pin + dark popup styles (copied from the old events.html
   inline block, since that page no longer loads them). */
.gs-pin { appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; width: 18px; height: 18px; line-height: 0;
  --pin-core:#ffe9a8; --pin-edge:#c9a24d; --pin-deep:#8a6a1f; --pin-ring:rgba(201,162,77,.22); --pin-glow:rgba(201,162,77,.55); }
.gs-pin--game   { --pin-core:#ffc9c0; --pin-edge:#d23b3b; --pin-deep:#7a1717; --pin-ring:rgba(210,59,59,.26); --pin-glow:rgba(210,59,59,.6); }
.gs-pin--pickup { --pin-core:#eaf2fb; --pin-edge:#9fb0c3; --pin-deep:#566677; --pin-ring:rgba(159,176,195,.26); --pin-glow:rgba(159,176,195,.55); }
.gs-pin--league { --pin-core:#bfe9c8; --pin-edge:#3f9d63; --pin-deep:#1d5734; --pin-ring:rgba(63,157,99,.26); --pin-glow:rgba(63,157,99,.55); }
.gs-pin__dot {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--pin-core), var(--pin-edge) 62%, var(--pin-deep));
  box-shadow: 0 0 0 3px var(--pin-ring), 0 0 14px 3px var(--pin-glow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gs-pin:hover .gs-pin__dot, .gs-pin:focus-visible .gs-pin__dot {
  transform: scale(1.28); box-shadow: 0 0 0 4px var(--pin-ring), 0 0 22px 7px var(--pin-glow);
}
.maplibregl-popup-content {
  background: #12110e; color: #f0ead6; border: 1px solid var(--border-gold);
  border-radius: 12px; padding: 14px 16px; box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.maplibregl-popup-tip { display: none; }
.maplibregl-popup-close-button { color: rgba(240,234,214,.65); font-size: 18px; padding: 0 8px 2px; }
.gs-pop__kind { font-family: "Cinzel", serif; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.gs-pop__title { font-family: "Cinzel", serif; font-size: 17px; font-weight: 700; line-height: 1.2; margin: 3px 0 4px; }
.gs-pop__meta { font-size: 13.5px; color: rgba(240,234,214,.66); margin-bottom: 11px; }
.gs-pop__row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.gs-pop__fee { font-family: "Cinzel", serif; font-weight: 700; color: var(--gold-light); }
.gs-pop__free { color: #7bd88f; }
.gs-pop__cta { font-size: 13px; color: var(--gold-light); text-decoration: none; white-space: nowrap; }
.gs-pop__cta:hover { text-decoration: underline; }
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-ctrl-group button { background: #15140f; }

/* ── Responsive: reclaim the screen on phones ────────────────────────────────
   On a phone the stacked chrome (header + portal sub-nav + Feed/Map toggle +
   filter chips) was eating ~half the viewport and the slide content was being
   pushed under the fold. Slim every bar to a single row and compact the slide so
   a typical event fits comfortably in one screen — while min-height on .slide
   keeps anything taller fully scrollable. */
@media (max-width: 600px) {
  /* Looser snapping on phones: free-scroll to read a tall slide, then it settles. */
  .feed { scroll-snap-type: y proximity; }

  /* The slim phone header + single-row portal sub-nav are shared across every
     app-shell page — see portal.css. This file only handles the feed itself. */

  /* Control bar: keep the Feed/Map toggle fixed and let the filter chips scroll
     sideways on one line, instead of wrapping the chips to three rows. */
  .feed-controls { flex-wrap: nowrap; gap: 10px; padding: 8px clamp(12px, 4vw, 40px); }
  .feed-controls .feed-seg { flex: 0 0 auto; }
  .feed-controls .filter-chips { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .feed-controls .filter-chips::-webkit-scrollbar { display: none; }
  .feed-controls .filter-chip { flex: 0 0 auto; }

  /* Slide content: tighten type and spacing so the title → CTA all fit. */
  .slide__inner { padding-bottom: clamp(18px, 5vh, 40px); gap: 10px; }
  .slide__title { font-size: clamp(26px, 7.4vw, 38px); margin: 5px 0 5px; }
  .slide__meta { font-size: 14px; }
  .slide__stats { gap: 7px; margin: 11px 0 2px; }
  .slide__stat { padding: 6px 11px; }
  .slide__stat strong { font-size: 15px; }
  .slide__progress { margin: 10px 0 12px; }
  .slide__rail { gap: 12px; }
  .feed-act__btn { width: 44px; height: 44px; }
  .feed-act svg { width: 19px; height: 19px; }
}