/* ==========================================================================
   Ignite™ v2.0.2 — Netflix-style content rows
   Sports University · sportsu.pro
   ========================================================================== */

:root {
  --ig-accent:      #00ffc8;
  --ig-accent-2:    #7b5cf0;
  --ig-radius:      8px;
  --ig-gap:         12px;
  --ig-transition:  .22s cubic-bezier(.4,0,.2,1);
  --ig-overlay:     linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 55%, transparent 100%);

}

/* ── Sticky header ─────────────────────────────────────────────────────────── */
/*
 * position: sticky requires NO ancestor with overflow: hidden/auto/scroll.
 * BuddyBoss sometimes wraps content in such a container.
 * The JS in class-ignite-header.php sets top dynamically.
 * Background is TRANSPARENT so BB dark mode controls it naturally.
 */
.ignite-header {
  position: sticky;
  top: 0; /* overridden by JS to sit below BB header */
  z-index: 100; /* BB nav dropdowns use 9999 — stay well below */
  /* transparent — inherits site/BB theme bg color */
  background: inherit;
  /* fallback: if inherit gives nothing, use the page background-color */
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* Force a background so content doesn't show through while scrolling */
  -webkit-backdrop-filter: blur(0); /* triggers compositing layer for sticky */
}

/*
 * Explicit white bg for light mode — only set on the element, never :root.
 * BB dark toggle adds body.bb-dark-mode which overrides below.
 */
.ignite-header {
  background-color: #fff;
}
body.bb-dark-mode .ignite-header {
  background-color: var(--bb-content-bg, #1a1a1a);
}

/* ── Logo — 300–400px wide, height auto (never cropped) ─────────────────── */
.ignite-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ignite-header__logo img {
  width: 100%;
  max-width: 340px;
  min-width: 200px;
  height: auto; /* never crop — natural aspect ratio */
  display: block;
}

/* ── Search bar ─────────────────────────────────────────────────────────── */
.ignite-header__search {
  width: 100%;
  max-width: 420px;
  position: relative;
  display: flex;
  align-items: center;
}
.ignite-header__search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0,0,0,.38);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}
body.bb-dark-mode .ignite-header__search-icon { color: rgba(255,255,255,.4); }

.ignite-header__search input {
  width: 100%;
  height: 36px;
  padding: 0 34px 0 33px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  font-size: .85rem;
  color: inherit;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color var(--ig-transition);
}
.ignite-header__search input::placeholder { color: rgba(0,0,0,.35); }
.ignite-header__search input:focus       { border-color: var(--ig-accent); }

body.bb-dark-mode .ignite-header__search input {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: inherit;
}
body.bb-dark-mode .ignite-header__search input::placeholder { color: rgba(255,255,255,.35); }

.ignite-header__search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(0,0,0,.4);
  display: none;
  align-items: center;
  padding: 0;
  line-height: 1;
}
.ignite-header__search-clear.visible { display: flex; }
body.bb-dark-mode .ignite-header__search-clear { color: rgba(255,255,255,.4); }

/* ── Search results ─────────────────────────────────────────────────────── */
.ignite-search-results {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 24px;
}
.ignite-search-results.visible { display: flex; }

.ignite-search-results__meta {
  font-size: .72rem;
  color: rgba(0,0,0,.45);
  padding-bottom: 2px;
}
body.bb-dark-mode .ignite-search-results__meta { color: rgba(255,255,255,.4); }

.ignite-search-card {
  display: flex;
  border-radius: var(--ig-radius);
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--ig-transition);
}
.ignite-search-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); text-decoration: none; color: inherit; }
body.bb-dark-mode .ignite-search-card { border-color: rgba(255,255,255,.08); }

