/* ============================================================
   FOREX BLOG LISTING — shares the exact design tokens used on
   the BrokerLens homepage and Meridian FX review page.
   ============================================================ */
:root{
  --white:#ffffff;
  --surface:#f6f8fc;
  --surface-2:#eef2f9;
  --ink:#0b1220;
  --ink-soft:#4b5566;
  --ink-faint:#8792a3;
  --line:#e4e9f2;
  --line-soft:#edf1f7;
  --blue:#2554ff;
  --blue-deep:#0b1c7a;
  --blue-soft:#eaf0ff;
  --accent:#38bdf8;
  --green:#12a454;
  --green-soft:#e8f7ee;
  --red:#e5484d;

  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;

  --shadow-sm:0 2px 8px rgba(11,28,122,0.06);
  --shadow-md:0 12px 32px rgba(11,28,122,0.10);
  --shadow-lg:0 24px 60px rgba(11,28,122,0.14);

  --transition-fast:.18s ease;
  --transition-med:.3s ease;
}

.fbl *,.fbl *::before,.fbl *::after{box-sizing:border-box;}
.fbl{
  font-family:var(--font-body);
  color:var(--ink);
  line-height:1.5;
  max-width:1400px;
  margin:0 auto;
  -webkit-font-smoothing:antialiased;
}
.fbl h1,.fbl h2,.fbl h3{font-family:var(--font-display); margin:0; letter-spacing:-0.01em;}
.fbl p{margin:0;}
.fbl ul{margin:0; padding:0; list-style:none;}
.fbl a{color:inherit; text-decoration:none;}
.fbl img{max-width:100%; display:block;}
.fbl button{font-family:inherit; cursor:pointer;}
.fbl input,.fbl select{font-family:inherit; color:inherit;}
.fbl :focus-visible{outline:2.5px solid var(--blue); outline-offset:3px; border-radius:4px;}
.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;}

@media (prefers-reduced-motion: reduce){
  .fbl *,.fbl *::before,.fbl *::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* ============================================================
   BUTTONS (shared component)
   ============================================================ */
.fbl .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:100px; font-weight:600; border:1px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; white-space:nowrap;}
.fbl .btn--sm{padding:9px 18px; font-size:0.85rem;}
.fbl .btn--lg{padding:15px 30px; font-size:1rem;}
.fbl .btn--primary{background:linear-gradient(135deg, var(--blue), var(--blue-deep)); color:#fff; box-shadow:0 8px 20px rgba(37,84,255,0.28);}
.fbl .btn--primary:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(37,84,255,0.34);}
.fbl .btn--secondary{background:var(--white); color:var(--ink); border-color:var(--line);}
.fbl .btn--secondary:hover{border-color:var(--blue); color:var(--blue);}

.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ============================================================
   HEADER
   ============================================================ */
