/* =========================================================
   Mobile version A - "Stacked Flow"
   Three stages stacked inside ONE fixed-height rectangle.
   Published fills the remaining space and clips (never grows).
   Sparkle connectors show the flow between stages.
   ========================================================= */
@media (max-width: 820px) {
  .pipe-board { height: 656px; }
  .pipe-col { overflow: visible; position: relative; }

  /* Approved + Message card: natural compact height */
  .pipe-col:nth-child(1), .pipe-col:nth-child(2) { flex: 0 0 auto; }
  .pipe-col:nth-child(1) .qcard .qtext { -webkit-line-clamp: 2; }
  .pipe-col:nth-child(2) .cardart { min-height: 118px; padding: 15px; }
  .pipe-col:nth-child(2) .pubbtn { display: none; }
  .pipe-col:nth-child(2) .cardart .ca-title { font-size: 25px; margin-bottom: 8px; }
  .pipe-col:nth-child(2) .cardart .ca-body { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

  /* Published: fills the rest, clips with a soft fade (newest on top) */
  .pipe-col:nth-child(3) { flex: 1 1 auto; min-height: 0; }
  .pipe-col:nth-child(3) #pubSlot {
    flex: 1 1 auto; min-height: 0; overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #000 76%, transparent);
            mask: linear-gradient(180deg, #000 76%, transparent);
  }

  /* sparkle connector between stacked stages */
  .pipe-col:nth-child(1)::after, .pipe-col:nth-child(2)::after {
    content: ""; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
    width: 14px; height: 14px; background: var(--coral); opacity: .85; z-index: 4;
    -webkit-mask: var(--spark-url) center/contain no-repeat; mask: var(--spark-url) center/contain no-repeat;
  }
}