/*
 * Homepage bento: third row with "Build a full website" + "Text your fans" (SMS).
 * Markup: buildBentoSectionHtml({ messagingRow: true }) in scripts/lib/marketing-sections.mjs.
 */

.dims-bento__row--extra {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.dims-bento__row--extra .dims-bento__cell {
  min-height: clamp(20rem, 34vw, 28rem);
}

@media (min-width: 1200px) {
  #bento .dims-bento__row--extra .dims-bento__cell {
    min-height: 27rem;
  }
}

/* Full website: the three-phone composition rises from the bottom edge, cropped like "Sell your music"
 * (reuses the shared peek-bottom positioning; only the size and how much peeks change). */
.dims-bento__row--extra .dims-bento__cell-media--peek-landscape {
  --dims-bento-peek-shift: 35%;
}

.dims-bento__row--extra .dims-bento__cell-media--peek-landscape img {
  width: min(92%, 36rem);
  max-width: none;
}

/* ---------- SMS thread ---------- */

.dims-bento__cell-media--peek-sms {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: calc(-1 * var(--dims-card-pad, 1.625rem));
}

.dims-bento__sms {
  --sms-blue: #0a84ff;
  --sms-ease: cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(100%, 26rem);
  min-height: 23rem;
  padding: 1.25rem 1.25rem 2rem;
  border-radius: 1.5rem 1.5rem 0 0;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 18px 40px -22px rgba(0, 0, 0, 0.35);
  font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.dims-bento__sms-head {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.dims-bento__sms-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #ddd url("../images/hero-preview-rio-tour.png") 45% 12% / 230% no-repeat;
}

.dims-bento__sms-name {
  font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", system-ui, sans-serif;
  font-size: 0.8125rem;
  color: #1d1d1f;
}

.dims-bento__sms-time {
  font-size: 0.6875rem;
  color: #8e8e93;
}

.dims-bento__sms-bubble {
  max-width: 82%;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 1.125rem;
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.96);
  animation: dims-bento-sms-in 9s var(--sms-ease) infinite;
  animation-delay: calc(var(--i, 0) * 0.9s + 0.4s);
}

.dims-bento__sms-bubble--in {
  align-self: flex-start;
  background: #e9e9eb;
  color: #000;
  border-bottom-left-radius: 0.375rem;
  transform-origin: 0 100%;
}

.dims-bento__sms-bubble--out {
  align-self: flex-end;
  background: var(--sms-blue);
  color: #fff;
  border-bottom-right-radius: 0.375rem;
  transform-origin: 100% 100%;
}

.dims-bento__sms-bubble--link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.75rem 0.375rem 0.375rem;
}

.dims-bento__sms-bubble--link b {
  display: block;
  font-family: "SF Pro Display Semibold", "SF Pro Display Semibold Placeholder", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
}

.dims-bento__sms-bubble--link small {
  display: block;
  font-size: 0.75rem;
  color: #6e6e73;
}

.dims-bento__sms-art {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.75rem;
  background: #222 url("../images/hero-preview-in-my-mind-stream.png") 50% 22% / 160% no-repeat;
}

/* Bubbles arrive one by one, hold, then clear together before the loop restarts. */
@keyframes dims-bento-sms-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.96);
  }
  6%,
  78% {
    opacity: 1;
    transform: none;
  }
  86%,
  100% {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
  }
}

@media (max-width: 809.98px) {
  .dims-bento__row--extra {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dims-bento__sms-bubble {
    opacity: 1;
    transform: none;
    animation: none;
  }
}