/* ==========================================================================
   Contexto — desafios + carrossel de frases
   ========================================================================== */

.context {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 11.1806vw 0 5.3472vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--color-cream);
  background-color: var(--color-black);
  align-items: center;
}

.context__intro {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0 2.7778vw;
  display: flex;
  min-height: 19.5833vw;
  gap: 2.5vw;
}

.context__title {
  margin: 0.9028vw 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.1667vw;
  line-height: 1.06;
  flex: 1 1 0px;
  align-self: flex-start;
  text-align: right;
}

.context__photo {
  width: 17.9861vw;
  display: block;
  height: 19.5833vw;
  overflow: hidden;
  border-radius: var(--radius-media);
}

.context__photo--center {
  position: relative;
  flex: 0 0 17.9861vw;
}

.context__photo--left {
  position: absolute;
  top: 0;
  left: -11.875vw;
}

.context__photo--right {
  position: absolute;
  top: 0;
  right: -12.9167vw;
}

.context__photo-image {
  display: block;
}

.context__photo-image--center {
  width: 103.92%;
  height: 119.11%;
  position: absolute;
  top: -9.32%;
  left: -4.01%;
  max-width: none;
}

.context__photo-image--left {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.context__photo-image--right {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.context__subtitle {
  position: relative;
  width: 100%;
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.1667vw;
  line-height: 1.06;
  flex: 1 1 0px;
  align-self: flex-end;
}

.context__subtitle-top {
  margin: 0.9028vw 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.1667vw;
  color: var(--color-cream);
  line-height: 1.06;
  display: inline;
  flex: 1 1 0px;
  align-self: flex-start;
  text-align: right;
}

.context__subtitle-bottom {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-pink);
  line-height: 1.06;
  display: inline;
  font-size: inherit;
}

.context__question {
  position: relative;
  width: 65vw;
  display: block;
  max-width: 100%;
  font-size: 0;
  text-align: center;
  margin: 8.3333vw 0 0;
}

.context__question-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.1667vw;
  color: var(--color-cream);
  line-height: 1.06;
  display: inline;
}

.context__question-accent {
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: 3.4722vw;
  color: var(--color-cream);
  line-height: 1.06;
  display: inline;
}

.context__carousel-wrap {
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
  margin: 3.4028vw 0 0;
}

.context__carousel {
  position: relative;
  width: 100%;
  padding: 0 0 4px;
  display: block;
  overflow: auto;
  margin: 0 0 -20px;
}

.context__carousel-track {
  position: relative;
  width: max-content;
  min-width: 0;
  display: flex;
  gap: 1.5972vw;
  max-width: none;
}

.context__quote {
  position: relative;
  width: 23.6111vw;
  padding: 2.0833vw;
  display: block;
  min-height: 20.5556vw;
  flex: 0 0 23.6111vw;
}

.context__quote--red {
  background-color: var(--color-red);
}

.context__quote--pink {
  background-color: var(--color-pink);
}

.context__quote-text {
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: 2.9167vw;
  color: var(--color-black);
  line-height: 1.1;
}

.context__stamp {
  position: relative;
  width: 43.3333vw;
  padding: 1.3889vw;
  display: block;
  z-index: 2;
  margin: -6.4583vw 0 0;
  background-color: var(--color-cream);
  transform: rotate(-2.59deg);
}

.context__stamp-text {
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: 2.9167vw;
  color: var(--color-black);
  line-height: 1.1;
  text-align: center;
}


/* Mobile */
@media (max-width: 767px) {
  .context {
    padding: 10.2273vw 0 13.1818vw;
  }

  /* Intro: sizes follow the 440px mobile frame (1vw = 4.4px), so the
     photos never cover the text on narrower phones. */
  .context__intro {
    min-height: 74.0909vw;
    padding: 0;
    flex-direction: column;
    gap: 0;
  }

  .context__title {
    width: 64.5455vw;
    font-size: 9.0909vw;
    margin: 11.1364vw 4.5455vw 0;
    flex: 0 1 auto;
    align-self: flex-end;
    text-align: left;
  }

  .context__photo--center {
    width: 32.9545vw;
    height: 35.9091vw;
    position: absolute;
    top: 38.1818vw;
    right: -9.7727vw;
    flex: 0 1 auto;
  }

  .context__photo--left {
    width: 44.3182vw;
    height: 36.8182vw;
    left: -17.7273vw;
  }

  .context__photo--right {
    display: none;
  }

  .context__photo-image--left {
    width: 100%;
    height: 130.14%;
    object-fit: fill;
    position: absolute;
    top: -3.49%;
    left: 21.05%;
    max-width: none;
  }

  /* Both lines share the parent's size, so the leading matches the title. */
  .context__subtitle {
    width: 69.7727vw;
    font-size: 9.0909vw;
    margin: 17.0455vw 0 0 3.4091vw;
    flex: 0 1 auto;
    align-self: flex-start;
  }

  .context__subtitle-top,
  .context__subtitle-bottom {
    font-size: inherit;
  }

  .context__question {
    width: 69.7727vw;
    margin: 25.9091vw 0 0;
  }

  .context__question-title {
    font-size: 9.0909vw;
  }

  .context__question-accent {
    font-size: 7.2727vw;
  }

  .context__carousel-wrap {
    margin: 3.6364vw 0 0;
  }

  .context__carousel-track {
    gap: 3.4091vw;
  }

  .context__quote {
    min-height: 43.4091vw;
    padding: 6.8182vw;
  }

  .context__quote--medium {
    width: 66.5909vw;
    flex: 0 1 66.5909vw;
  }

  .context__quote--narrow {
    width: 53.8636vw;
    flex: 0 1 53.8636vw;
  }

  .context__quote--wide {
    width: 81.8182vw;
    flex: 0 1 81.8182vw;
  }

  .context__quote--wider {
    width: 88.6364vw;
    flex: 0 1 88.6364vw;
  }

  .context__quote-text {
    font-size: 6.3636vw;
  }

  .context__quote-text--stretch {
    width: calc(100% + 1.5909vw);
    max-width: none;
  }

  .context__quote-text--stretch-wide {
    width: calc(100% + 6.8182vw);
    max-width: none;
  }

  .context__stamp {
    width: 86.2727vw;
    padding: 4.5455vw 0;
    margin: -3.8636vw 0 0;
  }

  .context__stamp-text {
    font-size: 6.3636vw;
  }
}