/* =========================================================
   MetaScalp Blog — content styles.
   Chrome (tokens, body, .nav, .footer) comes from styles.css,
   which every blog page now loads first, so the blog and the
   landing share one design system. This file only adds what is
   specific to blog content: hero, search, cards, article body.
   ========================================================= */

/* tokens styles.css does not define, plus clearing the fixed nav */
:root { --readw: 720px; --ice: #9ecdee; }
body { background: var(--bg-deep); }
main { padding-top: 92px; }
@media (max-width: 720px) { main { padding-top: 72px; } }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------
   Shells
   --------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.read { max-width: var(--readw); margin: 0 auto; padding: 0 var(--pad-x); }

.crumbs {
  padding-top: 28px;
  font-size: 13px;
  color: var(--text-dim);
}
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 7px; opacity: .5; }

/* ---------------------------------------------------------
   Blog index — hero
   --------------------------------------------------------- */
.bhero { padding: clamp(48px, 7vw, 92px) 0 clamp(32px, 4vw, 56px); }
.bhero h1 {
  font-family: var(--f-display);
  font-size: clamp(38px, 5.6vw, 68px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 18px;
  text-wrap: balance;
}
.bhero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, #cfe9ff 0%, #4eb1f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bhero p {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--text-mute);
  max-width: 640px;
  margin: 0;
  line-height: 1.6;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* ---------------------------------------------------------
   Article
   --------------------------------------------------------- */
.article { padding-bottom: clamp(56px, 7vw, 96px); }

.article__head { padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px); }
.article h1 {
  font-family: var(--f-display);
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 0 0 20px;
  text-wrap: balance;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 13px;
  color: var(--text-dim);
  padding-bottom: 4px;
}
.byline b { color: var(--text-mute); font-weight: 600; }
.byline .sep { opacity: .4; }

/* TL;DR — the block designed to be lifted into an AI answer */
.tldr {
  margin: 26px 0 34px;
  padding: 22px 26px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(28, 79, 143, 0.30), rgba(10, 26, 51, 0.40));
  border: 1px solid rgba(78, 177, 240, 0.28);
  border-left: 3px solid var(--accent);
}
.tldr__label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 9px;
}
.tldr p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text); }

.article__body { font-size: 17px; line-height: 1.72; color: var(--text-mute); }
.article__body > * { max-width: var(--readw); margin-inline: auto; }
.article__body h2 {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 29px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.24;
  color: var(--text);
  margin: 46px 0 16px;
  scroll-margin-top: 88px;
}
.article__body h3 {
  font-family: var(--f-display);
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 600;
  color: var(--text);
  margin: 30px 0 12px;
}
.article__body p { margin: 0 0 18px; }
.article__body strong { color: var(--text); font-weight: 600; }
.article__body ul, .article__body ol { margin: 0 0 20px; padding-left: 22px; }
.article__body li { margin-bottom: 9px; }
.article__body li::marker { color: var(--accent); }

.article__body figure { margin: 30px auto; }
.article__body figure img { border-radius: var(--r-md); border: 1px solid var(--line-strong); }
.article__body figcaption { margin-top: 10px; font-size: 13px; color: var(--text-dim); text-align: center; }

.article__body code {
  font-family: var(--f-mono);
  font-size: .88em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(78, 177, 240, 0.10);
  border: 1px solid rgba(78, 177, 240, 0.18);
  color: var(--ice);
}
.article__body pre {
  margin: 0 auto 24px;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(20, 45, 90, 0.45), rgba(10, 26, 51, 0.62));
  border: 1px solid rgba(78, 177, 240, 0.18);
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.6;
}
.article__body pre code { background: none; border: 0; padding: 0; color: var(--text-mute); }

/* Tables — models parse and cite these preferentially */
.tbl-scroll { overflow-x: auto; margin: 0 auto 26px; }
.article__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 460px;
}
.article__body th, .article__body td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.article__body th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ice);
  background: rgba(78, 177, 240, 0.07);
  border-bottom-color: var(--line-strong);
  white-space: nowrap;
}
.article__body tbody tr:hover { background: rgba(78, 177, 240, 0.04); }

/* Numbered procedure steps */
.steps { counter-reset: st; list-style: none; padding-left: 0 !important; }
.steps > li {
  counter-increment: st;
  position: relative;
  padding-left: 46px;
  margin-bottom: 20px;
}
.steps > li::before {
  content: counter(st);
  position: absolute;
  left: 0; top: -1px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(78, 177, 240, 0.13);
  border: 1px solid rgba(78, 177, 240, 0.4);
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
}
.steps > li b { display: block; color: var(--text); margin-bottom: 3px; }

/* FAQ */
.faq-q {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.faq-q:last-of-type { border-bottom: 1px solid var(--line); }
.faq-q h3 { margin: 0 0 8px; font-size: 17px; }
.faq-q p { margin: 0; font-size: 15.5px; }

/* Key takeaways */
.takeaways {
  margin: 40px auto 30px;
  padding: 24px 28px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(20, 45, 90, 0.34), rgba(10, 26, 51, 0.38));
  border: 1px solid rgba(78, 177, 240, 0.18);
}
.takeaways h2 { margin: 0 0 14px !important; font-size: 19px !important; }
.takeaways ul { margin: 0; padding-left: 20px; }
.takeaways li { margin-bottom: 10px; font-size: 15.5px; }

/* In-this-cluster nav */
.cluster-nav {
  margin: 36px auto 0;
  padding: 24px 28px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(10, 26, 51, 0.3);
}
.cluster-nav h2 { margin: 0 0 14px !important; font-size: 15px !important; letter-spacing: .04em; text-transform: uppercase; color: var(--ice) !important; }
.cluster-nav ul { margin: 0; padding-left: 18px; }
.cluster-nav li { margin-bottom: 8px; font-size: 15px; }

