/* ═══════════════════════════════════════════
   Blog Page – Pure CSS3 (bl- prefix)
   Color Palette: Gold #D4AF37, Purple #9333EA,
   Deep #1A0B2E, Teal #0D9488
   ═══════════════════════════════════════════ */

/* ── Variables ── */
.bl-page{
    --bl-gold:#D4AF37;
    --bl-purple:#9333EA;
    --bl-deep:#1A0B2E;
    --bl-teal:#0D9488;
    --bl-cream:#FAF8F5;
    --bl-lavender:#F3E8FF;
    --bl-body:#5A4A6A;
    --bl-border:rgba(212,175,55,.15);
    --bl-card-shadow:0 4px 24px rgba(26,11,46,.06);
    --bl-radius:16px;
}

/* ── Container ── */
.bl-container{max-width:1320px;margin:0 auto;padding:0 24px}

/* ══════════════════════════════════
   HERO
   ══════════════════════════════════ */
.bl-hero{
    position:relative;
    padding:100px 0 60px;
    overflow:hidden;
    background:linear-gradient(135deg,#FAF8F5 0%,#FDF6E3 40%,#F3E8FF 100%)
}
.bl-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bl-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.5
}
.bl-blob-1{width:400px;height:400px;background:rgba(212,175,55,.18);top:-120px;right:-100px}
.bl-blob-2{width:320px;height:320px;background:rgba(147,51,234,.12);bottom:-80px;left:-60px}
.bl-blob-3{width:200px;height:200px;background:rgba(13,148,136,.10);top:40%;left:50%}

.bl-hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:700px;
    margin:0 auto
}
.bl-label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'DM Sans',sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--bl-gold);
    margin-bottom:16px
}
.bl-hero-title{
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:clamp(32px,5vw,52px);
    font-weight:600;
    color:var(--bl-deep);
    line-height:1.15;
    margin:0
}
.bl-grad-text{
    background:linear-gradient(135deg,var(--bl-gold),var(--bl-purple));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text
}
.bl-hero-sub{
    font-family:'DM Sans',sans-serif;
    font-size:16px;
    color:var(--bl-body);
    line-height:1.7;
    margin-top:16px;
    max-width:560px;
    margin-left:auto;
    margin-right:auto
}

/* Hero Stats */
.bl-hero-stats{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    margin-top:28px
}
.bl-hero-stat{text-align:center}
.bl-hero-stat-val{
    display:block;
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:28px;
    font-weight:700;
    color:var(--bl-deep)
}
.bl-hero-stat-label{
    font-family:'DM Sans',sans-serif;
    font-size:12px;
    color:var(--bl-body);
    opacity:.7
}
.bl-hero-stat-divider{
    width:1px;
    height:32px;
    background:var(--bl-border);
    opacity:.6
}

/* ══════════════════════════════════
   FILTERS
   ══════════════════════════════════ */
.bl-filters-section{
    background:var(--bl-cream);
    padding:0 0 12px;
    position:sticky;
    top:64px;
    z-index:20
}
.bl-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    padding:16px 0
}
.bl-filter{
    padding:8px 18px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.08);
    background:#fff;
    font-family:'DM Sans',sans-serif;
    font-size:13px;
    font-weight:500;
    color:#6B7280;
    cursor:pointer;
    transition:all .25s ease;
    white-space:nowrap
}
.bl-filter:hover{
    border-color:rgba(0,0,0,.18);
    color:var(--bl-deep)
}
.bl-filter.active{
    background:var(--bl-deep);
    color:#fff;
    border-color:var(--bl-deep);
    box-shadow:0 4px 12px rgba(26,11,46,.18)
}

/* ══════════════════════════════════
   CARDS GRID
   ══════════════════════════════════ */
.bl-cards-section{
    padding:40px 0 80px;
    background:#fff
}
.bl-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}
.bl-card{
    position:relative;
    background:#fff;
    border-radius:var(--bl-radius);
    border:1px solid rgba(0,0,0,.06);
    overflow:hidden;
    transition:box-shadow .35s ease,transform .35s ease;
    cursor:pointer;
    text-decoration:none;
    color:inherit;
    display:flex;
    flex-direction:column
}
.bl-card:hover{
    box-shadow:0 20px 48px -12px rgba(26,11,46,.12);
    transform:translateY(-4px)
}