.ignite-search-card__thumb {
  width: 100px;
  height: 68px;
  flex-shrink: 0;
  overflow: hidden;
  background: #e8e8e8;
}
.ignite-search-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ignite-search-card__body {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  justify-content: center;
}
.ignite-search-card__author { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ig-accent); }
.ignite-search-card__title  { font-size: .82rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ignite-search-card__tags   { display: flex; flex-wrap: wrap; gap: 3px; list-style: none; padding: 0; margin: 0; }

/* ── Content rows wrapper ───────────────────────────────────────────────── */
.ignite-content-rows { padding: 32px 0 40px; }

/* ── Row ────────────────────────────────────────────────────────────────── */
.ignite-row { margin-bottom: 22px; }

.ignite-row__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 16px 10px;
}
.ignite-row__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.ignite-row__title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background: var(--ig-accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.ignite-row__see-all {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #495258;
  text-decoration: none;
  opacity: .9;
  transition: opacity var(--ig-transition), color var(--ig-transition);
  white-space: nowrap;
}
.ignite-row__see-all:hover { opacity: 1; color: #2e5c3a; text-decoration: none; }

/* Per-row accent colours */
.ignite-row--spotlight   .ignite-row__title::before { background: #f59e0b; }
.ignite-row--latest      .ignite-row__title::before { background: var(--ig-accent); }
.ignite-row--featured    .ignite-row__title::before { background: #f97316; }
.ignite-row--trending    .ignite-row__title::before { background: #ef4444; }
.ignite-row--flexpass    .ignite-row__title::before { background: var(--ig-accent-2); }
.ignite-row--battlepack  .ignite-row__title::before { background: #3b82f6; }
.ignite-row--technology  .ignite-row__title::before { background: #10b981; }

/* ── Track ──────────────────────────────────────────────────────────────── */
.ignite-row__track-wrap { position: relative; }

.ignite-row__track {
  display: flex;
  gap: var(--ig-gap);
  padding: 4px 16px 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.ignite-row__track::-webkit-scrollbar { display: none; }

/* ── Nav buttons ────────────────────────────────────────────────────────── */
.ignite-row__nav {
  position: absolute;
  top: 0; bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  width: 32px;
  background: rgba(100,100,100,.45) !important;
  border: none;
  cursor: pointer;
  color: #2c3236 !important;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ig-transition);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ignite-row__nav svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
  stroke: #2c3236 !important;
  color: #2c3236 !important;
}
.ignite-row__nav--prev { left: 0;  border-radius: 0 var(--ig-radius) var(--ig-radius) 0; }
.ignite-row__nav--next { right: 0; border-radius: var(--ig-radius) 0 0 var(--ig-radius); }
.ignite-row__track-wrap:hover .ignite-row__nav,
.ignite-row__track-wrap:focus-within .ignite-row__nav { opacity: 1; pointer-events: auto; }
.ignite-row__nav:hover,
.ignite-row__nav:focus { opacity: 1; color: #2c3236 !important; background: none !important; }
.ignite-row__nav:hover svg,
.ignite-row__nav:focus svg { stroke: #2c3236 !important; }
.ignite-row__nav[disabled] { opacity: 0 !important; pointer-events: none !important; }

body.bb-dark-mode {
  --ig-overlay:   linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.4) 55%, transparent 100%);
}

/* ── Card — desktop: auto-fit fluid; mobile: 90% peek ───────────────────── */
/*
 * Card sizing strategy:
 *
 * Mobile (≤640px): 90% track width — one card fills view, ~10% peek shows next.
 *
 * Desktop: cards are a consistent fixed width so all cards in a row are
 * identical in size. We use calc() so that N cards + the 10% peek fit cleanly:
 *   - width = (track_width / N) - gap
 *   - track_width ≈ 90vw (accounting for page padding)
 *   - At ~1400px: (90vw / 4) - gap ≈ 3 full cards + peek of 4th
 *   - At ~1024px: (90vw / 3) - gap ≈ 2 full cards + peek of 3rd
 *
 * Using container-relative sizing via vw keeps all cards the same width
 * at any given viewport — no card is ever a different size than its siblings.
 */
.ignite-card {
  flex-shrink: 0;
  width: calc(28vw - var(--ig-gap)); /* ~3.5 cards visible on 1024px+, consistent sizing */
  scroll-snap-align: start;
  border-radius: var(--ig-radius);
  overflow: visible;
  border: 1px solid rgba(0,0,0,.08);
  transition: transform var(--ig-transition), box-shadow var(--ig-transition);
  will-change: transform;
}
/* Only apply hover effects on devices with a real pointer (desktop) */
@media (hover: hover) and (pointer: fine) {
  .ignite-card:hover {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 10px 32px rgba(0,0,0,.12);
    z-index: 5;
    position: relative;
  }
  }
body.bb-dark-mode .ignite-card { border-color: rgba(255,255,255,.08); }

.ignite-card__link { display: block; text-decoration: none; color: inherit; }
.ignite-card__link:hover,
.ignite-card__link:focus { text-decoration: none; color: inherit; }

/* ── Thumbnail — true 16:9 via padding-bottom ───────────────────────────── */
.ignite-card__thumb-clip {
  border-radius: var(--ig-radius) var(--ig-radius) 0 0;
  overflow: hidden;
}
.ignite-card__thumb {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 — never distorts */
  overflow: hidden;
  background: #e8e8e8;
}
.ignite-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .38s cubic-bezier(.25,.46,.45,.94);
}
.ignite-card__img--placeholder { position: absolute; inset: 0; background: #e8e8e8; }
.ignite-card__overlay { position: absolute; inset: 0; background: var(--ig-overlay); pointer-events: none; }

/* ── Card body ──────────────────────────────────────────────────────────── */
.ignite-card__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: 0 0 var(--ig-radius) var(--ig-radius);
}

/* ── Authors ────────────────────────────────────────────────────────────── */
.ignite-card__authors { display: flex; flex-direction: column; gap: 3px; }
.ignite-card__author  { display: flex; align-items: center; gap: 6px; }
.ignite-card__avatar  {
  width: 20px; height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.1);
}
.ignite-card__author-name {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #a800ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ignite-card__authors:has(.ignite-card__author:nth-child(2)) .ignite-card__author-name { font-size: .62rem; }

/* ── Title — larger on bigger cards ────────────────────────────────────── */
.ignite-card__title-link { text-decoration: none; color: inherit; }
.ignite-card__title-link:hover { text-decoration: none; color: inherit; }

.ignite-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Tags ───────────────────────────────────────────────────────────────── */
.ignite-card__tag-wrap { position: relative; }
.ignite-card__tags {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px;
  align-items: center;
}
.ignite-card__tag-item--hidden { display: none; }

.ignite-card__tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.6;
  background: rgba(168,0,255,.08);
  color: #a800ff;
  border: 1px solid rgba(168,0,255,.25);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ig-transition), color var(--ig-transition);
  vertical-align: middle;
}
.ignite-card__tag:hover { background: #a800ff; color: #fff; text-decoration: none; }

.ignite-card__tag-more {
  appearance: none; -webkit-appearance: none;
  margin: 0; box-sizing: border-box;
  cursor: pointer; background: transparent;
  font-family: inherit;
  font-size: .55rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  line-height: 1.6;
}
.ignite-card__tag-more:hover { background: rgba(0,255,200,.1); }

.ignite-card__tag-dropdown {
  list-style: none;
  padding: 6px; margin: 4px 0 0;
  display: flex; flex-wrap: wrap; gap: 4px;
  position: absolute;
  bottom: calc(100% + 4px); left: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  min-width: 160px; max-width: 220px;
}
body.bb-dark-mode .ignite-card__tag-dropdown {
  background: #1e1e1e;
  border-color: rgba(255,255,255,.1);
}
.ignite-card__tag-dropdown[hidden] { display: none; }

/* ── Responsive card widths — consistent sizing at every breakpoint ────────
 * All cards in a row are always the same width. vw-based so they scale
 * together rather than each card being independently sized.
 * Each breakpoint is tuned so N full cards + the ~10% peek fit cleanly.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Large desktop 1400px+: ~4 cards + peek */
@media (min-width: 1400px) {
  .ignite-card { width: calc(22vw - var(--ig-gap)); }
}
/* Desktop 1024–1399px: ~3 cards + peek */
@media (min-width: 1024px) and (max-width: 1399px) {
  .ignite-card { width: calc(28vw - var(--ig-gap)); }
}
/* Tablet 768–1023px: ~2.5 cards + peek */
@media (min-width: 768px) and (max-width: 1023px) {
  .ignite-card { width: calc(36vw - var(--ig-gap)); }
}

/* ── Mobile — prevent iOS auto-zoom on input focus ─────────────────────── */
@media (max-width: 768px) {
  .ignite-header__search input { font-size: 16px; } /* iOS zooms if < 16px */
}

/* ── Mobile — 90% peek ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ignite-card {
    width: calc(90% - var(--ig-gap));
  }
  .ignite-row__track  { padding-left: 12px; padding-right: 12px; }
  .ignite-row__header { padding-left: 12px; padding-right: 12px; }
  .ignite-row__nav    { display: none; }
  .ignite-header__logo img { max-width: 260px; }
  /* Mobile: single tag row only — +N handles overflow */
  .ignite-card__tags { flex-wrap: nowrap; overflow: hidden; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ignite-card, .ignite-card__img, .ignite-card__tag { transition: none; }
}

/* ── Filtered results page (See All) ──────────────────────────────────────── */
.ignite-filtered-results {
  padding: 0 0 40px;
}

.ignite-filtered-results__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 20px;
  flex-wrap: wrap;
}

/* Floating back button — same style as panel, reused for all hijacked views */
.ignite-filtered-results__back {
  position: fixed;
  right: 16px;
  top: 50vh;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(100,100,100,.55);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: background .18s, transform .18s;
  text-decoration: none;
  flex-shrink: 0;
}
.ignite-filtered-results__back:hover {
  background: rgba(80,80,80,.75);
  transform: translateY(-50%) scale(1.06);
  color: #fff;
  text-decoration: none;
}
.ignite-filtered-results__back svg {
  width: 37px !important;
  height: 37px !important;
  min-width: 37px;
  min-height: 37px;
  stroke-width: 2;
  margin-right: 2px;
  display: block;
}

.ignite-filtered-results__title {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
  flex: 1;
}

.ignite-filtered-results__count {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .45;
}

.ignite-filtered-results__empty {
  padding: 40px 16px;
  text-align: center;
  opacity: .45;
  font-size: .9rem;
}

/* Vertical grid — same card, stacked 2 columns on mobile, 3-4 on desktop */
.ignite-filtered-results__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 0 16px;
}

.ignite-filtered-results__grid .ignite-card {
  width: 100%; /* override the track-based width */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ignite™ Single Post Page
   ═══════════════════════════════════════════════════════════════════════════ */

.ignite-single-page {
  min-height: 100vh;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.ignite-single__hero {
  width: 100%;
  overflow: hidden;
  background: #e8e8e8;
  /* Negative margin to break out of any theme container padding */
  margin-left: calc(-1 * var(--ignite-site-padding, 0px));
  margin-right: calc(-1 * var(--ignite-site-padding, 0px));
  width: calc(100% + (var(--ignite-site-padding, 0px) * 2));
}
.ignite-single__hero-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ── Content wrap ──────────────────────────────────────────────────────────── */
.ignite-single__content-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 14px 40px;
}
@media (min-width: 640px) {
  .ignite-single__content-wrap { padding: 28px 20px 40px; }
}
@media (min-width: 1024px) {
  .ignite-single__content-wrap { padding: 32px 32px 60px; }
}

/* ── Meta tags ─────────────────────────────────────────────────────────────── */
.ignite-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

/* ── Title ─────────────────────────────────────────────────────────────────── */
.ignite-single__title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
}
@media (max-width: 640px) {
  .ignite-single__title { font-size: 1.4rem; }
}

/* ── Byline ────────────────────────────────────────────────────────────────── */
.ignite-single__byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.ignite-single__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.1);
}

.ignite-single__byline-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center; /* vertically center both lines against avatar */
}

.ignite-single__author {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #a800ff;
}

.ignite-single__date {
  font-size: .75rem;
  opacity: .5;
}

/* ── Action bars ───────────────────────────────────────────────────────────── */
.ignite-single__actions-top {
  margin-bottom: 28px;
  /* no border — byline sits directly above */
}
.ignite-single__actions-bottom {
  margin-top: 24px;
}

/* ── Body content ──────────────────────────────────────────────────────────── */
.ignite-single__body {
  font-size: 1rem;
  line-height: 1.8;
}
/* Images in body go edge to edge on mobile */
@media (max-width: 640px) {
  .ignite-single__body img,
  .ignite-single__body figure,
  .ignite-single__body .wp-block-image {
    margin-left: -14px;
    margin-right: -14px;
    width: calc(100% + 28px);
    max-width: calc(100% + 28px);
  }
  .ignite-single__body img { border-radius: 0; }
}
.ignite-single__body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 16px 0;
}
.ignite-single__body h2 { font-size: 1.4rem; font-weight: 700; margin: 32px 0 12px; }
.ignite-single__body h3 { font-size: 1.2rem; font-weight: 700; margin: 24px 0 10px; }
.ignite-single__body p  { margin: 0 0 18px; }
.ignite-single__body ul,
.ignite-single__body ol { padding-left: 24px; margin: 0 0 18px; }
.ignite-single__body li { margin-bottom: 8px; }
.ignite-single__body a  { color: #a800ff; }
.ignite-single__body blockquote {
  border-left: 3px solid #a800ff;
  margin: 20px 0;
  padding: 8px 20px;
  opacity: .8;
  font-style: italic;
}

/* ── Bottom tags ───────────────────────────────────────────────────────────── */
.ignite-single__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  margin-bottom: 0; /* bottom action bar border-top provides the separator */
}
.ignite-single__tags-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .45;
  margin-right: 4px;
}

