/* ============================================================
   Creyos — What Healthcare Leaders Tell Us (tabbed section)
   Layout & interactivity only.
   Typography/colors inherit from global stylesheet via CSS vars.

   Shares variable names with the Care Setting Grid module so
   designer can set them once globally and both modules respond.
   ============================================================ */

.creyos-leaders {
  /* Brand tokens — overridable from global stylesheet */
  --creyos-teal: var(--creyos-color-teal, #179cb1);
  --creyos-dark: var(--creyos-color-dark, #3a4661);
  --creyos-text: var(--creyos-color-text, #4a5568);
  --creyos-muted-bg: var(--creyos-color-muted-bg, #ffffff);
  --creyos-border: var(--creyos-color-border, #e2e8f0);

  /* Eyebrow tokens — shared with Care Setting Grid */
  --creyos-eyebrow-color: var(--creyos-text);
  --creyos-eyebrow-font-size: 12px;
  --creyos-eyebrow-font-weight: 600;
  --creyos-eyebrow-letter-spacing: none;
  --creyos-eyebrow-text-transform: uppercase;

  /* Section heading tokens — shared with Care Setting Grid */
  --creyos-heading-color: var(--creyos-dark);
  --creyos-heading-font-size: clamp(28px, 4vw, 40px);
  --creyos-heading-font-weight: 400;
  --creyos-heading-line-height: 1.2;
  --creyos-heading-letter-spacing: normal;

  /* CTA tokens — shared with Care Setting Grid */
  --creyos-cta-color: var(--creyos-teal);
  --creyos-cta-font-size: 18px;
  --creyos-cta-font-weight: 700;
  --creyos-cta-text-decoration: underline;
  --creyos-cta-text-underline-offset: 4px;
  --creyos-cta-letter-spacing: normal;
  --creyos-cta-text-transform: none;
  --creyos-cta-color-hover: var(--creyos-dark);

  /* Tab nav tokens */
  --creyos-tab-color: var(--creyos-dark);
  --creyos-tab-color-active: #ffffff;
  --creyos-tab-bg-active: var(--creyos-teal);
  --creyos-tab-bg-hover: rgba(0, 0, 0, 0.04);
  --creyos-tab-font-size: 18px;
  --creyos-tab-font-weight: 500;
  --creyos-tab-letter-spacing: normal;
  --creyos-tab-text-transform: none;
  --creyos-tab-padding-y: 10px;
  --creyos-tab-padding-x: 20px;
  --creyos-tab-container-border: 1px solid var(--creyos-border);

  /* Panel layout tokens */
  --creyos-panel-columns: 1fr 1.4fr;
  --creyos-panel-gap: 48px;
  --creyos-media-aspect-ratio: 4 / 3;
  --creyos-panel-transition: 350ms ease;

  /* Header layout tokens */
  --creyos-header-margin-bottom: 32px;
  --creyos-eyebrow-margin-bottom: 12px;
  --creyos-tabs-margin-bottom: 56px;

  padding: 64px 24px;
  font-family: inherit;
  color: var(--creyos-text);
  background: var(--creyos-section-bg, transparent);
}

.creyos-leaders__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.creyos-leaders__header {
  text-align: center;
  margin: 0 0 var(--creyos-header-margin-bottom);
}

.creyos-leaders__eyebrow {
  color: var(--creyos-eyebrow-color);
  font-size: var(--creyos-eyebrow-font-size);
  font-weight: var(--creyos-eyebrow-font-weight);
  letter-spacing: var(--creyos-eyebrow-letter-spacing);
  text-transform: var(--creyos-eyebrow-text-transform);
  margin: 0 0 var(--creyos-eyebrow-margin-bottom);
}

/* Reset paragraph margins from rich text — but DON'T force style inheritance,
   so designer can override color/font/etc. via the rich text editor */
.creyos-leaders__eyebrow > * {
  margin: 0;
}

.creyos-leaders__heading {
  color: var(--creyos-heading-color);
  font-size: var(--creyos-heading-font-size);
  font-weight: var(--creyos-heading-font-weight);
  line-height: var(--creyos-heading-line-height);
  letter-spacing: var(--creyos-heading-letter-spacing);
  margin: 0;
}

.creyos-leaders__heading > * {
  margin: 0;
}

/* ---------- Tab navigation ---------- */
.creyos-leaders__tabs-row {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--creyos-tabs-margin-bottom);
}

.creyos-leaders__tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: var(--creyos-tab-container-border);
  border-radius: 999px;
  background: #ffffff;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.creyos-leaders__tabs::-webkit-scrollbar {
  display: none;
}

.creyos-leaders__tab {
  /* Aggressive reset to defeat global button styles bleeding in.
     !important is used here surgically — the host site's button class has
     high specificity that our module CSS can't otherwise override. */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  outline: none !important;
  margin: 0 !important;
  text-decoration: none !important;
  filter: none !important;

  /* Module styles */
  flex: 0 0 auto;
  color: var(--creyos-tab-color);
  padding: var(--creyos-tab-padding-y) var(--creyos-tab-padding-x);
  font-size: var(--creyos-tab-font-size);
  font-weight: var(--creyos-tab-font-weight);
  font-family: inherit;
  line-height: 1.4;
  letter-spacing: var(--creyos-tab-letter-spacing);
  text-transform: var(--creyos-tab-text-transform);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease;
  position: relative;
}

/* Nuke any pseudo-elements added by the global stylesheet — these are
   what create the bouncing outline / highlight shape on hover and click. */
.creyos-leaders__tab::before,
.creyos-leaders__tab::after,
.creyos-leaders__tab:hover::before,
.creyos-leaders__tab:hover::after,
.creyos-leaders__tab:focus::before,
.creyos-leaders__tab:focus::after,
.creyos-leaders__tab:active::before,
.creyos-leaders__tab:active::after,
.creyos-leaders__tab.is-active::before,
.creyos-leaders__tab.is-active::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0 !important;
}

/* Defeat global button hover/active/focus transforms, shadows, borders */
.creyos-leaders__tab:hover,
.creyos-leaders__tab:active,
.creyos-leaders__tab:focus {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  text-decoration: none !important;
  outline: none !important;
  filter: none !important;
}

.creyos-leaders__tab:hover:not(.is-active) {
  background: var(--creyos-tab-bg-hover) !important;
  color: var(--creyos-tab-color);
}

.creyos-leaders__tab:focus-visible {
  outline: 2px solid var(--creyos-teal) !important;
  outline-offset: 2px;
}

.creyos-leaders__tab.is-active,
.creyos-leaders__tab.is-active:hover,
.creyos-leaders__tab.is-active:focus,
.creyos-leaders__tab.is-active:active {
  background: var(--creyos-tab-bg-active) !important;
  color: var(--creyos-tab-color-active) !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---------- Panels ---------- */
.creyos-leaders__panels {
  position: relative;
}

.creyos-leaders__panel {
  opacity: 0;
  transition: opacity var(--creyos-panel-transition);
}

.creyos-leaders__panel.is-active {
  opacity: 1;
}

.creyos-leaders__panel[hidden] {
  display: none;
}

/* ---------- Panel content layout ---------- */
.creyos-leaders__content {
  display: grid;
  grid-template-columns: var(--creyos-panel-columns);
  gap: var(--creyos-panel-gap);
  align-items: start;
}

.creyos-leaders__text {
  display: flex;
  flex-direction: column;
}

.creyos-leaders__body {
  margin: 0 0 24px;
}

.creyos-leaders__body > *:last-child {
  margin-bottom: 0;
}

/* ---------- Media (Lottie) ---------- */
.creyos-leaders__media {
  width: 100%;
  aspect-ratio: var(--creyos-media-aspect-ratio);
  background: var(--creyos-muted-bg);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.creyos-leaders__media lottie-player {
  width: 100%;
  height: 100%;
  display: block;
}

.creyos-leaders__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ---------- CTA ---------- */
.creyos-leaders__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--creyos-cta-color);
  font-size: var(--creyos-cta-font-size);
  font-weight: var(--creyos-cta-font-weight);
  text-decoration: var(--creyos-cta-text-decoration);
  text-underline-offset: var(--creyos-cta-text-underline-offset);
  letter-spacing: var(--creyos-cta-letter-spacing);
  text-transform: var(--creyos-cta-text-transform);
  align-self: flex-start;
  line-height: 1.4;
}

.creyos-leaders__cta:hover,
.creyos-leaders__cta:focus-visible {
  color: var(--creyos-cta-color-hover);
  font-weight: var(--creyos-cta-font-weight);
}

.creyos-leaders__cta-arrow {
  display: inline-flex;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.creyos-leaders__cta:hover .creyos-leaders__cta-arrow,
.creyos-leaders__cta:focus-visible .creyos-leaders__cta-arrow {
  transform: translateX(5px); !important;
}

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .creyos-leaders__panel,
  .creyos-leaders__tab,
  .creyos-leaders__cta-arrow {
    transition: none;
  }
  .creyos-leaders__cta:hover .creyos-leaders__cta-arrow,
  .creyos-leaders__cta:focus-visible .creyos-leaders__cta-arrow {
    transform: none;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .creyos-leaders {
    --creyos-panel-columns: 1fr;
    --creyos-panel-gap: 32px;
  }
  .creyos-leaders__media {
    max-width: 540px;
    margin: 0 auto;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .creyos-leaders {
    padding: 48px 16px;
    --creyos-tabs-margin-bottom: 36px;
  }

  .creyos-leaders__tabs-row {
  overflow-x: auto;
  margin: 0 0 var(--creyos-tabs-margin-bottom);
  padding: 0 16px;
  justify-content: flex-start;
  scrollbar-width: none;
}

.creyos-leaders__tabs-row::-webkit-scrollbar {
  display: none;
}

.creyos-leaders__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: visible;
  border-radius: 999px;
  padding: 6px;
  width: max-content;
  max-width: none;
}

  .creyos-leaders__tab {
    padding: 8px 14px !important;
    font-size: 13px;
  }
}
/* ---------- Mobile: swipeable panels (additive, isolated) ---------- */
@media (max-width: 640px) {
  .creyos-leaders__panels {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
  }

  .creyos-leaders__panels::-webkit-scrollbar {
    display: none;
  }

  .creyos-leaders__panel[hidden] {
    display: block !important;
  }

  .creyos-leaders__panel {
    flex: 0 0 100%;
    scroll-snap-align: start;
    opacity: 1 !important;
  }

  .creyos-leaders__content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}