/* ---- Blog-specific styles (additive on top of style.css) ---- */

/* Admin bar at the top of every page when logged in */
.admin-bar{
  background: linear-gradient(135deg,#FF2D55 0%,#FF8A00 100%);
  color:#fff;
  font-size:13px;
  font-weight:600;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 4px 12px rgba(255,45,85,.25);
}
.admin-bar__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  height:44px;
  flex-wrap:wrap;
}
.admin-bar__label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:12px;
}
.admin-bar__label svg{ width:14px; height:14px; }
.admin-bar__actions{ display:flex; gap:8px; flex-wrap:wrap; }
.admin-bar__btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:8px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:13px;
  font-weight:600;
  transition:background var(--t-fast,.18s),transform var(--t-fast,.18s);
}
.admin-bar__btn:hover{ background:rgba(255,255,255,.28); transform:translateY(-1px); color:#fff; }
.admin-bar__btn--ghost{ background:rgba(0,0,0,.18); }
.admin-bar__btn--ghost:hover{ background:rgba(0,0,0,.32); }

/* Blog hero (smaller than home hero) */
.blog-hero{
  padding:80px 0 48px;
  background:radial-gradient(ellipse at top, rgba(255,45,85,.10) 0%, transparent 50%);
  text-align:center;
}
.blog-hero__title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(36px,5vw,64px);
  font-weight:800;
  letter-spacing:-.03em;
  margin:14px 0 16px;
  line-height:1.05;
}
.blog-hero__lede{
  color:var(--text-muted);
  max-width:640px;
  margin:0 auto;
  font-size:clamp(15px,1.4vw,18px);
}

/* Post listing grid */
.post-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px; }
@media (max-width:780px){ .post-list{ grid-template-columns:1fr; } }

.post-card{
  position:relative;
  background:var(--surface);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:28px 28px 24px;
  display:flex;
  flex-direction:column;
  transition:transform var(--t-fast,.18s), border-color var(--t-fast,.18s), box-shadow var(--t-fast,.18s);
}
.post-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,45,85,.35);
  box-shadow:0 16px 40px rgba(0,0,0,.25);
}
.post-card__meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--text-dim);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:14px;
}
.post-card__meta svg{ width:13px; height:13px; color:var(--primary); }
.post-card__title{
  font-family:'Space Grotesk',sans-serif;
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  margin:0 0 12px;
}
.post-card__title a{ color:var(--text); }
.post-card__title a:hover{ color:var(--primary); }
.post-card__excerpt{
  color:var(--text-muted);
  font-size:15px;
  line-height:1.6;
  margin:0 0 20px;
}
.post-card__footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.post-card__readmore{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--primary);
  font-weight:700;
  font-size:14px;
}
.post-card__readmore svg{ width:14px; height:14px; transition:transform var(--t-fast,.18s); }
.post-card__readmore:hover svg{ transform:translateX(4px); }
.post-card__admin{ display:flex; gap:8px; }
.post-card__admin a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 10px;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  font-size:12px;
  color:var(--text-muted);
  font-weight:600;
  transition:all var(--t-fast,.18s);
}
.post-card__admin a:hover{ background:rgba(255,45,85,.10); color:var(--primary); border-color:rgba(255,45,85,.30); }
.post-card__admin svg{ width:12px; height:12px; }

/* Empty state */
.empty-state{
  text-align:center;
  padding:80px 24px;
  background:var(--surface);
  border:1px dashed rgba(255,255,255,.10);
  border-radius:20px;
  margin-top:32px;
}
.empty-state h3{ font-family:'Space Grotesk',sans-serif; font-size:24px; margin:0 0 10px; }
.empty-state p{ color:var(--text-muted); margin:0 0 24px; }

