/* ============================================================
   V97 — Blog listing redesign (premium gaming-commerce pass).
   Loads AFTER assets/css/pages/blogs.css and intentionally
   overrides its card/filter rules for the same markup:
     .col-md-6.col-xl-4 > article.bh-card
       a.img > img
       .body > .meta (.cat + date + author) + h3 > a + p + a.read
   No markup hooks were renamed; inline styles that previously
   lived in blogs.php moved here.
   ============================================================ */

/* ---------- 1. Page backdrop ---------- */
.nx81-blogs-page {
  background:
    radial-gradient(900px 420px at 50% -80px, rgba(69, 248, 130, .085), transparent 70%),
    linear-gradient(180deg, #070b12, #060d14 45%, #05090f);
}

/* ---------- 2. Hero / breadcrumb ---------- */
.nx81-blogs-page .breadcumb-wrapper { position: relative; padding: 120px 0 96px; }
.nx81-blogs-page .breadcumb-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(620px 260px at 50% 100%, rgba(69, 248, 130, .12), transparent 72%),
    linear-gradient(180deg, rgba(7, 11, 18, .55), rgba(7, 11, 18, .92));
  pointer-events: none;
}
.nx81-blogs-page .breadcumb-content { position: relative; z-index: 2; }
.nx81-blogs-page .breadcumb-title {
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: .01em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .55);
}
.nx81-blogs-page .breadcumb-menu a:hover { color: #45f882; }

/* Section intro */
#blogs-hub .sec-subtitle { color: #45f882; letter-spacing: .12em; }
#blogs-hub .sec-title { font-family: 'Rajdhani', sans-serif; }
#blogs-hub .sec-title + p { max-width: 560px; margin-inline: auto; font-size: 14px; }

/* ---------- 3. Filter pills (match store .nxg-filter look) ---------- */
#blogs-hub .blogs-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
}
#blogs-hub .bf-btn {
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  font: 700 12px/1.2 'Poppins', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #93a0b4;
  background: rgba(8, 14, 21, .8);
  border: 1px solid rgba(139, 152, 178, .22);
  transition: all .18s ease;
}
#blogs-hub .bf-btn:hover {
  color: #eef2f8;
  border-color: rgba(69, 248, 130, .45);
  background: rgba(10, 18, 27, .92);
}
#blogs-hub .bf-btn.active {
  color: #04150a;
  background: linear-gradient(180deg, #5cff94, #37e874);
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(69, 248, 130, .32);
}

/* Honest counts on the category rail: the number is data, so it is set apart from
   the label rather than folded into it (the label text node stays translatable). */
#blogs-hub .bf-count {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 0 7px;
  min-width: 20px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: rgba(147, 160, 180, .9);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(139, 152, 178, .18);
}
#blogs-hub .bf-btn:hover .bf-count { color: #eef2f8; }
#blogs-hub .bf-btn.active .bf-count {
  color: #04150a;
  background: rgba(4, 21, 10, .16);
  border-color: rgba(4, 21, 10, .22);
}
/* A category with nothing published stays clickable — it just stops pretending. */
#blogs-hub .bf-btn.is-empty { opacity: .45; }
#blogs-hub .bf-btn.is-empty:hover { opacity: .75; }

/* ---------- 4. Search (pill input, was inline-styled) ---------- */
#blogs-hub .blogs-search {
  max-width: 680px;
  margin: 0 auto 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
#blogs-hub .blogs-search input[type="text"],
#blogs-hub .blogs-search input:not([type="hidden"]) {
  flex: 1;
  min-width: 220px;
  background: rgba(8, 14, 21, .85);
  border: 1px solid rgba(139, 152, 178, .22);
  border-radius: 999px;
  color: #eef2f8;
  padding: 12px 22px;
  font: 500 14px/1.4 'Poppins', sans-serif;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#blogs-hub .blogs-search input::placeholder { color: rgba(147, 160, 180, .65); }
#blogs-hub .blogs-search input:focus {
  outline: none;
  border-color: rgba(69, 248, 130, .6);
  background: rgba(9, 17, 26, .95);
  box-shadow: 0 0 0 3px rgba(69, 248, 130, .12);
}
#blogs-hub .blogs-search .th-btn { padding: 11px 28px; border-radius: 999px; }

/* Article-count line (was inline-styled in blogs.php) */
#blogs-hub .blogs-filters + p {
  font: 600 11px/1.4 'Poppins', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(147, 160, 180, .62) !important; /* .text-white-50 is !important */
  margin: 4px 0 28px;
}

