/**
 * @file
 * Callout styles.
 */

.callout {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
}

/* For patternlab demo purposes only. */

.pl-demo .callout {
  padding-block: var(--size-15);
}

/* Horizontal layout */

@media (min-width: 1024px) {
  .callout.is-horizontal {
    flex-direction: row-reverse;
  }

  .callout.is-horizontal .callout__image {
    flex-shrink: 0;
    width: 50%;
  }
}

@media (--laptop) {
  .callout.is-horizontal {
    flex-direction: row-reverse;
  }

  .callout.is-horizontal .callout__image {
    flex-shrink: 0;
    width: 50%;
  }
}

.callout.is-horizontal .callout__text {
  width: 100%;
}

@media (min-width: 1024px) {
  .callout.is-horizontal .callout__text {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
  }
}

@media (--laptop) {
  .callout.is-horizontal .callout__text {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
  }
}

.callout.is-horizontal .callout__wrapper {
  max-width: 65ch;
}

/* Horizontal in reversed order */

@media (min-width: 1024px) {
  .callout.is-reversed {
    flex-direction: row;
  }
}

@media (--laptop) {
  .callout.is-reversed {
    flex-direction: row;
  }
}

/* Quote version */

@media (min-width: 1024px) {
  .callout.is-quote .callout__text {
    -webkit-margin-before: calc(var(--size-20) * -1);
    margin-block-start: calc(var(--size-20) * -1);
    margin-inline: auto;
    width: 90%;
  }
}

@media (--laptop) {
  .callout.is-quote .callout__text {
    -webkit-margin-before: calc(var(--size-20) * -1);
    margin-block-start: calc(var(--size-20) * -1);
    margin-inline: auto;
    width: 90%;
  }
}

.callout.is-quote .callout__wrapper {
  background-color: var(--white);
  position: relative;
  z-index: var(--layer-1);
}

/* Quote horizontal. */

.callout.is-quote.is-horizontal .callout__text {
  -webkit-margin-before: 0;
  margin-block-start: 0;
  width: 100%;
}

@media (min-width: 1024px) {
  .callout.is-quote.is-horizontal {
    display: flex;
    flex-direction: row-reverse;
    position: relative;
  }

  .callout.is-quote.is-horizontal .callout__image {
    flex-shrink: 0;
    width: 50%;
  }

  .callout.is-quote.is-horizontal .callout__text {
    -webkit-margin-before: 0;
    margin-block-start: 0;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
  }

  .callout.is-quote.is-horizontal .callout__wrapper {
    background-color: var(--white);
    -webkit-margin-end: calc(40% * -1);
    margin-inline-end: calc(40% * -1);
    max-width: 65ch;
    z-index: var(--layer-1);
  }
}

@media (--laptop) {
  .callout.is-quote.is-horizontal {
    display: flex;
    flex-direction: row-reverse;
    position: relative;
  }

  .callout.is-quote.is-horizontal .callout__image {
    flex-shrink: 0;
    width: 50%;
  }

  .callout.is-quote.is-horizontal .callout__text {
    -webkit-margin-before: 0;
    margin-block-start: 0;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
  }

  .callout.is-quote.is-horizontal .callout__wrapper {
    background-color: var(--white);
    -webkit-margin-end: calc(40% * -1);
    margin-inline-end: calc(40% * -1);
    max-width: 65ch;
    z-index: var(--layer-1);
  }
}

/* Quote horizontal reversed */

@media (min-width: 1024px) {
  .callout.is-quote.is-horizontal.is-reversed {
    flex-direction: row;
  }
}

@media (--laptop) {
  .callout.is-quote.is-horizontal.is-reversed {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .callout.is-quote.is-horizontal.is-reversed .callout__wrapper {
    -webkit-margin-end: 0;
    margin-inline-end: 0;
    -webkit-margin-start: calc(40% * -1);
    margin-inline-start: calc(40% * -1);
  }
}

@media (--laptop) {
  .callout.is-quote.is-horizontal.is-reversed .callout__wrapper {
    -webkit-margin-end: 0;
    margin-inline-end: 0;
    -webkit-margin-start: calc(40% * -1);
    margin-inline-start: calc(40% * -1);
  }
}

/* If one-column has background-color `.bg-venice-canal` or `bg-santa-barbara-sand`,
  change button color to be the same as button--secondary. */

.bg-venice-canal.layout--onecol .callout .button,
.bg-santa-barbara-sand.layout--onecol .callout .button {
  background-color: var(--ucla-yellow);
  border-color: var(--ucla-yellow);
  color: var(--midnight-joshua-tree);
}

@media (min-width: 1024px) {
  .callout__wrapper {
    padding-block: var(--size-6);
    padding-inline: var(--size-8);
  }
}

@media (--laptop) {
  .callout__wrapper {
    padding-block: var(--size-6);
    padding-inline: var(--size-8);
  }
}

.callout__title {
  color: var(--gray-900);
  font-family: var(--font-heading);
  font-size: var(--font-size-6);
  font-weight: var(--font-weight-400);
  -webkit-margin-after: var(--size-2);
  margin-block-end: var(--size-2);
}

@media (min-width: 1024px) {
  .callout__title {
    font-size: var(--font-size-8);
  }
}

@media (--laptop) {
  .callout__title {
    font-size: var(--font-size-8);
  }
}

/* If one-column layout has background color `bg-venice-canal`,
  change title text color to white. */

.bg-venice-canal.layout--onecol .callout__title {
  color: var(--white);
}

.callout__teaser {
  font-size: var(--font-size-2);
  -webkit-margin-after: var(--size-4);
  margin-block-end: var(--size-4);
}

@media (min-width: 1024px) {
  .callout__teaser {
    font-size: var(--font-size-3);
  }
}

@media (--laptop) {
  .callout__teaser {
    font-size: var(--font-size-3);
  }
}

/* If one-column layout has background color `bg-venice-canal`,
  change text color to white. */

.bg-venice-canal.layout--onecol .callout__teaser {
  color: var(--white);
}