/* ============================================================
   Julyem - HERO BANNER khu vực Blog
   Dùng chung cho trang Blog/Lưu trữ/Tìm kiếm và trang chi tiết bài viết.
   Hero render qua hook flatsome_after_header nên nằm NGOÀI #content
   -> phải tự khai báo biến màu tại đây, không kế thừa được từ
   .blog-archive / .blog-single.
   ============================================================ */

.jl-blog-hero {
    --jl-primary: #003462;
    --jl-heading: #0B3F66;
    --jl-gold:      #CFA56A;
    --jl-gold-soft: #E4C79A;
    --jl-muted:     #7A8A99;

    position: relative;
    overflow: hidden;
    text-align: center;
    color: #d6e0ea;
    background:
        radial-gradient(1100px 520px at 80% -20%, rgba(207, 165, 106, .12), transparent 60%),
        linear-gradient(160deg, #003462 0%, #022744 100%);
}

.jl-blog-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    padding: 64px 24px 68px;
}

.jl-blog-hero-eyebrow {
    margin: 0 0 12px;
    color: var(--jl-gold);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.jl-blog-hero-eyebrow a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}
.jl-blog-hero-eyebrow a:hover { color: #fff; }

.jl-blog-hero-title {
    margin: 0;
    color: var(--jl-gold);
    font-size: clamp(28px, 4.4vw, 46px);
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.15;
    text-shadow: 0 1px 10px rgba(207, 165, 106, .25);
}

.jl-blog-hero-sub {
    margin: 16px auto 0;
    max-width: 620px;
    color: #aebecd;
    font-size: 16px;
    line-height: 1.75;
}

/* ============================================================
   BIẾN THỂ: trang chi tiết bài viết
   Tiêu đề bài viết dài hơn tiêu đề trang nên chữ nhỏ lại,
   khung rộng hơn.
   ============================================================ */
.jl-blog-hero--post .jl-blog-hero-inner {
    max-width: 900px;
    padding: 56px 24px 60px;
}

/* Cỡ chữ bám theo .entry-title gốc của theme (tối đa 30px) - tiêu đề
   bài viết thường dài nên không dùng cỡ lớn như hero trang lưu trữ. */
.jl-blog-hero--post .jl-blog-hero-title {
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.3;
    letter-spacing: .5px;
}

/* Vạch vàng dưới tiêu đề - đồng bộ với .entry-divider của bài viết.
   Flatsome đặt opacity .1 cho <hr> nên phải ghi đè, nếu không vạch
   gần như tàng hình. */
.jl-blog-hero--post .jl-blog-hero-rule {
    width: 90px;
    height: 2px;
    margin: 20px auto 0;
    border: 0;
    opacity: 1;
    background: linear-gradient(90deg, transparent, var(--jl-gold), transparent);
}

/* Ngày đăng · tác giả */
.jl-blog-hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 18px 0 0;
    color: #aebecd;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.jl-blog-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.jl-blog-hero-meta svg { color: var(--jl-gold); flex: 0 0 auto; }

/* Có ảnh đại diện -> dùng làm nền hero, phủ lớp navy cho chữ nổi */
.jl-blog-hero--post.has-image {
    background:
        linear-gradient(160deg, rgba(0, 52, 98, .88) 0%, rgba(2, 39, 68, .92) 100%),
        var(--jl-hero-img) center / cover no-repeat;
}
.jl-blog-hero--post.has-image .jl-blog-hero-inner {
    padding-top: 76px;
    padding-bottom: 80px;
}
.jl-blog-hero--post.has-image .jl-blog-hero-title {
    color: #fff;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .5);
}
.jl-blog-hero--post.has-image .jl-blog-hero-eyebrow { color: var(--jl-gold-soft); }
.jl-blog-hero--post.has-image .jl-blog-hero-rule {
    background: linear-gradient(90deg, transparent, var(--jl-gold-soft), transparent);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 549px) {
    .jl-blog-hero-inner { padding: 48px 20px 52px; }
    .jl-blog-hero--post .jl-blog-hero-inner { padding: 40px 20px 44px; }
    .jl-blog-hero--post.has-image .jl-blog-hero-inner {
        padding-top: 52px;
        padding-bottom: 56px;
    }
    .jl-blog-hero-meta { font-size: 12.5px; gap: 6px 12px; }
}