/*
 * "Latest from the blog" -- the [kbh_latest_posts] strip just above the
 * footer on the home pages (blog.php).
 *
 * Its own file because kbh-site.css is a byte-identical copy of the FlatPages
 * stylesheet and is never edited (see HANDOFF.md), and the home pages do not
 * load kbh-blog.css. Enqueued only on a page whose content holds the
 * shortcode. Cream, so the strip reads as its own band between the contact
 * section and the footer.
 */
.section--latest { background: var(--cream); }
.section--latest .ruled { margin-bottom: clamp(26px, 3vw, 40px); }

.latest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.latest-card { background: var(--white); border: 1px solid var(--border); display: flex; flex-direction: column; }
.latest-card__img {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--orange-soft);
  text-decoration: none;          /* the KBH mark is not underlined text */
}
.latest-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.latest-card:hover .latest-card__img img { transform: scale(1.04); }
.latest-card__img .mark { width: 64px; height: 64px; font-size: 17px; }

.latest-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 20px 22px 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
}
.latest-card__title {
  margin: 8px 22px 24px;
  font-size: clamp(20px, 1.7vw, 23px);
  line-height: 1.35;
}
.latest-card__title a { text-decoration: none; }
.latest-card__title a:hover { color: var(--orange); }
/* the whole card is the link's target area, so it can be tapped anywhere */
.latest-card { position: relative; }
.latest-card__title a::after { content: ""; position: absolute; inset: 0; }

.latest-more { margin-top: clamp(26px, 3vw, 40px); text-align: center; }
.latest-more .btn { background: var(--white); }

@media (max-width: 900px) {
  .latest-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  /* stacked, a post with no photo needs only a band, not a full frame */
  .latest-card__img:not(:has(img)) { aspect-ratio: 16 / 4; }
}

@media (prefers-reduced-motion: reduce) {
  .latest-card__img img { transition: none; }
}