/* DCC – Blog Page Styles */

/* Hero V2 — editorial "journal" with trending sidebar */
.blog-hero-v2 { background: linear-gradient(160deg, #fdf9f0 0%, #faf3e4 60%, #fbf0dd 100%); padding: 4.5rem 0; position: relative; overflow: hidden; }
[data-theme="dark"] .blog-hero-v2 { background: linear-gradient(160deg, #100b04 0%, #140f06 100%); }
.blog-hero-v2::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(rgba(180,83,6,.05) 0px, rgba(180,83,6,.05) 1px, transparent 1px, transparent 34px);
}

.blog-hero-v2__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; position: relative; z-index: 1; }

.blog-hero-v2__kicker { display: inline-flex; align-items: center; gap: .6rem; color: #b45309; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.1rem; }
.blog-hero-v2__kicker-line { width: 30px; height: 2px; background: #b45309; border-radius: 2px; }
.blog-hero-v2__title { font-family: 'Manrope', sans-serif; font-size: clamp(2.2rem, 4vw, 3.3rem); font-weight: 700; color: var(--navy); line-height: 1.18; margin-bottom: 1rem; }
.blog-hero-v2__title em { color: #b45309; font-style: italic; }
.blog-hero-v2__sub { color: var(--gray); font-size: 1.02rem; line-height: 1.75; max-width: 460px; margin-bottom: 1.6rem; }
.blog-hero-v2__topics { display: flex; gap: .6rem; flex-wrap: wrap; }
.bh-topic { display: inline-flex; align-items: center; gap: .4rem; background: rgba(180,83,6,.08); color: #92400e; border: 1px solid rgba(180,83,6,.2); padding: .4rem .9rem; border-radius: 50px; font-size: .8rem; font-weight: 700; }
[data-theme="dark"] .bh-topic { background: rgba(180,83,6,.14); color: #fbbf24; }

/* Trending sidebar card */
.blog-hero-v2__trending { background: var(--white); border-radius: 20px; padding: 1.6rem; box-shadow: 0 16px 40px rgba(0,0,0,.08); border: 1px solid var(--gray-light); }
.bht-header { display: flex; align-items: center; gap: .5rem; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1rem; color: var(--navy); margin-bottom: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--gray-light); }
.bht-item { display: flex; align-items: flex-start; gap: .9rem; padding: .7rem 0; text-decoration: none; transition: var(--transition); }
.bht-item:not(:last-child) { border-bottom: 1px dashed var(--gray-light); }
.bht-item:hover strong { color: #b45309; }
.bht-num { font-family: 'Manrope', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--gray-light); flex-shrink: 0; }
.bht-item strong { display: block; font-size: .87rem; font-weight: 700; color: var(--navy); line-height: 1.4; margin-bottom: .25rem; transition: var(--transition); }
.bht-item span { font-size: .74rem; color: var(--gray); }

/* Filter */
.blog-filter{background:var(--white);padding:1.5rem 0;border-bottom:1px solid var(--gray-light);position:sticky;top:52px;z-index:90}
.blog-filter__tabs{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.blog-tab{padding:.55rem 1.3rem;border-radius:9999px;font-family:'Manrope',sans-serif;font-size:.82rem;font-weight:700;border:2px solid var(--gray-light);background:var(--white);color:var(--navy);cursor:pointer;transition:var(--transition)}
.blog-tab:hover{border-color:var(--green);color:var(--green)}
.blog-tab.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 3px 12px rgba(29,185,84,.25)}

/* Featured */
.blog-featured{padding:3rem 0;background:var(--off-white)}
.blog-featured__card{display:grid;grid-template-columns:1fr 1.2fr;border-radius:20px;overflow:hidden;background:var(--white);box-shadow:0 8px 30px rgba(0,0,0,.1);border:1px solid var(--gray-light);transition:var(--transition)}
.blog-featured__card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(0,0,0,.12)}
.bfc-visual{display:flex;align-items:center;justify-content:center;position:relative;min-height:280px}
.bfc-emoji{font-size:6rem;filter:drop-shadow(0 8px 20px rgba(0,0,0,.3))}
.bfc-badge{position:absolute;top:1.2rem;left:1.2rem;background:var(--green);color:#fff;padding:.3rem .9rem;border-radius:9999px;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.bfc-content{padding:2.5rem}
.bfc-meta{display:flex;gap:.8rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.bfc-tag{background:rgba(29,185,84,.1);color:var(--green-dark);padding:.2rem .7rem;border-radius:9999px;font-size:.72rem;font-weight:700}
.bfc-date,.bfc-read{font-size:.75rem;color:var(--gray);display:flex;align-items:center;gap:.3rem}
.bfc-date i,.bfc-read i{color:var(--green);font-size:.65rem}
.bfc-content h2{font-family:'Manrope',sans-serif;font-size:1.5rem;font-weight:700;color:var(--navy);line-height:1.3;margin-bottom:.8rem}
.bfc-content p{font-size:.92rem;color:var(--gray);line-height:1.7;margin-bottom:1.5rem}

/* Blog Grid */
.blog-main{padding:3.5rem 0;background:var(--off-white)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.blog-card{background:var(--white);border-radius:18px;overflow:hidden;border:1px solid var(--gray-light);transition:var(--transition)}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.1);border-color:var(--green)}
.blog-card.hidden{display:none}
.blog-featured__card.hidden{display:none}
.bc-visual{height:180px;display:flex;align-items:center;justify-content:center}
.bc-visual span{font-size:3.5rem;transition:var(--transition)}
.blog-card:hover .bc-visual span{transform:scale(1.15) rotate(5deg)}
.bc-body{padding:1.5rem}
.bc-meta{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.bc-tag{background:rgba(29,185,84,.1);color:var(--green-dark);padding:.2rem .6rem;border-radius:9999px;font-size:.68rem;font-weight:700}
.bc-meta span:last-child{font-size:.72rem;color:var(--gray)}
.bc-body h3{font-family:'Manrope',sans-serif;font-size:1.05rem;font-weight:700;color:var(--navy);line-height:1.35;margin-bottom:.5rem}
.bc-body p{font-size:.82rem;color:var(--gray);line-height:1.65;margin-bottom:.8rem}
.bc-link{color:var(--green);font-weight:700;font-size:.82rem;transition:var(--transition)}
.bc-link:hover{color:var(--green-dark);text-decoration:underline}

/* Newsletter */
.blog-newsletter{padding:4rem 0;background:var(--white)}
.newsletter-card{background:linear-gradient(135deg,#1a2e1a,#0f3d2e);border-radius:24px;padding:3rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.newsletter-text h2{font-family:'Manrope',sans-serif;font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:.5rem}
.newsletter-text p{font-size:.88rem;color:rgba(255,255,255,.6);max-width:400px}
.newsletter-form{display:flex;gap:.6rem;flex:1;max-width:400px}
.newsletter-form input{flex:1;padding:.78rem 1rem;border:1.5px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-family:'Manrope',sans-serif;font-size:.88rem;outline:none;transition:var(--transition)}
.newsletter-form input::placeholder{color:rgba(255,255,255,.4)}
.newsletter-form input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(29,185,84,.2)}
.newsletter-form .btn-primary{white-space:nowrap;padding:.78rem 1.5rem;min-width:unset}

/* Responsive */
@media(max-width:1024px){
  .blog-featured__card{grid-template-columns:1fr}.bfc-visual{min-height:200px}.blog-grid{grid-template-columns:repeat(2,1fr)}
  .blog-hero-v2__inner{grid-template-columns:1fr;text-align:center}
  .blog-hero-v2__kicker,.blog-hero-v2__topics{justify-content:center}
  .blog-hero-v2__sub{margin-left:auto;margin-right:auto}
  .blog-hero-v2__trending{max-width:440px;margin:0 auto}
}
@media(max-width:768px){.blog-grid{grid-template-columns:1fr}.newsletter-card{flex-direction:column;text-align:center;padding:2rem}.newsletter-form{max-width:100%;width:100%}.blog-hero-v2{padding:3.5rem 0}.blog-filter{top:46px}}
@media(max-width:480px){.newsletter-form{flex-direction:column}.newsletter-form .btn-primary{width:100%;text-align:center}.blog-filter__tabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.3rem;scrollbar-width:none;-ms-overflow-style:none}.blog-filter__tabs::-webkit-scrollbar{display:none}.blog-tab{flex-shrink:0}}
@media(max-width:360px){.newsletter-card{padding:1.5rem 1rem}}