/* ==========================================================================
   Blog + Category pages
   ========================================================================== */
.page-hero {
  background:
    radial-gradient(700px 400px at 90% -20%, rgba(45,212,255,.1), transparent 60%),
    var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.page-hero h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin-block: .8rem .6rem; }
.crumbs { font-size: .88rem; color: var(--muted); }
.crumbs a { color: var(--cyan); }
.crumbs span { margin-inline: .4rem; }

/* Category filter pills */
.cat-filter { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 2rem; }
.cat-filter a {
  padding: .5rem 1.1rem; border-radius: 100px; font-weight: 500; font-size: .92rem;
  border: 1px solid var(--line); color: var(--muted); background: var(--panel);
  transition: all .15s;
}
.cat-filter a:hover { color: var(--white); border-color: rgba(45,212,255,.4); }
.cat-filter a.active { background: var(--cyan); color: #04222c; border-color: var(--cyan); font-weight: 700; }

/* Post grid reused from home; add list layout */
.blog-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.post-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .18s, border-color .18s; }
.post-card:hover { transform: translateY(-4px); border-color: rgba(45,212,255,.4); }
.post-thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--panel-2), var(--ink-2));
  position: relative; display: grid; place-items: center; }
.post-thumb svg { width: 48px; height: 48px; color: var(--cyan); opacity: .5; }
.post-tag { position: absolute; inset-block-start: .8rem; inset-inline-end: .8rem;
  background: rgba(11,15,24,.8); color: var(--cyan); font-size: .75rem; font-weight: 700;
  padding: .25rem .7rem; border-radius: 100px; border: 1px solid rgba(45,212,255,.3); }
.post-body { padding: 1.25rem; }
.post-body time { font-size: .8rem; color: var(--muted); }
.post-body h3 { font-size: 1.1rem; color: var(--white); margin-block: .5rem; }
.post-body p { font-size: .92rem; color: var(--muted); }
.post-body .more { color: var(--cyan); font-weight: 700; font-size: .9rem; margin-top: .8rem; display: inline-block; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 3rem; }
.pagination a { min-width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--panel); }
.pagination a:hover { border-color: var(--cyan); color: var(--cyan); }
.pagination a.active { background: var(--cyan); color: #04222c; border-color: var(--cyan); font-weight: 700; }

@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } }
/* ==========================================================================
   Blog — Category Grid  (cyan/amber dark theme)
   ========================================================================== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
}

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.8rem 1.6rem;
  background: linear-gradient(160deg, var(--panel), var(--ink-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}

/* top accent line that lights up on hover */
.cat-card::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-dim));
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform .3s ease;
}

/* subtle radial glow bottom-corner */
.cat-card::after {
  content: "";
  position: absolute; inset-block-end: -40%; inset-inline-end: -20%;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(45,212,255,.12), transparent 70%);
  opacity: 0; transition: opacity .3s ease; z-index: -1;
}

.cat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(45,212,255,.4);
  box-shadow: var(--glow-cyan), var(--shadow);
}
.cat-card:hover::before { transform: scaleX(1); }
.cat-card:hover::after  { opacity: 1; }

.cat-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(45,212,255,.08);
  border: 1px solid rgba(45,212,255,.25);
  color: var(--cyan);
  margin-bottom: .4rem;
  transition: background .2s ease, box-shadow .2s ease;
}
.cat-icon svg { width: 26px; height: 26px; }
.cat-card:hover .cat-icon {
  background: rgba(45,212,255,.15);
  box-shadow: 0 0 20px -6px var(--cyan);
}

.cat-card h3 { font-size: 1.15rem; }
.cat-card p  { color: var(--muted); font-size: .95rem; line-height: 1.7; margin: 0; }

.cat-card .more {
  margin-top: auto;
  color: var(--cyan);
  font-weight: 700;
  font-size: .92rem;
  padding-top: .6rem;
  transition: gap .2s ease;
}
.cat-card:hover .more { color: var(--white); }