/*
  Wishes section. The ring photo spans the full card width as a backdrop,
  with the upper portion masked into the cream page background so the
  title + description appear to float over the fade. Title and description
  sit on top of the masked (cream) area of the photo.
*/

#wishes {
  position: relative;
  background: var(--color-cream);
  color: var(--color-text);
  padding: 0 1.5rem 0;
  margin-top: 5rem;
  isolation: isolate;
  min-height: 42rem;
}

.wishes__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  background: url('/assets/ring-photo.jpg') center 2.5rem / cover no-repeat;
  /* Keep the photo invisible behind the text block and only let it bloom in
     below the description. Percentages are relative to section height; the
     description occupies roughly the top half at wider viewports, so the
     fade starts past that. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    transparent 45%,
    rgba(0, 0, 0, 0.6) 60%,
    #000 75%,
    #000 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0%,
    transparent 45%,
    rgba(0, 0, 0, 0.6) 60%,
    #000 75%,
    #000 100%);
  z-index: -1;
}

.wishes__title {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.4rem, 11cqw, 4.4rem);
  margin-top: -3.125rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.wishes__description {
  font-size: clamp(0.95rem, 2.5cqw, 1.05rem);
  line-height: 1.7;
  max-width: clamp(22rem, 70cqw, 30rem);
  margin: 0 auto;
  color: var(--color-text);
  position: relative;
}
.wishes__description p + p {
  margin-top: 1rem;
}
.wishes__description strong {
  font-weight: 700;
}