/* Single post layout */
.post-article{
  max-width:760px;
  margin:0 auto;
  padding:64px 0;
}
.post-article__crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-dim);
  margin-bottom:18px;
  flex-wrap:wrap;
}
.post-article__crumbs a{ color:var(--text-muted); }
.post-article__crumbs a:hover{ color:var(--primary); }
.post-article__crumbs svg{ width:12px; height:12px; }
.post-article__meta{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:13px;
  color:var(--text-dim);
  margin-bottom:18px;
  flex-wrap:wrap;
}
.post-article__meta svg{ width:14px; height:14px; color:var(--primary); vertical-align:-2px; }
.post-article__title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(32px,4.6vw,52px);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.08;
  margin:0 0 18px;
}
.post-article__lede{
  font-size:clamp(16px,1.4vw,19px);
  color:var(--text-muted);
  margin:0 0 32px;
  line-height:1.55;
}
.post-article__edit{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  background:var(--grad,linear-gradient(135deg,#FF2D55 0%,#FF8A00 100%));
  color:#fff;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  margin-bottom:32px;
  transition:transform var(--t-fast,.18s), box-shadow var(--t-fast,.18s);
}
.post-article__edit:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(255,45,85,.35); color:#fff; }
.post-article__edit svg{ width:14px; height:14px; }

/* Article body content */
.post-body{ font-size:17px; line-height:1.7; color:var(--text); }
.post-body > *:first-child{ margin-top:0; }
.post-body p{ margin:0 0 22px; color:var(--text); }
.post-body h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(22px,2.6vw,30px);
  font-weight:700;
  margin:40px 0 16px;
  letter-spacing:-.015em;
}
.post-body h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(19px,2vw,24px);
  font-weight:700;
  margin:32px 0 12px;
}
.post-body h4{
  font-family:'Space Grotesk',sans-serif;
  font-size:18px;
  font-weight:700;
  margin:24px 0 8px;
}
.post-body ul, .post-body ol{ margin:0 0 22px; padding-left:24px; }
.post-body li{ margin-bottom:8px; color:var(--text-muted); }
.post-body a{ color:var(--primary); font-weight:600; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.post-body a:hover{ color:#fff; }
.post-body strong{ color:var(--text); font-weight:700; }
.post-body blockquote{
  border-left:3px solid var(--primary);
  padding:8px 0 8px 22px;
  margin:24px 0;
  color:var(--text-muted);
  font-style:italic;
}
.post-body img{ max-width:100%; height:auto; border-radius:12px; margin:24px 0; }
.post-body code{
  background:var(--surface-2,#1B2138);
  padding:2px 8px;
  border-radius:6px;
  font-size:.92em;
  color:var(--accent,#FF8A00);
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.post-body pre{
  background:var(--surface-2,#1B2138);
  border:1px solid rgba(255,255,255,.06);
  padding:18px 20px;
  border-radius:12px;
  overflow-x:auto;
  font-size:14px;
  line-height:1.55;
  margin:0 0 22px;
}
.post-body pre code{ background:transparent; padding:0; color:var(--text); }
.post-body hr{ border:0; border-top:1px solid rgba(255,255,255,.08); margin:36px 0; }

/* Editor */
.editor-wrap{ max-width:860px; margin:0 auto; padding:48px 0 80px; }
.editor-card{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  padding:36px;
}
@media (max-width:640px){ .editor-card{ padding:24px; } }
.editor-card h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(26px,3vw,36px);
  font-weight:800;
  margin:0 0 6px;
}
.editor-card .lede{ margin:0 0 28px; }

.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.field .hint{ font-size:12px; color:var(--text-dim); margin-top:-2px; }
.field input[type=text],
.field input[type=password],
.field textarea{
  width:100%;
  padding:13px 16px;
  background:var(--bg);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  color:var(--text);
  font-size:15px;
  font-family:inherit;
  transition:border-color var(--t-fast,.18s), box-shadow var(--t-fast,.18s);
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(255,45,85,.18);
}
.field textarea{ resize:vertical; min-height:340px; line-height:1.6; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .field--row{ grid-template-columns:1fr; } }

.editor-actions{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.06);
  flex-wrap:wrap;
}
.editor-actions__primary{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-danger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  background:transparent;
  border:1px solid rgba(255,80,80,.40);
  color:#ff8080;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:all var(--t-fast,.18s);
}
.btn-danger:hover{ background:rgba(255,80,80,.10); color:#ff5050; }
.btn-danger svg{ width:14px; height:14px; }

/* Flash messages */
.flash{
  padding:14px 18px;
  border-radius:12px;
  margin-bottom:20px;
  font-size:14px;
  font-weight:600;
  border:1px solid;
}
.flash--ok   { background:rgba(0,200,120,.10); border-color:rgba(0,200,120,.35); color:#5ee0a5; }
.flash--err  { background:rgba(255,80,80,.10);  border-color:rgba(255,80,80,.40);  color:#ff8080; }
.flash--info { background:rgba(255,138,0,.08);  border-color:rgba(255,138,0,.30);  color:#ffb45c; }

/* Login card */
.login-wrap{ max-width:440px; margin:0 auto; padding:64px 0 80px; }
.login-wrap .editor-card{ padding:36px; text-align:left; }
.login-wrap h1{ text-align:center; }
.login-wrap .lede{ text-align:center; }