/* ================================================
   BLOG PAGE — URONE Visual Override
   Scope: #blogs_all (Cyberbiz blog template)
   Only CSS — no HTML changes
   ================================================ */

/* --- Base --- */
#blogs_all{
  background:var(--nav_logo_bg, #F5F1EB)!important;
  margin-top:0!important;
  padding-bottom:64px!important;
  font-family:'Noto Sans TC',sans-serif!important;
  -webkit-font-smoothing:antialiased!important;
}

/* --- Page Banner / Title --- */
#blogs_all .all_blogs_title{
  background:linear-gradient(180deg,#F5F1EB 0%,#EDE9E1 100%)!important;
  padding:56px 0 48px!important;
  border-bottom:1px solid rgba(74,69,64,.06)!important;
}
#blogs_all .all_blogs_title h1{
  font-family:'Outfit','Noto Sans TC',sans-serif!important;
  font-size:clamp(20px,3vw,28px)!important;
  font-weight:600!important;
  color:#4A4540!important;
  letter-spacing:3px!important;
  text-transform:uppercase!important;
  margin:0!important;
}

/* --- Section Title --- */
#blogs_all .blog_title{
  padding:40px 0 24px!important;
  margin-top:0!important;
}
#blogs_all .blog_title h2{
  font-family:'Noto Sans TC',sans-serif!important;
  font-size:clamp(20px,2.5vw,26px)!important;
  font-weight:700!important;
  color:#4A4540!important;
  line-height:1.5!important;
  margin:0!important;
  position:relative!important;
  padding-bottom:12px!important;
}
#blogs_all .blog_title h2::after{
  content:''!important;
  position:absolute!important;
  bottom:0!important;left:0!important;
  width:40px!important;height:2px!important;
  background:#B08D5B!important;
  border-radius:1px!important;
}

/* --- Blog Section Separator --- */
#blogs_all .blog{
  border-bottom:1px solid rgba(74,69,64,.06)!important;
  padding:0 0 40px!important;
}
#blogs_all .blog:last-child{
  border-bottom:none!important;
}

/* --- Article Grid Spacing --- */
@media(min-width:768px){
  #blogs_all .blog_articles > div{
    padding:16px!important;
  }
}

/* --- Article Card --- */
#blogs_all .article{
  background:#fff!important;
  border-radius:16px!important;
  overflow:hidden!important;
  box-shadow:0 2px 12px rgba(0,0,0,.04)!important;
  border:1px solid rgba(74,69,64,.06)!important;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease!important;
  grid-template-rows:240px auto auto 48px!important;
  grid-template-areas:"image""date""title""readmore"!important;
}
#blogs_all .article:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.08)!important;
}

/* --- Article Image --- */
#blogs_all .article .article_image{
  border-radius:16px 16px 0 0!important;
  overflow:hidden!important;
}
#blogs_all .article .article_image a{
  background-size:cover!important;
  background-position:center!important;
  transition:transform .6s cubic-bezier(.16,1,.3,1)!important;
}
#blogs_all .article:hover .article_image a{
  transform:scale(1.04)!important;
}

/* --- Article Date --- */
#blogs_all .article .article_date{
  font-family:'Outfit','Noto Sans TC',sans-serif!important;
  font-size:14px!important;
  font-weight:500!important;
  color:#B08D5B!important;
  letter-spacing:.5px!important;
  padding:16px 20px 4px!important;
  line-height:1.5!important;
}

/* --- Article Title --- */
#blogs_all .article .article_title{
  padding:4px 20px 8px!important;
}
#blogs_all .article .article_title h3{
  font-family:'Noto Sans TC',sans-serif!important;
  font-size:17px!important;
  font-weight:700!important;
  color:#4A4540!important;
  line-height:1.6!important;
  -webkit-line-clamp:2!important;
}
#blogs_all .article .article_title a{
  text-decoration:none!important;
  color:inherit!important;
}

/* --- Article Content / Excerpt --- */
#blogs_all .article .article_content{
  font-size:14px!important;
  font-weight:400!important;
  color:#6B6560!important;
  line-height:1.8!important;
  padding:0 20px 8px!important;
}

/* --- Read More --- */
#blogs_all .article .article_readmore{
  padding:4px 20px 16px!important;
  align-self:end!important;
}
#blogs_all .article .article_readmore a{
  font-family:'Outfit','Noto Sans TC',sans-serif!important;
  font-size:14px!important;
  font-weight:600!important;
  color:#B08D5B!important;
  text-decoration:none!important;
  letter-spacing:.3px!important;
  transition:color .25s!important;
}
#blogs_all .article .article_readmore a:hover{
  color:#4A4540!important;
}
#blogs_all .article .article_readmore a::after{
  content:' →'!important;
}

/* --- Load More Button --- */
#blogs_all .more_article,
#blogs_all .mobile_more_article{
  font-family:'Outfit','Noto Sans TC',sans-serif!important;
  font-size:14px!important;
  font-weight:600!important;
  color:#4A4540!important;
  border:1.5px solid #4A4540!important;
  border-radius:100px!important;
  padding:10px 0!important;
  width:180px!important;
  letter-spacing:.5px!important;
  transition:all .35s cubic-bezier(.16,1,.3,1)!important;
  text-decoration:none!important;
}
#blogs_all .more_article:hover,
#blogs_all .mobile_more_article:hover{
  background:#4A4540!important;
  color:#F5F1EB!important;
  transform:translateY(-2px)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.1)!important;
}

/* ================================================
   RWD
   ================================================ */
@media(max-width:1199px){
  #blogs_all .article{
    grid-template-rows:200px auto auto 48px!important;
  }
}
@media(max-width:991px){
  #blogs_all .article{
    grid-template-rows:220px auto auto 48px!important;
  }
}
@media(max-width:767px){
  #blogs_all{
    padding-bottom:48px!important;
  }
  #blogs_all .all_blogs_title{
    padding:40px 0 32px!important;
  }
  #blogs_all .article{
    grid-template-rows:280px auto auto 48px!important;
  }
  #blogs_all .blog_title h2{
    font-size:22px!important;
    line-height:1.4!important;
  }
}
@media(max-width:575px){
  #blogs_all .article{
    grid-template-rows:calc(65vw) auto auto auto 48px!important;
  }
  #blogs_all .article .article_title{
    max-height:none!important;
    overflow:visible!important;
  }
  #blogs_all .article .article_content{
    max-height:60px!important;
    overflow:hidden!important;
  }
}