/* =========================================
   QTP NEWS (List Layout) — no header/footer
   FULL COPY/PASTE (original + fixes)
   ========================================= */

.qtp-news{
  padding: 72px 0;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(40,199,111,.10), transparent 60%),
    radial-gradient(900px 520px at 85% 20%, rgba(255,59,48,.08), transparent 55%),
    linear-gradient(180deg, #050810 0%, #070b14 45%, #050810 100%);
  color: rgba(233,238,252,.92);
}

.qtp-news *{ box-sizing: border-box; }

.qtp-news__wrap{
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

@media (max-width: 640px){
  .qtp-news__wrap{ width: calc(100% - 28px); }
}

.qtp-news__head{ margin-bottom: 18px; }

.qtp-news__title{
  margin: 0 0 8px !important;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  color: #f5f7ff;
  letter-spacing: -.4px;
}

.qtp-news__sub{
  margin: 0 !important;
  color: rgba(233,238,252,.70);
  line-height: 1.6;
  max-width: 70ch;
}

/* Layout */
.qtp-news__grid{
  display: grid;
  grid-template-columns: 1.6fr .9fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 980px){
  .qtp-news__grid{ grid-template-columns: 1fr; }
}

/* Feed container (scrollable option) */
.qtp-news__feed{
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 65px rgba(0,0,0,.28);
  overflow: hidden;
}

/* --- OPTIONAL: make feed scrollable (like your mock) ---
   If you want full page scroll instead, DELETE this block. */
.qtp-news__feed{
  max-height: 720px;
  overflow-y: auto;
}
.qtp-news__feed::-webkit-scrollbar{ width: 10px; }
.qtp-news__feed::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
.qtp-news__feed::-webkit-scrollbar-track{ background: rgba(0,0,0,.12); }

/* Feed inner (AJAX swaps this) */
.qtp-news__feed-inner{
  position: relative;
}

/* List items */
.qtp-news__item{
  padding: 18px 18px 16px;
  position: relative;
}

/* Separator between posts */
.qtp-news__item + .qtp-news__item{
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Meta row */
.qtp-news__meta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.qtp-news__pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(40,199,111,.14);
  border: 1px solid rgba(40,199,111,.25);
  color: rgba(240,255,248,.92);
  font-size: 12px;
  font-weight: 800;
}

.qtp-news__date{
  color: rgba(233,238,252,.58);
  font-size: 12px;
  font-weight: 700;
}

/* Title */
.qtp-news__h2{
  margin: 0 0 8px !important;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.2px;
}

.qtp-news__link{
  color: rgba(245,247,255,.96);
  text-decoration: none !important;
}
.qtp-news__link:hover{
  color: rgba(40,199,111,.95);
}

/* Excerpt */
.qtp-news__excerpt{
  margin: 0 0 10px !important;
  color: rgba(233,238,252,.72);
  line-height: 1.6;
  font-size: 14px;
  max-width: 95ch;
}

/* Read link */
.qtp-news__read{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 900;
  font-size: 13px;
  text-decoration: none !important;
  color: rgba(40,199,111,.95);
}
.qtp-news__read:hover{ opacity: .9; }

/* Pagination */
.qtp-news__pager{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 14px 14px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}

.qtp-news__page{
  display: inline-flex;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(245,247,255,.92);
  font-weight: 900;
  font-size: 13px;
  text-decoration: none !important;
  will-change: transform;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.qtp-news__page:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

.qtp-news__page--active{
  background: rgba(40,199,111,.92);
  color: #06110d;
  border-color: rgba(40,199,111,.35);
}

.qtp-news__page--ghost{
  opacity: .65;
}

/* Sidebar panels */
.qtp-news__side{
  display: grid;
  gap: 14px;
}

.qtp-news__panel{
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
  padding: 14px;
}

.qtp-news__h3{
  margin: 0 0 10px !important;
  font-size: 14px;
  font-weight: 950;
  color: rgba(245,247,255,.96);
  letter-spacing: .2px;
}

/* Search (FIXED) */
.qtp-news__search{
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.qtp-news__input{
  width: 100%;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: rgba(245,247,255,.92);
  padding: 0 14px;
  outline: none;
  flex: 1 1 auto;
  min-width: 0;
}

.qtp-news__input::placeholder{ color: rgba(233,238,252,.55); }

.qtp-news__btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(245,247,255,.92);
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 16px;
  will-change: transform;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.qtp-news__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

/* Category chips */
.qtp-news__chip{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(245,247,255,.90);
  text-decoration: none !important;
  font-weight: 850;
  margin-top: 8px;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.qtp-news__chip span{
  color: rgba(233,238,252,.60);
  font-weight: 800;
}
.qtp-news__chip:hover{
  border-color: rgba(40,199,111,.22);
  transform: translateY(-1px);
}

/* ACTIVE state (AJAX adds .is-active) */
.qtp-news__chip.is-active{
  border-color: rgba(40,199,111,.35);
  box-shadow: inset 0 0 0 1px rgba(40,199,111,.18);
}

/* Tags */
.qtp-news__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.qtp-news__tag{
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(245,247,255,.88);
  font-weight: 850;
  font-size: 12px;
  text-decoration: none !important;
  transition: border-color .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.qtp-news__tag:hover{
  border-color: rgba(40,199,111,.22);
  color: rgba(40,199,111,.95);
  transform: translateY(-1px);
}

/* ACTIVE tag */
.qtp-news__tag.is-active{
  border-color: rgba(40,199,111,.30);
  color: rgba(40,199,111,.95);
}

/* Accessible focus (keyboard) */
.qtp-news__input:focus,
.qtp-news__btn:focus,
.qtp-news__chip:focus,
.qtp-news__tag:focus,
.qtp-news__page:focus,
.qtp-news__link:focus,
.qtp-news__read:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(40,199,111,.22);
  border-color: rgba(40,199,111,.35);
}

/* Optional: loading state while AJAX fetches (plugin toggles .is-loading) */
.qtp-news.is-loading .qtp-news__feed-inner{
  opacity: .65;
  filter: saturate(.9);
}

/* Mobile spacing */
@media (max-width: 640px){
  .qtp-news{ padding: 54px 0; }
  .qtp-news__item{ padding: 16px 14px 14px; }
  .qtp-news__pager{ gap: 8px; }
}