/* Card Image */
.bl-card-img{
    position:relative;
    height:200px;
    overflow:hidden
}
.bl-card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top;
    transition:transform .6s ease
}
.bl-card:hover .bl-card-img img{transform:scale(1.06)}
.bl-card-img-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.3),transparent)
}
.bl-card-cat{
    position:absolute;
    top:14px;
    left:14px;
    font-family:'DM Sans',sans-serif;
    font-size:11px;
    font-weight:600;
    padding:5px 12px;
    border-radius:999px;
    color:#fff
}
.bl-card-read{
    position:absolute;
    top:14px;
    right:14px;
    font-family:'DM Sans',sans-serif;
    font-size:11px;
    font-weight:500;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(6px);
    color:#4B5563
}

/* Card Body */
.bl-card-body{
    padding:20px;
    display:flex;
    flex-direction:column;
    flex:1
}
.bl-card-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:10px
}
.bl-card-tag{
    font-family:'DM Sans',sans-serif;
    font-size:11px;
    padding:3px 8px;
    border-radius:999px;
    font-weight:500
}
.bl-card-title{
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:19px;
    font-weight:600;
    color:var(--bl-deep);
    line-height:1.35;
    margin:0 0 8px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.bl-card:hover .bl-card-title{color:#111}
.bl-card-excerpt{
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    color:#6B7280;
    line-height:1.65;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-bottom:auto
}

/* Card Footer */
.bl-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:14px;
    margin-top:16px;
    border-top:1px solid rgba(0,0,0,.05)
}
.bl-card-author{
    display:flex;
    align-items:center;
    gap:10px
}
.bl-card-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    overflow:hidden;
    flex-shrink:0
}
.bl-card-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top
}
.bl-card-avatar-icon{
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:14px
}
.bl-card-img-placeholder{
    width:100%;
    height:100%;
    min-height:200px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:48px;
    color:rgba(0,0,0,.15)
}
.bl-card-author-name{
    font-family:'DM Sans',sans-serif;
    font-size:12px;
    font-weight:600;
    color:#374151;
    line-height:1
}
.bl-card-author-role{
    font-family:'DM Sans',sans-serif;
    font-size:11px;
    color:#9CA3AF;
    margin-top:3px
}
.bl-card-date{
    font-family:'DM Sans',sans-serif;
    font-size:12px;
    color:#9CA3AF;
    display:flex;
    align-items:center;
    gap:4px
}

/* Card Bottom Accent */
.bl-card-accent{
    position:absolute;
    bottom:0;
    left:0;
    height:3px;
    width:0;
    transition:width .5s ease;
    border-radius:0 0 var(--bl-radius) var(--bl-radius)
}
.bl-card:hover .bl-card-accent{width:100%}

/* ══════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════ */
.bl-empty{
    text-align:center;
    padding:80px 20px;
    color:#9CA3AF;
    font-family:'DM Sans',sans-serif;
    font-size:15px;
    display:none
}
.bl-empty.visible{display:block}
.bl-empty i{
    font-size:48px;
    color:rgba(212,175,55,.3);
    display:block;
    margin-bottom:12px
}

/* ══════════════════════════════════
   MODAL
   ══════════════════════════════════ */
