/**
 * @file
 * Collapsible component with optional aside styles.
 */

.collapsible {
  display: grid;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.collapsible+.collapsible {
  margin-top: var(--spacing-4xl);
}

.collapsible__title {
  font-size: var(--font-size-h2-responsive);
  margin-bottom: 0;
}

.collapsible__introduction p:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 60em) {
  .collapsible--with-sidebar {
    grid-template-columns: 2fr 3fr;
  }
}

.collapsible--sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* 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: none;
}

.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);
}