/* =====================================================================
   Items 18 + 18b — evidence thumbnails, the update's side photo,
   and the full-size viewer.

   DESIGN: blog-design-tokens.css (load it first). Thumbs sit on the
   blog's paper with its card border; the View button carries the
   blog rail red (--pp-red, the category rail's active colour) and
   deepens to the editorial accent red on hover — the same
   darken-on-hover move as the blog's .btn-primary. The lightbox
   scrim is DERIVED from the palette: the blog's darkest navy
   (--pp-navy-dark #071120) at 95% — the blog defines no scrim.
   ===================================================================== */

/* Case evidence strip: small, in a row. */
.tac-evidence { margin: 14px 0; }
.tac-evidence h4 {
  margin: 0 0 8px; font-size: 13px; letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: var(--pp-font-head, "Merriweather", "Lora", Georgia, serif);
  color: var(--pp-heading, #0f172a);
}
.tac-evidence-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tac-thumb {
  padding: 0; border: 1px solid var(--pp-border, #e2e8f0);
  border-radius: var(--pp-radius-md, 6px);
  background: var(--pp-paper, #fff); cursor: zoom-in; line-height: 0; overflow: hidden;
}
.tac-thumb img { width: 84px; height: 84px; object-fit: cover; display: block; }

/* Update card: text on the left, the photo small by its side. */
.tac-update { display: flex; gap: 14px; }
.tac-update-main { flex: 1; min-width: 0; }
.tac-update-photo { margin: 0; flex: 0 0 auto; text-align: center; }
.tac-update-photo .tac-thumb img { width: 96px; height: 96px; }
.tac-view-photos {
  display: block; margin-top: 6px; width: 100%;
  background: var(--pp-red, #c92a2a); color: #fff; border: 0;
  border-radius: var(--pp-radius-md, 6px);
  font-family: var(--pp-font-sans, "Plus Jakarta Sans", "Inter", sans-serif);
  font-weight: 700; font-size: 13px; padding: 5px 0; cursor: pointer;
  transition: var(--pp-transition, all .2s ease-in-out);
}
.tac-view-photos:hover { background: var(--pp-accent, #a42d2d); }
@media (max-width: 560px) {
  .tac-update-photo .tac-thumb img { width: 72px; height: 72px; }
}

/* The viewer: full size, over everything, one photo at a time,
   stepping through the whole set. */
.tac-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(7, 17, 32, 0.95);  /* derived: --pp-navy-dark at 95% */
  display: flex; align-items: center; justify-content: center;
}
.tac-lightbox[hidden] { display: none; }
body.tac-lb-open { overflow: hidden; }
.tac-lb-img { max-width: 92vw; max-height: 84vh; object-fit: contain; }
.tac-lb-close, .tac-lb-prev, .tac-lb-next {
  position: absolute; background: none; border: 0; color: #fff;
  font-size: 34px; cursor: pointer; padding: 10px 14px; line-height: 1;
}
.tac-lb-close { top: 6px; right: 10px; }
.tac-lb-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.tac-lb-next { right: 4px; top: 50%; transform: translateY(-50%); }
.tac-lb-meta {
  position: absolute; left: 0; right: 0; bottom: 14px;
  text-align: center; color: var(--pp-shade, #f1f5f9);
  font-family: var(--pp-font-sans, "Plus Jakarta Sans", "Inter", sans-serif);
  font-size: 14px;
}
.tac-lb-pos { margin-right: 10px; color: var(--pp-light, #94a3b8); }