/* ============================================================
   GOODBYE / SERVICES

   The photo (assets/goodbye/goodbye-photo.jpg) already includes its
   Figma-exported polaroid border and rotation. Chat bubbles and the
   services list are overlaid using percentages measured against that
   photo's own box, matching the reference.
   ============================================================ */

.goodbye {
  position: relative;
  /* Less top padding than the shared section default — this section
     was reading as too disconnected from Contact right above it.
     No z-index here (deliberately) — putting one on the whole section
     made its own opaque background paint OVER the footer's scallop
     wherever the two boxes overlapped, not just the photo, hiding the
     ornament entirely. The z-index that needs to beat the footer's
     belongs on .goodbye__frame alone, below. */
  /* Bottom padding is also cut way down (space-7→space-4): with the
     full space-7 gap still there, the footer's own negative margin
     below never reached far enough to actually touch the photo — it
     was only closing the section's own empty padding, so the photo
     never visibly stepped on the scallop at all despite the numbers
     technically overlapping. */
  padding: var(--space-4) var(--gutter) var(--space-4);
  background: var(--color-bg);
}

.goodbye__frame {
  position: relative;
  z-index: 2;
  width: 84%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.goodbye__photo {
  display: block;
  width: 100%;
  height: auto;
}

/* z-index kept high on purpose — this floating chat overlay must
   always sit above everything else in the frame (the photo, and any
   future addition to it), same rule as the about-page bubbles. */
.goodbye__messages {
  position: absolute;
  left: -4%;
  top: 20%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Visual properties (size, padding, colour, type) come from the
   shared .message-bubble component in base.css — this only adds the
   drop shadow these need to read clearly over the photo behind them. */
.goodbye__message-bubble {
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* Sized up from a normal readable list into something closer to
   decorative type — per Clara, "casi decorativo" — tucked into the
   photo's own bottom-right corner specifically (not spread across the
   top), inset from that corner by measured margins (right/bottom,
   not left/top) so it sits on the actual dark photo content and never
   reaches the photo's own white polaroid-style border baked into the
   image (measured directly off assets/goodbye/goodbye-photo.webp —
   the border starts at roughly 97-98% across/down from this corner).
   overflow-wrap is a safety net at the narrowest viewports. */
.goodbye__services {
  position: absolute;
  /* 5px, then 10px, then 15px, then another 20px further right than before, per Clara. */
  right: calc(6% - 50px);
  /* Nudged up 10px, then back down 8px, per Clara. */
  bottom: calc(9% + 2px);
  width: 38%;
  /* Back to centered (not right-aligned) and back up to the bigger
     size from before this got tucked into the corner. */
  text-align: center;
  font-family: var(--font-headline);
  font-style: italic;
  color: var(--color-bg);
  font-size: clamp(1.1rem, 2.6vw, 2.6rem);
  line-height: 1.25;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .goodbye__frame { width: 100%; }
  /* Higher up the photo than on the desktop, per Clara: at 20% the
     first bubble sat on the services list's top line, and translated
     into Spanish the bubbles run longer still. The width cap is the
     other half of that: a long translation wraps inside the left
     half of the photo instead of reaching the list. */
  .goodbye__messages { left: 2%; top: 9%; max-width: 58%; }
  .goodbye__services {
    font-size: clamp(0.9rem, 4vw, 1.4rem);
    /* The desktop `right` value (calc(6% - 50px)) was tuned against a
       much wider frame — that fixed -50px overshoots a mobile frame's
       6% entirely, going negative and pushing this block outside the
       photo's right edge instead of sitting inside its corner. A
       plain percentage here stays correctly inside at any mobile width. */
    right: 5%;
  }
}