.fbl-header{position:relative; overflow:hidden; padding:56px 32px 44px; border-radius:0 0 var(--radius-lg) var(--radius-lg); background:linear-gradient(160deg, var(--blue-deep), var(--blue) 80%);}
.fbl-header__inner{position:relative; z-index:1; max-width:720px;}
.fbl-header__field{position:absolute; inset:0; z-index:0; pointer-events:none;}
.fbl-header__shape{position:absolute; border-radius:50%; filter:blur(60px); opacity:0.35; background:radial-gradient(circle, #ffffff, transparent 70%);}
.fbl-header__shape--a{width:280px; height:280px; top:-100px; right:-40px;}
.fbl-header__shape--b{width:200px; height:200px; bottom:-90px; left:10%;}
.breadcrumb{display:flex; gap:8px; align-items:center; font-size:0.82rem; color:rgba(255,255,255,0.7); margin-bottom:18px;}
.breadcrumb a{color:rgba(255,255,255,0.85);}
.breadcrumb a:hover{color:#fff;}
.fbl-header__title{color:#fff; font-size:clamp(1.8rem, 3.4vw, 2.6rem); font-weight:700; margin-bottom:14px;}
.fbl-header__desc{color:rgba(255,255,255,0.85); font-size:1.02rem; max-width:560px;}

/* ============================================================
   FILTER BAR
   ============================================================ */
.fbl-filterbar{display:flex; flex-wrap:wrap; align-items:center; gap:14px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:16px 20px; margin:-30px 32px 40px; position:relative; z-index:2;}
.fbl-filterbar__search{display:flex; align-items:center; gap:10px; flex:1 1 240px; min-width:220px; background:var(--surface); border:1px solid var(--line-soft); border-radius:100px; padding:10px 18px; color:var(--ink-faint);}
.fbl-filterbar__search input{flex:1; border:none; background:none; font-size:0.94rem; color:var(--ink);}
.fbl-filterbar__search input:focus{outline:none;}
.fbl-filterbar__select select{padding:11px 16px; border-radius:100px; border:1px solid var(--line); background:var(--white); font-size:0.9rem; color:var(--ink); min-width:150px;}
.fbl-filterbar__count{margin-left:auto; font-size:0.82rem; color:var(--ink-faint); font-family:var(--font-mono); white-space:nowrap;}

/* ============================================================
   LAYOUT
   ============================================================ */
.fbl-layout{display:grid; grid-template-columns:1fr; gap:40px; padding:0 32px;}
@media (min-width:1024px){ .fbl-layout{grid-template-columns:minmax(0,1fr) 320px;} }
.fbl-main{min-width:0;}

/* ============================================================
   BLOG GRID + CARDS
   ============================================================ */
.blog-grid{display:grid; grid-template-columns:1fr; gap:26px; align-items:stretch;}
@media (min-width:640px){ .blog-grid{grid-template-columns:repeat(2, 1fr);} }
@media (min-width:1024px){ .fbl-layout .blog-grid{grid-template-columns:repeat(2, 1fr);} }
@media (min-width:1300px){ .fbl-layout .blog-grid{grid-template-columns:repeat(3, 1fr);} }

.blog-card{
  display:flex; flex-direction:column; height:100%;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); position:relative;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.blog-card::before{
  content:""; position:absolute; inset:0; border-radius:var(--radius-lg); padding:1.5px;
  background:linear-gradient(135deg, var(--blue), var(--accent));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity var(--transition-fast); pointer-events:none;
}
.blog-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.blog-card:hover::before{opacity:1;}

.blog-card__media{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2);}
.blog-card__img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.blog-card:hover .blog-card__img{transform:scale(1.06);}
.blog-card__fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--blue); background:linear-gradient(135deg, var(--blue-soft), var(--surface-2));}
.blog-card__badge{position:absolute; top:14px; left:14px; background:rgba(11,18,32,0.72); backdrop-filter:blur(6px); color:#fff; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; padding:6px 12px; border-radius:100px;}

.blog-card__body{flex:1; display:flex; flex-direction:column; padding:22px 22px 20px;}
.blog-card__title{font-size:1.08rem; line-height:1.35; margin-bottom:10px;}
.blog-card__title a{transition:color var(--transition-fast);}
.blog-card__title a:hover{color:var(--blue);}
.blog-card__excerpt{font-size:0.88rem; color:var(--ink-soft); line-height:1.55; margin-bottom:18px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}

.blog-card__meta{display:flex; align-items:center; justify-content:space-between; margin-top:auto; margin-bottom:16px; padding-top:16px; border-top:1px solid var(--line-soft);}
.blog-card__author{display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:600; color:var(--ink); transition:color var(--transition-fast);}
.blog-card__author:hover{color:var(--blue);}
.blog-card__avatar{border-radius:50%; width:28px; height:28px;}
.blog-card__date{font-size:0.76rem; color:var(--ink-faint); font-family:var(--font-mono);}

.blog-card__footer{display:flex; align-items:center; justify-content:space-between;}
.blog-card__readtime{display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--ink-faint);}
.blog-card__cta{display:flex; align-items:center; gap:6px; font-size:0.86rem; font-weight:700; color:var(--blue); transition:gap var(--transition-fast);}
.blog-card__cta:hover{gap:10px;}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.blog-empty{grid-column:1/-1; text-align:center; padding:70px 30px; background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius-lg);}
.blog-empty__icon{display:inline-flex; align-items:center; justify-content:center; width:84px; height:84px; border-radius:50%; background:var(--blue-soft); color:var(--blue); margin-bottom:20px;}
.blog-empty h3{font-size:1.3rem; margin-bottom:10px;}
.blog-empty p{color:var(--ink-soft); font-size:0.94rem; margin-bottom:24px; max-width:380px; margin-left:auto; margin-right:auto;}

/* ============================================================
   PAGINATION
   ============================================================ */
