/* ============================================================================
   Post — Figma FE Client file, node 12521:258725
   Header (104) -> Body (image + copy + show-more) -> Reactions (36) -> Actions (56)

   No DS recipe exists for this either; see the mapping table in feed.css for
   how each local style resolves through DESIGN.md.

   TODO(tokens): every bare px length in this file is a SIZE.
   DESIGN.md §12.4 records size as not built.
   ========================================================================== */

.post {
  background: var(--color-surface-raised);
  border-radius: var(--shape-radius-card);
  /* The image is full-bleed to the card's inner gutter, so padding lives on the
     individual bands rather than the card. */
  overflow: clip;
}

/* --- Post / Body / Header ------------------------------------------------ */
.post__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-md);
}

.post__identity {
  display: flex;
  flex: 1 1 auto;
  min-inline-size: 0;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.post__rows {
  display: flex;
  flex: 1 1 auto;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: flex-start;
}

.post__author {
  margin: 0;
  color: var(--color-content-headline);
  font-family: var(--font-family-display);
  /* Local style `Headlines/H4 - Bold` is 16 / 1.5 bold, which is exactly
     heading/sm (16/24 = 1.5) at the DS's default heading weight. */
  font-size: var(--font-heading-sm-size);
  line-height: var(--font-heading-sm-line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-letter-spacing-default);
}

/* Local style `Text & Icons/Marginal` #8c8c8c is Neutral/700, i.e. exactly what
   content/secondary resolves to in Light. */
.post__date {
  margin: 0;
  color: var(--color-content-secondary);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
}

.post__header-actions {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: var(--space-xs);
}

/* `Button / Default` type Text (§1.1) — bare, tinting on hover. */
.post__icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  /* TODO(tokens): touch target size not built. */
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--shape-radius-button);
  color: var(--color-content-primary);
  transition: background-color 100ms ease, color 100ms ease;
}
.post__icon-btn:hover {
  background: var(--color-soft-neutral-default);
  color: var(--color-on-soft-neutral);
}
.post__icon-btn:active {
  background: var(--color-soft-neutral-pressed);
}

/* Bookmarked — a `_line` -> `_fill` weight swap plus brand ink, so the state
   does not rest on colour alone (ASSETS.md §3). */
.post__icon-btn[aria-pressed="true"] {
  color: var(--color-content-brand);
}
.post__icon-btn[aria-pressed="true"] .icon {
  --icon-src: var(--icon-src-fill);
}

/* --- Post / Body / Image -----------------------------------------------
   Figma: inset by 16px horizontally, aspect 568/320. */
.post__media {
  padding-inline: var(--space-md);
}

.post__media img {
  inline-size: 100%;
  /* `block-size: auto` is load-bearing. The <img> carries width/height
     attributes (they prevent layout shift while it loads), and those map to
     presentational hints — so BOTH dimensions are specified and `aspect-ratio`
     is ignored on a replaced element. Releasing the height lets the ratio win. */
  block-size: auto;
  /* 16:9. The Figma frame is 568x320 (1.775), within a hair of 16:9 (1.778) —
     so this states the frame's intent exactly. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--shape-radius-chip);
  background: var(--color-surface-sunken);
}

/* --- Post / Body / Copy ------------------------------------------------- */
.post__copy {
  padding: var(--space-md) var(--space-md) 0;
  color: var(--color-content-primary);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
}

.post__copy > * {
  margin: 0;
}

.post__copy-title {
  color: var(--color-content-headline);
  font-weight: var(--font-weight-bold);
}

.post__copy-list {
  padding-inline-start: var(--space-lg);
}

/* Collapsed by default, with the fade the Figma `Show More` band implies.
   The clamp is on a wrapper so the fade can sit over it. */
.post__collapse {
  position: relative;
  overflow: clip;
  max-block-size: 132px; /* TODO(tokens): size not built */
  transition: max-block-size 160ms ease; /* TODO(tokens): motion not built */
}

.post__collapse::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  /* A fade to the card surface, so the token stays the surface token and the
     transparent end is derived from it rather than hard-coded. */
  block-size: var(--space-2xl);
  background: linear-gradient(to bottom, transparent, var(--color-surface-raised));
  pointer-events: none;
}

.post[data-expanded="true"] .post__collapse {
  max-block-size: none;
}
.post[data-expanded="true"] .post__collapse::after {
  display: none;
}

/* --- Post / Body / Show More ------------------------------------------- */
.post__show-more {
  display: flex;
  inline-size: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  /* `Button / Default` Link Primary (§1.1) — content/brand, no fill. */
  color: var(--color-content-brand);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  font-weight: var(--font-weight-medium);
  border-radius: var(--shape-radius-button);
}
.post__show-more:hover {
  text-decoration: underline;
}

/* The UA's `[hidden] { display: none }` is a low-specificity rule, so the
   `display: flex` above beats it and a hidden toggle still renders. feed.js
   hides this button whenever the copy does not actually overflow, so without
   this a short post shows a "Show more" that does nothing. Same fix as
   `.btn[hidden]`. */
.post__show-more[hidden] {
  display: none;
}

.post__show-more .icon {
  transition: transform 160ms ease; /* TODO(tokens): motion not built */
}
.post[data-expanded="true"] .post__show-more .icon {
  transform: rotate(180deg);
}

/* --- Post / Body / Reactions ------------------------------------------
   Figma draws a bottom hairline on an inner wrapper inset by the card's 16px
   padding, so the rule stops short of the card edge. */
.post__reactions {
  padding-inline: var(--space-md);
}

.post__reactions-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-xs);
  border-block-end: var(--border-width-thin) solid var(--color-border-default);
}

.post__reaction {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--color-content-secondary);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
}

/* The like reaction's own glyph carries status colour; the count stays
   marginal, which is the same restraint the To-Do Going/Not-going pair uses. */
.post__reaction .icon--like {
  --icon-src: var(--icon-src-fill);
  color: var(--color-content-danger);
}

/* --- Post / Body / Actions -------------------------------------------- */
.post__actions {
  display: flex;
  padding: var(--space-md);
  gap: var(--space-3xs);
}

/* Four equal-width bare buttons — `Button / Default` type Text. */
.post__action {
  display: inline-flex;
  flex: 1 1 0;
  min-inline-size: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-px) var(--space-xs);
  border-radius: var(--shape-radius-button);
  color: var(--color-content-primary);
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  letter-spacing: var(--font-letter-spacing-default);
  white-space: nowrap;
  transition: background-color 100ms ease, color 100ms ease;
}
.post__action:hover {
  background: var(--color-soft-neutral-default);
  color: var(--color-on-soft-neutral);
}
.post__action:active {
  background: var(--color-soft-neutral-pressed);
}

/* Liked — brand ink plus a `_line` -> `_fill` swap, two channels. */
.post__action[aria-pressed="true"] {
  color: var(--color-content-brand);
}
.post__action[aria-pressed="true"] .icon {
  --icon-src: var(--icon-src-fill);
}

/* Below 480 the four labels stop fitting side by side. */
@media (max-width: 479px) {
  .post__action span:not(.icon) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}