/* Blog & content pages (index/category/post/page) styles extracted from style.css */

/* Cards & lists */
.post-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  margin:18px 0 40px;
}
.post-card{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  transform: translateY(6px);
  opacity:1;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease, border-color .25s ease;
}
.post-card.is-visible{transform: translateY(0); opacity:1}
.post-card:hover{border-color:rgba(138,180,248,.25)}
.post-card-title{margin:6px 0; font-size:18px; font-family:var(--font-head); color:var(--text)}
.post-card-desc{margin:0; color:var(--muted); font-size:13px}
.post-card-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; color:rgba(170,183,207,.92); font-size:12px}
.post-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03)}

/* Paper header elements */
.paper-meta{color:rgba(170,183,207,.92); font-size:12px; margin-bottom:10px}
.paper-title{margin:0 0 10px; font-family:var(--font-head); font-size:34px; line-height:1.15}
.paper-desc{margin:0 0 14px; color:var(--muted)}

/* Post navigation */
.paper-nav{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:18px}
.paper-nav-card{display:block; padding:14px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02)}
.paper-nav-card:hover{border-color:rgba(138,180,248,.28); background:rgba(138,180,248,.06)}
.paper-nav-label{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(170,183,207,.92)}
.paper-nav-title{margin-top:6px; font-weight:800; font-family:var(--font-head); color:var(--text)}
.paper-nav-desc{margin-top:6px; color:var(--muted); font-size:12px}

.paper-foot{margin-top:22px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); color:var(--muted); font-size:12px}

/* Waterfall / masonry-like layout used on index & category pages */
.grid{
  column-count:2;
  column-gap:18px;
  padding:12px 0 44px;
}
.card{
  display:inline-block;
  width:100%;
  break-inside:avoid;
  padding:18px 18px 16px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transform: translateY(6px);
  opacity:1;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease, border-color .25s ease, box-shadow .25s ease;
  margin:0 0 18px;
  backdrop-filter: blur(6px);
}
.card.is-visible{transform: translateY(0); opacity:1}
.card:hover{
  border-color:rgba(138,180,248,.25);
  box-shadow: 0 0 0 1px rgba(125,249,255,.16), 0 16px 32px rgba(0,0,0,.38);
  transform: translateY(-2px);
}
.card-meta{color:var(--muted); font-size:13px}
.card-title{margin:8px 0 6px; font-size:20px; line-height:1.2; font-family:var(--font-head)}
.card-title a{color:var(--text)}
.card-title a:hover{color:var(--blue2)}
.card-desc{margin:0; color:var(--muted)}
.card-actions{margin-top:12px}

.empty{
  padding:18px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.16);
  color:var(--muted);
  text-align:center;
  background:rgba(255,255,255,.02);
}

/* Match the original waterfall layout behavior */
@media (min-width:1200px){
  .grid{column-count:3}
}
@media (max-width:980px){
  .grid{column-count:1}
}

/* Paper and empty reveal behavior (used across pages) */
.paper{
  margin:22px 0 40px;
  padding:22px 22px;
  border-radius:calc(var(--radius) + 2px);
  background:
    radial-gradient(320px 140px at 8% 0%, rgba(125,249,255,.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  transform: translateY(6px);
  opacity:1;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
  backdrop-filter: blur(6px);
}
.paper.is-visible{transform: translateY(0); opacity:1}

/* Empty state reveal + column-span (for masonry) */
.empty{column-span:all; transform: translateY(6px); opacity:1; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease}
.empty.is-visible{transform: translateY(0); opacity:1}

.empty-title{font-weight:700; font-family:var(--font-head); color:var(--text)}
.empty-subtitle{margin-top:8px}

/* Buttons (shared by index/category cards) */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  background:linear-gradient(120deg, rgba(125,249,255,.22), rgba(94,160,255,.16) 50%, rgba(15,27,45,.5));
  border:1px solid rgba(125,249,255,.32);
  color:var(--text);
  font-weight:600;
  box-shadow: 0 0 0 1px rgba(125,249,255,.08), 0 10px 20px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{
  border-color:rgba(125,249,255,.55);
  box-shadow: 0 0 0 1px rgba(125,249,255,.18), 0 16px 28px rgba(0,0,0,.4);
  transform: translateY(-1px);
}

@media (max-width:1100px){.post-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:760px){
  .grid{column-count:1}
}
@media (max-width:720px){.post-grid{grid-template-columns:1fr} .paper-title{font-size:28px} .paper-nav{grid-template-columns:1fr}}