/* JBK Articles — modern design */

body {
  background: var(--background);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--secondary);
}

a {
  color: var(--primary);
}
a:hover, a:focus, a:active {
  color: var(--accent);
}

.btn, .button, button, input[type="submit"], input[type="button"] {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--accent);
}
.btn:hover, .button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background: var(--secondary);
  color: var(--accent);
}

.jbk-articles{ background: var(--background); color: var(--secondary); --card:#ffffff; --border:#eef2f2; --shadow: 0 10px 20px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04); }
.jbk-articles .container{ max-width:1200px; margin-inline:auto; padding:72px 20px; }

/* Reveal */
.jbk-articles .reveal{ opacity:0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.jbk-articles section.in-view .reveal{ opacity:1; transform:none; transition-delay: calc(var(--i, 0) * 90ms); }

/* Hero */
.jbk-articles .hero{ padding: 96px 0 40px; background: radial-gradient(1200px 400px at 20% -10%, rgba(214,179,106,0.18) 0%, rgba(255,255,255,0) 60%), linear-gradient(180deg, #ffffff 0%, #F5F3EF 100%); position:relative; overflow:hidden; }
.jbk-articles .hero::after{ content:""; position:absolute; inset:auto -20% -30% -20%; height:220px; background: radial-gradient(60% 140% at 50% 0%, rgba(167,139,81,.10), rgba(167,139,81,0)); }
.jbk-articles .eyebrow{ display:inline-block; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color: var(--primary); background: linear-gradient(90deg, rgba(167,139,81,.12), rgba(214,179,106,.12)); padding:8px 12px; border-radius:999px; margin-bottom:12px; }
.jbk-articles .hero h1{ font-size: clamp(2rem, 3vw + 1rem, 3.1rem); line-height:1.1; margin:0 0 10px; }
.jbk-articles .hero .lead{ color:#374151; font-size: clamp(1rem, .6vw + .9rem, 1.15rem); margin:0; }
.jbk-articles .hero-card{ background: var(--card); border:1px solid var(--border); border-radius:16px; padding:14px 16px; margin-top:16px; display:flex; align-items:center; gap:12px; box-shadow: var(--shadow); }
.jbk-articles .icon-circle,
.jbk-articles .icon-circle.small {
  background: linear-gradient(135deg, #fff 0%, #f9f6ef 60%, #e9e2d2 100%) !important;
  color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(167,139,81,.10) !important;
  border: 1.5px solid #e9e2d2 !important;
}
.jbk-articles .hero-note{ margin:0; color:#4b5563; }

/* Tools */
.jbk-articles .articles-tools{ padding: 8px 0 8px; }
.jbk-articles .search-bar{ position:relative; display:flex; align-items:center; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:10px 12px; box-shadow: 0 6px 14px rgba(0,0,0,.06); max-width:700px; }
.jbk-articles .search-bar i{ color:#6b7280; margin-inline:8px; }
.jbk-articles .search-bar input{ flex:1; border:none; outline:none; font-size:1rem; background:transparent; color:#111827; }
.jbk-articles .search-bar input::placeholder{ color:#9aa3af; }

.jbk-articles .filters{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.jbk-articles .chips{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.jbk-articles .chip{ background:#fff; border:1px solid #e9e2d2; color: var(--primary); padding:8px 12px; border-radius:999px; font-weight:600; font-size:.9rem; box-shadow: 0 2px 6px rgba(0,0,0,.04); cursor:pointer; }
.jbk-articles .chip[aria-pressed="true"], .jbk-articles .chip.active{ background: linear-gradient(135deg, var(--primary), var(--secondary)); color:#fff !important; border-color: transparent; box-shadow: 0 10px 22px rgba(167,139,81,.25); }
/* Fix: keep chip colors consistent on focus (override global button focus) */
.jbk-articles .filters .chip:focus{ outline:none; background:#fff !important; color: var(--primary) !important; border-color:#e9e2d2 !important; box-shadow:0 0 0 3px rgba(167,139,81,.15); }
.jbk-articles .filters .chip[aria-pressed="true"]:focus,
.jbk-articles .filters .chip.active:focus{ background: linear-gradient(135deg, var(--primary), var(--secondary)) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 0 0 3px rgba(167,139,81,.25); }
.jbk-articles .results-info{ color:#6b7280; font-size:.95rem; }

/* Grid */
.jbk-articles .posts{ padding: 10px 0 56px; }
.jbk-articles .grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:22px; }
.jbk-articles .post-card{ background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; display:flex; flex-direction:column; }
.jbk-articles .post-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.04); border-color:#e9e2d2; }
.jbk-articles .post-card .card-link{ color:inherit; text-decoration:none; display:flex; flex-direction:column; height:100%; }
.jbk-articles .post-card .media{ aspect-ratio: 16/9; background: radial-gradient(circle at 40% 35%, rgba(167,139,81,.08), transparent 60%), var(--background); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.jbk-articles .post-card .media img{ width:100%; height:100%; object-fit:cover; display:block; }
.jbk-articles .post-card .media-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color: var(--primary); font-size:2rem; }
.jbk-articles .post-card .content{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; }
.jbk-articles .post-card .meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.9rem; color:#6b7280; }
.jbk-articles .post-card .meta-chip{ background:#F5F3EF; border:1px solid #e9e2d2; color: var(--primary); padding:5px 10px; border-radius:999px; font-weight:600; font-size:.8rem; }
.jbk-articles .post-card .meta-dot{ color:#9aa3af; }
.jbk-articles .post-card .post-title{ font-size:1.1rem; margin:0; }
.jbk-articles .post-card .excerpt{ color:#4b5563; margin:0; line-height:1.6; }
.jbk-articles .post-card .read-more{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; color: var(--primary); font-weight:700; }
.jbk-articles .post-card:hover .read-more i{ transform: translateX(4px); transition: transform .25s ease; }

/* No results */
.jbk-articles .no-results{ margin-top:8px; color:#6b7280; }

/* Pagination */
.jbk-articles .pagination{ margin-top:14px; }
.jbk-articles .pagination ul{ display:flex; gap:10px; list-style:none; padding:0; margin:0; }
.jbk-articles .pagination a, .jbk-articles .pagination span{ display:inline-flex; min-width:38px; height:38px; align-items:center; justify-content:center; padding:0 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; color:#111827; text-decoration:none; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.jbk-articles .pagination .current{ background: linear-gradient(135deg, var(--primary), var(--secondary)); color:#fff; border-color: transparent; }

/* CTA */
.jbk-articles .cta{ text-align:center; padding-bottom: 64px; }
.jbk-articles .btn.btn-primary{ display:inline-flex; align-items:center; gap:10px; background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%) !important; color:#fff !important; font-weight:700; padding:12px 18px; border-radius:999px; text-decoration:none; box-shadow: 0 6px 18px rgba(167,139,81,.13) !important; transition: background .18s, box-shadow .18s; border: none; }
.jbk-articles .btn.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 32px rgba(214,179,106,0.18) !important; background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%) !important; color: var(--secondary) !important; }

/* Responsive */
@media (max-width: 1200px){
  .jbk-articles .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .jbk-articles .container{ padding:56px 16px; }
  .jbk-articles .hero{ padding: 72px 0 28px; }
  .jbk-articles .grid{ grid-template-columns: 1fr; }
  .jbk-articles .filters .chip{ padding:6px 10px; font-size:.8rem; }
}

/* RTL */
body.is-ar .jbk-articles{ direction: rtl; }
body.is-ar .jbk-articles .read-more i{ transform: scaleX(-1); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .jbk-articles .reveal{ opacity:1; transform:none; transition:none; }
  .jbk-articles .post-card, .jbk-articles .btn{ transition:none; }
}