.fbl-pagination{margin-top:40px; display:flex; justify-content:center;}
.pagination__list{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.pagination__item{display:flex;}
.pagination .page-numbers{
  display:flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px;
  border-radius:100px; border:1px solid var(--line); background:var(--white); color:var(--ink-soft);
  font-size:0.9rem; font-weight:600; transition:all var(--transition-fast);
}
.pagination .page-numbers:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-2px);}
.pagination__item.is-current .page-numbers{background:linear-gradient(135deg, var(--blue), var(--blue-deep)); color:#fff; border-color:transparent;}
.pagination .page-numbers.dots{border-color:transparent; background:none;}

/* ============================================================
   SIDEBAR
   ============================================================ */
.blog-sidebar{display:none; flex-direction:column; gap:20px;}
@media (min-width:1024px){ .blog-sidebar{display:flex; position:sticky; top:24px; align-self:start;} }
.sidebar-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm);}
.sidebar-card__title{font-size:0.98rem; margin-bottom:16px;}
.sidebar-search{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line-soft); border-radius:100px; padding:10px 16px; color:var(--ink-faint);}
.sidebar-search input{flex:1; border:none; background:none; font-size:0.88rem; color:var(--ink);}
.sidebar-search input:focus{outline:none;}

.sidebar-list{display:flex; flex-direction:column; gap:14px;}
.sidebar-list a{display:flex; gap:12px; align-items:center;}
.sidebar-list__thumb{width:52px; height:52px; border-radius:12px; object-fit:cover; flex-shrink:0;}
.sidebar-list__thumb--fallback{background:var(--blue-soft);}
.sidebar-list strong{display:block; font-size:0.85rem; line-height:1.35; color:var(--ink); margin-bottom:4px; transition:color var(--transition-fast);}
.sidebar-list a:hover strong{color:var(--blue);}
.sidebar-list time{font-size:0.72rem; color:var(--ink-faint); font-family:var(--font-mono);}

.sidebar-categories li{border-bottom:1px solid var(--line-soft);}
.sidebar-categories li:last-child{border-bottom:none;}
.sidebar-categories a{display:flex; justify-content:space-between; padding:10px 0; font-size:0.86rem; color:var(--ink-soft); transition:color var(--transition-fast);}
.sidebar-categories a:hover{color:var(--blue);}
.sidebar-categories a span{font-family:var(--font-mono); font-size:0.76rem; color:var(--ink-faint); background:var(--surface); padding:2px 8px; border-radius:100px;}

.sidebar-card--gradient{background:linear-gradient(160deg, var(--blue-deep), var(--blue) 75%); border:none; color:#fff;}
.sidebar-card--gradient .sidebar-card__title{color:#fff;}
.sidebar-card--gradient p{color:rgba(255,255,255,0.85); font-size:0.86rem; margin-bottom:16px;}
.sidebar-newsletter{display:flex; flex-direction:column; gap:10px;}
.sidebar-newsletter input{padding:11px 14px; border-radius:100px; border:none; font-size:0.88rem;}
.sidebar-newsletter__status{margin-top:10px; font-size:0.78rem; color:#fff; min-height:1.1em;}

.sidebar-tools li{border-bottom:1px solid var(--line-soft);}
.sidebar-tools li:last-child{border-bottom:none;}
.sidebar-tools a{display:block; padding:10px 0; font-size:0.86rem; color:var(--ink-soft); transition:color var(--transition-fast);}
.sidebar-tools a:hover{color:var(--blue);}

/* ============================================================
   NEWSLETTER (main section)
   ============================================================ */
.fbl-newsletter{margin:70px 32px 0; background:linear-gradient(150deg, var(--blue-deep), var(--blue) 70%); border-radius:var(--radius-lg); padding:56px 32px; text-align:center;}
.fbl-newsletter__inner{max-width:560px; margin:0 auto;}
.fbl-newsletter h2{color:#fff; font-size:clamp(1.5rem, 2.6vw, 2rem); margin-bottom:12px;}
.fbl-newsletter p{color:rgba(255,255,255,0.85); font-size:0.98rem; margin-bottom:28px;}
.fbl-newsletter__form{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.fbl-newsletter__form input{flex:1; min-width:220px; padding:14px 20px; border-radius:100px; border:none; font-size:0.94rem;}
.fbl-newsletter__status{margin-top:14px; font-size:0.86rem; color:#fff; min-height:1.2em;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:768px){
  .fbl-header{padding:44px 20px 36px;}
  .fbl-filterbar{margin:-24px 20px 32px; padding:14px;}
  .fbl-layout{padding:0 20px;}
  .fbl-newsletter{margin:50px 20px 0; padding:40px 22px;}
}