/* ── Blog Listing ───────────────────────────────────── */
.blog-page { padding-block: var(--space-md); }

.blog-filters {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}
.blog-filter {
  padding: 8px 20px;
  border-radius: 100px;
  border: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.blog-filter:hover    { color: var(--color-primary-text); border-color: var(--color-primary); }
.blog-filter.is-active {
  background: var(--color-primary);
  color: var(--color-text);
  border-color: var(--color-primary);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

/* ── Blog Post ───────────────────────────────────────── */
.post-hero {
  width: 100%;
  height: 460px;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.post-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.post-hero:has(.post-hero__img[src=""]) { display: none; }
#post-main > p:only-child {
  width: min(100%, 620px);
  margin: 56px auto 72px;
  padding: 52px 32px !important;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-bg-alt);
  text-align: center;
}
#post-main > p:only-child a { display: inline-block; margin-left: 6px; font-weight: 700; color: var(--color-primary-text); }

.post-body { padding-block: var(--space-md); }
.post-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--space-xl);
  align-items: start;
}

.post-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  transition: color var(--transition-fast);
  text-decoration: none;
}
.post-back:hover { color: var(--color-primary-text); }
.post-back svg { width: 16px; height: 16px; }

.post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.post-tag {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary-text);
  background: var(--color-bg-alt);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}
.post-date, .post-author { font-size: var(--font-size-xs); color: var(--color-text-light); }
.post-sep { color: var(--color-border-dark); }

.post-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: var(--space-xl);
}

.post-content p {
  font-size: var(--font-size-base);
  line-height: 1.9;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}
.post-content h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-2xl) 0 var(--space-md);
}
.post-content blockquote {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-md) var(--space-xl);
  margin: var(--space-xl) 0;
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.post-content blockquote p {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-text);
  margin: 0;
}

/* Sidebar */
.post-sidebar { position: sticky; top: 90px; }
.sidebar-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  background: var(--color-bg);
}
.sidebar-block__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.related-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.related-item:last-child { border-bottom: none; padding-bottom: 0; }
.related-item:hover { opacity: 0.7; }
.related-item__img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.related-item__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.related-item__date { font-size: var(--font-size-xs); color: var(--color-text-light); margin-top: 4px; }

.category-list { display: flex; flex-direction: column; gap: 2px; }
.category-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.category-list-item:hover { background: var(--color-bg-alt); color: var(--color-primary-text); }
.category-list-item span { font-size: var(--font-size-xs); color: var(--color-text-light); }

@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .post-layout { grid-template-columns: 1fr 220px; gap: var(--space-lg); }
}
@media (max-width: 768px) {
  .blog-grid  { grid-template-columns: 1fr; }
  .post-hero  { height: 220px; }
  #post-main > p:only-child { margin: 28px auto 40px; padding: 38px 20px !important; }
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { display: none; }
}
.post-media-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:32px; }
.post-media-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
@media (max-width:600px) { .post-media-gallery { grid-template-columns:1fr; } }

