/* ==========================================================================
   Blog page
   ========================================================================== */

.blog-skeleton {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .blog-skeleton { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .blog-skeleton { grid-template-columns: repeat(3, 1fr); } }
.blog-skeleton[hidden] { display: none; }
.blog-skeleton .skeleton-card {
  height: 340px;
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, var(--gray-300) 30%, #ececec 50%, var(--gray-300) 70%);
  background-size: 300% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
@keyframes skeleton-shimmer { to { background-position: -300% 0; } }

.blog-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-grid[hidden] { display: none; }

.blog-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  animation: card-in 560ms var(--ease-out) both;
}
.blog-card:hover, .blog-card:focus-within { transform: translateY(-6px); box-shadow: 0 20px 40px -16px rgba(0,0,0,0.5); }
.blog-card { transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
@keyframes card-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.blog-card-media {
  height: 190px;
  position: relative;
  overflow: hidden;
}
.blog-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent 55%); }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.blog-card:hover .blog-card-media img { transform: scale(1.06); }
.blog-card-body { padding: 1.1rem 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.blog-card-body h3 { font-size: 1.15rem; }
.blog-card-body .meta { font-size: 0.82rem; color: var(--gray-500); display: flex; gap: 1rem; flex-wrap: wrap; }
.blog-card-body p { font-size: 0.92rem; color: var(--gray-300); flex: 1; }
.blog-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--neon-cyan);
}
.blog-card-link svg { transition: transform var(--dur-fast) var(--ease-out); }
.blog-card:hover .blog-card-link svg { transform: translateX(4px); }

.blog-empty-state {
  display: none;
  text-align: center;
  padding: var(--space-xl) var(--space-sm);
  color: var(--gray-500);
}
.blog-empty-state.is-active { display: block; }

/* ---------- Post modal ---------- */
.post-modal-panel .event-modal-body {
  max-height: 60vh;
  overflow-y: auto;
}
.post-modal-content {
  color: var(--gray-300);
  line-height: 1.7;
}
.post-modal-content p { color: var(--gray-300); margin: 0 0 1em; }
.post-modal-content a { color: var(--neon-cyan); text-decoration: underline; }
.post-modal-content img { border-radius: var(--radius-sm); margin: 1em 0; }
.post-modal-content h2, .post-modal-content h3 { color: var(--white); margin: 1.2em 0 0.5em; }