/* ---- START OF ORIGINAL CSS ---- */
.header-png:nth-child(1){height:260px}
.header-png:nth-child(2){margin-left:-60px}

*{box-sizing:border-box}

:root{--bg:#fff;--text:#0b0b0b;--muted:#6b7280;--accent:#009B3B;--card:#fff;--maxw:1100px}

.icon-btn{background:0;border:0;padding:8px;border-radius:8px;cursor:pointer;font-size:1.2rem;transition:all .3s ease}
.icon-btn:hover{background:rgba(0,155,59,.1);transform:scale(1.1)}

body{font-family:Oswald,system-ui,-apple-system,"Segoe UI",Roboto,Arial;margin:0;background:var(--bg);color:var(--text);padding-top:280px;overflow-x:hidden}

.header-wrapper{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--bg);box-shadow:0 2px 10px rgba(0,0,0,.05)}

.slogan-bar{background:#fff;height:64px;display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--accent)}
.slogan-content{display:flex;align-items:center;gap:.5rem}
.slogan-logo{height:24px;width:auto;object-fit:contain}
.slogan-bar p{margin:0;font-size:.85rem;color:#0b0b0b;font-weight:700;letter-spacing:.5px}

.brand-bar{background:#000;height:136px;display:flex;align-items:center;justify-content:center;padding:0 2rem;border-bottom:1px solid #333;position:relative}
.brand-container{max-width:var(--maxw);width:100%;display:flex;justify-content:space-between;align-items:center;position:relative}
.brand-leftindex,.brand-left{display:flex;gap:.75rem;align-items:center}
.brand-center{display:flex;align-items:center;justify-content:center;gap:0;position:absolute;left:50%;transform:translateX(-50%)}
.brand-right{display:flex;gap:.75rem;align-items:center}

.subscribe-btn{background:var(--accent);color:#fff;border:0;padding:10px 16px;border-radius:0;font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:.5rem;transition:all .3s ease;cursor:pointer}
.subscribe-btn:hover{background:#007a2f;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,155,59,.3)}
.subscribe-btn svg{width:16px;height:16px}

.header-png{height:130px;width:auto;object-fit:contain}
.header-png:nth-child(1){height:208px}
.header-png:nth-child(2){margin-left:-50px}

.logo-img{width:48px;height:48px;object-fit:contain;border:2px solid transparent;border-radius:8px;padding:4px;background:linear-gradient(white,white) padding-box,linear-gradient(135deg,var(--accent),#00d847) border-box}
.brand-name{font-size:1.5rem;font-weight:700;color:#fff}
.desktop-social{display:flex}

.social-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;transition:all .3s ease;border:1px solid #333}
.social-icon:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,155,59,.3);border-color:var(--accent)}
.social-icon svg{width:20px;height:20px}
.social-icon svg path{fill:var(--accent)}

.nav-bar{background:#fff;height:96px;display:flex;align-items:center;padding:0 2rem;position:relative}
.nav-bar::before{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.nav-container{max-width:var(--maxw);width:100%;margin:0 auto;display:flex;justify-content:space-between;align-items:center}

.hamburger{background:0;border:0;padding:8px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:all .3s ease}
.hamburger:hover{background:rgba(0,155,59,.1)}
.hamburger .bar{width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s ease}
.hamburger:hover .bar{background:var(--accent)}

.menu{flex:1;display:flex;justify-content:center}
.menu ul{display:flex;gap:.6rem;list-style:none;margin:0;padding:0}
.menu a{color:var(--text);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:800;font-size:.95rem;transition:all .3s ease;position:relative}
.menu a::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--accent);transition:width .3s ease}
.menu a:hover::after{width:80%}
.menu a:hover{color:var(--accent)}

.search-toggle{background:0;border:0;padding:8px;border-radius:8px;cursor:pointer;color:var(--text);transition:all .3s ease}
.search-toggle:hover{background:rgba(0,155,59,.1);color:var(--accent)}
.search-toggle svg{width:20px;height:20px}

.popular-panel{position:fixed;left:50%;top:290px;transform:translateX(-50%);width:90%;max-width:880px;border-radius:12px;padding:14px;background:var(--card);box-shadow:0 10px 30px rgba(2,6,23,.08);z-index:70;display:none}
.popular-panel.show{display:block}
.popular-row{display:flex;gap:12px;overflow:auto;padding:6px}
.popular-item{min-width:260px;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,0));border-radius:10px;padding:12px;box-shadow:0 6px 18px rgba(2,6,23,.06);cursor:pointer;transition:transform .25s}

.mobile-menu{position:fixed;left:50%;top:290px;transform:translateX(-50%);width:90%;max-width:880px;border-radius:12px;padding:1.5rem;background:var(--card);box-shadow:0 10px 30px rgba(2,6,23,.08);z-index:70;display:none;border:1px solid #e5e5e5}
.mobile-menu.show{display:block}
.mobile-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}
.mobile-nav-list a{color:var(--text);text-decoration:none;padding:16px 20px;font-weight:700;font-size:1.1rem;transition:all .3s ease;display:block;position:relative;border-left:4px solid transparent}
.mobile-nav-list a:hover{color:var(--accent);border-left-color:var(--accent);background:rgba(0,155,59,.08);transform:translateX(8px)}
.mobile-social{display:flex;justify-content:center;gap:1.2rem;padding-top:1.5rem;border-top:2px solid #e5e5e5}
.mobile-social-icon{width:48px;height:48px;background:#000;border:2px solid #333;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease;text-decoration:none}
.mobile-social-icon svg{width:22px;height:22px}
.mobile-social-icon svg path{fill:#fff}
.mobile-social-icon:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,155,59,.4)}

.featured{max-width:var(--maxw);width:100%;display:grid;grid-template-columns:1fr 420px;gap:1.25rem;align-items:center;background:var(--card);padding:2rem;border-radius:14px;box-shadow:0 12px 40px rgba(2,6,23,.06);margin:1.5rem auto;cursor:pointer;transition:transform .28s,box-shadow .28s}
.featured:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(2,6,23,.12),0 0 0 2px var(--accent)}
.featured-left h1{font-size:clamp(1.5rem,3.6vw,2.6rem);margin:0}
.lede{color:var(--muted);margin-top:.6rem}
.featured-img img{width:100%;height:auto;border-radius:8px;display:block}

.recent{max-width:var(--maxw);margin:2.5rem auto;padding:0 1rem}
.collage{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:160px;gap:14px;width:100%}

.card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(2,6,23,.12),0 0 0 2px var(--accent)}
:root{--card-meta-h:88px} 
.card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(2,6,23,.06);cursor:pointer;display:flex;flex-direction:column;transition:transform .28s,box-shadow .28s;min-width:0;}
.card img{width:100%;height:calc(100% - var(--card-meta-h));object-fit:cover;flex:0 0 auto;display:block;}
.card .meta{padding:12px;display:flex;align-items:center;justify-content:space-between;min-height:var(--card-meta-h);box-sizing:border-box;}
.card .title{font-weight:700;margin:0;font-size:clamp(0.95rem,1.2vw,1.1rem);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;}
.card .excerpt{color:var(--muted);font-size:.9rem;margin-top:6px}
.card.span2x2{grid-column:span 3;grid-row:span 2}
.card.span2x1{grid-column:span 3;grid-row:span 1}
.card.span1x2{grid-column:span 2;grid-row:span 2}
.card.span1x1{grid-column:span 2;grid-row:span 1}
.card.span4x1{grid-column:span 4;grid-row:span 1}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.6);z-index:120}
.modal.show{display:flex}
.modal-dialog{background:var(--card);padding:1.25rem;border-radius:12px;max-width:820px;width:94%;box-shadow:0 20px 60px rgba(2,6,23,.18)}
.modal-close{position:absolute;right:22px;top:18px;border:0;background:0;font-size:28px;cursor:pointer}