/* Criação de posts no padrão visual do site */
.blog-new-post{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-left:auto;border:1px solid var(--color-primary-text);border-radius:999px;padding:9px 17px;background:var(--color-primary-text);color:#fff;font:650 .78rem var(--font-body);cursor:pointer;box-shadow:0 8px 20px rgba(168,58,76,.2)}.blog-new-post svg{width:16px;height:16px}
.blog-editor-modal{position:fixed;inset:0;z-index:11000;display:grid;place-items:center;padding:16px;background:rgba(45,34,38,.58);backdrop-filter:blur(5px)}
.blog-editor-modal__panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(760px,100%);max-height:calc(100dvh - 32px);overflow:hidden;border:1px solid rgba(255,189,198,.7);border-radius:20px;background:#fff;box-shadow:0 24px 70px rgba(45,34,38,.3)}
.blog-editor-modal header,.blog-editor-modal footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 22px}.blog-editor-modal header{border-bottom:1px solid #f3e4e7}.blog-editor-modal footer{justify-content:flex-end;border-top:1px solid #f3e4e7;background:#fffafa}.blog-editor-modal header>div{display:grid;gap:2px}.blog-editor-modal header span,.blog-cover-editor__heading span{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary-text)}.blog-editor-modal header strong{font-size:1.08rem}.blog-editor-modal header p{font-size:.75rem;color:var(--color-text-muted)}.blog-editor-modal header>button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#fff7f8;cursor:pointer}.blog-editor-modal header svg{width:17px;height:17px}.blog-editor-modal__body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 22px;scrollbar-color:var(--color-primary) transparent}
.blog-editor-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.blog-editor-fields label{display:grid;gap:6px;font-size:.76rem;font-weight:650}.blog-editor-fields .is-wide{grid-column:1/-1}.blog-editor-fields input,.blog-editor-fields select,.blog-editor-fields textarea{width:100%;border:1px solid var(--color-border-dark);border-radius:10px;padding:10px 12px;background:#fffdfd;font:500 .82rem var(--font-body);color:var(--color-text);outline:0}.blog-editor-fields input:focus,.blog-editor-fields select:focus,.blog-editor-fields textarea:focus{border-color:var(--color-primary-text);box-shadow:0 0 0 3px rgba(255,189,198,.3)}.blog-editor-fields small{font-size:.66rem;font-weight:400;color:var(--color-text-muted)}
.blog-cover-editor{margin-top:22px;padding-top:20px;border-top:1px solid #f3e4e7}.blog-cover-editor__heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.blog-cover-editor__heading>div{display:grid}.blog-cover-editor__heading>label{display:flex;align-items:center;gap:7px;border:1px solid var(--color-border-dark);border-radius:10px;padding:9px 13px;background:#fff7f8;color:var(--color-primary-text);font-size:.75rem;font-weight:650;cursor:pointer}.blog-cover-editor__heading svg{width:16px;height:16px}
.blog-cover-stage{position:relative;width:min(100%,620px);aspect-ratio:16/8;margin:auto;overflow:hidden;border-radius:14px;background:#eee9ea;cursor:grab;touch-action:none;outline:0}.blog-cover-stage:focus-visible{box-shadow:0 0 0 3px rgba(168,58,76,.22)}.blog-cover-stage.is-dragging{cursor:grabbing}.blog-cover-stage>img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;will-change:transform,object-position}.blog-cover-stage.is-empty>img,.blog-cover-stage.is-empty>.blog-cover-hint{display:none}.blog-cover-empty{display:none;position:absolute;inset:0;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:var(--color-text-muted)}.blog-cover-stage.is-empty .blog-cover-empty{display:flex}.blog-cover-empty svg{width:42px;height:42px;color:var(--color-primary-text)}.blog-cover-empty strong{color:var(--color-text)}.blog-cover-empty span{font-size:.72rem}.blog-cover-hint{position:absolute;top:16px;left:50%;display:flex;align-items:center;gap:7px;width:max-content;max-width:calc(100% - 32px);transform:translateX(-50%);border-radius:9px;padding:9px 12px;background:rgba(45,34,38,.76);color:#fff;font-size:.76rem;font-weight:700;pointer-events:none}.blog-cover-hint svg{width:16px;height:16px;transform:rotate(90deg)}.blog-cover-stage.is-dragging .blog-cover-hint{opacity:0}.blog-cover-zoom{display:grid;grid-template-columns:34px minmax(0,420px) 34px;align-items:center;justify-content:center;gap:6px;margin:17px auto 0}.blog-cover-zoom button{border:0;background:transparent;font-size:1.5rem;cursor:pointer}.blog-cover-zoom input{width:100%;accent-color:var(--color-primary-text)}
.blog-editor-cancel,.blog-editor-save{min-height:38px;padding:9px 18px;border-radius:999px;font:600 .78rem var(--font-body);cursor:pointer}.blog-editor-cancel{border:0;background:transparent}.blog-editor-save{border:1px solid var(--color-primary-text);background:var(--color-primary-text);color:#fff}.blog-editor-save:disabled{opacity:.55;cursor:wait}
@media(max-width:768px){.blog-new-post{width:100%;margin-left:0}.blog-editor-modal{align-items:end;padding:0}.blog-editor-modal__panel{max-height:calc(100dvh - 8px);border-radius:18px 18px 0 0}.blog-editor-modal header,.blog-editor-modal footer{padding:14px 18px}.blog-editor-modal__body{padding:16px 18px}.blog-editor-fields{grid-template-columns:1fr}.blog-editor-fields .is-wide{grid-column:auto}.blog-cover-editor__heading{align-items:flex-start;flex-direction:column}.blog-cover-stage{min-height:210px}}
