/* Vibe board — V0.1 Careers 62:3490: four 280-wide columns at x50/350/650/950, 20 gaps,
   radius 20 tiles. Cards are Slack only since the 10-29 review (W3): a Quote, or a Slack thread
   after V0.1's Slack post 62:3544. */
.block--vibe-board {
  /* V0.1: card values the system doesn't carry (Slack chrome). */
  --vibe-sky: #aec8e1;    /* V0.1 */
  --vibe-grass: #02c252;  /* V0.1 */
  --vibe-red: #ea1706;    /* V0.1 #fa3b2b, deepened so white text is AA 4.5:1 (Tucker, A11Y-3, 2026-09-22) */
  --vibe-meta: #3a3a3a;   /* V0.1 #434343; darker for AA on grass (4.17 → 4.7:1) */
  --vibe-gap: 20px;
  --vibe-cols: 4;
}


.block--vibe-board .vibe {
  columns: var(--vibe-cols);
  column-gap: var(--vibe-gap);
}
.block--vibe-board .vibe__item {
  break-inside: avoid;
  padding-bottom: var(--vibe-gap);
}
/* With JS, vibe-board.js places every tile itself (Safari's multi-column layout hid,
   blanked and clipped tiles: review C4 and Tucker's walkthrough). CSS columns above are
   the no-JS fallback. */
.block--vibe-board .vibe.is-masonry { columns: auto; position: relative; }
.block--vibe-board .vibe.is-masonry > .vibe__item { position: absolute; width: var(--vibe-w); }

/* ---------- Tile ---------- */
.block--vibe-board .vibe__tile {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  isolation: isolate;
}
.block--vibe-board .vibe__tile--media > img,
.block--vibe-board .vibe__tile--media > video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
:where([data-input="mouse"], .no-js) .block--vibe-board .vibe__tile--media:hover > img,
:where([data-input="mouse"], .no-js) .block--vibe-board .vibe__tile--media:hover > video { transform: scale(1.04); }

/* Entrance: a scattered pop — rise, settle from 94%, and unclip from the bottom. */
.block--vibe-board .vibe__tile[data-reveal] {
  opacity: 0;
  transform: translateY(56px) scale(0.94);
  clip-path: inset(18% 0 0 0 round var(--radius-md));
  transition:
    opacity 700ms var(--ease-out),
    transform 1100ms var(--ease-out),
    clip-path 1100ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.block--vibe-board .vibe__tile[data-reveal].is-in {
  opacity: 1; transform: none;
  clip-path: inset(0 0 0 0 round var(--radius-md));
}
.no-js .block--vibe-board .vibe__tile[data-reveal] { opacity: 1; transform: none; clip-path: none; }

/* ---------- Cards ---------- */
.block--vibe-board .vibe__tile--message {
  --card-bg: var(--vibe-grass);
  --card-ink: var(--color-black);
  --card-meta: var(--vibe-meta);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-20);
  overflow-wrap: anywhere; /* at a large text size a word breaks inside the card instead of running out of it */
  background: var(--card-bg);
  color: var(--card-ink);
  font-family: var(--font-body);
}
.block--vibe-board .vibe--sky { --card-bg: var(--vibe-sky); }
.block--vibe-board .vibe--grass { --card-bg: var(--vibe-grass); }
.block--vibe-board .vibe--red { --card-bg: var(--vibe-red); --card-ink: var(--color-white); --card-meta: var(--color-white); }
.block--vibe-board .vibe--green { --card-bg: var(--color-green); }
.block--vibe-board .vibe--blue { --card-bg: var(--color-blue); } /* black ink: white is 3.0:1 on brand blue */
.block--vibe-board .vibe--chartreuse { --card-bg: var(--color-chartreuse); }
.block--vibe-board .vibe--lilac { --card-bg: var(--color-lilac); }
.block--vibe-board .vibe--bubblegum { --card-bg: var(--color-bubblegum); }
.block--vibe-board .vibe--amber { --card-bg: var(--color-amber); }
.block--vibe-board .vibe--orange { --card-bg: var(--color-orange); }
.block--vibe-board .vibe--pink { --card-bg: var(--color-pink); } /* black ink: white is 3.8:1 on pink */
.block--vibe-board .vibe--teal { --card-bg: var(--color-teal); }
.block--vibe-board .vibe--black { --card-bg: var(--color-black); --card-ink: var(--color-white); --card-meta: var(--color-gray-500); }

