/* Blog page specific styles */

/* Hero */
.page-hero {
  background: radial-gradient(800px 400px at 10% -10%, rgba(224,26,58,0.12), transparent 50%),
              linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-top: var(--space-8);
}
.hero-inner { padding: clamp(var(--space-8), 6vw, var(--space-11)); }
.hero-ctas { display: flex; gap: var(--space-4); margin-top: var(--space-5); flex-wrap: wrap; }

/* Section headers */
.section-head { margin-bottom: var(--space-6); }

/* Featured post */
.featured-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
  align-items: stretch;
}
.featured-media img { width: 100%; height: 100%; object-fit: cover; }
.featured-media { display: block; border-radius: calc(var(--radius-lg) - 2px); overflow: hidden; }
.featured-content .post-title { margin: 0 0 var(--space-4) 0; }
.post-excerpt { margin-top: var(--space-4); }
.post-meta { display: flex; gap: var(--space-4); align-items: center; color: var(--color-text-muted); margin-top: var(--space-4); font-size: var(--text-sm); }
.post-cats { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.featured-actions { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }

@media (max-width: 980px) {
  .featured-card { grid-template-columns: 1fr; }
}

/* Categories */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.cat-card { padding: 0; }
.cat-link {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-7) var(--space-8);
  text-decoration: none; color: var(--color-text);
}
.cat-link:hover { color: var(--color-primary-400); }

@media (max-width: 900px) {
  .cat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr; }
}

/* Trending */
.trending-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.trend-media { display: block; overflow: hidden; border-radius: calc(var(--radius-lg) - 2px); }
.trend-media img { transition: transform var(--duration-normal) var(--easing-standard); }
.trend-media:hover img { transform: scale(1.03); }
.trend-item h3 { margin-top: var(--space-4); }

@media (max-width: 900px) {
  .trending-grid { grid-template-columns: 1fr; }
}

/* Authors */

.authors-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.author-card { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: var(--space-6); }
.author-photo { width: 110px; height: 110px; object-fit: cover; border-radius: var(--radius-md); }
.author-meta h3 { margin: 0 0 var(--space-2) 0; }

@media (max-width: 900px) {
  .authors-grid { grid-template-columns: 1fr; }
}

/* Comments */
.comments .comment-list { display: grid; gap: var(--space-5); margin-bottom: var(--space-6); }
.comment-item .comment-head { display: flex; gap: var(--space-4); align-items: baseline; margin-bottom: var(--space-3); }
.comment-form { padding: var(--space-6); display: grid; gap: var(--space-5); }
.comment-form .form-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Behind the blog */
.behind-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-8); align-items: center; }
.behind-media img { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-lg); }
@media (max-width: 980px) { .behind-grid { grid-template-columns: 1fr; } }

/* Tips */
.tips-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.tip h3 { margin-bottom: var(--space-3); }
@media (max-width: 900px) { .tips-list { grid-template-columns: 1fr; } }

/* Recommended */
.rec-list { display: grid; gap: var(--space-6); }
.rec-item {  gap: var(--space-6); align-items: center; }
.rec-media img { width: 200px; height: 130px; object-fit: cover; border-radius: var(--radius-md); }
.rec-content h3 { margin: 0 0 var(--space-2) 0; }
.rec-cta { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 720px) { .rec-item { grid-template-columns: 1fr; } .rec-media img { width: 100%; height: auto; } }