.blog-detail-hero { padding: 48px 0 52px; background: #171513; color: #fff; font-family: var(--font-primary); }
.blog-detail-hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); align-items: center; gap: 56px; }
.blog-detail-hero__content { min-width: 0; }
.blog-detail-hero__breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 38px; color: rgba(255,255,255,.62); font-size: .75rem; }
.blog-detail-hero__breadcrumb a { color: #c28b4a; text-decoration: none; }
.blog-detail__category { display: block; margin-bottom: 16px; color: #c28b4a; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.blog-detail-hero h1 { max-width: 680px; margin: 0 0 26px; color: #fff; font-family: var(--font-primary); font-size: clamp(2.4rem, 5vw, 4.7rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.04; }
.blog-detail__meta { display: flex; flex-wrap: wrap; gap: 18px; color: rgba(255,255,255,.72); font-size: .8rem; }
.blog-detail__meta span + span { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.35); }
.blog-detail-hero__media { min-width: 0; height: 270px; overflow: hidden; }
.blog-detail-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-detail-page { padding: 58px 0 76px; background: var(--color-bg); font-family: var(--font-primary); }
.blog-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .43fr); gap: 74px; align-items: start; }
.blog-detail-content { max-width: 770px; }
.blog-detail-content p { margin: 0 0 22px; color: var(--color-text); font-size: 1rem; font-weight: 500; line-height: 1.85; }
.blog-detail-content__rich-text table { width: 100%; margin: 28px 0; border-collapse: collapse; border: 1px solid #e2e8f0; background: #fff; font-size: .92rem; }
.blog-detail-content__rich-text th, .blog-detail-content__rich-text td { padding: 10px 12px; border: 1px solid #e2e8f0; text-align: left; vertical-align: top; color: var(--color-text); line-height: 1.45; }
.blog-detail-content__rich-text th { background: #f8fafc; color: var(--color-text); font-weight: 700; }
.blog-detail-content__rich-text th p, .blog-detail-content__rich-text td p { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.blog-detail-content__rich-text tr:nth-child(even) td { background: #fff; }
.blog-detail-content__rich-text blockquote { margin: 26px 0; padding: 18px 22px; border-left: 3px solid #c28b4a; background: rgba(194,139,74,.08); color: var(--color-text); font-size: 1.08rem; font-style: italic; line-height: 1.7; }
.blog-detail-content__rich-text ul, .blog-detail-content__rich-text ol { margin: 0 0 24px; padding-left: 24px; color: var(--color-text); line-height: 1.85; }
.blog-detail-content__intro { padding-bottom: 30px; border-bottom: 1px solid var(--color-border); font-size: clamp(1.15rem, 2vw, 1.4rem) !important; font-weight: 600; line-height: 1.65 !important; }
.blog-trending { padding: 25px 24px 18px; background: #171513; color: #fff; }
.blog-trending h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; color: #fff; font-family: var(--font-primary); font-size: 1.12rem; font-weight: 600; }
.blog-trending h2 span { width: 24px; height: 3px; background: #c28b4a; }
.blog-trending__item { display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.2); color: #fff; text-decoration: none; }
.blog-trending__item:first-child { border-top: 0; }
.blog-trending__item img { width: 106px; height: 82px; object-fit: cover; }
.blog-trending__copy { display: flex; flex-direction: column; min-width: 0; }
.blog-trending__copy small { margin-bottom: 3px; color: #c28b4a; font-size: .65rem; }
.blog-trending__copy strong { font-family: var(--font-primary); font-size: 1rem; font-weight: 700; line-height: 1.32; }
.blog-trending__copy time { margin-top: auto; color: rgba(255,255,255,.64); font-size: .68rem; }
@media (max-width: 900px) { .blog-detail-hero__inner { gap: 32px; } .blog-detail-layout { gap: 36px; } }
@media (max-width: 700px) { .blog-detail-hero { padding: 32px 0 38px; } .blog-detail-hero__inner, .blog-detail-layout { grid-template-columns: 1fr; } .blog-detail-hero__breadcrumb { margin-bottom: 28px; } .blog-detail-hero h1 { font-size: clamp(2rem, 10vw, 3rem); } .blog-detail-hero__media { height: 190px; } .blog-detail-page { padding: 42px 0 56px; } .blog-detail-content p { font-size: .92rem; line-height: 1.78; } .blog-trending { padding: 22px 18px 14px; } }

/* Detail refinements */
.blog-detail-hero__inner { grid-template-columns: 1fr; }
.blog-detail-hero { padding: 48px 0 28px; border-bottom: 1px solid rgba(255,255,255,.14); background: linear-gradient(90deg, rgba(20,17,15,.82) 0%, rgba(20,17,15,.68) 46%, rgba(20,17,15,.48) 100%), url("https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&w=2200&q=85") center / cover; }
.blog-detail-hero__breadcrumb { margin-bottom: 28px; }
.blog-detail-hero h1 { max-width: 680px; margin: 0 0 26px; color: #fff; font-family: var(--font-primary); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.blog-detail__meta { align-items: center; gap: 0; color: rgba(255,255,255,.78); }
.blog-detail__meta-item { display: inline-flex; align-items: center; gap: 10px; min-height: 24px; padding: 0 18px; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.blog-detail__meta-item:first-child { padding-left: 0; }
.blog-detail__meta-item + .blog-detail__meta-item { border-left: 1px solid rgba(255,255,255,.34); }
.blog-detail__meta-item strong { color: #c28b4a; font-weight: 700; }
.blog-detail__meta-item img { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.blog-trending { border-radius: var(--radius); }
.blog-trending h2 { font-size: 1.28rem; font-weight: 700; }
.blog-trending__item { grid-template-columns: 110px minmax(0, 1fr); }
.blog-trending__item img { width: 110px; height: 84px; }
.blog-trending__copy small { font-size: .72rem; font-weight: 600; }
.blog-trending__copy strong { font-size: .98rem; font-weight: 700; line-height: 1.28; }
.blog-trending__copy time { font-size: .74rem; }
@media (max-width: 700px) {
    .blog-detail-hero h1 { font-size: clamp(1.8rem, 9vw, 2.7rem); }
    .blog-detail__meta { align-items: flex-start; flex-wrap: wrap; row-gap: 10px; }
    .blog-detail__meta-item { padding: 0 10px; font-size: .82rem; }
    .blog-detail__meta-item:first-child { padding-left: 0; }
    .blog-trending__copy strong { font-size: .92rem; }
}