/* 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 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

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

  .deal__admin {
    display: flex;
    gap: 0.75ch;
  }

  .deal__owner-actions {
    display: flex;
    gap: 0.75ch;
  }

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

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

  .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__cta {
    align-self: stretch;
    box-shadow: var(--shadow-brand);
  }

  .deal__note {
    display: flex;
    gap: var(--inline-space);
  }

  .deal__desc {
    flex: 1;
    min-inline-size: 0;
    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__title {
      font-size: var(--text-xx-large);
    }

    .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;
    }
  }
}