/* ============================================================================
   px-news.css — News listing (Finimize-style card grid) to match
   reference/web-news-listing-page.jpeg + mobile-news-listing.jpeg.
   Self-contained (own design tokens) so it does not depend on px-tokens load order.
   ========================================================================== */
.pxn {
  --pxn-ink:        #111827;
  --pxn-ink-600:    #4B5563;
  --pxn-ink-400:    #9CA3AF;
  --pxn-line:       #E5E7EB;
  --pxn-line-soft:  #F1F5F9;
  --pxn-bg-soft:    #F8FAFC;
  --pxn-brand:      #FA6A2A;
  --pxn-link:       #2563EB;
  --pxn-chip-bg:    #F3F4F6;
  font-family: 'BR Hendrix', system-ui, -apple-system, sans-serif;
  color: var(--pxn-ink);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px 56px;
}

/* ── Section sub-nav (News / Technical Analysis / Economic Calendar) ── */
.pxn-sectionbar {
  background: #F5F8FF;
  border-bottom: 1px solid var(--pxn-line);
  margin: 0 -20px 24px;
  padding: 0 20px;
}
.pxn-sectionbar__inner { max-width: 1320px; margin: 0 auto; display: flex; gap: 28px; }
.pxn-sectionbar a {
  display: inline-block; padding: 13px 2px; font-size: 14px; font-weight: 600;
  color: var(--pxn-ink-600); text-decoration: none; border-bottom: 2px solid transparent;
}
.pxn-sectionbar a:hover { color: var(--pxn-ink); }
.pxn-sectionbar a.is-active { color: var(--pxn-brand); border-bottom-color: var(--pxn-brand); }
.pxn-sectionbar a.is-soon { color: var(--pxn-ink-400); cursor: default; }
.pxn-sectionbar a.is-soon::after {
  content: "soon"; font-size: 9px; font-weight: 700; text-transform: uppercase;
  background: var(--pxn-chip-bg); color: var(--pxn-ink-400); border-radius: 999px;
  padding: 1px 6px; margin-left: 6px; vertical-align: middle;
}

/* ── Page head ── */
.pxn-head { margin: 34px 0 24px; }
.pxn-head h1 { font-size: clamp(36px, 4vw, 48px); font-weight: 700; line-height: 1.15; margin: 0 0 10px; letter-spacing: -0.025em; }
.pxn-head p  { color: var(--pxn-ink-600); font-size: 18px; line-height: 1.6; margin: 0; }

/* ── Category pills ── */
.pxn-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 30px; }
.pxn-cat {
  border: 0; background: transparent; color: var(--pxn-ink-600); cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px;
  transition: background .12s, color .12s;
}
.pxn-cat:hover { background: var(--pxn-line-soft); color: var(--pxn-ink); }
.pxn-cat.is-active { background: var(--pxn-chip-bg); color: var(--pxn-ink); }

/* ── Layout: feed grid + sidebar ── */
.pxn-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 48px; align-items: start; }
.pxn-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 38px 30px; }

