/* =========================
   TAGS (index.php)
   Brand-tuned, same layout
   ========================= */

/* Page frame (consistent spacing with other pages) */
.tag-wrap{
  --brand:  #800000;             /* maroon */
  --accent: #ffba08;             /* yellow */
  --text:   #1A1A1A;             /* off-black on light bg */
  --surface:#ffffff;             /* card bg (body is #FFFDF7) */
  --border: rgba(128,0,0,.14);   /* maroon-tinted border */
  --shadow: 0 6px 24px rgba(0,0,0,.06);

  margin-block: clamp(16px, 3vw, 40px) clamp(28px, 5vw, 64px);
  padding-inline: clamp(12px, 2vw, 20px);
}

/* Title (Bitter 900 + accent underline) */
.tag-title{
  margin: 0 0 clamp(10px, 1.8vw, 14px);
  font-family: var(--font-site, "Bitter", Georgia, serif);
  font-weight: 900;
  color: var(--brand);
  font-size: clamp(1.3rem, 1rem + 1.6vw, 1.9rem);
  line-height: 1.1;

  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: .25em;
  text-decoration-thickness: 3px;
  letter-spacing: .2px;
}

.tag-sub{
  margin: 0 0 clamp(14px, 2.2vw, 18px);
  color: #5b6472;
  font-family: var(--font-nav, Tahoma, Geneva, Verdana, sans-serif);
  font-size: .98rem;
}

/* Grid (left-aligned cards, responsive gaps) */
.tag-grid{
  display:grid !important;
  gap: clamp(14px, 2.2vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-content:start;     /* top, never vertical center */
  justify-items:stretch;   /* cards stretch to column */
  width:100%;
}
@media (min-width: 600px){  .tag-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){  .tag-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px){ .tag-grid{ grid-template-columns: repeat(4, 1fr); } }

/* Card */
.tag-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(12px, 1.8vw, 14px);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:10px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tag-card:hover{
  transform: translateY(-3px);
  border-color: rgba(128,0,0,.22);
  box-shadow: 0 12px 34px rgba(128,0,0,.08), 0 4px 14px rgba(0,0,0,.06);
}

/* Top row (hash badge + name) */
.tag-top{ display:flex; align-items:center; gap:10px; min-height:40px; }

/* Hash badge: soft accent pill */
.hash-badge{
  width:40px; height:40px; flex:0 0 auto; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#7a3d00;
  background:#fff6d1;               /* soft yellow wash */
  border:1px solid #ffe089;
}

/* Tag name: brand color + accent hover underline */
.tag-name{
  font-size:1.05rem; line-height:1.35;
  color: var(--brand);
  text-decoration: none;
}
.tag-name:hover{
  color:#5f0000;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

/* Meta */
.tag-meta{
  color:#667085; font-size:.9rem;
}

/* Button — brand primary (uniform with other pages) */
.btn{
  align-self:flex-start;
  display:inline-block;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,186,8,.55);
  text-decoration: none;
  color: #4a2a00;
  background: var(--accent);
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(255,186,8,.25);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.btn:focus-visible{ outline: 3px solid rgba(255,186,8,.35); outline-offset: 2px; }

/* Empty */
.empty{ color:#6b7280; }

/* Accessibility focus */
.tag-name:focus-visible, .btn:focus-visible{
  outline:3px solid rgba(255,186,8,.35);
  outline-offset:3px;
  border-radius:12px;
}

/* Small screens niceties */
@media (max-width: 560px){
  .tag-name{ font-size: 1.02rem; }
}