/* ── Comments ──────────────────────────────────────────────────────────────── */
.ignite-single__comments {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(0,0,0,.07);
}
body.bb-dark-mode .ignite-single__comments { border-top-color: rgba(255,255,255,.07); }

/* ── Related posts row ─────────────────────────────────────────────────────── */
.ignite-single__related {
  padding: 0 0 40px;
  margin-top: 0;
}

/* ── Related posts row title — smaller on mobile ─────────────────────────── */
.ignite-single__related .ignite-row__title {
  font-size: 1.1rem;
}
@media (min-width: 640px) {
  .ignite-single__related .ignite-row__title { font-size: 1.5rem; }
}

/* ── Override BB theme container on single post page ─────────────────────── */
/* BB wraps content in a padded white card — neutralize it for Ignite™ posts */
.ignite-single-page,
.ignite-single-page .entry-content,
.ignite-single-page .container,
.ignite-single-page .site-content,
.ignite-single-page #content,
.ignite-single-page .content-area,
.ignite-single-page .bb-grid-cell,
.ignite-single-page #buddypress {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Remove BB's inner content box styling on single posts */
body.single-post .bb-grid-cell,
body.single-post .site-layout-boxed .site-inner,
body.single-post .content-area {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── Scoped to ignite-single-post body class ─────────────────────────────── */
body.ignite-single-post .bb-grid-cell,
body.ignite-single-post .site-content,
body.ignite-single-post #content,
body.ignite-single-post .content-area,
body.ignite-single-post .entry-wrap,
body.ignite-single-post .post-content-area,
body.ignite-single-post .bb-content-inner {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── Single post hero — sits below BB header + Ignite™ header ───────────── */
/* The Ignite™ header is sticky and sits below the BB header.
   Hero needs a top margin equal to the Ignite™ header height (~90px).
   JS in ignite-rows.js sets --ignite-header-h on :root — we use that. */
body.ignite-single-post .ignite-single__hero {
  margin-top: 0; /* hero is the first element, headers are sticky above it */
}
/* Ensure the sticky header doesn't overlap hero content */
body.ignite-single-post .ignite-header {
  position: sticky;
  top: var(--bb-header-height, 56px);
}

/* ── VideoPress / video block — force correct centering on mobile ─────────── */
.wp-block-jetpack-videopress,
.wp-block-video {
  display: block !important;
  max-width: 200px !important;
  width: 200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  /* Reset any transform or positioning that could shift it right */
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* The iframe/video inside must match the container */
.wp-block-jetpack-videopress iframe,
.wp-block-jetpack-videopress video,
.wp-block-video video,
.wp-block-video iframe {
  width: 100% !important;
  max-width: 200px !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Override any VideoPress JS-injected inline styles */
.wp-block-jetpack-videopress .jetpack-videopress-player,
.wp-block-jetpack-videopress .videopress-wrapper {
  width: 100% !important;
  max-width: 200px !important;
  margin: 0 auto !important;
}