/**
 * @file
 * Blockquote component styles.
 *
 * Colours use the theme tokens defined in css/style.css:
 * --teal (#094a57), --gold (#fbaf1a), --offwhite (#f7f6f2).
 */

.blockquote-component {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 2rem;
  border-radius: 0.25rem;
}

/* Decorative quote mark, referenced from the theme's images directory. Sits to
   the left of the copy. The gold fill is baked into the asset, so it reads
   correctly in both variants. */
.blockquote-component__mark {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
}

.blockquote-component__body {
  flex: 1 1 auto;
  min-width: 0;
}

.blockquote-component__quote {
  margin: 0;
  font-family: var(--primary-family);
  font-weight: 300;
  font-size: 1.75rem; /* 28px */
  line-height: 2.125rem; /* 34px */
}

/* Rich-text quotes may render a wrapping <p>; drop its trailing margin. */
.blockquote-component__quote > :last-child {
  margin-bottom: 0;
}

.blockquote-component__cite {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 1.5rem;
  font-style: normal;
}

.blockquote-component__link {
  text-decoration: none;
}

/* .blockquote-component__name {
  font-weight: var(--font-bold);
} */

.blockquote-component__role {
  font-size: 1rem;
  font-weight: var(--font-medium);
}

.blockquote-component--dark {
  color: var(--black);
}

.blockquote-component--dark .blockquote-component__name,
.blockquote-component--dark .blockquote-component__link {
  color: var(--black);
}

.blockquote-component--dark .blockquote-component__mark {
  background-image: url("/themes/custom/forourlives/images/icons/Dark-Quotes.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
}

/* .blockquote-component--dark .blockquote-component__name,
.blockquote-component--dark .blockquote-component__link {
  color: var(--gold);
} */

.blockquote-component--light {
  color: var(--offwhite);
}

.blockquote-component--light.blockquote-component--bg {
  background-color: var(--teal);
  border-radius: 0 0 5px 5px;
  border-top: 3px solid var(--gold);
}

.blockquote-component--light .blockquote-component__name,
.blockquote-component--light .blockquote-component__link {
  color: var(--gold);
}

/* Centred alignment — centres the copy within the body column. */
.blockquote-component--center .blockquote-component__body {
  text-align: center;
}

.blockquote-component--center .blockquote-component__cite {
  align-items: center;
}

.blockquote-component--light .blockquote-component__mark {
  background-image: url("/themes/custom/forourlives/images/icons/Light-Quotes.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
}