/* Typography comes from the block's typography settings (the `title*` / `body*`
   classes). No font-family / font-weight here except the quote's size, which is
   its own setting: such selectors would tie with the typography classes on
   specificity and win on source order, making the settings inert. */

.quote-card {
  background-color: rgb(var(--color-background));
}

.quote-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--quote-card-gap, 24px);
}

.quote-card__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--quote-card-max-width, 720px);
  margin: 0;
  background-color: var(--quote-card-background, #e8e8e8);
  border-radius: var(--quote-card-radius, 0);
}

.quote-card__mark {
  display: block;
  width: 100%;
  /* the body face renders this glyph closer to the design than the title serif */
  font-family: var(--sort-body-font);
  font-size: var(--quote-mark-size, 64px);
  font-weight: 700;
  /* the glyph carries a lot of leading of its own; this pulls the quote up under it */
  line-height: 0.8;
  color: var(--quote-mark-color, #b5b5b5);
}

/* uploaded mark: the image component may emit either an <img> or an inline <svg>.
   inline-block keeps it in the text flow so the block's alignment setting still
   positions it. */
.quote-card__mark--image {
  font-size: 0;
  line-height: 1;
}

.quote-card__mark--image img,
.quote-card__mark--image svg {
  display: inline-block;
  width: var(--quote-mark-size, 64px);
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.quote-card__quote {
  width: 100%;
  margin: 28px 0 0;
  /* the theme has no serif scale at this size, so it is its own setting */
  font-size: var(--quote-font-size, 28px);
  line-height: 1.45;
  color: rgb(var(--color-text));
}

.quote-card__author {
  display: block;
  width: 100%;
  margin-block-start: 28px;
  font-style: normal;
  letter-spacing: var(--quote-author-letter-spacing, 1px);
  text-transform: uppercase;
  color: rgb(var(--color-text));
}

.quote-card__meta {
  display: block;
  width: 100%;
  margin-block-start: 4px;
  color: rgb(var(--color-light-text));
}

/* ---- responsive ---- */
@media (max-width: 959px) {
  .quote-card__card {
    max-width: 100%;
  }

  .quote-card__quote {
    margin-block-start: 20px;
  }

  .quote-card__author {
    margin-block-start: 22px;
  }
}