@charset "UTF-8";

/* ===== Tag Page Hero ===== */
.tag-hero{background:var(--c-dark);padding:60px 0;text-align:center;position:relative}
.tag-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,rgba(161,136,127,.15),transparent 60%)}
.tag-hero-inner{position:relative;z-index:1}
.tag-hero-label{font-size:13px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:3px;margin-bottom:10px}
.tag-hero h1{font-size:36px;font-weight:900;color:#fff}
.tag-hero h1 span{color:var(--c-primary)}

/* ===== Tag Cloud (G1 Tag Cloud + List) ===== */
.tagcloud-section{padding:60px 0 40px;background:var(--c-bg)}
.tagcloud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.tagcloud a{display:inline-block;padding:10px 22px;background:#fff;border-radius:6px;font-size:15px;color:var(--c-text);font-weight:600;border:1px solid var(--c-border);transition:all .25s}
.tagcloud a:hover,.tagcloud a.active{background:var(--c-dark);color:#fff;border-color:var(--c-dark);transform:translateY(-2px);box-shadow:0 6px 16px rgba(46,33,27,.15)}
.tagcloud a.lg{font-size:20px;padding:14px 30px}
.tagcloud a.md{font-size:16px;padding:12px 26px}
.tagcloud a.sm{font-size:13px;padding:8px 18px}

/* ===== Tag Article List ===== */
.taglist-section{padding:40px 0 80px;background:var(--c-bg)}
.taglist-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:16px;border-bottom:2px solid var(--c-border)}
.taglist-heading h2{font-size:22px;font-weight:900;color:var(--c-dark)}
.taglist-heading span{font-size:14px;color:var(--c-accent)}

.tag-article{display:grid;grid-template-columns:220px 1fr;gap:0;background:#fff;border-radius:8px;overflow:hidden;border:1px solid var(--c-border);margin-bottom:20px;transition:all .3s}
.tag-article:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(46,33,27,.1)}
.tag-article-img{height:100%;min-height:170px}
.tag-article-img img{width:100%;height:100%;object-fit:cover}
.tag-article-body{padding:22px;display:flex;flex-direction:column;justify-content:center}
.tag-article-meta{display:flex;gap:14px;margin-bottom:10px;font-size:12px;color:var(--c-accent)}
.tag-article-body h3{font-size:17px;font-weight:700;color:var(--c-dark);margin-bottom:10px;line-height:1.4;transition:color .2s}
.tag-article:hover .tag-article-body h3{color:var(--c-primary)}
.tag-article-body p{font-size:14px;color:var(--c-accent);line-height:1.7}
.tag-article-tags{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.tag-article-tags a{padding:3px 10px;background:var(--c-bg);border-radius:3px;font-size:12px;color:var(--c-accent);border:1px solid var(--c-border)}
.tag-article-tags a:hover{background:var(--c-dark);color:#fff}

/* ===== All Tags Grid ===== */
.alltags-section{padding:60px 0;background:#fff}
.alltags-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.alltags-card{background:var(--c-bg);border-radius:8px;padding:25px;border:1px solid var(--c-border);transition:all .25s}
.alltags-card:hover{border-color:var(--c-primary);transform:translateY(-3px)}
.alltags-card h4{font-size:16px;font-weight:700;color:var(--c-dark);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.alltags-card h4::before{content:"#";color:var(--c-primary);font-weight:900}
.alltags-card ul li{margin-bottom:8px}
.alltags-card ul li a{font-size:14px;color:var(--c-accent);transition:color .2s;display:flex;justify-content:space-between}
.alltags-card ul li a:hover{color:var(--c-dark)}
.alltags-card ul li a span{font-size:12px;color:var(--c-primary);background:rgba(161,136,127,.15);padding:2px 8px;border-radius:10px}

@media(max-width:900px){
  .tag-article{grid-template-columns:180px 1fr}
  .alltags-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .tag-hero h1{font-size:28px}
  .tag-article{grid-template-columns:1fr}
  .tag-article-img{height:160px;min-height:auto}
  .taglist-heading{flex-direction:column;align-items:flex-start;gap:8px}
  .alltags-grid{grid-template-columns:1fr}
}