/* Conversion CTA */
.cta-box {
  margin: 40px auto;
  padding: 30px;
  border-radius: var(--r-md);
  text-align: center;
  background: linear-gradient(180deg, rgba(28, 79, 143, 0.34), rgba(10, 26, 51, 0.42));
  border: 1px solid rgba(78, 177, 240, 0.24);
}
.cta-box b { display: block; font-family: var(--f-display); font-size: 21px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.cta-box p { margin: 0 0 18px !important; font-size: 15px; color: var(--text-dim); }

/* Risk disclaimer — mandatory on every trading article */
.risk {
  margin: 34px auto 0;
  padding: 18px 22px;
  border-radius: 10px;
  border: 1px solid rgba(255, 85, 102, 0.22);
  background: rgba(255, 85, 102, 0.05);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}
.risk b { color: rgba(255, 130, 140, .95); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}


/* =========================================================
   BLOG INDEX — image-card carousel
   ========================================================= */
.bidx { padding: clamp(30px, 5vw, 56px) 0 clamp(56px, 7vw, 92px); }

/* header row: eyebrow + heading left, search + controls right */
.bidx__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 26px 40px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
@media (max-width: 820px) { .bidx__top { grid-template-columns: 1fr; align-items: start; } }

.bpill {
  display: inline-block;
  padding: 6px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-mute);
  margin-bottom: 20px;
}
.bidx__h1 {
  font-family: var(--f-display);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}
.bidx__h1 em {
  font-style: normal;
  background: linear-gradient(180deg, #cfe9ff 0%, #4eb1f0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bidx__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
@media (max-width: 820px) { .bidx__aside { align-items: stretch; } }

/* search */
.bfind { position: relative; display: flex; align-items: center; width: 290px; max-width: 100%; }
@media (max-width: 820px) { .bfind { width: 100%; } }
.bfind > svg {
  position: absolute; left: 15px; width: 15px; height: 15px;
  color: var(--text-dim); pointer-events: none;
}
.bfind input {
  width: 100%;
  padding: 11px 38px 11px 40px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(10, 26, 51, .5);
  color: var(--text);
  font-family: var(--f-body); font-size: 14px;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.bfind input::-webkit-search-cancel-button { display: none; }
.bfind input::placeholder { color: var(--text-dim); }
.bfind input:focus {
  outline: none; border-color: var(--accent);
  background: rgba(10, 26, 51, .8);
  box-shadow: 0 0 0 3px rgba(78,177,240,.13);
}
.bfind button {
  position: absolute; right: 7px;
  width: 24px; height: 24px; display: none;
  align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(150,195,245,.14); color: var(--text-mute);
  font-size: 14px; line-height: 1; cursor: pointer;
}
.bfind button:hover { background: rgba(150,195,245,.28); color: #fff; }
.bidx.has-q .bfind button { display: flex; }

/* filter chips + arrows */
.bidx__ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 820px) { .bidx__ctl { justify-content: flex-start; } }
.bchip {
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent;
  color: var(--text-dim); font-family: var(--f-body);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.bchip:hover { color: var(--text); border-color: rgba(150,195,245,.42); }
.bchip[aria-pressed="true"] {
  color: var(--text); border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.07);
}
.barrows { display: flex; gap: 8px; margin-left: 4px; }
.barrow {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent; color: var(--text-mute);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.barrow:hover:not(:disabled) { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); }
.barrow:disabled { opacity: .3; cursor: default; }
.barrow svg { width: 15px; height: 15px; }
@media (max-width: 820px) { .barrows { display: none; } }

/* the rail */
.brail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 316px;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.brail::-webkit-scrollbar { display: none; }
@media (max-width: 560px) { .brail { grid-auto-columns: 78vw; gap: 18px; } }

.bcard {
  scroll-snap-align: start;
  display: block;
  min-width: 0;
  text-decoration: none;
}
.bcard:hover { text-decoration: none; }
/* the reference staggers alternate cards downward */
.bcard:nth-child(even) { margin-top: 52px; }
@media (max-width: 820px) { .bcard:nth-child(even) { margin-top: 0; } }

.bcard__img {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-mid);
  border: 1px solid var(--line);
  margin-bottom: 16px;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* One aspect for every card. Filtering reorders cards, so a
   position-based aspect would crop images differently depending on
   the active filter. The rail's rhythm comes from the stagger instead. */

.bcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcard:hover .bcard__img {
  transform: translateY(-4px);
  border-color: rgba(78,177,240,.42);
  box-shadow: 0 26px 50px -24px rgba(0,0,0,.8), 0 0 60px -34px rgba(78,177,240,.6);
}

.bcard__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 12px; color: var(--text-dim);
}
.bcard__cat {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--text-mute);
  font-size: 11.5px; font-weight: 500;
  white-space: nowrap;
}
.bcard__when { white-space: nowrap; }

.bcard__t {
  font-family: var(--f-display);
  font-size: 19px; font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.32;
  margin: 0;
  color: var(--text);
  transition: color .2s var(--ease);
}
.bcard:hover .bcard__t { color: #cfe9ff; }

.bcard.soon { opacity: .55; pointer-events: none; }
.bcard[hidden] { display: none; }

.bidx__count { margin: 22px 0 0; font-size: 13px; color: var(--text-dim); }
.bnone { padding: 46px 0 10px; color: var(--text-dim); font-size: 15px; }
.bnone b { display: block; color: var(--text); font-size: 18px; margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
  .brail { scroll-behavior: auto; }
  .bcard__img { transition: none; }
}