/* ============================================================
   READ THESE — kwizzbit/read-these
   "Read these." card row, same treatment as the blog read-next but
   on cream (so it sits distinct from the sand try-it strip below).
   Cards reuse .blog-card from blog.css.
   ============================================================ */
.read-these {
  background: var(--wp--preset--color--cream);
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}
.read-these__header,
.read-these__query {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}
.read-these__header {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  /* Subtle divider above, matching the content width */
  border-top: 1px solid rgba(26, 26, 26, 0.12);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.read-these__title {
  font-family: 'Roobert Semimono', monospace;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.08em;
  color: var(--wp--preset--color--ink);
  margin: 0;
}
.read-these__cursor {
  color: var(--wp--preset--color--coral);
  display: inline-block;
  animation: faq-cursor-blink 1.1s step-end infinite;
}
@media (prefers-reduced-motion: reduce) { .read-these__cursor { animation: none; } }

/* 3-up card grid */
.read-these__query .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.875rem, 1.5vw, 1.25rem);
}
.read-these__query .wp-block-post-template > li { margin: 0; min-width: 0; }

@media (max-width: 640px) {
  /* 2-column grid, 2 articles only — matches the blog hub's secondary card layout.
     The third card is hidden; WordPress still fetches it (perPage:3) but we never
     show it on mobile so the grid stays balanced without a PHP query change. */
  .read-these__query .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
  }
  .read-these__query .wp-block-post-template > li:nth-child(3) {
    display: none;
  }
  /* 2-col cards: category, headline, time-est only — no date */
  .read-these__query .blog-card__date { display: none; }
  /* Pin time-est to the bottom of each card body */
  .read-these__query .blog-card__meta { margin-top: auto; }
}