/* ---------- 5. Cards ---------- */
#blogs-hub .bh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
#blogs-hub .bh-card:hover {
  transform: translateY(-6px);
  border-color: rgba(69, 248, 130, .55);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(69, 248, 130, .22),
    0 10px 42px rgba(69, 248, 130, .13);
}

/* Media: 16/9, rounded by card overflow, gradient scrim */
#blogs-hub .bh-card .img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;             /* overrides legacy fixed 190px */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
  background:
    radial-gradient(320px 160px at 70% 20%, rgba(69, 248, 130, .1), transparent 70%),
    linear-gradient(135deg, #0b1622, #07101a 55%, #081812);
}
#blogs-hub .bh-card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform .45s ease;
}
#blogs-hub .bh-card:hover .img img { transform: scale(1.06); }
#blogs-hub .bh-card .img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(5, 9, 15, .58));
  pointer-events: none;
}

/* Category pill overlays the image (element stays inside .meta) */
#blogs-hub .bh-card .meta .cat {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  padding: 5px 13px;
  border-radius: 999px;
  font: 700 10.5px/1.4 'Poppins', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #45f882;
  background: rgba(4, 17, 11, .78);
  border: 1px solid rgba(69, 248, 130, .38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

#blogs-hub .bh-card .body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
#blogs-hub .bh-card .meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* reading time is a 4th chip on narrow cards */
  gap: 6px 14px;
  color: rgba(147, 160, 180, .72);
  font: 500 12px/1.4 'Poppins', sans-serif;
  margin-bottom: 10px;
}
/* Reading time is rendered only when blogs.reading_time actually holds one. */
#blogs-hub .bh-card .meta .rt { white-space: nowrap; }
#blogs-hub .bh-card .meta .rt-num { font-weight: 600; color: rgba(238, 242, 248, .82); }
#blogs-hub .bh-card .meta i { color: rgba(69, 248, 130, .55); }
#blogs-hub .bh-card h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.32;
  color: #fff;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#blogs-hub .bh-card h3 a { color: inherit; transition: color .2s ease; }
#blogs-hub .bh-card h3 a:hover { color: #45f882; }
#blogs-hub .bh-card p {
  color: rgba(255, 255, 255, .55);
  font: 400 13.5px/1.7 'Poppins', sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* excerpt clamped to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 14px;
}
#blogs-hub .bh-card .read {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #45f882;
  font: 700 12px/1.2 'Poppins', sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
}
#blogs-hub .bh-card .read i { transition: transform .25s ease; }
#blogs-hub .bh-card:hover .read i { transform: translateX(4px); }

/* ---------- 6. Featured-first layout (desktop) ---------- */
@media (min-width: 1200px) {
  #blogs-hub .row.gy-4 > .col-md-6.col-xl-4:first-child { flex: 0 0 100%; max-width: 100%; }
  #blogs-hub .row.gy-4 > .col-md-6.col-xl-4:first-child .bh-card {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  }
  #blogs-hub .row.gy-4 > .col-md-6.col-xl-4:first-child .bh-card .img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
  }
  #blogs-hub .row.gy-4 > .col-md-6.col-xl-4:first-child .bh-card .img::after {
    background: linear-gradient(90deg, transparent 55%, rgba(5, 9, 15, .5));
  }
  #blogs-hub .row.gy-4 > .col-md-6.col-xl-4:first-child .bh-card .body {
    padding: 34px 38px;
    justify-content: center;
  }
  #blogs-hub .row.gy-4 > .col-md-6.col-xl-4:first-child .bh-card h3 { font-size: 28px; -webkit-line-clamp: 3; }
  #blogs-hub .row.gy-4 > .col-md-6.col-xl-4:first-child .bh-card p { font-size: 15px; -webkit-line-clamp: 3; }
  #blogs-hub .row.gy-4 > .col-md-6.col-xl-4:first-child .bh-card .meta .cat { top: 16px; inset-inline-start: 16px; }
  html[dir="rtl"] #blogs-hub .row.gy-4 > .col-md-6.col-xl-4:first-child .bh-card .img::after {
    background: linear-gradient(270deg, transparent 55%, rgba(5, 9, 15, .5));
  }
}

/* ---------- 7. Pagination (was inline-styled) ---------- */
#blogs-hub .nx-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 40px;
}
#blogs-hub .nx-pagination .bf-btn { min-width: 42px; text-align: center; padding: 10px 12px; }
#blogs-hub .nx-pagination .th-btn { padding: 10px 24px; border-radius: 999px; }

