/* DCC – Blog Page Styles */

/* Hero */
.blog-hero{background:linear-gradient(135deg,var(--navy) 0%,#0a2540 60%,#0f3d2e 100%);padding:5rem 2rem 4rem;text-align:center;position:relative;overflow:hidden}
.blog-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(29,185,84,.15),transparent 70%)}
.blog-hero .section-label,.blog-hero__title,.blog-hero__sub,.blog-hero__breadcrumb{position:relative;z-index:1}
.blog-hero__title{font-family:'Lora',serif;font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:700;color:#fff;line-height:1.15;margin-bottom:1rem}
.blog-hero__title em{color:var(--green);font-style:italic}
.blog-hero__sub{color:rgba(255,255,255,.65);font-size:1.05rem;max-width:520px;margin:0 auto 1.5rem;line-height:1.7}
.blog-hero__breadcrumb{font-size:.82rem;color:rgba(255,255,255,.4)}.blog-hero__breadcrumb a{color:var(--green);font-weight:600}.blog-hero__breadcrumb .current{color:rgba(255,255,255,.7)}

/* 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:'Inter',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:'Lora',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}
.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:'Lora',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,var(--navy),#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:'Lora',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:'Inter',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}

/* 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)}}
@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{padding:4rem 1.5rem 3rem}}
@media(max-width:480px){.newsletter-form{flex-direction:column}.newsletter-form .btn-primary{width:100%;text-align:center}}