/* ===========================================================
   Inline Match Panel (inline-match.js)
   Host-side styles only — the match detail itself is styled by
   match-detail.css / standings.css / fan-comments.css, which the
   loader injects dynamically on first mount.
   =========================================================== */

/* The panel replaces the content of the host container
   (.news-column-inner / .league-main-side / .team-main-side).
   Offset the scroll landing below the sticky site header. */
.inline-match-open-host {
  scroll-margin-top: 90px;
}

/* ── Open-panel host column: sticky, viewport-capped scroll region ──────
   While the inline match detail is showing, the host right-hand column
   becomes a sticky scroll area capped to the viewport, so the match stays
   in view while the (taller) fixtures column scrolls. Scoped to
   .inline-match-open on <html> — added by inline-match.js on mount and
   removed on close — so the normal news / standings / tab layout is never
   affected. It also never applies at <=991.98px, where fixture clicks
   navigate to the standalone page instead of mounting (MOBILE_QUERY).
   Offsets mirror the existing sticky bars: the site header is .sticky-top
   (--header-height); league/team add a 50px sticky tabs bar below it, so
   their column clears both. Uses the default browser scrollbar. */

/* Home: the panel mounts into .news-column-inner inside the .col-lg-7 right
   column — cap + scroll the OUTER column. align-self:flex-start overrides the
   Bootstrap .row stretch so position:sticky has room to move. */
.inline-match-open .col-lg-7:has(> .news-column-inner.inline-match-open-host) {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  align-self: flex-start;
  max-height: calc(100vh - var(--header-height) - 48px);
  overflow-y: auto;
}

/* League / Team: the mount container IS the column, and a 50px sticky tabs
   bar sits between it and the header, so the sticky top clears both. */
.inline-match-open .league-main-side.inline-match-open-host,
.inline-match-open .team-main-side.inline-match-open-host {
  position: sticky;
  top: calc(var(--header-height) + 50px + 24px);
  align-self: flex-start;
  max-height: calc(100vh - var(--header-height) - 50px - 48px);
  overflow-y: auto;
}

/* The injected match detail carries its own sticky tab bar (.match-tabs,
   top: var(--header-height)) meant for the standalone page. Inside the
   now-scrolling host column it would stick to the column's scroll box and
   leave a 60px gap above the tabs, so pin it back to normal flow — the
   column itself is the sticky/scroll surface now. */
.inline-match-open-host .match-tabs {
  position: static;
}

/* ── Loading state ─────────────────────────────────────────── */
.inline-match-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 320px;
  padding: 48px 16px;
}

.inline-match-loading .spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent-primary);
}

.inline-match-loading-text {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── Error state ───────────────────────────────────────────── */
.inline-match-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 240px;
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
}

.inline-match-error-icon {
  font-size: 1.6rem;
  color: var(--accent-red);
}

.inline-match-error-msg {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.inline-match-error-link {
  display: inline-block;
  margin-top: 4px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--accent-primary);
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.inline-match-error-link:hover {
  opacity: 0.85;
  color: var(--text-primary);
}

/* Note: league/team tab bars intentionally stay visible while a match
   panel is open — clicking any tab closes the panel and restores the
   original tab content (handled by inline-match.js). */