/* ==========================================================================
   CLOSING  ·  The last question
   Forest ground, the heading and its two actions centred, with Loai
   standing at the inline-end edge as the person you would be talking to.
   On mobile the portrait sits beneath the actions.
   ========================================================================== */

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--forest);
  color: var(--on-forest-body);
}

.closing__ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.closing__glow {
  position: absolute;
  inline-size: 52rem;
  block-size: 52rem;
  inset-block-start: -18rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--copper-rgb), 0.14), transparent 62%);
}

.closing__grid {
  display: grid;
  justify-items: center;
  gap: var(--space-xl);
  padding-block-start: var(--space-section);
}

.closing__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  padding-block-end: var(--space-section);
}

.closing__title {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  color: var(--on-forest);
  max-inline-size: 22ch;
}

.closing__lead {
  font-size: var(--step-lead);
  color: var(--on-forest-body);
  max-inline-size: 40ch;
}

.closing__actions {
  justify-content: center;
  margin-block-start: var(--space-xs);
}

/* Portrait: seated on the section's bottom edge, softened into the ground. */
.closing__portrait {
  position: relative;
  inline-size: min(70vw, 17rem);
  align-self: end;
}

.closing__portrait img {
  inline-size: 100%;
  block-size: auto;
}

.closing__portrait::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 30%;
  background: linear-gradient(180deg, rgba(14, 63, 60, 0), var(--forest));
}

@media (max-width: 63.99rem) {
  .closing__copy {
    padding-block-end: 0;
  }
}

/* --- Desktop layouts ---------------------------------------------------------
   Declared last so they override the mobile-first base rules above.

   64rem+: two tracks, copy then portrait.
   80rem+: three tracks. The copy owns the centre track so it sits on the
   page's true centre line; the portrait takes the inline-end track and the
   empty inline-start track balances it.
   ----------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .closing__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    align-items: end;
    gap: var(--space-xl);
  }

  .closing__copy {
    grid-column: 1;
    padding-block-end: var(--space-section);
  }

  .closing__portrait {
    grid-column: 2;
    inline-size: 100%;
  }
}

@media (min-width: 80rem) {
  .closing__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44rem) minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .closing__copy {
    grid-column: 2;
  }

  .closing__portrait {
    grid-column: 3;
    justify-self: end;
    max-inline-size: 17rem;
  }
}