/* =====================================================================
   Item 23 — the clamped card and the opened full update.

   DESIGN: blog-design-tokens.css (load it first). The View button
   is the blog rail red (--pp-red) deepening to the editorial accent
   on hover, as the blog's buttons darken; the sheet is the blog's
   paper at its largest radius (--pp-radius-lg) under its xl
   shadow; the scrim is DERIVED from the palette — the blog's
   darkest navy (--pp-navy-dark #071120) at 72%.
   ===================================================================== */

/* The clamp is applied by JS only to cards it measured as long. */
.tac-update.is-clamped .tac-update-body {
  max-height: 168px;               /* = STANDARD_PX in the script */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
          mask-image: linear-gradient(#000 78%, transparent);
}
.tac-update-view {
  margin-top: 8px;
  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: 6px 16px; cursor: pointer;
  transition: var(--pp-transition, all .2s ease-in-out);
}
.tac-update-view:hover { background: var(--pp-accent, #a42d2d); }
.tac-update-view[hidden] { display: none; }

/* The opened update: a sheet over the page, the whole text with
   its photos, scrollable to the very end. */
.tac-update-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(7, 17, 32, 0.72);  /* derived: --pp-navy-dark at 72% */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 12px;
}
.tac-update-overlay[hidden] { display: none; }
.tac-update-sheet {
  position: relative; background: var(--pp-paper, #fff);
  border-radius: var(--pp-radius-lg, 8px);
  box-shadow: var(--pp-shadow-xl, 0 20px 35px #0c1b3329);
  width: min(760px, 100%); max-height: 92vh; overflow: auto;
  padding: 22px 24px;
}
.tac-update-close {
  position: absolute; top: 6px; right: 10px;
  background: none; border: 0; font-size: 28px; cursor: pointer;
  color: var(--pp-muted, #475569);
}
.tac-update-full .tac-update { display: flex; }  /* keep item 18 layout */