/* ── Card ── */
.pxn-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.pxn-card__media {
  position: relative; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden;
  background: var(--pxn-bg-soft); margin-bottom: 18px;
}
.pxn-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxn-card__media-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #EEF2F6, #F8FAFC);
}
.pxn-card__media-fallback img { width: 46%; height: auto; opacity: .5; object-fit: contain; }
.pxn-chip {
  position: absolute; top: 10px; left: 10px; background: #fff; color: var(--pxn-ink);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.pxn-card__icons { position: absolute; top: 9px; right: 10px; display: flex; gap: 6px; }
.pxn-card__icons span {
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(255,255,255,.94); display: flex; align-items: center; justify-content: center;
  color: var(--pxn-ink-600); box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
.pxn-card__icons .pxn-card__pin { color: #F5B301; }   /* gold premium marker */
.pxn-card__title {
  font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.018em;
  margin: 0 0 10px;
}
.pxn-card:hover .pxn-card__title { color: var(--pxn-brand); }
.pxn-card__summary {
  color: var(--pxn-ink-600); font-size: 16px; line-height: 1.65; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pxn-card__meta { color: var(--pxn-ink-400); font-size: 13px; line-height: 1.5; margin: 0 0 8px; }
.pxn-card__tags { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pxn-card__tags a, .pxn-card__tags span {
  color: var(--pxn-link); font-size: 13px; font-weight: 600; text-decoration: none;
}
.pxn-card__tags a::before, .pxn-card__tags span::before { content: "· "; color: var(--pxn-ink-400); }
.pxn-card__tags :first-child::before { content: ""; }

/* ── Featured (first) card spans the row top ── */
.pxn-card--featured .pxn-card__media { aspect-ratio: 16/9; }

/* ── Sidebar ── */
.pxn-aside { position: sticky; top: 88px; }
.pxn-aside__title { font-size: 18px; font-weight: 700; margin: 0 0 16px; }
.pxn-topics { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.pxn-topics a { color: var(--pxn-ink-600); font-size: 15px; font-weight: 600; text-decoration: none; }
.pxn-topics a:hover { text-decoration: underline; color: var(--pxn-brand);}
.pxn-promo {
  position:relative;overflow:hidden;text-align:left;padding:28px;border-radius:22px;
  background:linear-gradient(145deg,#fff7f0,#fff);border:1px solid #ffd9bd;
  box-shadow:0 14px 34px rgba(18,36,76,.08);
}
.pxn-promo::after{
  content:"";position:absolute;width:130px;height:130px;border-radius:50%;
  right:-56px;bottom:-62px;background:rgba(250,106,42,.1);
}
.pxn-promo__kicker{
  display:block;color:#d95300;font-size:11px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;margin-bottom:14px;
}
.pxn-promo__mark{
  width:56px;height:56px;display:grid;place-items:center;margin-bottom:18px;
  border-radius:18px;background:var(--pxn-brand);color:#fff;font-size:28px;font-weight:800;
  box-shadow:0 9px 20px rgba(250,106,42,.24);
}
.pxn-promo h4 { position:relative;z-index:1;font-size:22px;line-height:1.25;font-weight:700;margin:0 0 10px; }
.pxn-promo p { position:relative;z-index:1;color:var(--pxn-ink-600);font-size:14px;line-height:1.6;margin:0 0 18px; }
.pxn-promo__cta{
  position:relative;z-index:1;display:inline-flex;padding:10px 17px;border-radius:999px;
  background:var(--pxn-brand);color:#fff;font-size:14px;font-weight:700;text-decoration:none;
}
.pxn-promo__cta:hover{background:#e85a1a;color:#fff}
.pxn-promo small{display:block;color:var(--pxn-ink-400);font-size:11px;margin-top:10px}

/* ── Search ── */
.pxn-search { position: relative; margin: 0 0 20px; }
.pxn-search input {
  width: 100%; border: 1px solid var(--pxn-line); border-radius: 12px; background: var(--pxn-bg-soft);
  padding: 14px 16px 14px 44px; font-size: 15px; color: var(--pxn-ink); outline: none;
}
.pxn-search input:focus { border-color: var(--pxn-brand); background: #fff; }
.pxn-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--pxn-ink-400); }

/* ── Empty state ── */
.pxn-empty { text-align: center; color: var(--pxn-ink-400); padding: 60px 20px; }
.pxn-empty p { margin: 0 0 6px; font-size: 15px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .pxn-layout { grid-template-columns: 1fr; }
  .pxn-aside { position: static; display: none; }       /* topics fold away on tablet/mobile */
  .pxn-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .pxn { padding: 0 16px 40px; }
  .pxn-grid { grid-template-columns: 1fr; gap: 26px; }
  .pxn-head { margin-top: 26px; }
  .pxn-head h1 { font-size: 34px; }
  .pxn-head p { font-size: 16px; }
  .pxn-card__title { font-size: 20px; }
  .pxn-card__summary { font-size: 15px; }
  .pxn-sectionbar__inner { gap: 20px; overflow-x: auto; }
}