/* JBK Single Post — modern design */
:root { 
  --primary: #A78B51;
  --secondary: #1A222B;
  --accent: #D6B36A;
  --background: #F5F3EF;
  --text: #232323;
  --muted: #8A8A8A;
  --primary-600:#0fa197; 
  --neutral:#6b7280; 
  --dark:#111827; 
  --bg:#f8fafc; 
  --card:#ffffff; 
  --border:#eef2f2; 
  --shadow:0 10px 20px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04); 
}

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-single-post{ background: var(--background); color: var(--text); }
.jbk-single-post .container{ max-width:900px; margin-inline:auto; padding:72px 20px; }

/* Hero */
.jbk-single-post .post-hero{ 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%); }
.jbk-single-post .post-hero .container{ max-width:980px; }
.jbk-single-post .breadcrumb{ display:flex; gap:8px; color:#6b7280; font-size:.95rem; margin-bottom:8px; }
.jbk-single-post .breadcrumb a{ color: var(--primary); text-decoration:none; font-weight:600; }
.jbk-single-post .meta-chip{ display:inline-block; background:#F5F3EF; border:1px solid #e9e2d2; color: var(--primary); padding:6px 10px; border-radius:999px; font-weight:700; font-size:.85rem; }
.jbk-single-post h1{ font-size: clamp(2rem, 3vw + 1rem, 3.1rem); line-height:1.1; margin:10px 0; }
.jbk-single-post .meta{ display:flex; align-items:center; gap:10px; color:#6b7280; }
.jbk-single-post .meta-author{ display:inline-flex; align-items:center; gap:8px; }
.jbk-single-post .meta-author img{ border-radius:999px; }

/* Hero media sizing: smaller, consistent crop */
.jbk-single-post .hero-media{
  width:100%;
  max-height:420px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  aspect-ratio:unset; /* override previous */
}
.jbk-single-post .hero-media img{
  width:100%;
  height:auto; /* allow natural height so image renders */
  object-fit:cover; /* still covers when taller */
  object-position:center center;
  margin:0 auto;
}

@media (max-width: 1024px){
  .jbk-single-post .container{ padding:56px 16px; }
  .jbk-single-post .content-wrap{ grid-template-columns: 1fr; }
  .jbk-single-post .share-bar{ position:static; flex-direction:row; }
  .jbk-single-post .hero-media{ max-height: 340px; }
}
@media (max-width: 680px){
  .jbk-single-post h1{ font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .jbk-single-post .hero-media{ max-height: 220px; }
  /* اجعل المحتوى في منتصف الصفحة وأزل الفراغ الجانبي الناتج عن الشير بار */
  .jbk-single-post .content-wrap {
    grid-template-columns: 1fr !important;
    justify-content: center;
  }
  .jbk-single-post .share-bar {
    position: static !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
    gap: 12px;
    width: 100%;
    order: -1;
  }
  .jbk-single-post .entry-content {
    margin-inline: auto;
    max-width: 98vw;
    box-sizing: border-box;
  }
}

/* Layout */
.jbk-single-post .content-wrap{ display:grid; grid-template-columns: 80px 1fr; gap:22px; }
.jbk-single-post .share-bar{ position:sticky; top:100px; height:fit-content; display:flex; flex-direction:column; gap:10px; }
.jbk-single-post .share-btn{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid #e9f3f2; background:#fff; color:#111827; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.jbk-single-post .share-btn:hover{ background:#F5F3EF; color: var(--primary); }
.jbk-single-post .copy-status{ min-height:18px; font-size:.85rem; color:#0f766e; }

/* Content */
.jbk-single-post .entry-content{ background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); padding:28px; }
.jbk-single-post .entry-content p{ line-height:1.85; color:#334155; margin: 0 0 1.1em; }
.jbk-single-post .entry-content h2{ font-size:1.6rem; margin:1.2em 0 .4em; }
.jbk-single-post .entry-content h3{ font-size:1.3rem; margin:1.05em 0 .35em; }
.jbk-single-post .entry-content img{ border-radius:12px; }
.jbk-single-post .entry-content a{ color: var(--primary); font-weight:600; text-decoration:none; }
.jbk-single-post .entry-content a:hover, .jbk-single-post .entry-content a:focus{ color: var(--accent); text-decoration:none; }

/* Tags */
.jbk-single-post .post-tags{ margin-top:16px; }
.jbk-single-post .tags a{ display:inline-block; margin:0 8px 8px 0; padding:8px 12px; background:#fff; border:1px solid #e9e2d2; border-radius:999px; color: var(--primary); font-weight:700; box-shadow: 0 2px 6px rgba(0,0,0,.04); text-decoration:none; }

/* Post nav */
.jbk-single-post .post-nav{ margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.jbk-single-post .post-nav a{ 
  display:inline-flex; 
  align-items:center; 
  gap:10px; 
  padding:10px 14px; 
  border-radius:12px; 
  border:1px solid #e9e2d2; /* was #e9f3f2 (greenish) */
  background:#fff; 
  color:#111827; 
  text-decoration:none; 
  box-shadow: 0 2px 6px rgba(0,0,0,.04); 
}
.jbk-single-post .post-nav a:hover{ 
  background:#F5F3EF; /* brand neutral instead of green tint */
  color: var(--primary); /* gold accent */
  border-color:#e9e2d2;
}

/* Related */
.jbk-single-post .related{ margin-top:24px; }
.jbk-single-post .related .grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:22px; }
.jbk-single-post .related .rel-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; }
.jbk-single-post .related .rel-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.04); }
.jbk-single-post .related .media{ aspect-ratio: 16/9; background:#f0fdf9; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.jbk-single-post .related .media img{ width:100%; height:100%; object-fit:cover; display:block; }
.jbk-single-post .related .media-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color: var(--primary); font-size:2rem; }
.jbk-single-post .related .content{ padding:16px 18px 18px; }
.jbk-single-post .related .title{ margin:0; font-size:1.05rem; }
.jbk-single-post .related .excerpt{ color:#4b5563; margin:.35rem 0 0; }
.jbk-single-post .related .read-more{ display:inline-flex; align-items:center; gap:8px; color: var(--primary); font-weight:700; }

/* Reveal */
.jbk-single-post .reveal{ opacity:0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.jbk-single-post .post-hero .reveal{ opacity:1; transform:none; }

/* Reveal fix: when a container becomes in-view, show its .reveal children */
.jbk-single-post .in-view .reveal{ opacity:1; transform:none; transition-delay: calc(var(--i, 0) * 90ms); }

/* RTL */
body.is-ar .jbk-single-post{ direction: rtl; }
body.is-ar .jbk-single-post .post-nav .prev i{ transform: scaleX(-1); }
body.is-ar .jbk-single-post .post-nav .next i{ transform: scaleX(-1); }

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