/* ============================================================
   Azema Blog — small additions on top of the main site's stylesheet.
   Only things WordPress itself needs (post content, pagination,
   comments) that don't already exist on the static site.
   ============================================================ */

/* ---------- Blog grid two-across on tablet, one on mobile ---------- */
.blog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: block;
}
.blog-card-img{ display: flex; }
@media (max-width: 1080px){
  .blog-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px){
  .blog-grid{ grid-template-columns: 1fr; }
}

/* ---------- Pagination links (Older / Newer posts) ---------- */
.blog-pagination a{
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid rgba(9,66,54,.25);
  border-radius: var(--radius);
  color: var(--green-deep);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.blog-pagination a:hover{ background: var(--green-deep); color: var(--cream); }

/* ---------- Post content (the_content output) ---------- */
.lp-intro img{
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: 24px 0;
}
.lp-intro figure{ margin: 24px 0; }
.lp-intro figcaption{ font-size: 13px; color: var(--sage); text-align: center; margin-top: 8px; }
.lp-intro h2{ font-size: clamp(22px,2.6vw,30px); margin-top: 40px; }
.lp-intro h3{ font-size: 20px; margin-top: 30px; }
.lp-intro blockquote{
  border-left: 3px solid var(--gold);
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  font-style: italic;
  color: var(--green-deep);
}
.lp-intro ul, .lp-intro ol{ padding-left: 22px; }
.lp-intro a{ color: var(--green-deep); text-decoration: underline; }

/* ---------- Comments (default WP markup, lightly styled) ---------- */
.comment-list{ list-style: none; padding: 0; margin: 0 0 30px; }
.comment-list li{ background: var(--cream); border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 16px; }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(9,66,54,.2);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  margin-bottom: 14px;
}
.comment-respond .form-submit input{
  background: var(--green-deep);
  color: var(--cream);
  border: none;
  padding: 12px 26px;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
}