.bl-modal{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease
}
.bl-modal.is-open{
    opacity:1;
    pointer-events:auto
}
.bl-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(8px)
}
.bl-modal-card{
    position:relative;
    background:#fff;
    border-radius:20px;
    width:100%;
    max-width:660px;
    max-height:90vh;
    overflow:hidden;
    box-shadow:0 25px 60px -12px rgba(0,0,0,.25);
    transform:scale(.94) translateY(16px);
    transition:transform .3s ease,opacity .3s ease;
    opacity:0
}
.bl-modal.is-open .bl-modal-card{
    transform:scale(1) translateY(0);
    opacity:1
}
.bl-modal-img{
    position:relative;
    height:220px;
    overflow:hidden
}
.bl-modal-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top
}
.bl-modal-img-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.45),transparent)
}
.bl-modal-cat{
    position:absolute;
    top:16px;
    left:16px;
    font-family:'DM Sans',sans-serif;
    font-size:11px;
    font-weight:600;
    padding:5px 12px;
    border-radius:999px;
    color:#fff
}
.bl-modal-close{
    position:absolute;
    top:16px;
    right:16px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(6px);
    border-radius:50%;
    border:none;
    cursor:pointer;
    color:#374151;
    font-size:20px;
    transition:all .2s ease
}
.bl-modal-close:hover{background:#fff;color:#111}
.bl-modal-body{
    padding:28px;
    overflow-y:auto;
    max-height:calc(90vh - 220px)
}
.bl-modal-title{
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:24px;
    font-weight:600;
    color:var(--bl-deep);
    line-height:1.3;
    margin:0 0 14px
}
.bl-modal-meta{
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:18px;
    margin-bottom:18px;
    border-bottom:1px solid rgba(0,0,0,.06)
}
.bl-modal-meta-text{
    font-family:'DM Sans',sans-serif;
    font-size:13px;
    color:#374151;
    font-weight:600
}
.bl-modal-meta-sub{
    font-family:'DM Sans',sans-serif;
    font-size:12px;
    color:#9CA3AF;
    margin-top:2px
}
.bl-modal-excerpt{
    font-family:'DM Sans',sans-serif;
    font-size:15px;
    color:#4B5563;
    line-height:1.75;
    margin-bottom:14px
}
.bl-modal-placeholder{
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    color:#9CA3AF;
    line-height:1.7
}

/* ══════════════════════════════════
   CTA SECTION
   ══════════════════════════════════ */
.bl-cta{
    padding:80px 0;
    background:linear-gradient(135deg,var(--bl-cream) 0%,#FDF6E3 100%);
    position:relative;
    overflow:hidden
}
.bl-cta::before{
    content:'';
    position:absolute;
    top:-60px;
    right:-60px;
    width:300px;
    height:300px;
    background:rgba(147,51,234,.06);
    border-radius:50%;
    filter:blur(60px)
}
.bl-cta-inner{
    text-align:center;
    max-width:560px;
    margin:0 auto
}
.bl-cta-icon{
    font-size:40px;
    color:var(--bl-gold);
    margin-bottom:14px
}
.bl-cta-title{
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:clamp(26px,4vw,40px);
    font-weight:600;
    color:var(--bl-deep);
    margin:0 0 12px
}
.bl-cta-desc{
    font-family:'DM Sans',sans-serif;
    font-size:15px;
    color:var(--bl-body);
    line-height:1.7;
    margin-bottom:24px
}
.bl-cta-links{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap
}
.bl-btn-gradient{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 28px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--bl-gold),#C5973A);
    color:#fff;
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:all .3s ease;
    box-shadow:0 4px 16px rgba(212,175,55,.25)
}
.bl-btn-gradient:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(212,175,55,.35)
}
.bl-btn-outline{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 28px;
    border-radius:999px;
    border:1.5px solid rgba(26,11,46,.15);
    background:transparent;
    color:var(--bl-deep);
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:all .3s ease
}
.bl-btn-outline:hover{
    border-color:var(--bl-purple);
    color:var(--bl-purple);
    transform:translateY(-2px)
}

/* ══════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════ */
.bl-rv{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease,transform .7s ease
}
.bl-js .bl-rv.in{
    opacity:1;
    transform:translateY(0)
}

/* ══════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════ */
@media(max-width:1024px){
    .bl-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media(max-width:768px){
    .bl-hero{padding:80px 0 40px}
    .bl-hero-title{font-size:28px}
    .bl-hero-sub{font-size:14px}
    .bl-hero-stats{gap:16px}
    .bl-hero-stat-val{font-size:22px}

    .bl-filters-section{top:56px}
    .bl-filters{gap:6px;padding:12px 0}
    .bl-filter{padding:6px 14px;font-size:12px}

    .bl-grid{grid-template-columns:1fr;gap:16px}

    .bl-card-img{height:180px}
    .bl-card-body{padding:16px}
    .bl-card-title{font-size:17px}

    .bl-modal-img{height:180px}
    .bl-modal-body{padding:20px}
    .bl-modal-title{font-size:20px}

    .bl-cta{padding:50px 0}
}
@media(max-width:480px){
    .bl-container{padding:0 16px}
    .bl-hero{padding:70px 0 30px}
    .bl-hero-stats{flex-wrap:wrap;gap:12px}
    .bl-card-img{height:160px}
    .bl-modal{padding:12px}
    .bl-modal-card{border-radius:16px}
    .bl-cta-links{flex-direction:column;align-items:center}
}