/* Deal permalink page: title-first card (Basecamp hierarchy) — title, meta,
   facts (photo + price + CTA), the poster's writeup as their opening note, then
   a footer with the vote pill + reactions. The discussion is a separate card. */

@layer components {
  .deal__post {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* Owner/admin overflow menu, mirroring the comment "⋯" menu: a round trigger
     floated to the trailing edge of the meta row, opening a full-tap-height
     item list. Composes the shared .menu/.popover/.menu__item primitives. */
  .deal-menu {
    position: relative;
    margin-inline-start: auto;
  }

  .deal-menu__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);

    @media (any-hover: hover) {
      &:hover {
        background: var(--tint-ink-5);
        color: var(--color-ink);
      }
    }
  }

  .deal-menu__items {
    inset-block-start: 100%;
    min-inline-size: 12rem;
  }

  .deal-menu__form {
    display: contents;
  }

  .deal-menu__item {
    --menu-item-padding: 0 var(--inline-space);
    inline-size: 100%;
    min-block-size: var(--tap);
    color: var(--color-text);
    background: none;
    cursor: pointer;

    @media (any-hover: hover) {
      &:hover {
        background: var(--tint-ink-5);
      }
    }

    &.deal-menu__item--danger {
      color: var(--color-down);

      @media (any-hover: hover) {
        &:hover {
          background: var(--color-down-surface);
        }
      }
    }
  }

  /* Title row: heading on the left, the outbound "View deal" link pinned to the
     trailing edge, wrapping beneath on a narrow column. */
  .deal__head {
    display: flex;
    align-items: flex-start;
    gap: var(--inline-space);
    flex-wrap: wrap;
  }

  .deal__title {
    flex: 1;
    min-inline-size: 12rem;
    font-size: var(--text-x-large);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  .deal__cta {
    flex: none;
  }

  .deal__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--inline-space-half) var(--inline-space);
    font-size: var(--text-x-small);
    color: var(--color-text-subtle);
  }

  /* The plain-text byline (name · karma · date) stays one tight group so the
     dot separators read as a unit, set apart from the store/category pills by
     the meta row's wider column gap. */
  .deal__byline {
    display: inline-flex;
    align-items: center;
    gap: 0.75ch;
  }

  .deal__poster-name {
    font-weight: 600;
    color: var(--color-text-subtle);
  }

  .deal__poster-rep {
    font-weight: 600;
    color: var(--color-featured);
  }

  .deal__facts {
    display: flex;
    gap: 1.5ch;
    align-items: stretch;
  }

  .deal__photo {
    inline-size: 6rem;
    block-size: 6rem;
    flex: none;
    object-fit: contain;
    padding: 0.375rem var(--inline-space-half);
    border-radius: var(--radius-md);
    background: var(--color-canvas);
    border: 1px solid var(--color-border-subtle);
  }

  .deal__pricewrap {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.625rem;
  }

  .deal__desc {
    max-inline-size: 65ch;
    font-size: var(--text-normal);
    line-height: var(--leading-relaxed);
    text-wrap: pretty;
  }

  .deal__interactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--inline-space);
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--color-border-subtle);

    .vote {
      flex-direction: row;
    }

    .reactions {
      margin-inline-start: auto;
    }
  }

  .price__row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--inline-space);
  }

  .price__current {
    font-size: var(--text-xx-large);
    line-height: var(--leading-tight);
    color: var(--color-ink);
  }

  .price__strike {
    font-family: var(--font-mono);
    font-size: var(--text-medium);
    text-decoration: line-through;
    color: var(--color-text-muted);
  }

  .price__savings-note {
    font-size: var(--text-small);
    color: var(--color-text-subtle);
  }

  /* Sticky CTA (mobile) */
  .deal-sticky {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 20;
    padding: 0.75rem 1.5ch;
    background: color-mix(in oklch, var(--color-bg), transparent 8%);
    backdrop-filter: blur(8px);
    border-block-start: 1px solid var(--color-border);
  }

  .deal-sticky__btn {
    box-shadow: var(--shadow-brand);
  }

  /* In-column responsive bumps, keyed to the content container (not the
     viewport) so the wide-layout treatment follows the column width. */
  @container app (min-width: 720px) {
    .deal__photo {
      inline-size: 6rem;
      block-size: 6rem;
    }

    .price__current {
      font-size: var(--text-xx-large);
    }

    /* The mobile sticky CTA is redundant once the inline CTA has room. */
    .deal-sticky {
      display: none;
    }
  }
}