/**
 * @file
 * Pull quote
 *
 */

.pull-quote {
  --band-space-block-start: 24px;
  --band-space-block-end: 5px;
  overflow-x: clip;
  overflow-y: visible;
}

.pull-quote__figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 0;
}

.pull-quote__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.pull-quote__piping-row {
  display: flex;
  align-items: center;
  gap: 24px;
  max-height:75px;
}

.pull-quote__piping {
  flex: none;
  width: 29px;
  height: 106px;
  background: url("../../images/decorative/neon-piping-vertical.png") center / cover no-repeat;
  transform: rotate(90deg);
}

.pull-quote__mark {
  flex: none;
  width: 84px;
  height: 75px;
  background: url("../../images/decorative/neon-quotes.png") center / contain no-repeat;
  transform: scaleX(-1);
}

.pull-quote__mark--desktop {
  display: none;
}

.pull-quote__text {
  margin: 0;
  width: 100%;
  font-family: var(--font-tilt-neon);
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  color: var(--color-dark-coral);
  text-align: center;
  font-style: normal;
  border-left: 0;
  padding: 0;
  font-family: var(--font-tilt-neon);
}

.pull-quote__attribution {
  width: 100%;
  margin: 0;
  font-family: var(--font-agenda);
  font-size: var(--size-body);
  font-weight: 400;
  line-height: normal;
  color: var(--color-charcol);
  text-align: center;
}

.pull-quote__portrait {
  position: relative;
  flex: none;
  width: 325px;
  height: 331px;
  margin-bottom: 19px;
}

.pull-quote__portrait-art {
  position: absolute;
  left: 50%;
  top: -158px;
  width: 622px;
  height: 622px;
  transform: translateX(calc(-50% + 2px)) rotate(-150.65deg) scaleY(-1);
  background: url("../../images/decorative/circles-dtc.png") center / 457px 457px no-repeat;
  pointer-events: none;
}

.pull-quote__portrait-photo {
  position: absolute;
  left: 31px;
  top: 70px;
  width: 231px;
  height: 205px;
  overflow: hidden;
  border-radius: 50%;
}

.pull-quote__portrait-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pull-quote__caption {
  position: absolute;
  top: 100%;
  margin: 0;
  font-family: var(--font-agenda);
  font-size: var(--size-footnote);
  font-weight: 400;
  line-height: normal;
  color: var(--color-steel);
  text-align: center;
  width: 100%;
}

@media (min-width: 768px) {
  .pull-quote {
    --band-space-block-start: 80px;
    --band-space-block-end: 80px;
  }

  .pull-quote__figure {
    display: block;
  }

  .pull-quote__body {
    align-items: flex-start;
  }

  .pull-quote__piping-row {
    display: none;
  }

  .pull-quote__text,
  .pull-quote__attribution {
    text-align: left;
  }

  .pull-quote__text {
    max-width: 71%;
  }

  .pull-quote__mark--desktop {
    display: block;
    position: absolute;
    left: -70px;
    top: -26px;
  }

  .pull-quote__portrait {
    position: absolute;
    top: -157px;
    right: -4px;
    width: 311px;
    height: 337px;
    margin-bottom: 0;
  }

  .pull-quote__portrait-art {
    top: -151px;
    width: 595px;
    height: 595px;
    background-size: 437px 437px;
  }

  .pull-quote__portrait-photo {
    left: 32px;
    top: 72px;
    width: 219px;
    height: 191px;
  }

  .pull-quote__caption {
    top: unset;
    bottom:0;
  }
}

@media (min-width: 768px) and (max-width: 1260px) {
  .pull-quote__text {
    max-width: 55%;
  }
  .pull-quote {
    padding-inline: 60px;
  }
}