.searchbar{position:fixed;right:18px;top:290px;background:rgba(255,255,255,.9);backdrop-filter:blur(4px);padding:6px;border-radius:10px;box-shadow:0 8px 22px rgba(2,6,23,.08);display:none}
.searchbar.show{display:block}

.trending-section{max-width:var(--maxw);margin:3rem auto;padding:0 1rem}
.trending-content{display:grid;grid-template-columns:3fr 1fr;gap:3rem;align-items:start}
.trending-posts h2{font-size:2rem;margin-bottom:2rem;color:var(--text)}
.trending-list{display:flex;flex-direction:column;gap:1.5rem}
.trending-item{display:flex;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(2,6,23,.06);transition:all .3s ease;cursor:pointer;height:140px}
.trending-item:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(2,6,23,.12),0 0 0 2px var(--accent)}
.trending-item img{width:200px;height:140px;object-fit:cover;flex-shrink:0}
.trending-content-area{padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;flex:1}
.trending-title{font-size:1.2rem;font-weight:700;margin:0 0 .5rem 0;color:var(--text);line-height:1.3}
.trending-excerpt{color:var(--muted);margin:0 0 1rem 0;line-height:1.4;flex:1}
.trending-meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.trending-tag{background:var(--accent);color:#fff;padding:4px 8px;border-radius:6px;font-size:.8rem;font-weight:600}
.trending-date{color:var(--muted);font-size:.9rem}

.social-sidebar{position:sticky;top:300px}
.social-follow-card{background:var(--card);border-radius:16px;padding:1.5rem;box-shadow:0 8px 30px rgba(2,6,23,.06);border:1px solid #e5e5e5;text-align:center}
.social-follow-card h3{font-size:1.3rem;font-weight:700;margin:0 0 1.5rem 0;color:var(--text)}
.social-grid{display:flex;justify-content:space-around;gap:1rem;margin-bottom:1.5rem}
.social-stat-item{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--text);transition:all .3s ease;padding:.75rem;border-radius:12px;background:rgba(0,155,59,.02);border:1px solid rgba(0,155,59,.1);flex:1}
.social-stat-item:hover{transform:translateY(-2px);background:rgba(0,155,59,.08);border-color:var(--accent);box-shadow:0 4px 12px rgba(0,155,59,.2)}
.social-stat-item svg{width:28px;height:28px;margin-bottom:.5rem;color:var(--accent)}
.follower-count{font-size:1.1rem;font-weight:700;color:var(--text)}
.social-cta-text{color:var(--muted);font-size:.9rem;margin:0;line-height:1.4}

.site-footer{background:var(--card);border-top:1px solid #e5e5e5;padding:2rem;text-align:center;margin-top:4rem}
.site-footer small{color:var(--muted);font-size:.9rem}

.tag{background:var(--accent);color:#fff;padding:4px 8px;border-radius:6px;font-size:.8rem;font-weight:600}
.meta{display:flex;align-items:center;gap:1rem;margin-top:1rem}
.meta time{color:var(--muted);font-size:.9rem}
.muted{color:var(--muted)}

.view-all{text-align:center;margin-top:2rem}
.view-all a{color:var(--accent);text-decoration:none;font-weight:600;padding:.75rem 1.5rem;border:2px solid var(--accent);border-radius:8px;transition:all .3s ease}
.view-all a:hover{background:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,155,59,.3)}

.content-page{max-width:var(--maxw);margin:0 auto;padding:0 1rem}
.contact-hero{text-align:center;padding:3rem 0;background:linear-gradient(135deg,rgba(0,155,59,.05),rgba(0,155,59,.02));border-radius:16px;margin:2rem 0}
.contact-hero h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 1rem 0;color:var(--text);font-weight:700}

.page-excerpt{font-size:1.2rem;color:var(--muted);margin:0;max-width:600px;margin:0 auto;line-height:1.6}

.contact-container{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin:3rem 0}
.contact-card{background:var(--card);border-radius:16px;padding:2rem;box-shadow:0 8px 30px rgba(2,6,23,.06);border:1px solid #e5e5e5;height:fit-content}
.contact-card h2{font-size:1.5rem;font-weight:700;margin:0 0 2rem 0;color:var(--text)}
.contact-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:2rem;padding:1rem;border-radius:12px;background:rgba(0,155,59,.02);border:1px solid rgba(0,155,59,.1);transition:all .3s ease}
.contact-item:hover{background:rgba(0,155,59,.05);border-color:var(--accent);transform:translateY(-2px)}
.contact-icon{width:48px;height:48px;background:var(--accent);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-icon svg{width:24px;height:24px;color:#fff}
.contact-item h3{font-size:1.1rem;font-weight:700;margin:0 0 .5rem 0;color:var(--text)}
.contact-item p{color:var(--muted);margin:0;line-height:1.5}
.contact-form-wrapper{background:var(--card);border-radius:16px;padding:2rem;box-shadow:0 8px 30px rgba(2,6,23,.06);border:1px solid #e5e5e5}
.contact-form h2{font-size:1.5rem;font-weight:700;margin:0 0 2rem 0;color:var(--text)}

.form-group{margin-bottom:1.5rem}
.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--text);font-size:.95rem}
.form-group input,.form-group textarea{width:100%;padding:12px 16px;border:2px solid #e5e5e5;border-radius:8px;font-size:1rem;transition:all .3s ease;font-family:inherit;background:var(--bg);color:var(--text);box-sizing:border-box}
.form-group input:focus,.form-group textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,155,59,.1)}
.form-group textarea{resize:vertical;min-height:120px}
.submit-btn{background:var(--accent);color:#fff;border:0;padding:14px 32px;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;width:100%}
.submit-btn:hover{background:#007a2f;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,155,59,.3)}

.single-post img,.post-image{max-width:100%;height:auto;display:block;margin:20px auto}

@media (max-width:768px){
.brand-bar,.nav-bar{padding:0 1rem}
.brand-leftindex,.brand-right,.menu,.desktop-social{display:none}
.brand-left,.brand-center{position:static;transform:none;justify-content:center;width:100%}
.mobile-menu{position:fixed;left:50%;top:290px;transform:translateX(-50%);width:95%;max-width:none;border-radius:12px;padding:1.5rem;background:var(--card);box-shadow:0 10px 30px rgba(2,6,23,.08);z-index:70;display:none}
.mobile-menu.show{display:block}
.mobile-menu-items{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
.mobile-menu-items a{color:var(--text);text-decoration:none;padding:12px 16px;border-radius:8px;font-weight:800;font-size:1rem;transition:all .3s ease;border-left:3px solid transparent}
.mobile-menu-items a:hover{background:rgba(0,155,59,.1);border-left-color:var(--accent);color:var(--accent)}
.mobile-social-icons{display:flex;justify-content:center;gap:1rem;padding-top:1.5rem;border-top:1px solid #e5e5e5}
.mobile-social-icons .social-icon{width:44px;height:44px;background:#000;border:1px solid #333}
.mobile-social-icons .social-icon svg path{fill:#fff}
.mobile-social-icons .social-icon:hover{background:var(--accent);border-color:var(--accent)}
.featured{grid-template-columns:1fr;text-align:center;padding:1.5rem}
.collage{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
.card.span2x2,.card.span2x1,.card.span1x2,.card.span1x1,.card.span4x1{grid-column:span 1;grid-row:span 1}
.trending-content{grid-template-columns:1fr;gap:2rem}
.trending-item{flex-direction:column;height:auto}
.trending-item img{width:100%;height:160px}
.social-grid{flex-direction:column;gap:.75rem}
.social-stat-item{flex-direction:row;justify-content:flex-start;gap:1rem;padding:1rem}
.social-stat-item svg{margin-bottom:0}
.contact-container{grid-template-columns:1fr;gap:2rem}
.contact-hero{padding:2rem 1rem}
.header-png{height:100px}
.header-png:nth-child(1){height:166px}
.header-png:nth-child(2){margin-left:-40px}
.popular-panel{width:95%}
.searchbar{right:2.5%}
}

@media (max-width:480px){
body{padding-top:240px}
.slogan-bar{height:56px}
.slogan-bar p{font-size:.8rem}
.brand-bar{height:112px}
.logo-img{width:40px;height:40px}
.brand-name{font-size:1.2rem}
.nav-bar{height:80px}
.social-icon{width:32px;height:32px}
.social-icon svg{width:16px;height:16px}
.menu ul{gap:.4rem}
.menu a{font-size:.85rem;padding:6px 8px}
.popular-panel,.searchbar,.mobile-menu{top:250px}
.header-png{height:90px}
.contact-hero{padding:1.5rem}
.contact-card,.contact-form-wrapper{padding:1.5rem}
.mobile-menu{width:98%}
.popular-panel{width:98%}
}
/* === Mobile special layout for certain cards === */
@media (max-width:768px){
  /* reset all cards to default full layout first */
  .card{display:flex;flex-direction:column;}
  .card img{height:auto;width:100%;}
  .card .meta{display:block;padding:12px;background:#fff;}

  /* cards 1, 4, 5 → image + title overlay only */
  #collage .card:nth-child(1),
  #collage .card:nth-child(4),
  #collage .card:nth-child(5){
    position:relative;
  }
  #collage .card:nth-child(1) img,
  #collage .card:nth-child(4) img,
  #collage .card:nth-child(5) img{display:block;width:100%;height:auto;}
  
  #collage .card:nth-child(1) .meta,
  #collage .card:nth-child(4) .meta,
  #collage .card:nth-child(5) .meta{position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(to top,rgba(0,0,0,0.7),transparent);color:#fff;padding:8px 12px;}
  #collage .card:nth-child(1) .meta .excerpt,
  #collage .card:nth-child(4) .meta .excerpt,
  #collage .card:nth-child(5) .meta .excerpt,
  #collage .card:nth-child(1) .meta .tag,
  #collage .card:nth-child(4) .meta .tag,
  #collage .card:nth-child(5) .meta .tag,
  #collage .card:nth-child(1) .meta .muted,
  #collage .card:nth-child(4) .meta .muted,
  #collage .card:n极-child(5) .meta .muted{display:none; /* hide excerpt, tag, date */}
  #collage .card:nth-child(1) .title,
  #collage .card:nth-child(4) .title,
  #collage .card:nth-child(5) .title{font-size:1.1rem;font-weight:700;margin:0;color:#fff;}
}

/* Blog Post Styles */
.blog-post {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.blog-hero-image {
  width: 100%;
  max-width: 1265px;
  height: auto;
  max-height: 595px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.blog-content {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 1rem;
  text-align: left;
}

.blog-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: #000;
  margin: 极 0 2rem 0;
  line-height: 1.2;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e5e5;
}

.blog-story {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #6b7280;
  margin: 0;
}

.blog-story p {
  margin-bottom: 1.5rem;
}

/* Center and gently constrain inline images inside blog content */
.blog-story figure,
.blog-story figure.image {
  display: block;
  margin: 1.25rem auto;
  text-align: center;
}

.blog-story img {
  /* Do not upscale small images; cap large ones to 90% of text width */
  max-width: 90%;
  width: auto;
  height: auto;
  display: block;
  margin: 1.25rem auto; /* center horizontally */
}

.blog-story figure figcaption {
  font-size: 0.95rem;
  color: #8a8f98;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .blog-hero-image {
    max-height: 400px;
  }
  
  .blog-content {
    margin: 2rem auto;
    padding: 0 1rem;
  }
  
  .blog-title {
    font-size: 2极rem;
  }
  
  .blog-story {
    font-size: 1rem;
  }
}
.not-found, .error {
  text-align: center;
  padding: 3rem;
  max-width: 600px;
  margin: 0 auto;
}

.back-link {
  display: inline-block;
  margin-top: 1rem;
  color: #009B3B;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #009B3B;
  padding: 10px 20px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.back-link:hover {
  background-color: #009B3B;
  color: white;
}
/* Category page styles */
.category-content {
  max-width: var(--maxw);
  margin: 2rem auto;
  padding: 0 1rem;
}

.category-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 2rem 极 0;
  color: var(--text);
  text-align: center;
}

.category-posts {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.category-card {
  display: flex;
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(2,6,23,.06);
  cursor: pointer;
  transition: all 0.3s ease;
  height: 280px;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16极px 40px rgba(2,6,23,.12), 0 极 0 0 2px var(--accent);
}

.category-card-img {
  width: 40%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

.category-card-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.category-card .title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--text);
  line-height: 1.3;
}

.category-card .excerpt {
  color: var(--muted);
  margin: 0 0 1.5rem 0;
  line-height: 1.6;
  flex: 1;
}

.category-card .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.category-card .tag {
  background: var(--accent);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
}

.category-card .date {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Mobile responsiveness for category cards */
@media (max-width: 768px) {
  .category-content {
    margin: 1.5rem auto;
  }
  
  .category-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
  
  .category-card {
    flex-direction: column;
    height: auto;
  }
  
  .category-card-img {
    width: 100%;
    height: 200px;
  }
  
  .category-card-content {
    padding: 1.5rem;
  }
  
  .category-card .title {
    font-size: 1.3rem;
  }
}
.card-img-container,
.trending-img-container,
.category-card-img-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.card-img-placeholder,
.trending-img-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}

.card-img,
.trending-img,
.category-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

/* Ensure proper aspect ratios */
.card-img-container {
  height: calc(100% - 88px); /* Adjust based on your meta height */
}

.trending-img-container {
  height: 140px;
  width: 200px;
  flex-shrink: 0;
}

.category-card-img-container {
  height: 280px;
  width: 40%;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .trending-img-container {
    width: 100%;
    height: 160px;
  }
  
  .category-card-img-container {
    width: 100%;
    height: 200px;
  }
}
/* Force images to display properly in all browsers */
.card-img,
.trending-img,
.category-card-img,
.featured-img img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Fix for browser-specific rendering issues */
@media (min-width: 769px) {
  .card-img-container,
  .trending-img-container,
  .category-card-img-container {
    position: relative;
    overflow: hidden;
  }
  
  .card-img,
  .trending-img,
  .category-card-img {
    transition: opacity 0.3s ease;
  }
  
  /* Force GPU acceleration for better rendering */
  .card,
  .trending-item,
  .category-card {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* Clearfix for image containers */
.card-img-container::after,
.trending-img-container::after,
.category-card-img-container::after {
  content: "";
  display: table;
  clear: both;
}

/* FIXED AUTHOR STYLING - Clean and consistent */
.author {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 0.5rem;
  font-style: normal;
}

.author-label {
  font-weight: 600;
  color: var(--text);
}

.blog-meta .author {
  margin-left: auto;
  padding-left: 1rem;
}

/* For mobile */
@media (max-width: 768px) {
  .blog-meta .author {
    margin-left: 0;
    padding-left: 0;
    display: block;
    width: 100%;
  }
}

/* FIXED TRENDING CARD LAYOUT */
.trending-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  flex-wrap: wrap;
  gap: 8px;
}

.trending-author {
  color: var(--muted);
  font-size: 0.9rem;
  font-style: normal;
  margin-right: auto;
  width: 100%;
}

.trending-author .author-label {
  font-weight: 600;
  color: var(--text);
}

/* FIXED CARD IMAGE CROPPING */
.card-img-container {
  height: calc(100% - 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card:hover img {
  transform: scale(1.05);
}

/* Ensure proper image display in collage */
.collage .card-img-container {
  height: 100%;
}

.collage .card .meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  padding: 12px;
  min-height: auto;
}

.collage .card .title {
  color: #fff;
  font-size: 1rem;
}

.collage .card .excerpt,
.collage .card .author {
  display: none;
}

/* Specific fixes for span classes */
.card.span2x2 .card-img-container,
.card.span2x1 .card-img-container,
.card.span1x2 .card-img-container {
  height: 100%;
}

/* Mobile fixes */
@media (max-width: 768px) {
  .card .meta {
    display: block;
  }
  
  .trending-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .trending-author {
    width: 100%;
    order: -1;
    margin-bottom: 8px;
  }
}
/* Fix for trending items */
.trending-item {
  height: auto;
  min-height: 160px;
}

.trending-content-area {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.trending-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--text);
  line-height: 1.3;
}

.trending-excerpt {
  color: var(--muted);
  margin: 0 0 0.8rem 0;
  line-height: 1.4;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trending-author {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 0.8rem 0;
  font-style: normal;
}

.author-label {
  font-weight: 600;
  color: var(--text);
}

.trending-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.trending-tag {
  background: var(--accent);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

.trending-date {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Mobile responsiveness for trending items */
@media (max-width: 768px) {
  .trending-item {
    flex-direction: column;
    height: auto;
  }
  
  .trending-item img {
    width: 100%;
    height: 160px;
  }
  
  .trending-content-area {
    padding: 1rem;
  }
  
  .trending-title {
    font-size: 1.1rem;
  }
  
  .trending-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
/* Hero author styling */
.featured .meta .author {
  margin-left: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-style: normal;
}

.featured .meta .author-label {
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 768px) {
  .featured .meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .featured .meta .author {
    margin-left: 0;
  }
}
/* --- Footer (adjusted) --- */
.site-footer {
  --footer-bg: #000;
  --footer-fg: #fff;
  --footer-accent: var(--accent, #ff6b6b);
  --footer-icon-size: 44px;       /* circle diameter */
  --footer-icon-inner: 20px;      /* icon size inside circle */
  --footer-icon-stroke: 1.6;      /* base stroke width (px) */

  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: 3rem 1rem 2rem;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  margin-top: 4rem;
}

/* container & nav (kept, minor tidy) */
.footer-container {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.footer-link, .footer-sub-link {
  color: var(--footer-fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.22s ease;
}

.footer-link:hover {
  color: var(--footer-accent);
}
.footer-sub-link:hover {
  color: var(--footer-accent);
}

/* logo + disclaimer (mostly unchanged) */
.footer-logo {
  margin-bottom: 1.5rem;
}
.footer-logo img {
  height: 120px;
  width: auto;
  filter: brightness(0) invert(1);
}
.footer-disclaimer {
  max-width: 1200px;
  margin: 0 auto 2rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #ccc;
}
.about-us{
    max-width: 1200px;
  margin: 0 auto 2rem;
  font-size: 0.9rem;
  line-height: 1.6;
}
/* --- SOCIAL ICONS: white circle outline, transparent interior --- */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Circle container */
.footer-social .social-icon {
  width: var(--footer-icon-size);
  height: var(--footer-icon-size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid currentColor;   /* follows .social-icon color */
  background: transparent;          /* lets footer background show through */
  color: var(--footer-fg);          /* controls svg stroke via currentColor */
  text-decoration: none;
  transition:
    transform 220ms cubic-bezier(.2,.9,.3,1),
    background-color 220ms,
    color 220ms,
    border-color 220ms;
  will-change: transform, background-color, color, border-color;
}

/* The actual SVG inside the circle */
.footer-social .social-icon svg {
  display: block;
  width: var(--footer-icon-inner);
  height: var(--footer-icon-inner);
  shape-rendering: geometricPrecision;
}

/* Force SVG children to be stroke-only and use currentColor.
   vector-effect makes strokes remain same thickness when scaled. */
.footer-social .social-icon svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: calc(var(--footer-icon-stroke) * 1px);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Hover / focus - invert colors (circle becomes filled white, icon black) */
.footer-social .social-icon:hover,
.footer-social .social-icon:focus {
  background-color: var(--footer-fg); /* white */
  color: var(--footer-bg);             /* black for icon stroke */
  transform: translateY(-3px) scale(1.06);
  border-color: currentColor;          /* now black (follows color) */
  text-decoration: none;
}

/* Nice accessible focus-visible */
.footer-social .social-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08);
  border-color: var(--footer-accent);
}

/* small active (press) feedback */
.footer-social .social-icon:active {
  transform: translateY(-1px) scale(0.995);
}

/* divider + copyright (kept but tightened) */
.footer-divider {
  width: 100%;
  max-width: 600px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin-bottom: 1.5rem;
}
.footer-copyright {
  font-size: 0.85rem;
  color: #ccc;
  letter-spacing: 0.5px;
}
.brand-name {
  color: var(--footer-accent);
}

/* --- Responsive tweaks --- */
@media (max-width: 768px) {
  .footer-nav { gap: 1.5rem; margin-bottom: 1.5rem; }
  .footer-link { font-size: 0.8rem; }
  .footer-logo img { height: 50px; }
  .footer-disclaimer, .about-us { font-size: 0.85rem; padding: 0 1rem; }

  /* scale the circle & inner icon down */
  .site-footer {
    --footer-icon-size: 40px;
    --footer-icon-inner: 18px;
  }
  .footer-social { gap: 1rem; }
}

@media (max-width: 480px) {
  .footer-nav { flex-direction: column; gap: 1rem; }
  .site-footer { padding: 2rem 1rem 1.5rem; }

  /* tiny screens — keep icons usable */
  .site-footer {
    --footer-icon-size: 38px;
    --footer-icon-inner: 16px;
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .footer-social .social-icon,
  .footer-link {
    transition: none !important;
  }
}

/* Subscription Popup Styles */
.subscription-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.subscription-modal.show {
  display: flex;
}

.subscription-overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.subscription-dialog {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  max-width: 900px;
  width: 90%;
  max-height: 90vh;
  animation: subscriptionSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes subscriptionSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.subscription-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
  color: #333;
  font-weight: 300;
}

.subscription-close:hover {
  background: #fff;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Desktop Layout */
.desktop-layout {
  display: flex;
  min-height: 500px;
}

.subscription-left {
  flex: 1;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

.subscription-logo img {
  max-width: 400px;
  width: 200%;
  height: auto;
  filter: brightness(0) invert(1);
}

.subscription-right {
  flex: 1;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.subscription-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.subscription-brand .brand-logo {
  width: 150px;
  height: 150px;
  object-fit: contain;
}

.subscription-brand h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  margin: 0;
  letter-spacing: 1px;
}

.subscription-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 1rem 0;
  letter-spacing: 1px;
}

.subscription-subtitle {
  color: #666;
  margin: 0 0 2rem 0;
  font-size: 1rem;
  line-height: 1.5;
}

.subscription-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.subscription-form .form-group {
  margin: 0;
}

.subscription-form input[type="email"] {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.subscription-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent, #009B3B);
  box-shadow: 0 0 0 3px rgba(0, 155, 59, 0.1);
}

.subscribe-submit-btn {
  background: #000;
  color: #fff;
  border: none;
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 1px;
}

.subscribe-submit-btn:hover {
  background: #333;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
}

.checkbox-group input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.checkbox-group label {
  cursor: pointer;
}

/* Mobile Layout */
.mobile-layout {
  display: none;
  padding: 2rem;
  text-align: center;
}

.subscription-brand-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.subscription-brand-mobile .brand-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.subscription-brand-mobile h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #000;
  margin: 0;
  letter-spacing: 1px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .subscription-dialog {
    width: 95%;
    margin: 1rem;
  }
  
  .desktop-layout {
    display: none;
  }
  
  .mobile-layout {
    display: block;
  }
  
  .subscription-close {
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    font-size: 20px;
  }
  
  .subscription-title {
    font-size: 1.4rem;
  }
  
  .subscribe-submit-btn {
    padding: 14px 28px;
  }
}

@media (max-width: 480px) {
  .mobile-layout {
    padding: 1.5rem;
  }
  
  .subscription-title {
    font-size: 1.2rem;
  }
  
  .subscription-subtitle {
    font-size: 0.9rem;
  }
}

/* Animation for form submission success */
.subscription-success {
  text-align: center;
  padding: 2rem;
}

.subscription-success h3 {
  color: var(--accent, #009B3B);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.subscription-success p {
  color: #666;
  font-size: 1rem;
}
/* ---------- Post share sidebar + inline subscribe (add near Blog Post Styles) ---------- */

.post-body {
  max-width: 1265px;
  margin: 3.5rem auto 0;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: start;
  padding: 0 1rem 4rem;
  position: relative; /* important for absolute bottom-clamp of the share column */
}

/* Left share column */
.share-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
  justify-content: flex-start;
  margin-top: 8px;
}
.share-placeholder { display: block; }

/* Row of share icons (horizontal as requested) */
.share-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

/* Circular outline icon button */
.share-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #000; /* thin black outline */
  background: transparent;
  display: inline-grid;
  place-items: center;
  padding: 6px;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
  color: #000;
}

/* ensure SVGs inside behave as strokes (no fill) */
.share-btn svg { width: 18px; height: 18px; display:block; }
.share-btn svg * { fill: none !important; stroke: currentColor !important; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }

/* hover/focus affordance */
.share-btn:hover,
.share-btn:focus {
  transform: translateY(-3px);
  background: rgba(0,0,0,0.06);
  outline: none;
}

/* tiny 'copied' visual state */
.share-btn.copied {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Inline subscribe button under icons */
.subscribe-inline-btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  background: #000; /* black fill requested */
  color: #fff;
  border: 0;
  padding: 10px 12px;
  border-radius: 0px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: .9rem;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* plane svg sizing */
.subscribe-inline-btn svg { width: 16px; height: 16px; display:block; fill: #fff; }

/* hover */
.subscribe-inline-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }

/* keep blog content layout same as before */
.blog-content { max-width: 700px; margin: 3rem auto 0; padding: 0 1rem; }

/* Mobile: stack share below post content */
@media (max-width: 768px) {
  .post-body {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 1rem 3rem;
  }

  .share-column {
    position: relative;
    top: auto;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    order: 2; /* make sure it sits below the blog content */
    padding-top: 8px;
    gap: 12px;
  }

  .subscribe-inline-btn {
    order: 3;
    width: auto;
    padding: 10px 14px;
    font-size: .9rem;
  }

  .blog-content { order: 1; margin: 2rem auto 0; }
}

/* small tweak for very narrow screens */
@media (max-width: 480px) {
  .share-btn { width: 40px; height: 40px; }
  .share-btn svg { width: 16px; height: 16px; }
  .post-body { padding-left: 0.75rem; padding-right: 0.75rem; }
}
/* Mobile collage card overlay styling */
@media (max-width: 768px) {
  #collage .card {
    position: relative;
    display: block;
  }
  
  #collage .card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  #collage .card .meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3));
    color: #fff;
    padding: 12px;
    min-height: auto;
    display: block !important;
  }
  
  #collage .card .title {
    color: #fff !important;
    font-size: 1rem;
    margin: 0;
    font-weight: 700;
  }
  
  #collage .card .excerpt,
  #collage .card .author,
  #collage .card .tag,
  #collage .card .muted,
  #collage .card time {
    display: none !important;
  }
}