/* The guest-messages strip.
 *
 * Mechanics only. Every colour comes from --wish-* custom properties that the
 * design sets on the section, so three very different invitations share one
 * scroller without sharing a palette.
 *
 * It is a real horizontal scroller, not a transformed track. That single
 * choice is what makes it swipeable for free: dragging is the browser's own
 * scrolling, with its own momentum and its own accessibility, and the runtime
 * only nudges scrollLeft and stands back whenever anyone touches it.
 */

.wi-wishes {
  /* THE RTL TRAP. A width:max-content child is positioned by its containing
     block's direction. On an Arabic page the mask inherits dir="rtl" from
     <html>, the track then hugs the mask's RIGHT edge and overflows left, and
     the halfway-wrap arithmetic silently breaks — an empty-looking strip with
     no error anywhere. Forcing ltr here fixes the geometry; the cards
     re-declare dir="rtl" themselves so the Arabic still reads correctly. */
  direction: ltr;

  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.wi-wishes::-webkit-scrollbar { display: none; }
.wi-wishes:active { cursor: grabbing; }

.wi-wishes__track { display: flex; width: max-content; }
.wi-wishes__copy  { display: flex; }

.wi-wish {
  flex: 0 0 auto;
  width: 268px;
  margin: 0 7px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  /* no min-height: a two-word message in a 172px box leaves the name
     stranded at the bottom of an empty card. The flex row stretches every
     card to the tallest one anyway, so heights still line up. */
  border: 1px solid var(--wish-line, rgba(0, 0, 0, .12));
  border-radius: 4px;
  background: var(--wish-bg, #fff);
  color: var(--wish-ink, #333);
}

.wi-wish__text {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.95;
  /* a long message is trimmed rather than allowed to set the strip's height */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wi-wish__from {
  margin-top: 16px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--wish-from, rgba(0, 0, 0, .5));
}
.wi-wish__from::before { content: "— "; }

/* The strip is content, not decoration: it keeps drifting under reduced
   motion, exactly as the opening video does, because stopping it would put
   messages behind a gesture the guest has no reason to know about. It is slow,
   it pauses the moment anyone touches or hovers it, and it can be read by
   swiping at any time. */