@charset "UTF-8";

.tags-hero{position:relative;height:300px;background:var(--dark-bg);display:flex;align-items:center;justify-content:center;text-align:center}
.tags-hero h1{font-size:34px;font-weight:800;color:var(--primary);margin-bottom:8px}
.tags-hero p{font-size:15px;color:rgba(245,245,245,0.8)}

.tags-section{padding:60px 0;background:var(--white)}
.tags-list{max-width:800px;margin:0 auto}
.tag-item{display:flex;align-items:flex-start;gap:20px;padding:22px 0;border-bottom:1px solid #eee;transition:all 0.3s}
.tag-item:hover{padding-left:10px}
.tag-num{min-width:36px;height:36px;background:var(--primary);color:var(--secondary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}
.tag-content{flex:1}
.tag-content h3{font-size:16px;font-weight:700;color:var(--dark-bg);margin-bottom:6px}
.tag-content h3 a{color:var(--dark-bg)}
.tag-content h3 a:hover{color:var(--secondary)}
.tag-content p{font-size:13px;color:var(--gray);line-height:1.6}
.tag-meta{font-size:12px;color:var(--gray);margin-top:6px}

.all-tags{padding:50px 0;background:var(--light-gray)}
.tags-cloud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px;max-width:900px;margin-left:auto;margin-right:auto}
.tag-cloud-item{display:inline-block;padding:10px 22px;background:var(--white);border:1px solid #e8e8e8;border-radius:30px;font-size:14px;font-weight:500;color:var(--dark-bg);transition:all 0.3s}
.tag-cloud-item:hover{background:var(--secondary);color:var(--white);border-color:var(--secondary);transform:translateY(-2px);box-shadow:0 4px 15px rgba(30,132,73,0.2)}

@media (max-width:768px) {
  .tags-hero h1{font-size:26px}
  .tag-item{flex-direction:column;gap:12px}
}