/* Quote: the words large, an optional name under them. */
.block--vibe-board .card-quote { display: grid; gap: var(--space-12); }
.block--vibe-board .card-quote__text { font-size: var(--fs-body-md); line-height: 1.2; letter-spacing: -0.02em; }
.block--vibe-board .card-quote__name { font-size: var(--fs-label-sm); color: var(--card-meta); }
.block--vibe-board .card-quote__name::before { content: "— "; }

/* Slack thread: avatar, bold name, small time, plain lines, reaction pills. Lato in V0.1 → Inter here. */
.block--vibe-board .chat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); line-height: 1.47; letter-spacing: -0.02em; } /* minmax: the card's width, not its longest word's (a large text size) */
.block--vibe-board .chat__post { display: flex; align-items: flex-start; gap: var(--space-8); }
.block--vibe-board .chat__avatar {
  flex: none; display: grid; place-items: center; overflow: hidden;
  width: max(36px, 2.1em); height: max(36px, 2.1em); margin-top: var(--space-4); /* em: the initials fit at a large text size */
  border-radius: var(--radius-sm);
  background: var(--color-black); color: var(--color-white);
  font-size: var(--fs-label-xs); font-weight: 700; letter-spacing: 0;
}
.block--vibe-board .chat__avatar img { width: 100%; height: 100%; object-fit: cover; }
.block--vibe-board .chat__body { min-width: 0; padding-left: var(--space-4); }
.block--vibe-board .chat__meta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-8); }
.block--vibe-board .chat__name { font-weight: 800; font-size: var(--fs-label-sm); white-space: nowrap; }
.block--vibe-board .chat__time { font-size: 11.5px; color: var(--card-meta); } /* V0.1 */
.block--vibe-board .chat__line { font-size: var(--fs-label-sm); }
.block--vibe-board .chat__reactions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
.block--vibe-board .chat__reaction {
  display: inline-flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-8); height: 24px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-white) 45%, transparent);
  font-size: var(--fs-label-xs); line-height: 1;
}

/* Prototype hover: name and time underline, 100 ms ease-out (Message User Button / Message Date). */
.block--vibe-board .chat__name,
.block--vibe-board .chat__time {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  transition: text-decoration-color 100ms ease-out;
}
:where([data-input="mouse"], .no-js) .block--vibe-board .vibe__tile--message:hover .chat__name,
:where([data-input="mouse"], .no-js) .block--vibe-board .vibe__tile--message:hover .chat__time { text-decoration-color: currentColor; }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 1023px) {
  .block--vibe-board { --vibe-cols: 3; --vibe-gap: 16px; }
}
@media (max-width: 767px) {
  .block--vibe-board { --vibe-cols: 2; --vibe-gap: 10px; }
  .block--vibe-board .vibe__tile { border-radius: 14px; }
  .block--vibe-board .vibe__tile[data-reveal] { clip-path: inset(18% 0 0 0 round 14px); }
  .block--vibe-board .vibe__tile[data-reveal].is-in { clip-path: inset(0 0 0 0 round 14px); }
  /* A chat that outgrows its ratio at this width grows the tile (aspect-ratio's automatic
     minimum only applies with overflow visible) instead of clipping its last line;
     vibe-board.js re-lays the column out. The entrance clip-path still rounds it. */
  .block--vibe-board .vibe__tile--message { padding: var(--space-12); overflow: visible; }
  .block--vibe-board .chat { gap: var(--space-12); }
  .block--vibe-board .card-quote__text { font-size: var(--fs-label-md); }
  .block--vibe-board .chat__line,
  .block--vibe-board .chat__name { font-size: var(--fs-label-xs); }
  .block--vibe-board .chat__avatar { width: max(26px, 2.1em); height: max(26px, 2.1em); border-radius: 6px; } /* V0.1 */
}