/* =========================================================
   blog-details.css
   Page-specific styles for the BLOG DETAILS (single post) page.
   Load AFTER common.css and blog.css (related posts reuse .blog-card).
   Uses the same tokens as home.css (--gold, --ink, --bg-page, --ease)
   and follows the site's light / dark theme.
   ========================================================= */

/* ---------- Theme tokens (light = default) ---------- */
.bd-page{
  --c-card:  #ffffff;
  --c-text:  var(--ink, #1c1712);
  --c-muted: rgba(28,23,18,.62);
  --c-line:  rgba(28,23,18,.14);
  --c-field: #faf8f4;
  --c-gold:  var(--gold, #e8c15a);
}
[data-theme="dark"] .bd-page,
[data-bs-theme="dark"] .bd-page,
html.dark .bd-page,
body.dark .bd-page,
body.dark-theme .bd-page{
  --c-card:  #1f1a15;
  --c-text:  #f5efe6;
  --c-muted: rgba(245,239,230,.66);
  --c-line:  rgba(255,255,255,.14);
  --c-field: rgba(255,255,255,.05);
}

/* ============ PAGE ============ */
.bd-page{
  background:var(--bg-page);
  color:var(--c-text);
  padding:150px 0 100px;
  transition:background .4s var(--ease, ease), color .4s var(--ease, ease);
}
.bd-wrap{width:min(1200px, 92%); margin:0 auto;}

/* breadcrumb */
.bd-crumb{display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--c-muted); margin-bottom:22px;}
.bd-crumb a{color:var(--c-muted); text-decoration:none; transition:color .3s;}
.bd-crumb a:hover{color:var(--c-gold);}

/* title area */
.bd-head{max-width:820px; margin-bottom:34px;}
.bd-tag{
  display:inline-block; margin-bottom:16px;
  background:rgba(232,193,90,.14); color:var(--c-gold);
  border:1px solid rgba(232,193,90,.45);
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:20px;
}
.bd-head h1{font-size:clamp(28px,4.2vw,46px); line-height:1.25; font-weight:400; margin:0 0 18px; color:var(--c-text);}
.bd-meta{display:flex; flex-wrap:wrap; align-items:center; gap:18px; font-size:13.5px; color:var(--c-muted);}
.bd-meta i{color:var(--c-gold); margin-right:6px;}

/* layout */
.bd-layout{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:40px; align-items:start;}

/* featured image */
.bd-cover{position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; margin-bottom:34px;}
.bd-cover .img,
.bd-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background-size:cover; background-position:center;}
.bd-cover .img{background-image:linear-gradient(165deg,#87b6d6,#3d5a72 55%,#26313c),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 8px, transparent 8px 26px);}

/* article content */
.bd-content{font-size:16.5px; line-height:1.85; color:var(--c-text);}
.bd-content p{margin:0 0 22px; color:var(--c-muted);}
.bd-content h2{font-size:26px; font-weight:500; margin:38px 0 14px; color:var(--c-text);}
.bd-content h3{font-size:20px; font-weight:600; margin:30px 0 12px; color:var(--c-text);}
.bd-content ul{padding-left:0; list-style:none; margin:0 0 24px;}
.bd-content ul li{position:relative; padding-left:28px; margin-bottom:10px; color:var(--c-muted);}
.bd-content ul li::before{content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; top:0; color:var(--c-gold);}
.bd-content blockquote{
  margin:30px 0; padding:22px 26px;
  background:var(--c-card); border:1px solid var(--c-line); border-left:4px solid var(--c-gold);
  border-radius:14px; font-size:18px; font-style:italic; color:var(--c-text);
}
.bd-content img{max-width:100%; border-radius:14px; margin:10px 0 24px;}

/* tags + share */
.bd-foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px;
  margin-top:36px; padding:22px 0; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line);
}
.bd-tags,.bd-share{display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.bd-tags a{
  font-size:13px; padding:7px 14px; border-radius:20px; text-decoration:none;
  color:var(--c-muted); background:var(--c-card); border:1px solid var(--c-line);
  transition:all .3s;
}
.bd-tags a:hover{border-color:var(--c-gold); color:var(--c-gold);}
.bd-share span{font-size:13px; font-weight:700; color:var(--c-muted); text-transform:uppercase; letter-spacing:.08em;}
.bd-share a{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; color:var(--c-text); text-decoration:none; font-size:16px;
  background:var(--c-card); border:1px solid var(--c-line);
  transition:all .3s;
}
.bd-share a:hover{background:var(--c-gold); border-color:var(--c-gold); color:#111; transform:translateY(-3px);}

/* author box */
.bd-author{
  display:flex; gap:20px; align-items:center;
  margin-top:34px; padding:26px;
  background:var(--c-card); border:1px solid var(--c-line); border-radius:18px;
}
.bd-avatar{
  width:76px; height:76px; flex:0 0 76px; border-radius:50%;
  background:linear-gradient(165deg,#d7c3a4,#8a6a4c 55%,#3a2c20);
  border:2px solid var(--c-gold); overflow:hidden;
}
.bd-avatar img{width:100%; height:100%; object-fit:cover;}
.bd-author h4{margin:0 0 4px; font-size:17px; color:var(--c-text);}
.bd-author small{display:block; margin-bottom:8px; color:var(--c-gold); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase;}
.bd-author p{margin:0; font-size:14.5px; line-height:1.65; color:var(--c-muted);}

/* prev / next */
.bd-nav{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px;}
.bd-nav a{
  display:block; padding:20px 22px; text-decoration:none;
  background:var(--c-card); border:1px solid var(--c-line); border-radius:16px;
  transition:all .4s ease;
}
.bd-nav a:hover{border-color:#f2d074; box-shadow:0 0 10px rgba(232,193,90,.3), 0 12px 26px rgba(232,193,90,.15); transform:translateY(-4px);}
.bd-nav small{display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); margin-bottom:6px;}
.bd-nav strong{display:block; font-size:15px; line-height:1.4; color:var(--c-text); font-weight:600;}
.bd-nav .next{text-align:right;}

/* ============ SIDEBAR ============ */
.bd-side{position:sticky; top:110px; display:flex; flex-direction:column; gap:24px;}
.bd-box{background:var(--c-card); border:1px solid var(--c-line); border-radius:18px; padding:26px; transition:background .4s;}
.bd-box h4{font-size:16px; margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid var(--c-line); color:var(--c-text);}

/* search */
.bd-search{display:flex; gap:8px;}
.bd-search input{
  flex:1; min-width:0; padding:12px 14px; font:inherit; font-size:14px;
  color:var(--c-text); background:var(--c-field);
  border:1px solid var(--c-line); border-radius:12px; outline:0;
  transition:border-color .3s, box-shadow .3s;
}
.bd-search input:focus{border-color:var(--c-gold); box-shadow:0 0 0 3px rgba(232,193,90,.2);}
.bd-search button{
  width:46px; border:1px solid #e8c15a; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg, rgba(232,193,90,.96), rgba(190,145,45,.92)); color:#171717;
  transition:transform .3s;
}
.bd-search button:hover{transform:translateY(-2px);}

/* categories */
.bd-cats{list-style:none; margin:0; padding:0;}
.bd-cats li a{
  display:flex; justify-content:space-between; padding:11px 0;
  color:var(--c-muted); text-decoration:none; font-size:14.5px;
  border-bottom:1px dashed var(--c-line); transition:color .3s, padding .3s;
}
.bd-cats li:last-child a{border-bottom:0;}
.bd-cats li a:hover{color:var(--c-gold); padding-left:6px;}

/* recent posts */
.bd-recent{display:flex; gap:14px; align-items:center; text-decoration:none; padding:10px 0;}
.bd-recent + .bd-recent{border-top:1px dashed var(--c-line);}
.bd-recent .th{width:68px; height:68px; flex:0 0 68px; border-radius:12px; background-size:cover; background-position:center;}
.bd-recent .th.t2{background-image:linear-gradient(165deg,#9cc3dd,#4d6b83 55%,#2a343d);}
.bd-recent .th.t3{background-image:linear-gradient(165deg,#b9d4e6,#587a91 55%,#2c3742);}
.bd-recent .th.t4{background-image:linear-gradient(165deg,#d7c3a4,#8a6a4c 55%,#3a2c20);}
.bd-recent h5{margin:0 0 4px; font-size:14px; line-height:1.4; color:var(--c-text); font-weight:600; transition:color .3s;}
.bd-recent:hover h5{color:var(--c-gold);}
.bd-recent small{font-size:12px; color:var(--c-muted);}

/* related posts */
.bd-related{margin-top:80px;}
.bd-related > h2{font-size:clamp(24px,3vw,34px); font-weight:400; margin:0 0 30px; color:var(--c-text);}

/* ============ RESPONSIVE ============ */
@media (max-width:991.98px){
  .bd-layout{grid-template-columns:1fr;}
  .bd-side{position:static;}
}
@media (max-width:575.98px){
  .bd-page{padding:110px 0 70px;}
  .bd-author{flex-direction:column; text-align:center;}
  .bd-nav{grid-template-columns:1fr;}
  .bd-nav .next{text-align:left;}
  .bd-foot{flex-direction:column; align-items:flex-start;}
}