/**
 * Shared card look for template-parts/content-archive-post.php —
 * used on the homepage grids, the category feed template, and author
 * archives. Fixed-ratio, rounded thumbnails keep grids even instead of
 * jagged/staggered rows of whatever size an author happened to upload.
 */
/* A row of fixed-width cards left-aligns by default, so a trailing
   row with fewer than a full row's worth of posts (Reviews, Essays,
   Festivals, any category feed that isn't an exact multiple of 3)
   leaves a dead gap on the right instead of reading as complete.
   Centering only kicks in on that last, incomplete flex line — full
   rows above it are unaffected, since flex-wrap applies justify-content
   per line, not to the container as a whole. */
.blog-grid {
  justify-content: center;
}

/* The title is the one piece of text on this card with no length cap
   (the excerpt below it is hard-truncated via mb_strimwidth in
   content-archive-post.php, so it can never need this) — a long real
   title with nothing to break on can otherwise run past the card's
   right edge on a phone instead of wrapping. Set on the <a> too, not
   just the heading: Safari doesn't reliably honor an inherited
   overflow-wrap on inline elements like a link, so the title's anchor
   needs its own copy of the same rule. */
.blog-item .title {
  overflow-wrap: break-word;
  word-break: break-word;
}

.blog-item .title a {
  overflow-wrap: break-word;
  word-break: break-word;
}

.blog-item .a-img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* The card wrap is the positioning context for the sticker (kept out of
   .a-img, whose <a> children legacy CSS stretches to fill the image). */
.blog-item .wrap { position: relative; }

/* Category shown as a small rotated sticker tag on the image corner. */
.blog-item__sticker {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 10px;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  max-width: calc(100% - 20px);
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10.5px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  transform: rotate(-3deg);
  transform-origin: left center;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  transition: transform var(--transition-fast);
}
.blog-item__sticker:hover { transform: rotate(0); }

.blog-item__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2);
  font-size: 12px;
  color: var(--color-text-faint);
}
.blog-item__meta .date { font-weight: 600; }
.blog-item__meta-sep { opacity: 0.55; }
.blog-item__meta .blog-item__byline { color: var(--color-text-muted); font-weight: 600; text-decoration: none; }
.blog-item__meta .blog-item__byline:hover { color: var(--color-accent); }

.blog-item__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.blog-item__more {
  display: inline-block;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.blog-item__more:hover { color: var(--color-accent-dark); }

/* "Listen to the episode" — shown on a written interview companion piece
   that's paired with the podcast episode covering the same interview. */
.blog-item__listen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--color-retro-1);
  text-decoration: none;
}
.blog-item__listen:hover { text-decoration: underline; }

.blog-item .a-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback for posts with no featured image — a branded, category-colored
   panel so a grid never shows a bare text card next to image cards. */
.blog-item .a-img--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4);
  position: relative;
}
.blog-item .a-img--placeholder .a-img__ph-mark {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.blog-item .a-img--placeholder .a-img__ph-label {
  font-size: clamp(1.05rem, 2.2vw, 1.55rem);
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
.blog-item .a-img--placeholder a {
  position: absolute;
  inset: 0;
}

.blog-item__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2);
}

.blog-item__tag {
  display: inline-flex;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
  padding: 3px 9px;
  border-radius: 999px;
  text-decoration: none;
}

.blog-item__tag:hover {
  opacity: 0.85;
}

/* Publications' second tag: the writer's byline, plain instead of a
   colored pill so it doesn't compete with the type tag next to it. */
.blog-item__byline {
  font-size: 11.5px;
  font-weight: 600;
  color: currentColor;
  opacity: 0.6;
  text-decoration: none;
}

.blog-item__byline:hover {
  opacity: 1;
}