/* Empty state — the generic line, then a sentence that names the active filter. */
#blogs-hub .row.gy-4 > .col-12 p {
  font: 500 15px/1.7 'Poppins', sans-serif;
  color: rgba(147, 160, 180, .75);
}
#blogs-hub .nx-empty-hint {
  max-width: 460px;
  margin-inline: auto;
  color: rgba(147, 160, 180, .55) !important;
  font-size: 13.5px !important;
}
#blogs-hub .row.gy-4 > .col-12 .th-btn { margin-top: 8px; border-radius: 999px; padding: 10px 26px; }

/* ---------- 7b. Infinite scroll ---------- */
/* Server-rendered with [hidden]; assets/js/pages/blogs-infinite.js unhides it. */
#blogs-hub .nx-inf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  min-height: 48px;
}
#blogs-hub .nx-inf[hidden] { display: none; }
#blogs-hub .nx-inf-state {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  font: 600 12px/1.4 'Poppins', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(147, 160, 180, .7);
}
#blogs-hub .nx-inf-state[hidden] { display: none; }
#blogs-hub .nx-inf-error { color: #ff8f8f; }
#blogs-hub .nx-inf-error .th-btn {
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 11px;
}
#blogs-hub .nx-inf-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(69, 248, 130, .22);
  border-top-color: #45f882;
  animation: nx-inf-spin .7s linear infinite;
}
@keyframes nx-inf-spin { to { transform: rotate(360deg); } }
#blogs-hub .nx-inf-more { padding: 11px 30px; border-radius: 999px; }
#blogs-hub .nx-inf-more[hidden] { display: none; }
/* The observer target: zero-height, purely a scroll position marker. */
#blogs-hub .nx-inf-sentinel { width: 100%; height: 1px; }
/* Screen-reader-only announcement region ("12 more articles loaded."). */
#blogs-hub .nx-inf-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

/* ---------- 8. RTL ---------- */
/* Arrow icon points the correct reading direction. */
html[dir="rtl"] #blogs-hub .bh-card .read i { transform: scaleX(-1); }
html[dir="rtl"] #blogs-hub .bh-card:hover .read i { transform: scaleX(-1) translateX(4px); }
/* Tracking hurts Arabic glyph joining. */
html[dir="rtl"] #blogs-hub .bf-btn,
html[dir="rtl"] #blogs-hub .blogs-filters + p,
html[dir="rtl"] #blogs-hub .bh-card .meta .cat,
html[dir="rtl"] #blogs-hub .bh-card .read,
html[dir="rtl"] #blogs-hub .nx-inf-state { letter-spacing: 0; }
/* Counts are Latin digits inside an RTL pill: keep them on the label's trailing edge
   and rendered left-to-right. margin-inline-start already flips; direction does not. */
html[dir="rtl"] #blogs-hub .bf-count { direction: ltr; unicode-bidi: isolate; }
/* The reading-time chip mixes a Latin numeral with its unit — isolate it too. */
html[dir="rtl"] #blogs-hub .bh-card .meta .rt-num { direction: ltr; unicode-bidi: isolate; }
/* The spinner border-top is a rotation origin, not a reading direction: it is identical
   in both scripts, so no RTL counterpart is needed. */

/* ---------- 9. Mobile ---------- */
@media (max-width: 767px) {
  .nx81-blogs-page .breadcumb-wrapper { padding: 104px 0 72px; }
  #blogs-hub .blogs-search { margin-bottom: 18px; }
  #blogs-hub .bh-card { border-radius: 15px; }
  #blogs-hub .bh-card .body { padding: 16px 18px 18px; }
  #blogs-hub .bh-card h3 { font-size: 18px; }
}

/* ---------- 10. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  #blogs-hub .bh-card,
  #blogs-hub .bh-card .img img,
  #blogs-hub .bh-card .read i { transition: none; }
  #blogs-hub .bh-card:hover { transform: none; }
  #blogs-hub .bh-card:hover .img img { transform: none; }
  #blogs-hub .bh-card:hover .read i { transform: none; }
  html[dir="rtl"] #blogs-hub .bh-card .read i,
  html[dir="rtl"] #blogs-hub .bh-card:hover .read i { transform: scaleX(-1); }
  /* Keep the loading state legible without a spinning ring. */
  #blogs-hub .nx-inf-spinner { animation: none; border-top-color: rgba(69, 248, 130, .22); }
}