/**
 * @file
 * Call to action (CTA) component styles.
 */

/* Call to action (CTA) might be placed inside Tiles. */
.call-to-action,
.tiles__tiles .call-to-action {
  padding: var(--spacing-2xl) var(--spacing-xl);
  background: var(--call-to-action-background);
  border-radius: var(--border-radius-base);
  box-shadow: var(--shadow-md);
  color: var(--color-white);
  display: flex;
  gap: var(--spacing-lg);
  align-items: start;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
}

@media screen and (min-width: 60em) {
  .call-to-action {
    padding: var(--spacing-xl);
    gap: var(--spacing-xl);
  }
}

.call-to-action__content p:last-child {
  margin-bottom: 0;
}

.call-to-action__title {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-xl);
}

.call-to-action {
  transition: outline-color 0.3s ease;
  outline: 4px solid transparent;
  box-sizing: border-box;
  padding: var(--spacing-lg);
  border-radius: 5px;
  cursor: pointer;
}

.call-to-action:hover {
  animation: pastel-glow-anticlockwise 2s linear infinite;
  outline: 4px solid;
  background-color: var(--call-to-action-hover-background);
}

@keyframes pastel-glow-anticlockwise {
  0% {
    outline-color: rgba(var(--rgb-glow-pink), 1);
    box-shadow: 0 0 20px 5px rgba(var(--rgb-glow-pink), 1);
  }

  25% {
    outline-color: rgba(var(--rgb-glow-blue), 1);
    box-shadow: 0 0 20px 5px rgba(var(--rgb-glow-blue), 1);
  }

  50% {
    outline-color: rgba(var(--rgb-glow-yellow), 1);
    box-shadow: 0 0 20px 5px rgba(var(--rgb-glow-yellow), 1);
  }

  75% {
    outline-color: rgba(var(--rgb-glow-green), 1);
    box-shadow: 0 0 20px 5px rgba(var(--rgb-glow-green), 1);
  }

  100% {
    outline-color: rgba(var(--rgb-glow-pink), 1);
    box-shadow: 0 0 20px 5px rgba(var(--rgb-glow-pink), 1);
  }
}

.call-to-action a {
  display: inline-block;
  padding: var(--spacing-2xs) var(--spacing-lg);
  background-color: var(--call-to-action-link-background);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 5px;
  margin-top: var(--spacing-2xs);
}

/* Call to action (CTA) link */
.call-to-action-link a {
  display: inline-block;
  background: var(--button-primary-background);
  color: var(--button-primary-color);
  border-radius: var(--button-border-radius);
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: center;
}

.call-to-action-link a:where(:hover, :focus) {
  background: var(--button-primary-background-hover);
  color: var(--button-primary-color-hover);
  text-decoration: underline;
}

.call-to-action-link--alternative a {
  background: var(--button-secondary-background);
  color: var(--button-secondary-color);
  border: 2px solid var(--button-secondary-background);
}

.call-to-action-link--alternative a:where(:hover, :focus) {
  background: var(--button-secondary-background-hover);
  color: var(--button-secondary-color-hover);
}