/* DE CTA Panel (blog). Panel: heading and blurb left, buttons right; stacked below 768px. Inline: one left-aligned button. */
[data-de26].de26-blog-cta--panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--de26-gap-3x) var(--de26-gap-5x);
  padding: var(--de26-gap-5x);
  border-radius: var(--de26-radius-card);
}
[data-de26].de26-blog-cta--sky { background: var(--de26-sky); }
[data-de26].de26-blog-cta--space { background: var(--de26-space); }

[data-de26] .de26-blog-cta__text {
  flex: 1 1 320px;
  min-width: 0;
}
[data-de26] .de26-blog-cta__text .de26-blog__heading { margin-bottom: var(--de26-gap-1x); }
[data-de26] .de26-blog-cta__text > :last-child { margin-bottom: 0; }
[data-de26] .de26-blog-cta__buttons {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--de26-gap-2x);
  min-width: 0;
  max-width: 100%;
}
[data-de26] .de26-blog-cta__buttons .de26-button { white-space: normal; }

/* Links in the blurb take the tone's link color. */
[data-de26].de26-blog-cta--sky .de26-blog__rich a,
[data-de26].de26-blog-cta--sky .de26-blog__rich a:hover,
[data-de26].de26-blog-cta--sky .de26-blog__rich a:focus-visible {
  color: var(--de26-space);
}
[data-de26].de26-blog-cta--space .de26-blog__heading,
[data-de26].de26-blog-cta--space .de26-blog__rich,
[data-de26].de26-blog-cta--space .de26-blog__rich :is(p, ul, ol, li) {
  color: var(--de26-white);
}
[data-de26].de26-blog-cta--space .de26-blog__rich a,
[data-de26].de26-blog-cta--space .de26-blog__rich a:hover,
[data-de26].de26-blog-cta--space .de26-blog__rich a:focus-visible {
  color: var(--de26-white);
}

/* Space panel: the shared focus ring is Space, so it would vanish here. */
[data-de26].de26-blog-cta--space :is(a):focus-visible {
  outline-color: var(--de26-white);
  box-shadow: none;
}

/* Space panel: Outline button is a white ring with white text. The hover overlay is a light veil on Space,
   so white text keeps its contrast on hover and focus (the shared overlay would be Sky Light). */
[data-de26].de26-blog-cta--space .de26-button--outline,
[data-de26].de26-blog-cta--space .de26-button--outline:hover,
[data-de26].de26-blog-cta--space .de26-button--outline:focus {
  color: var(--de26-white);
  background: transparent;
}
[data-de26].de26-blog-cta--space .de26-button--outline::before {
  background: color-mix(in srgb, var(--de26-white) 16%, transparent);
}
[data-de26].de26-blog-cta--space .de26-button--outline::after {
  box-shadow: inset 0 0 0 2px var(--de26-white);
}
[data-de26].de26-blog-cta--space .de26-button--outline .de26-button__caret {
  filter: brightness(0) invert(1);
}

/* Inline: the button sits at the start of the reading measure. */
[data-de26].de26-blog-cta--inline {
  display: flex;
  justify-content: flex-start;
}

@media (max-width: 767px) {
  [data-de26].de26-blog-cta--panel {
    flex-direction: column;
    align-items: stretch;
    padding: var(--de26-gap-3x);
  }
  [data-de26] .de26-blog-cta__text { flex: 0 1 auto; }
  [data-de26] .de26-blog-cta__buttons {
    flex-direction: column;
    align-items: flex-start;
  }
}