/* -----------------------------------------------------------------------------------------------------------------
Highlight Text on Hero Headline using gradient colour
----------------------------------------------------------------------------------------------------------------- */
.insight-hero-title mark {
  background: var(--ke-metric-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding: 0;
  overflow: visible;
}

/* -----------------------------------------------------------------------------------------------------------------
Change button / link text colour different from the one set on global styles
----------------------------------------------------------------------------------------------------------------- */
.ai-btn:hover,
.service-bridge-btn,
.sidebar-link-cta:hover, 
.author-link-cta:hover {
    color: var(--ke-green) !important;
}

.sidebar-link-cta {
    color: var(--ke-ink-5) !important;
}

.author-link-cta {
    color: var(--ke-ink-4) !important;
}


/* -----------------------------------------------------------------------------------------------------------------
Author Bio Custom Accordion
----------------------------------------------------------------------------------------------------------------- */
.author-card .js-author-bio-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.author-card .js-author-bio-toggle::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 6px;
  background: currentColor;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform-origin: center;
  transition: transform 0.15s ease;
}

/* Open state = arrow points up */
.author-card .js-author-bio-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.author-card .js-author-bio-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  margin-top: 0;
  transition:
    max-height 0.28s ease,
    opacity 0.2s ease,
    margin-top 0.28s ease,
    visibility 0s linear 0.28s;
}

.author-card.is-open .js-author-bio-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  margin-top: 18px;
  transition:
    max-height 0.28s ease,
    opacity 0.2s ease,
    margin-top 0.28s ease,
    visibility 0s linear 0s;
}

/* Tablet */
@media (max-width: 1024px) {
  .author-card .js-author-bio-toggle {
    gap: 6px;
  }

  .author-card .js-author-bio-toggle::after {
    width: 8px;
    height: 6px;
  }

  .author-card.is-open .js-author-bio-panel {
    margin-top: 16px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .author-card .js-author-bio-toggle {
    gap: 5px;
  }

  .author-card .js-author-bio-toggle::after {
    width: 7px;
    height: 5px;
  }

  .author-card.is-open .js-author-bio-panel {
    margin-top: 14px;
  }
}